Відмінності між версіями «4 Посилання та прив’язки»

Матеріал з Wiki TNEU
Перейти до: навігація, пошук
(Створена сторінка: Посилання є частиною Web-сайту (створеного зазвичай за допомогою HTML, але не завжди), які в...)
 
Рядок 29: Рядок 29:
  
 
[[Прив'язка CSS до HTML-коду]]
 
[[Прив'язка CSS до HTML-коду]]
  Існує кілька способів прив'язки CSS в документі HTML. Найбільш кращим є спосіб прикріплення каскадних списків стилів окремим файлом з розширенням. Css. Так-же властивості можна прописувати всередині документа у вигляді класів і застосовувати класи стилів до елементів сторінки, або прописувати css-властивості для елементів сторінки всередині тегів за допомогою властивості style = "". Далі розглянемо кожен з цих способів.
+
Існує кілька способів прив'язки CSS в документі HTML. Найбільш кращим є спосіб прикріплення каскадних списків стилів окремим файлом з розширенням. Css. Так-же властивості можна прописувати всередині документа у вигляді класів і застосовувати класи стилів до елементів сторінки, або прописувати css-властивості для елементів сторінки всередині тегів за допомогою властивості style = "". Далі розглянемо кожен з цих способів.
 
Винести опис стилів і класів CSS в файл
 
Винести опис стилів і класів CSS в файл
  
Рядок 67: Рядок 67:
  
 
Перевага цього способу полягає в тому що один файл списку стилів можна прикріпити до наесколькім документам html, і для зміни стилів цих сторінок не доведеться редагувати код кожної сторінки, достатньо буде змінити опис стилів в одному файлі. Css, що дуже зручно при редагуванні сайту з десятками і сотнями сторінок.
 
Перевага цього способу полягає в тому що один файл списку стилів можна прикріпити до наесколькім документам html, і для зміни стилів цих сторінок не доведеться редагувати код кожної сторінки, достатньо буде змінити опис стилів в одному файлі. Css, що дуже зручно при редагуванні сайту з десятками і сотнями сторінок.
 +
 
Розмістити опис стилів CSS всередині HTML
 
Розмістити опис стилів CSS всередині HTML
  При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді.
+
При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді.
 
Розмістити опис стилів CSS всередині HTML При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді. Приклад: <style type="text/css">. Moj2 {color: # 6633FF;} </ style> <p class="moj2"> текст </ p>
 
Розмістити опис стилів CSS всередині HTML При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді. Приклад: <style type="text/css">. Moj2 {color: # 6633FF;} </ style> <p class="moj2"> текст </ p>

Версія за 15:05, 21 грудня 2011

Посилання є частиною Web-сайту (створеного зазвичай за допомогою HTML, але не завжди), які вказують на інші ресурси – інші документи HTML, текстові файли, файли PDF, і т.д. Існують посилання, по яким браузер має переходити автоматично, створені за допомогою елементів link (ви вже зустрічали деякі з них у попередніх лекціях – вони використовуються для імпорту файлів CSS в документ HTML), та існують також посилання, які користувач не зобов’язаний активувати. Вони називаються анкерами, і їх можна додавати в документ за допомогою елемента a. Анатомія анкерного посилання

Будь-який рядковий елемент у документі можна перетворити на анкерне посилання, додаючи навколо нього елемент a. Наприклад, в наступному документі HTML текст Yahoo Developer Network перетворений на посилання (linkexample.html).01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Link Example</title> <link rel="stylesheet" href="styles.css"> </head> <body>

A link to the YDN

<a href="http://developer.yahoo.com">Yahoo Developer Network</a>

</body> </html>


Анкер має декілька атрибутів, які можна використовувати: href – ресурс, на який вказує анкер (зовнішній файл або ID анкера). id – ID анкера, якщо анкер є метою, а не посиланням. title – додаткова інформація про зовнішній ресурс.

Давайте розглянемо спочатку найбільш важливі атрибути, а потім поговоримо про те, що можна зробити, щоб полегшити відвідувачам сприйняття посилань. Зовнішні й внутрішні посилання

Один з найбільших страхів керівників компаній, коли мова йде про Web-сайти компанії, полягає в тому, що люди покидають сайт передчасно. Це часто є причиною відсутності посилань на сторонні сайти (якщо тільки власники цих сайтів не платять гроші за право отримання направленого ним Web-трафіку). Я повернуся до цього помилкового розв’язування пізніше; поки давайте поговоримо про те, що роблять люди, щоб уникнути відходу відвідувачів зі свого сайту, і як ці заходи впливають на успіх сайту.

<a href="http://htmlbook.at.ua/">Це посилання на htmlbook.at.ua</a>


Прив'язка CSS до HTML-коду Існує кілька способів прив'язки CSS в документі HTML. Найбільш кращим є спосіб прикріплення каскадних списків стилів окремим файлом з розширенням. Css. Так-же властивості можна прописувати всередині документа у вигляді класів і застосовувати класи стилів до елементів сторінки, або прописувати css-властивості для елементів сторінки всередині тегів за допомогою властивості style = "". Далі розглянемо кожен з цих способів. Винести опис стилів і класів CSS в файл

 В html таблиця стилів css прив'язується в
 теге <head> у вигляді:

<head> <link href="" type="text/css" rel="stylesheet"> </head>

href = ""-шлях до таблиці стилів css, указ-ся URL або просто ім'я CSS док-та, якщо він нах-ся в тому-ж каталозі, що і html док-т. type = "text / css"-тип завжди text / css rel = "stylesheet"-даний атрибут вкаже, що цей файл явл-ся таблицею стилів для html.

Запишемо в блокноті код: <head> <link href="stil.css" type="text/css" rel="stylesheet"> </head> <body> <a href="http:// брелок./">голвна сторінка</a> <a class="moj"href="http:// брелок /skript.html">готові скріпти і інструкції</a> </body> і збережемо його з ім'ям index.html

Створимо в блокноті новий документ, запишемо код: a: link {color: green; / * змінюємо колір всіх невідвіданих посилань на сторінці, докладніше "ефекти посилань на css брелок" * /}

a.moj {color: red / * створюємо новий клас для посилань * /}

Збережемо його в ту-ж дерікторію де лежить записаний вище index.html з ім'ям stil.css.

Ми прикріпили файл списку стилів stil.css до документа index.html, вміст index.html буде виглядати як посилання нижче головна сторінка

готові скрипти та інструкції

У цьому прикладі всі посилання на сторінці index.html будуть мати червоний колір, це зазначено у властивості a: link, до заслання "готові скрипти та інструкції" прикріплений клас moj, тому вона зелена.

Перевага цього способу полягає в тому що один файл списку стилів можна прикріпити до наесколькім документам html, і для зміни стилів цих сторінок не доведеться редагувати код кожної сторінки, достатньо буде змінити опис стилів в одному файлі. Css, що дуже зручно при редагуванні сайту з десятками і сотнями сторінок.

Розмістити опис стилів CSS всередині HTML При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді.

Розмістити опис стилів CSS всередині HTML При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді. Приклад: <style type="text/css">. Moj2 {color: # 6633FF;} </ style>

текст </ p>

Особисті інструменти
Простори назв

Варіанти
Дії
Навігація
Інструменти