Embedded Files
Мова розмітки гіпертексту. Версії html
Мова розмітки гіпертексту. Версії html
HTML (від англ. The Hypertext Markup Language) - це стандартна мова гіпертекстової розмітки веб-документів, яка повсюдно використовується у Всесвітньому павутині.
Мова HTML була розроблена британським вченим Тімом Бернерс-Лі в самому кінці 80-х років минулого століття в період його роботи в стінах ЦЕРНу. Мова HTML замислювалась як максимально проста і легка в освоєнні для обміну науковою і технічною документацією, якою змогли б користуватися люди, які не є фахівцями в області верстки та програмування.
Простота мови досягалася за рахунок застосування невеликої кількості спеціальних елементів (тегів), які дозволяли без особливих зусиль отримати на виході хоч і простий, але красиво оформлений документ.
З плином часу HTML постійно змінювався і розвивався. В результаті в 2014 році Консорціум Всесвітньої павутини (від англ. World Wide Web Consortium, W3C) завершив розробку і рекомендував до використання вже п'яту версію HTML.
Створення веб сторінки
Створення веб сторінки
Щоб створити веб сторінку потрібно відкрити текстовий редактор БЛОКНОТ або notepad++, написати там текст
<html>
<head>
<title> МІЙ ПЕРШИЙ САЙТ </title>
</head>
<body>
Вітаю Вас на моєму сайті.
</body>
</html>
А потім зберегти документ як сторінку html.
Тег <! DOCTYPE html> відноситься до поодиноких тегами. Він пишеться в першому рядку коду і формує порожній елемент розмітки, який повідомляє браузеру про тип поточного документа.
<!--Текст--> коментар
<html> </html> парний тег (тобто треба відкрити і закрити тег). Формує контейнер, який вміщує вміст сторінки.
<head> і </ head> формує елемент розмітки, заголовок документа (від англ. Head). Призначений для зберігання службових тегів з метаданими, які повідомляють браузеру інформацію, необхідну для роботи з даними сторінки.
<title> і <title> тег призначений для заголовка сторінки та відображається браузером у якості підпису вкладки сторінки.
<Body> і </ body> формує елемент розмітки, називають тілом документа (від англ. Body). Тіло документа розташовують відразу ж після заголовка документа. У нього поміщають всю інформацію, яку необхідно вивести на екран, а також теги, що відповідають за форматування цієї інформації.
Категорії елементів розмітки мови HTML 5.
Категорії елементів розмітки мови HTML 5.
v Метадані (metadata content) призначені для повідомлення браузеру службової інформації. Їх ми будемо також називати службовими елементами.
v Потокові елементи (flow content) - це все елементи, які містяться в тілі документа і в основному призначені для обробки і форматування інформації, виведеної на екран користувача.
v Секційні елементи (sectioning content) представлені чотирма елементами розмітки, які дозволяють розділити документ на додаткові логічні блоки (секції): 'article', 'aside', 'nav', 'section'.
v Заголовки (heading content) використовуються, коли виникає необхідність якось назвати частину тексту (наприклад, параграф або розділ) і виділити його відносну важливість. Всього існує шість заголовків HTML різного рівня, які формуються парними тегами від <h1> до <h6>.
v Елементи текстового вмісту (phrasing content) в основному призначені для форматування невеликих фрагментів рядків усередині абзаців і подібних структурних одиниць.
v Елементи впровадження вмісту (embedded content) відповідають за вставку в документ зовнішніх об'єктів, наприклад, малюнків або відеороликів.
v Інтерактивні елементи (interactive content) використовуються спеціально для взаємодії з користувачем, наприклад, кнопки, посилання або поля введення тексту.
v Кореневі елементи (sectioning roots) призначені для розміщення в них інших секційних елементів. З одним з них ми вже познайомилися - це елемент body ', тобто тіло документа. Саме в ньому розташовуються секційні елементи і заголовки.
v Елементи форм (form-associated elements) в основному використовуються в формах, які ми будемо розглядати в окремому параграфі.
v Елементи виведення (palpable content) призначені для виведення інформації на екран.
v Елементи скриптового вмісту (script-supporting elements) дозволяють розміщувати в них скрипти.
Стандартні шрифти.
Стандартні шрифти.
Прийнято вважати такі стандартні шрифти:
· Times;
· Times New Roman;
· Arial;
· Helvetica;
· Courier;
· Verdana;
· Tahoma;
· Cosmic Sans;
· Garamond
Для того, щоб застосувати один із стандартних шрифтів при створенні власного сайту потрібно використати тег <font></font> та атрибут face .
Синтаксис:
<font face="arial">текст (шрифт Arial)</font>
!!! Якщо ви одразу застосуєте декілька шрифтів, то у користувача вашого сайту буде відображатись інформація тим шрифтом, який встановлено у нього на ПК, або першим вказаним із вашого списку.
<font face="arial, verdana, courier"> текст (шрифт Arial) </font>
Вставлення зображення у веб документ.
Вставлення зображення у веб документ.
<img src="my.jpg">
my.jpg – назва зображення.
Алгоритм вставлення зображення:
1. Підготуйте зображення. За потреби обробіть його у графічному редакторі.
2. Перевірте його роздільну здатність. Насиченість кольорів на 1см зображення.
3. У папці де розміщено ваш сайт створіть папку image.
4. Перемістіть потрібне вам зображення у створену папку.
5. Ім’я файлу повинно мати латинськи символи, або цифри.
6. Далі у потрібному місті вашого веб документу застосуйте тег <img>.
7. Через знак присвоєння у подвійних лапках вкажіть ім’я та тип графічного файлу.
Веб документ краще розпізнає графічні файли у форматі *.png
Якщо зображення лежить на іншому сайті, або у іншій папці то слід прописати весь шлях. Повністю.
Даний синтаксис дозволяє розмістити текст поряд із зображенням:
<img src="1.png" align="left">
текст може розташовуватися:
(1) - <img src = "pr1.png" align = "bottom"> // за замовчуванням
(2) - <img src = "pr1.png" align = "middle"> // посередині
(3) - <img src = "pr1.png" align = "top"> // вгорі
Крім атрибута align для тега <img> можна ввести ще кілька атрибутів:
(1) - <img src = "pr1.png" vspace = "10">
(2) - <img src = "pr1.png" hspace = "30">
(3) - <img src = "pr1.png" alt = "моя фотографія">
(4) - <img src = "pr1.png" width = "100">
(5) - <img src = "pr1.png" height = "200">
(6) - <img src = "pr1.png" border = "5">
Додавання графічних зображень
Додавання графічних зображень
<img src="my.jpg">
my.jpg – назва зображення.
Алгоритм вставлення зображення:
1. Підготуйте зображення. За потреби обробіть його у графічному редакторі.
2. Перевірте його роздільну здатність. Насиченість кольорів на 1см зображення.
3. У папці де розміщено ваш сайт створіть папку image.
4. Перемістіть потрібне вам зображення у створену папку.
5. Ім’я файлу повинно мати латинськи символи, або цифри.
6. Далі у потрібному місті вашого веб документу застосуйте тег <img>.
7. Через знак присвоєння у подвійних лапках вкажіть ім’я та тип графічного файлу.
Веб документ краще розпізнає графічні файли у форматі *.png
Якщо зображення лежить на іншому сайті, або у іншій папці то слід прописати весь шлях. Повністю.
Даний синтаксис дозволяє розмістити текст поряд із зображенням:
<img src="1.png" align="left">
текст може розташовуватися:
(1) - <img src = "pr1.png" align = "bottom"> // за замовчуванням
(2) - <img src = "pr1.png" align = "middle"> // посередині
(3) - <img src = "pr1.png" align = "top"> // вгорі
Крім атрибута align для тега <img> можна ввести ще кілька атрибутів:
(1) - <img src = "pr1.png" vspace = "10">
(2) - <img src = "pr1.png" hspace = "30">
(3) - <img src = "pr1.png" alt = "моя фотографія">
(4) - <img src = "pr1.png" width = "100">
(5) - <img src = "pr1.png" height = "200">
(6) - <img src = "pr1.png" border = "5">
Тепер підуть пояснення по пунктам.
(1) - атрибут vspace - задає відстань між текстом і малюнком (по вертикалі). Відстань задається в пікселях.
(2) - атрибут hspace - теж задає відстань між текстом і малюнком, але по горизонталі. Відстань задається в пікселях.
(3) - атрибут alt - короткий опис картинки. Якщо навести курсором миші на малюнок, і так потримати його (курсор) кілька секунд, вискочить опис картинки. У нашому випадку це буде фраза - "моя фотографія". Якщо параметр alt не ставити, опису не буде.
(4) атрибут width - ширина самої картинки (в пікселях).
(5) - атрибут height - висота самої картинки (теж в пікселях).
(6) - атрибут border - рамка навколо самої картинки (в пікселях). Можна не ставити. Однак, за замовчуванням, рамка навколо картинки є завжди. І якщо ви хочете прибрати її, то виставляйте атрибут border рівним нулю.
Правило розташування зображення, як фон веб документу
<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg">
У атрибуті clear існує кілька значень - all, left, right.
створення нумерованих і маркерованих списків
створення нумерованих і маркерованих списків
Алгоритм
Маркерований список. Нумерований список
Маркерований список. Нумерований список
<ul type = "disk"> <ol type = "1">
<li> текст 1</li>
<li> текст 2</li>
...
<li> текст N</li>
</ul> </ol>
"disk", "circule", "square" "1", "A", "I"
Список визначень
Список визначень
складається з двох елементів - терміна і його визначення.
Сам список задається за допомогою контейнера <dl>,
термін задається- тегом <dt>, а визначення задається тегом - <dd>.
Робота з посиланнями
Робота з посиланнями
Наша сторінка може складатися з декількох документів. Один з них головний (index.html) - він відкривається першим і повинен обов'язково розташовуватись на вашому сайті в інтернеті. Вони всі можуть лежати в одній директорії. Для кожного посилання ми можемо вказати наступні атрибути:
link – колір посилання,
alink – колір активного посилання (коли натиснуто на посилання)
vlink – колір посилання, яке вже було натиснуте.
Приклад:
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
Для текстових посилань ми теж можемо задати різний колір - це робиться за допомогою тега <font> і його атрибуту color:
<a href="prf.html"> <font color = "# CC0000"> подивитися мої фотографії </ font> </a>
Зверніть увагу, <font color = "..."> </ font> - прописується всередині тега <a> </a>, якщо ви пропишите інакше, то у вас не вийде поставити вашому посиланню колір відмінний від кольору інших посилань в документі.
Посилання на поштову скриньку:
<a href="mailto:pochta@gmail.com"> pochta@ gmail.com </a>
Mailto має свої власні опції:
- ?subject=Тема листа
- &Body=Текст вашого повідомлення
- &cc=copy@ gmail.com,copy2@ gmail.com (копія листа через кому )
- &bcc=hidden_copy@ gmail.com,hidden_copy2@ gmail.com (приховати копії листа через кому)
Приклад застосування:
<a href="mailto:pochta@gmail.com ?subject=Hello &Body=text&cc=copy@gmail.com &bcc=hidden_copy@gmail.com"> pochta@gmail.com </a>
Текст підказка!
Атрибут title (не плутати з тегом <TITLE>) пропонує інформацію про елемент, для якого він встановлюється. Ми можемо встановити його, наприклад, для тега <a>:
<a href="ssilka.html" title="Ваша підказка"> текст-посилання </a>
Наведіть курсор миші на слова "текст-посилання", і, якщо ваш броузер підтримує специфікацію Html 4.0, то ви побачите те найбажаніше.
Посилання на зображення.
Принцип посилання той же, що і у випадку з текстом, тільки в тег <a> </a> вставляється не текст, а картинка:
<a href="prf.html"> <img src = "primtocodephoto.gif"> </a>
Якщо ви хочете зробити картинку посиланням на вашу поштову скриньку, то принцип той же:
<a href="mailto:pochta@gmail.com"> <img src = "primtocodephoto.gif"> </a>
Колір рамки навколо зображення задається атрибутом bordercolor. <img src="picture.gif" border="3" bordercolor="#CC0000">
!!!
багато з вас, напевно, стикалися з таким явищем: коли натискаєш на маленьку картинку, то завантажується велика в тому ж або в новому вікні.
Як це робиться?
Тут ніяких хитрощів: робимо посиланням картинку (припустимо small.jpg) і посилаємося на іншу картинку (припустимо big.jpg):
<a href="big.jpg"> <img src = "small.jpg"> </a>
У цьому випадку велика картинка відкриється в тому ж вікні.
Відкриття зображення у новому вікні?
<a href="big.jpg" target="_blank"> <img src = "small.jpg"> </a>
Отже, target = "_ blank" - вказує на те, що документ (картинка в нашому випадку), на який веде посилання, відкриється в новому вікні браузера.
ВІДЕО УРОК "ЯК СТВОРИТИ HTML - документ"
Google Sites
Report abuse