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

Матеріал з Wiki TNEU
Перейти до: навігація, пошук
м (Захист на 4 Посилання та прив’язки встановлено (‎[edit=sysop] (безстроково) ‎[move=sysop] (безстроково)))
Рядок 1: Рядок 1:
−
[[Посилання]] є частиною 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>
+
''Посилання'' є частиною Web-сайту (створеного зазвичай за допомогою HTML, але не завжди), які вказують на інші ресурси – інші HTML-документи, текстові файли, файли PDF, і т.д. Існують посилання, по яким браузер має переходити автоматично, створені за допомогою елементів link (використовуються для імпорту файлів CSS в документ HTML), та існують також посилання, які користувач не зобов’язаний активувати. Вони називаються анкерами, і їх можна додавати в документ за допомогою елемента '''a'''.
−
<meta http-equiv="content-type" content="text/html; charset=utf-8">
+
Елемент '''a''' позначає "якір/anchor". Атрибут href це скорочення від "hypertext reference/гіпертекстове посилання", вказує місце, на яке виконується перехід по даному посиланню - зазвичай це інтернет-адреса та/або ім'я файлу.
−
<title>Link Example</title>
+
 
−
<link rel="stylesheet" href="styles.css">
+
Будь-який рядковий елемент у документі можна перетворити на анкерне посилання, додаючи навколо нього елемент a. Наприклад, в наступному документі HTML текст Yahoo Developer Network перетворений на посилання ([http://dowkar.net78.net/examples/example1/index.html переглянути ]).
−
</head>
+
 
−
<body>
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
−
  <h4> A link to the YDN </h4>
+
<html>
−
  <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
+
<head>
−
</body>
+
<meta http-equiv="content-type" content="text/html; charset=utf-8">
−
</html>
+
<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>
  
  
Рядок 21: Рядок 26:
 
title – додаткова інформація про зовнішній ресурс.
 
title – додаткова інформація про зовнішній ресурс.
  
−
Давайте розглянемо спочатку найбільш важливі атрибути, а потім поговоримо про те, що можна зробити, щоб полегшити відвідувачам сприйняття посилань.
+
'''Зовнішні й внутрішні посилання'''
−
Зовнішні й внутрішні посилання
+
  
−
Один з найбільших страхів керівників компаній, коли мова йде про Web-сайти компанії, полягає в тому, що люди покидають сайт передчасно. Це часто є причиною відсутності посилань на сторонні сайти (якщо тільки власники цих сайтів не платять гроші за право отримання направленого ним Web-трафіку). Я повернуся до цього помилкового розв’язування пізніше; поки давайте поговоримо про те, що роблять люди, щоб уникнути відходу відвідувачів зі свого сайту, і як ці заходи впливають на успіх сайту.
+
Приклад зовнішнього посилання:
−
<a href="http://htmlbook.at.ua/">Це посилання на htmlbook.at.ua</a>
+
  
 +
<a href="http://uk.wikipedia.org/">uk.wikipedia.org</a>
  
−
[[Прив'язка CSS до HTML-коду]]
+
У прикладі атрибут href має значення "http://uk.wikipedia.org", яке є повною адресою uk.wikipedia.org і називається URL (Uniform Resource Locator/універсальний локатор ресурсу). Зверніть увагу, що "http://" завжди повинно входити до складу URL-ів.
−
Існує кілька способів прив'язки CSS в документі HTML. Найбільш кращим є спосіб прикріплення каскадних списків стилів окремим файлом з розширенням. Css. Так-же властивості можна прописувати всередині документа у вигляді класів і застосовувати класи стилів до елементів сторінки, або прописувати css-властивості для елементів сторінки всередині тегів за допомогою властивості style = "". Далі розглянемо кожен з цих способів.
+
−
Винести опис стилів і класів CSS в файл
+
  
−
  В html таблиця стилів css прив'язується в
+
Якщо ви робите посилання між сторінками на одному web-сайті, то не треба вказувати повну адресу (URL) документа. Наприклад, якщо у вас дві сторінки (назвемо їх page1.htm і page2.htm), збережені в одній папці, ви можете зробити посилання з однієї сторінки на іншу, просто надрукувавши ім'я файлу на посиланні. Тобто посилання з page1.htm на page2.htm буде виглядати так:  
−
  теге <head> у вигляді:
+
−
<head>
+
−
<link href="" type="text/css" rel="stylesheet">
+
−
</head>
+
  
−
href = ""-шлях до таблиці стилів css, указ-ся URL або просто ім'я CSS док-та, якщо він нах-ся в тому-ж каталозі, що і html док-т.
+
<a href="page2.htm">Натисніть для переходу на сторінку 2</a>
−
type = "text / css"-тип завжди text / css
+
 
−
rel = "stylesheet"-даний атрибут вкаже, що цей файл явл-ся таблицею стилів для html.
+
Крім тексту, в якості посилань можна використовувати і малюнки. Зображення в цьому випадку треба помістити між тегами <a> і </a>. Приклад:
 +
 
 +
<html>
 +
  <head>
 +
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 +
  <title>Посиланя</title>
 +
  </head>
 +
  <body>
 +
    <a href="sample.html">
 +
    <img src="images/sample.gif" width="50" height="50" alt="Приклад">
 +
    </a>
 +
  </body>
 +
</html>
 +
 
 +
==Прив'язки==
 +
 
 +
'''Прив'язка CSS до HTML-коду'''
 +
 
 +
Прив'язка CSS до HTML-коду.  Існує кілька способів прив'язки CSS в документі HTML. Найкращим є спосіб прикріплення каскадних списків стилів окремим файлом з розширенням css. Також властивості можна прописувати всередині документа у вигляді класів і застосовувати класи стилів до елементів сторінки, або прописувати css -властивості для елементів сторінки всередині тегів за допомогою властивості style = "".
 +
 
 +
''Розміщення стилів у окремому файлі''
 +
 
 +
В html таблиця стилів css прив'язується в тезі <head> у вигляді:
 +
<head>
 +
  <link href="style.css" type="text/css" rel="stylesheet">
 +
</head>
 +
href = "style.css" - шлях до таблиці стилів 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
 
  
−
Створимо в блокноті новий документ, запишемо код:
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
−
a: link {color: green; / * змінюємо колір всіх невідвіданих посилань на сторінці, докладніше "ефекти посилань на css брелок" * /}
+
<html>
 +
<head>
 +
  <title>Example 2</title>
 +
  <link href="style.css" type="text/css" rel="stylesheet">
 +
</head>
 +
<body>
 +
  <a href=" http://wiki.tneu.edu.ua./">Головна сторінка</a>
 +
  <a class ="my" href="http://wiki.tneu.edu.ua/index.php?title=4_Посилання_та_прив’язки">Посилання та прив’язки</a>
 +
</body>
 +
</html>
  
−
a.moj {color: red / * створюємо новий клас для посилань * /}
+
та збережемо, як index.html.
 +
 
 +
Створимо в блокноті новий документ, запишемо код:
  
−
Збережемо його в ту-ж дерікторію де лежить записаний вище index.html з ім'ям stil.css.
+
a: link {
 +
  color: green;/ * змінюємо колір всіх невідвіданих посилань на сторінці " * /
 +
}
 +
 +
a.my {
 +
  color: red/ * створюємо новий клас для посилань * /
 +
}
  
−
Ми прикріпили файл списку стилів stil.css до документа index.html, вміст index.html буде виглядати як посилання нижче
+
Збережемо його в ту-ж директорію де лежить записаний вище index.html з ім'ям style.css.
−
головна сторінка
+
  
−
готові скрипти та інструкції
+
Ми прикріпили файл списку стилів style.css до документа index.html, вміст index.html. Переглянути [http://dowkar.net78.net/examples/example3/index.html приклад]
  
−
У цьому прикладі всі посилання на сторінці index.html будуть мати червоний колір, це зазначено у властивості a: link, до заслання "готові скрипти та інструкції" прикріплений клас moj, тому вона зелена.
+
Перевага цього способу полягає в тому що один файл списку стилів можна прикріпити до кількох документів html, і для зміни стилів цих сторінок не доведеться редагувати код кожної сторінки, достатньо буде змінити опис стилів в одному файлі сss, що дуже зручно при редагуванні сайту з десятками і сотнями сторінок.
  
−
Перевага цього способу полягає в тому що один файл списку стилів можна прикріпити до наесколькім документам 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>
+
<head>
 +
  <style type="text/css">
 +
  .moj2 {
 +
    color: #6633FF;
 +
  }
 +
  </ style>
 +
</head>

Версія за 10:52, 20 червня 2013

Посилання

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

Будь-який рядковий елемент у документі можна перетворити на анкерне посилання, додаючи навколо нього елемент a. Наприклад, в наступному документі HTML текст Yahoo Developer Network перетворений на посилання (переглянути ). 

<!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 – додаткова інформація про зовнішній ресурс.

Зовнішні й внутрішні посилання

Приклад зовнішнього посилання: 

<a href="http://uk.wikipedia.org/">uk.wikipedia.org</a>

У прикладі атрибут href має значення "http://uk.wikipedia.org", яке є повною адресою uk.wikipedia.org і називається URL (Uniform Resource Locator/універсальний локатор ресурсу). Зверніть увагу, що "http://" завжди повинно входити до складу URL-ів.

Якщо ви робите посилання між сторінками на одному web-сайті, то не треба вказувати повну адресу (URL) документа. Наприклад, якщо у вас дві сторінки (назвемо їх page1.htm і page2.htm), збережені в одній папці, ви можете зробити посилання з однієї сторінки на іншу, просто надрукувавши ім'я файлу на посиланні. Тобто посилання з page1.htm на page2.htm буде виглядати так: 

<a href="page2.htm">Натисніть для переходу на сторінку 2</a>

Крім тексту, в якості посилань можна використовувати і малюнки. Зображення в цьому випадку треба помістити між тегами <a> і </a>. Приклад: 

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Посиланя</title>
 </head>
 <body> 
   <a href="sample.html">
    <img src="images/sample.gif" width="50" height="50" alt="Приклад">
   </a>
 </body> 
</html>

Прив'язки

Прив'язка CSS до HTML-коду

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

Розміщення стилів у окремому файлі

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

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

Запишемо в блокноті код: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Example 2</title>
 <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
 <a href=" http://wiki.tneu.edu.ua./">Головна сторінка</a> 
 <a class ="my" href="http://wiki.tneu.edu.ua/index.php?title=4_Посилання_та_прив’язки">Посилання та прив’язки</a>
</body>
</html>

та збережемо, як index.html.

Створимо в блокноті новий документ, запишемо код: 

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

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

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

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

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

Розміщення стилів CSS всередині HTML

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

<head>
 <style type="text/css">
  .moj2 {
   color: #6633FF;
  }
 </ style>
</head>
Отримано з http://wiki.tneu.edu.ua/index.php?title=4_Посилання_та_прив’язки&oldid=17041
Особисті інструменти
Простори назв

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