Здрастуйте, шановні читачі блогу . Іноді у публікованих матеріалах мені доводиться повертатися до початку, і зараз я хочу розглянути перші кроки в Html. Раніше мною вже були написані кілька оглядових статей, що розповідають про таблиці, а ще про те, як можна вставляти в документ зображення.
Ми навіть встигли розглянути веб форми і фрейми, але от про сам мова гіпертекстової розмітки не поговорили, не розібралися з валідатором W3C, та й, власне, не дали визначення, що таке Html, що означає ця абревіатура, коли з’явилася перша версія мови, яка версія актуальна зараз і що нас чекає в майбутньому (ХТМЛ 5).
Також сьогодні спробуємо розібратися з тим, що таке теги, чим відрізняються блокові від рядкових, вивчимо стандартну структуру веб документа (розглянемо призначення директиви DOCTYPE, а ще основних елементів body і head), ну і якщо встигнемо, то торкнемося питання форматування коду, дізнаємося як інтерпретуються в мові гіпертекстової розмітки пробіл, табуляція і перенесення рядка, для чого може знадобитися нерозривний пробіл, як оформляються коментарі в коді і …
Що таке Html і W3C — історія появи і розвитку мови
Отже, що ж таке ХТМЛ? Ця абревіатура розшифровується як HyperText Markup Language і означає мова гіпертекстової розмітки (читайте про гіпертекст — що це таке). Створив його відомий всім основоположник «всесвітньої павутини WWW» Тім Бернерс-Лі (на основі вже наявного на той час мови SGML), який і зараз продовжує брати участь у роботі над новими стандартами інтернету в рамках консорціуму W3c (його ще часто називають валідатор W3C (validator), але про нього ми поговоримо трохи пізніше).
Власне кажучи, перша версія мови Html з’явилася на початку дев’яностих років минулого століття (моторошно звучить — минулого століття, проте це саме так) і була орієнтована в першу чергу на передачу інформації в науковому середовищі, але, проте, з цього моменту можна починати звіт популярності всесвітньої павутини.
До цього інтернет був долею небагатьох знають і зацікавлених людей, але з появою ХТМЛ і перших браузерів, здатних інтерпретувати його нехитрий код зрозумілі і зручні користувачеві речі (веб сторінку або, як ще часто кажуть, веб документ), всесвітня павутина почала свою переможну ходу. Напевно, поява мови гіпертекстової розмітки можна прирівняти до переходу від текстових до графічних операційних систем.
Досить цікавими, на мій погляд представляються темп і нюанси розвитку цієї мови розмітки. Отже, через кілька років після появи першої версії, за ініціативою Тіма Бернерса-Лі був створений консорціум W3C (World Wide Web Consortium), покликаний був стати законодавцем стандартів і не допустити розброду і хитань у лавах розробників, які могли привести до дуже неприємних наслідків.
У 1994 році розробляються стандарти розмітки другої версії, а вже в 1995 ведуться роботи над Html 3 з підтримкою CSS (каскадних таблиць стилів). Приблизно в цей же час з’являється і набирає популярність перший браузер Мозаїка, який дуже швидко був перероблений в Netscape Navigator.
MicroSoft хотіла купити Netscape Navigator для інтеграції його в Windows, але розробники цього браузера відмовилися (у результаті з’явився Mozilla Firefox), в результаті чого ми отримали і маємо донині власне творіння MicroSoft (IE — Internet Explorer), яке вони створили на базі відкритих кодів Мозаїки.
Що цікаво, IE (в силу своєї предустановленности в самої популярної операційної системи) зумів-таки викинути з рейтингу браузерів колись дуже популярний Netscape Navigator, але отримав натомість ряд нових гравців (безкоштовний браузер Opera, браузер від Mozilla, а ще сьогоднішнього лідера Гугол Хром і ін). У цей період розробники браузерів часто бігли попереду паровоза (валідатора) і вводили свої власні стандарти, бо робота над форматом Html W3C йшла досить повільно.
Побачивши таке діло, консорціум протягом одного 1997 року зробив величезний стрибок — мова розмітки зазнав відразу дві зміни, перейшовши від версії 3.2 до версії 4.0, а потім (1999) і до тієї версії, яку ми використовуємо донині — Html 4.01. З тих пір, уявляєте, стандарт не змінювався вже близько дванадцяти років (всіх все влаштовувало, і розробників браузерів і команду валідатора W3C).
Зараз консорціум з подачі конгломерату (що це?) розробників браузерів веде активні роботи над форматом, але чекати його появи в найближчому майбутньому, напевно, не варто. Хоча деякі нововведення формату ХТМЛ 5 вже підтримуються деякими браузерами в тій чи іншій мірі. Швидше за все, саме так і відбуватиметься далі — новий формат буде впроваджуватися по частинах, але повної його підтримки всіма браузерами доведеться чекати досить довго.
Отже, з допомогою ХТМЛ ми створюємо веб-сторінки (документи). Безліч веб-сторінок, що належать до одного і того ж доменному імені, називаються сайтом. Зрозуміло, що web-сторінки, що входять до складу сайту, повинні десь фізично розміщуватися і бути доступними будь-яким користувачам протягом 24 годин.
Для цих цілей призначені web-сервери, які, як правило, розміщені в спеціально обладнаних для цього приміщеннях, і представляють із себе звичайні комп’ютери, заточені і оптимізовані під виконання даної задачі. Web сервера мають постійний і широкосмуговий доступ в інтернет для того, щоб користувачі з будь-якої точки земної кулі та в будь-якій кількості могли отримати доступ до вашого сайту.
Послуги з надання місця для розміщення сайтів пропонують так звані хостери і, природно, роблять вони це за гроші, хоча в природі зустрічаються і приємні винятки у вигляді free hosting з підтримкою php і mysql. В залежності від відвідуваності вашого сайту, вам може знадобитися як весь web сервер цілком (послуга надання виділеного сервера), так і його мала частина (віртуальні хостинг або віртуальний виділений сервер).
Будь сторінка (документ) вашого сайту буде мати свій власний унікальний адресу або, іншими словами, URL (Uniform Resource Locator). Для того, щоб користувач побачив вміст цієї сторінки в себе на екрані комп’ютера, його браузер повинен буде зав’язати діалог з сервером шляхом посилки http запитів та отримання http відповідей.
В результаті цього діалогу переглядач Html код документа, розбирає його, довантажує всі необхідні додаткові елементи оформлення сторінки (зображення, ccs файли, скрипти) і користувач бачить на екрані сторінку сайту.
Html теги для початківців і їх список в валидаторе
Будь-який документ складатиметься з двох частин:
Правити або писати Html теги краще всього буде в спеціалізованому редакторі, такому, наприклад, як Notepad++ з підсвічуванням синтаксису.
Самі теги знову ж можна розділити на два простих види:
.
Ось наочний приклад закриває і відкриває Html тега, який дозволяє розмітити укладений в нього текст, заголовок третього рівня:
Заголовок статті
Так, ще існують так звані одиничні або ж, по-іншому, порожні теги, які просто не мають закриває елемента і таким чином в них не можна що-небудь укласти для розмітки, але зате з допомогою них можна буде що-небудь вивести на сторінку (наприклад, зображення).
У мові розмітки ХТМЛ є чітко обмежений і заздалегідь складений набір тегів, які докладно описані на відповідній стандарту сторінці валідатора W3C. Само собою зрозуміло, що найкраще буде користуватися саме цим списком дозволених елементів, бо це першоджерело і не допускає подвійних тлумачень.
Для цього на сторінці валідатора W3C зі списком стандартів ХТМЛ, які належать до різних специфікацій, вам потрібно буде перейти по посиланню «HTML 4.01 Specification».
На сторінці, що відкриється, потрібно перейти на вкладку «elements» з верхнього меню, після чого ви зможете, нарешті, побачити список Html тегів валідних на даний момент за версією специфікації 4.01, розробленої аж у далекому 1999 році (в минулому столітті).
У стовпці «Description» списку ви знайдете короткий опис цікавить вас тега, а прочитати докладний опис зможете, клацнувши по його назві. У колонці «Start Tag» (початковий елемент) навпроти деяких з них можете спостерігати проставлену літеру «О», означає, що даний відкриваючий тег можна використовувати опціонально, тобто його можна використовувати, а можна і не використовувати.
Таких елементів у списку всього чотири, і три з них задають загальну структуру всього документа (і, про них ми окремо поговоримо трохи нижче). У стовпці списку під назвою «End Tag» (закриває елемент) ви теж можете зустріти позначку «O» (опціонально).
Що це означає? Справа в тому, що стандарт гіпертекстової розмітки 4.01 робить нам послаблення і (чомусь) дозволяє не писати позначені літерою «O» закривають чи відкривають елементи. За нас це зможе зробити браузер, розбираючи отриманий від сервера Html код.
Тобто стосовно структури документа, про яку ми поговоримо трохи нижче, браузер сам зможе створити необхідні йому розділи , і , навіть якщо ви забудете це зробити. Крім цього, ви можете ставити, наприклад, тільки відкриваючий тег параграфа (абзацу)
, а закриває
можна ігнорувати, оскільки в будь-якому випадку за вас його проставить браузер при розборі коду розмітки.
Так, ще одним послабленням валідатора W3C у специфікації 4.01 є те, що теги можете писати в будь-якому зручному вам регістрі (хоч великими літерами, хоч маленькими, а хоч і упереміш). Тобто мова ХТМЛ є регістронезавісімий.
Це, звичайно, дуже здорово, що нам так багато дозволено, але справа в тому, що в наступній версії Html 5, схоже від усіх цих двозначностей спробують відмовитися. В результаті чого доведеться писати все відкривають і закривають елементи, а також сама мова буде регистрозависимым. Тому, напевно, має сенс вже зараз не починати звикати до цих химер і закривати всі теги, а ще писати їх назви в нижньому регістрі.
Якщо ви ще раз подивіться на список в специфікації W3C 4.01 уважніше, то побачите ще, що є елементи, в яких у стовпці «End Tag» (що закриває) стоїть буква «F» (заборонено), а в стовпці списку під назвою «Empty» (порожній) стоїть буква «E» (порожній).
Це як раз і будуть згадані трохи вище порожні або ж одинарні теги, для яких закриває елемент просто-напросто заборонений. Прикладом поодинокого тега може служити IMG (вставка зображення) або ж
(розділова лінія).
На сторінці валідатора, де наведено список тегів стандарту 4.01, є ще один стовпець з назвою «Depr», де літерами «D» помічені не були рекомендовані до використання елементи. Якщо подивіться в списку що це за теги, які не рекомендуються до застосування, то побачите, що вони в основному відповідають за оформлення вмісту документа (наприклад, FONT або ).
Справа в тому, що зараз для візуального оформлення Html документів прийнято використовувати CSS (таблиці каскадних стилів), які мають значно більше можливостей, ніж не рекомендовані до використання в W3C елементи. Хоча таке до них відношення у validator зовсім не означає, що про них ви можете забути.
Ці не рекомендовані теги можете зустріти в ХТМЛ документах інтернету, а крім цього, у випадках, коли не можна використовувати оформлення через CSS (все та ж поштова розсилка Subscribe), то ці самі не рекомендовані елементи можуть дуже сильно допомогти і стати в нагоді.
Перші кроки: структура веб сторінки (теги html, body, head)
Мова гіпертекстової розмітки передбачає наявність кореневого тега, всередині якого буде укладено весь текст ХТМЛ документа. Ним є . Взагалі, описувати структуру веб документа найкраще, маючи перед очима наочну схему:
Всередині кореневого елемента передбачено наявність двох обов’язкових розділів, формуються тегами і :
Ну ось, поставив занадто великий план на початку статті, а встиг розповісти тільки про половину задуманого. Досить часто у мене так трапляється. Наприклад, коли писав статтю про блокової верстки, то планував вкластися в одну статтю, а в результаті вийшло чотири. Навіть можна сказати, що п’ять, бо стаття про сучасної верстання сайтів є їх логічним продовженням. Ну що ж, залишається тільки сказати, що продовжимо в наступній статті уроків Html.
Удачі вам! До зустрічей на сторінках блогу
