Від автора:всім привіт. Всі ми хочемо краще розбиратися у сайтобудуванні, щоб займатися цікавими проектами та втілювати у життя свої ідеї. Але що робити, якщо ви зовсім новачок? Наш підручник html для чайників з практичними уроками допоможе вам нарешті зробити такий важливий прорив у сайтобудуванні з нульового рівня хоча б до базового розуміння.

У вивченні сайтобудування, як і практично в будь-якій іншій справі, важлива практика. Можна 1000 разів перечитувати рецепт приготування борщу, але від цього його не зварите. Можна вивчити основні принципи керування автомобілем, але доки ви не сіли за кермо, все це до лампочки. Якась користь від знання теорії, безперечно, є, але не така велика, як від реальних умінь.

Так от, якщо ми говоримо про вивчення html, то є теж теорія, а є практика. Теорія у разі – це просто якийсь цикл статей, уроків на тему мови, основних тегів та його застосування тощо.

Практика для вас починається тоді, коли ви самостійно створюєте html-файл, пишіть туди стартовий код і починаєте вивчати власноруч, як воно все працює. Написав тег, глянув, як працює. Вставив картинку – перевірив. Додав якісь атрибути тощо. Саме практика дає можливість швидко розібратися та запам'ятати основні теги. Потім ви просто на автоматі їх пишіть і вам не потрібно півгодини згадувати, як створити список.

Ну, а для рідкісних тегів завжди потрібно використовувати словник. Ніхто, жоден супер верстальник та веб-розробник, я думаю, не знає всіх тегів напам'ять. Це просто не потрібне. Якщо тег використовується тобою 1 раз на 10 років, то навіщо пам'ятати його? Я гадаю, це зрозуміло.

Але таку практику я назвав би просто такою грою в пісочниці. Ви просто пишите різні теги, намагаєтеся розібратися з усім докладно, але все для чого? Повинна бути якась мета. Зазвичай html і css вивчають для того, щоб потім створювати свої веб-сторінки та повноцінні сайти.

Отже, найкраща практика – це взяти готовий намальований макет сайту та зверстати його. Версткою і називають процес створення з багатошарового малюнка веб-сторінок за допомогою мов html і css. Ще при верстці можуть використовувати фреймворки, JavaScript та прикладні бібліотеки, але це вже тема для іншої розмови. Усе це є доповненням. Html є базовою технологією, яку потрібно розуміти дуже добре.

Але я вас порадую - вона базова, вона ж найпростіша. Вивчити, як працюють ті чи інші теги та як їх застосовувати, це дуже легко. У HTML немає жодних складних алгоритмів, функцій, методів, класів, як це буває в мовах програмування. Це мова розмітки, досить зовсім трохи повивчати її, і все буде гранично зрозуміло.

Як правильно вивчити мову та де брати практику?

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

На щастя, у нас на сайті всі уроки структуровані та розставлені від простого до складного. Тому якщо ви вивчатиме html за нашими уроками, то жодних проблем із засвоєнням матеріалу не буде.

Можу запевнити вас, що css вивчати цікавіше! А у якомусь плані навіть легше. По-перше, у css теж досить мало властивостей та правил, які ви повинні запам'ятати. По-друге, у цій мові дуже простий синтаксис, так що жодних проблем із написанням коду нею не виникне навіть у новачка. По-третє, оскільки css відповідає за зовнішній вигляд сторінки, спочатку у вас буде викликати захоплення те, що ви змусили сторінку пофарбуватися в червоний колір, а от тієї картинці зробили рамку.

Загалом, вивчати css просто і цікаво, тому рекомендую не затягувати і починати відразу після того, як закінчите з основами html.

Ваша фінальна практика

Нарешті, вам належить іспит. Але не турбуйтеся, він буде нескладним. Тим більше, що самостійно вам його виконувати не доведеться, а лише за інструкціями, які є на уроках. Цей іспит – курс. У ньому ви досягнете нарешті головної проміжної мети – зверстаєте свій перший сайт і отримаєте розуміння того, як застосовувати html та css у реальному сайтобудуванні. Нехай це буде простий сайт, але отриманих знань вам уже вистачить, щоб рости далі та верстати складніші макети.

HTML - мова розмітки гіпертексту, який зробив інтернет таким, яким ми його знаємо та любимо. Саме завдяки цьому чудовому інструменту сайти виглядають красиво та сучасно, а також забезпечується зручність їх використання. Мова HTML просто компонує елементи веб-сторінки у зручний для користувача варіант. Його робота можна порівняти з тим, що роблять типу MS Word або OpenOffice. Вони перетворюють безлику масу букв на документ, у якому є абзаци, жирний текст, курсив, таблиці і навіть зображення. Приблизно те саме робить мову HTML, з тією лише різницею, що його документи відображаються в браузері, та й можливості цього інструменту набагато ширші, ніж у текстового редактора. Для розмітки використовуються теги – спеціальні команди, які описують структуру веб-сторінки. Вони укладені в кутові дужки.<тег>щоб браузер міг відрізнити їх від загальної маси тексту. Далі ми розглянемо основи HTML для початківців.

Візуальні редактори

Новачки, що тільки ступили на шлях вивчення HTML, часто починають свою роботу з програм, що дозволяють створювати сайти без будь-яких знань. У них можна просто розмістити елементи на екрані так, як вони відображатимуться у браузері. Здавалося б, ось він - джерело вічної благодаті, що дозволяє позбавитися більшості веб-розробників. Але не все так просто, тому що у візуальних редакторів є безліч недоліків, які унеможливлюють їх використання в серйозних проектах.

Всі ці програми створюють багато непотрібних тегів, які роблять кінцевий варіант сторінки громіздким та неоптимальним. Звичайно, в наш час швидкісного інтернету це має менше значення, ніж раніше, але є низка причин, з яких лаконічний і грамотно написаний сайт виходить практичнішим, ніж його побратим, створений у візуальному редакторі. Веб-сторінка, зроблена в такій програмі, погано оброблятиметься пошуковими роботами, тому що для них важливий кожен кілобайт коду, а громіздкий і нелогічний код з купою навряд чи припаде їм до смаку. Крім цього, редактори часто відстають від часу, стаючи неактуальними, а витрачати ресурси з їхньої розвитку недоцільно, оскільки жоден професіонал не користується цими продуктами. Тому кожен, хто хоче працювати у сфері створення сайтів, має знати основи HTML.

Теги

Як згадувалося, теги описують браузеру структуру веб-сторінки. Більшість з них мають тег, що відкриває і закриває, але далеко не всі. Наприклад, , де замість точок міститься вміст. Перший показує, де починається тег, а другий закриває його. Усередині можуть бути інші елементи розмітки сторінки, вони можуть вкладатися один в одного подібно до матрьошки. Тут важливо закривати теги, щоб сторінка відображалася коректно.

Трапляються також поодинокі теги, які не потрібно закривати. У них вміст знаходиться всередині, так само як і може бути прописаний для більшості HTML-тегів і задає властивості елемента. Позначається він у тезі, що відкриває, і виглядає приблизно так: атрибут=«...», де замість точок знаходиться значення атрибута. Знання тегів є першим та найважливішим кроком для освоєння HTML. Основи цього мистецтва також мають на увазі розуміння структури веб-сторінки.

Структура документа

Кожен документ HTML має відповідне розширення, наприклад Index.html. Так браузер зможе зрозуміти, із чим він має справу, і правильно відобразить сторінку. Всі файли, які використовуються для створення сайту, бажано зберігати в одній директорії, що надалі суттєво полегшить вам життя. Основи мови розмітки гіпертексту HTML припускають чітке розуміння структури документа. Починається він із тега, повідомляє браузеру версію HTML, яка використовується в цьому документі. На даний момент актуальна п'ята версія мови, так що тут не потрібно нічого вигадувати, можна сміливо вставляти наведений вище тег на початок будь-якої сторінки.

Потім йдуть основні парні структури, що становлять «скелет» сайту. Перший тег, в який вкладені всі інші .... Все, що знаходиться за його межами, не розпізнається браузером як веб-сторінка, тому він відкриває документ і закриває його. Цей тег є обов'язковим для будь-якого документа. У ньому також містяться ще кілька обов'язкових тегів, які будуть розглянуті нижче.

Head

Усередині тега ...міститься інформація технічного характеру, яка не відображатиметься на сторінці, але є важливою частиною документа HTML. Основи сайту закладаються саме в цьому місці, тут вибирається кодування та вводиться назва сторінки. Воно міститься всередині обов'язкового тега . Відображається назва у верхній частині браузера, де також можна розмістити невелику значок, що характеризує вміст сторінки. Бажано одразу вказати кодування документа для його коректного відображення. Це можна зробити за допомогою тега . Метатеги надають дані про структуру сторінки і зазвичай розміщуються всередині head.

Link

Знання основ HTML також передбачає використання каскадних стилів оформлення або css. Вони визначають властивості елементів, які будуть відображені на сторінці. Сучасний підхід до цієї задачі передбачає винесення таких характеристик, як колір, висота та розташування елемента, у зовнішній файл для більшої зручності. Для підключення файлу css використовується тег . У готовому вигляді це виглядає приблизно так: , де href вказує на місце розташування файлу, а type - на його тип.

Body

Саме у цій частині HTML-документа створюється видима частина сторінки. Все, що робиться всередині тіла, буде показано браузером. У використовується безліч тегів HTML. Основи – це форматування тексту, робота з посиланнями та найпростіші інструменти для структурування веб-сторінки. Щоб розпочати роботу в HTML, достатньо знати основні теги та вміти ними користуватися. Нижче наведені найпопулярніші з них:

• - застосовується виділення підрядки, яку буде поширюватися особливий стиль, описаний в css;
• - Створює посилання на веб-сторінці; адреса переходу задається атрибутом href;
• - один із найпопулярніших тегів сучасності; кожен, хто вирішив вивчити основи мови HTMLl, повинен приділити йому особливу увагу, оскільки це блоковий елемент, на основі якого зроблено левову частку сучасних сайтів (параметри для блоків

  задаються в css, і всередині цього тега можуть бути інші блоки);

• Виділяє абзац із тексту; вміст абзацу знаходиться між тегами, що відкривають і закривають;

• - нумерований список, елементи якого полягають у парний тег
  1. - маркований список, в якому, як і в нумерованому, елементи позначаються тегом

     • -

       - заголовки документа (цифра позначає рівень заголовка, тобто

       - головний заголовок, а наступні варіанти є його підзаголовками, до речі, заголовки рівнів

       ,

       майже неможливо зустріти на просторах інтернету), також важливо пам'ятати, що на сторінці може бути лише один заголовок

       ;

     • - жирний текст;
     • - курсив;
     • - вставка картинки на інтернет сторінку (це одиничний тег, що йому не потрібно закриває, але в ньому обов'язково потрібно вказати атрибут alt, в якому вказується текст для зображення);

     Це далеко не всі теги, необхідні для створення власної веб-сторінки, але їх достатньо, щоб закласти основи HTML для початківців.

     CSS

     Розвиток мови HTML призвело до того, що кожен тег обзавівся масою атрибутів, та й вимоги до зовнішнього вигляду веб-сторінок значно зросли. Код став громіздким та незручним, складно було прочитати його, не те що адаптувати чи змінити. До того ж, якщо на вашому сайті десять сторінок, на яких багато заголовків, позначених зеленим кольором, а вам раптом захотілося зробити їх червоними, то доведеться попітніти, змінюючи кожен вручну. З появою каскадних таблиць стилів цей процес став простим і логічним, та й HTML-код став більш читаним.

     

     Застосування CSS

     Для створення веб-сторінок необхідно знати основи HTML та CSS, тому що зараз без знання каскадних таблиць стилів робити в цій сфері нічого. Вони задають атрибути для будь-якого елемента, які поширюються весь документ. Таким чином, можна встановити колір відразу для всіх елементів

     Або , написавши лише одне правило. Враховуючи сучасні вимоги до зовнішнього вигляду веб-сторінок, використання каскадних таблиць стилів є обов'язковим.

     Щоб підключити файл css до документа, існує тег link. Трохи вище був описаний принцип його використання, але він не єдиний варіант об'єднання всіх стилів в одному місці. Є ще тег

     з використанням елемента . Елемент не вимагає тега, що закриває. Цей елемент визначає співвідношення між поточною сторінкою та іншими документами. Таких елементів на сторінці може бути декілька. Запис матиме такий вигляд:

     Таблиця 4. Атрибути тега

     Атрибут	Опис, прийняте значення
     crossorigin	Вказує, чи має використовуватися CORS (технологія браузерів, яка дозволяє надати веб-сторінці доступ до ресурсів іншого домену) при вилученні зображення із сайту. anonymous — до крос-доменного запиту браузер автоматично додає заголовок Origin, що містить ім'я домену, з якого здійснено запит. Якщо сервер не відповість CORS-заголовком Access-Control-Allow-Origin: * (або ім'я домену замість зірочки), завантаження зображення буде заблоковано. use-credentials — якщо сервер не надає облікові дані за допомогою Access-Control-Allow-Credentials: true , завантаження зображення буде заблоковано.
     href	Основний атрибут тега, як значення, виступає шлях до файлу зі стилями.
     hreflang	Визначає мову тексту в документі, яким йде посилання.
     media	Визначає тип пристрою, до якого має бути використаний ресурс посилання.
     nonce	Генерована випадковим чином на сервері рядкова змінна, яка встановлює правила використання вбудованих стилів для захисту контенту. Значення атрибута – рядок тексту.
     rel	Атрибут визначає відносини між поточним документом та документом, на який йде посилання. alternate — посилання на той самий документ, але в іншому форматі (наприклад, сторінки для друку, переклад, дзеркало, стрічка у форматі RSS або Atom), . archives - Вказує на те, що документ за посиланням представляє історичний інтерес. Посилання може вказувати на колекцію записів, документів та інших матеріалів. author посилання на сторінку про автора документа або на сторінку з контактними даними автора. bookmark посилання на найближчого предка статті, що є сполучною ланкою, або розділ статті, найбільш тісно пов'язаних з елементом, якщо немає предка. external використовується для вказівки того, що сторінка, на яку веде посилання, не є частиною даного сайту. first вказує посилання, що веде перший документ з послідовності документів. help посилання на документ із довідкою. icon визначає шлях до іконки, яка буде використана для поточного документа. last вказує посилання, що веде останній документ в послідовності документів. license посилання на відомості про авторські права документа. next вказує, що цей документ є частиною серії, і що посилання веде до наступного документа в цій серії. nofollow вказує на те, що посилання не схвалено автором сторінки або посилання носить комерційний характер. noreferrer вказує на те, що заголовок запиту клієнта, що містить URL джерела запиту, не повинен передаватися при переході за посиланням. pingback вказує адресу пінгбек-сервера, що дає можливість для блогу автоматично сповіщати сайти, що посилаються на нього. prefetch вказує, що слід заздалегідь кешувати файл, який веде посилання. prev вказує, що цей документ є частиною серії, і посилання веде на попередній документ у цій серії. search показує, що документ містить інтерфейс пошуку та пов'язаних з ним ресурсів. sidebar вказує, що документ, якщо це можливо, буде показаний в додатковому контексті браузера, і деякі браузери при натисканні на гіперпосиланні відкривають вікно для додавання посилання в панель закладок. stylesheet посилання на зовнішній файл, який буде використовуватися як таблиця стилів для цього документа. tag вказує на те, що мітка, на яку веде гіперпосилання, відноситься до цього документа. up вказує, що сторінка є частиною ієрархічної структури, і що гіперпосилання веде більш високий рівень ресурсу у структурі.
     sizes	Вказує розмір ікон для візуального відображення. Атрибут sizes використовується тільки спільно з rel="icon" , і може набувати наступного значення: ширина висота - визначає список розмірів, розділених пробілами, кожен розмір повинен бути у форматі - ширина висота (розміри іконки задаються в пікселях), наприклад: ; any - іконка може масштабуватись до будь-якого розміру.
     title	Визначає назву посилання або назву набору альтернативних таблиць стилів. Значення атрибута тексту.
     type	Визначає MIME-тип документа, який йде посилання. У цьому випадку він набуває значення "text/css" .

     1.2.5. Елемент

     Говорить браузеру, що все поміщене між цими тегами має відобразитися у вікні вашого браузера. Ось основні теги, які можуть бути абсолютно в кожному документі. Тег body служить як основне тіло сторінки, який включає в себе весь її вміст. Цей тег бажано відкривати і наприкінці документа не забути закривати.

     Заголовки сторінки h1 h2 h3

     Поїхали далі, ми бачимо тег

     , який також відкривається і закривається. Цей тег позначає основний заголовок тексту, у більшості випадків під заголовком H1 йде назва сторінки. Насправді даних заголовком лише шість.

     . Їх так само використовують у SEO, але це вже трохи інша тема. Я обов'язково виділю для цього одну статтю і дам докладний опис для них, підписуйтесь на оновлення блогу, щоб нічого не пропустити.

     Наявність таких заголовків у статті відіграє важливу роль при просуванні сторінки. Крім цього, їх використання дає вам чітку структуру сторінки, її заголовок, підзаголовки, виділення, підпункти тощо. Завжди користуйтеся ними та застосовуйте на практиці. Багато CMS, наприклад таких як WordPress, при написанні тексту, можна помітити «заголовок 1», «заголовок 2», «заголовок 3» тощо. Саме вони й відповідають за h1, h2 та h3.

     Якщо ви пишете основний текст з нового абзацу, ви пишіть тег

     На початку і закриваєте його наприкінці

     . Позначення абзацу в html дорівнює створення нового абзацу в документі MS Word. Більше нічого нового у документ я не додавав. Але, це ще далеко не все, що має бути присутнім у html документі. Подивимося ще один приклад, опис буде трохи пізніше.

     Цей текст буде напівжирним, а цей – ще й курсивним

     < ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >HTML документ< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

     Основні елементи Head та Title

     

     У кожному документі є елемент head і Title. Перший з них , що йде відразу після першого тегу . У даному тегу йде вся інформація про сторінку, в ньому також міститься елемент \Зміст сторінки

     < / html >

     Як бачите, нічого складного нема. Перед вами найголовніші теги, які мають бути присутніми в кожному html документі. Не забувайте закривати кожен із них, інакше браузер не зможе сприйняти повноцінну картину коду. Це потрібно знати та пам'ятати завжди. Далі ви вже починаєте вставляти текст, картинки, відео тощо. Але це буде в інших статтях.

     Редактор Notepad++

     

     Для роботи з кодом використовуйте програму Notepad++. Вона безкоштовна, знайти її в інтернеті не важко. Дуже зручна для сприйняття будь-якого коду, так само зручно показується тег, що відкривається і закривається. Підтримуємо синтаксис понад 40 мов програмування. Саме те, що потрібно для вивчення основ HTML.

     Блокнот перевищує у всіх сенсах звичайний блокнот. Для максимальної зручності, простоти та навчання цей редактор спочатку необхідно встановити на комп'ютер. Найголовніша перевага та зручність, редактор Notepad++ показує підказки при написанні коду, що робить вашу роботу швидше та якісніше в рази.

     Елемент DOCTYPE

     У кожному документі так само має бути зазначений такий елемент doctype. Для чого він потрібен і що має бути. Зазвичай народ сильно не захоплюється цими рядками, копіюють собі документи і працюють спокійно. Дані елементи говорять браузеру, яка версія HTML використовується в документі, який опис сторінки, яке використовується кодування, які ключові слова включені, хто автор і як називається сторінка.

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

     Коротко зрозумілою мовою про основи html: Даний рядок говорить браузеру про те, що даний документ є XHTML версія 1.0, використовується англійська мова і вся ця каша розташована за даною адресою. Далі в тезі meta вказуємо кодування, яке використовується. Найчастіше використовується віндовс 1251.

     Description — торкається тема з SEO, один із трьох головних тегів, який має бути присутнім абсолютно в кожному документі, цей тег вказує опис сторінки. Що написано на цій сторінці, короткий опис, не більше двох речень. Тег keywords, так само торкається тема SEO, даний тег є обов'язковим. У ньому пишуться ключові слова, за якими користувачі інтернету шукатимуть вас через пошукові системи.

     У тегу title йде назва самого документа, його заголовок, який ми бачимо у браузері. Напевно, найважливіший тег у всьому документі, який найбільше впливає на просування сторінки. У статті додавання та оформлення йде опис даного тега більш детально.

     Що потрібно запам'ятати з цього уроку для основи html:

     1. Майже всі теги відкриваються та закриваються;
     2. Починається документ із тега ;
     3. Наявність тега ;
     4. Наявність тега ;
     5. Чітка структура HTML документа.

     Усі головні сторінки завжди мають називатися словом index. Так прийнято і так всі звикли, все одно яке буде розширення у файлу, це може бути і html і php. Називається він завжди лише так.

     Перегляньте відео про основи html від компанії Webformyself.

     Мова гіпертекстової розмітки, базові елементита структура. Все це та багато іншого я постараюся описати на своєму блозі. Насамперед для новачків буде написана корисна інформація, наданий приклад коду та можливість скачати сам приклад разом із готовою сторінкою.

     Всі користуються Інтернетом і всі переглядають різні сайти, і, мабуть, усім хотілося б розмістити свій сайт в Інтернеті, але це не просто так зробити, на це є багато причин. Однак для того, щоб Ви змогли розмістити якісний сайт, Вам просто необхідно знати основу « WEB-програмування», якою і є мова HTML. У цій статті ми розглянемо основні елементи, теги, атрибути, навіть напишемо першу веб-сторінку.

     Hyper Text Markup Language- "HTML" ( мова розмітки гіпертексту) багато хто вже давно перестав його вважати просто мовою програмування. Так як саме поняття HTML включає різні методи оформлення гіпертекстових документів, дизайн, гіпертекстові редактори, браузери і багато іншого. Користувач, який освоїв цю мову, набуває можливості робити серйозні речі простими методами і, головне, швидко, що у світі вважається дуже добре!

     На мові HTML можна створювати власні мультимедійні продукти і розповсюджувати їх на cd-дисках, і всі ці продукти, виконані у вигляді наборів HTML-сторінок, не вимагають розробки спеціалізованих програмних засобів, оскільки все необхідне для роботи з даними ( Web-браузери) стали частиною стандартного програмного забезпечення більшості персональних комп'ютерів.

     • Елемент (element) - Конструкція мови HTML. Це об'єкт, що містить дані та дозволяє відформатувати їх певним чином. Будь-яка Web-сторінка є набір елементів. Одна з основних ідей гіпертексту – можливість вкладення елементів.
     • Тег (tag) - Початковий або кінцевий маркери елемента. Теги визначають межі дії елементів та відокремлюють елементи один від одного. У тексті Web-сторінки теги полягають у кутові дужки, а кінцевий тег завжди забезпечується косою межею.
     • Атрибут(attribute) – параметр або властивість елемента. Тобто це змінна, яка має стандартне ім'я і якій може надаватися певний набір значень: стандартних або довільних. Передбачається, що символьні значення атрибутів полягають у прямі лапки, але деякі браузери дозволяють не використовувати лапки. Це тим, що тип атрибута завжди відомий заздалегідь. Атрибути розташовуються всередині початкового тега і відокремлюються один від одного пробілами.
     • Гіперпосилання— частина тексту, яка є вказівником на інший файл чи об'єкт. Гіперпосилання необхідні для того, щоб забезпечити можливість переходу від одного документа до іншого.
     • Фрейм (frame) - Цей термін має два значення. Перше - область документа зі своїми смугами прокручування. Друге значення - одне зображення у складному ( анімаційному) графічному файлі (схоже на кадр із кінофільму). Також можливо замість терміну "фрейм" у спеціальній літературі та локалізованих програмних продуктах можна зустріти термін "кадр" або "рамка".
     • HTML-файлабо HTML-сторінка – документ, створений у вигляді гіпертексту на основі мови HTML. Такі файли мають розширення htm чи html.
     • Аплет (applet) — програма, що передається на комп'ютер клієнта у вигляді окремого файлу та запускається під час перегляду Web-сторінки.
     • Скриптабо сценарій ( script) - Програма, включена до складу Web-сторінки для розширення її можливостей.
     • Розширення (extension) — елемент, який не входить до специфікації мови, але використовується, забезпечуючи можливість створення нового цікавого ефекту форматування.
     • CGI (Common Gateway Interface) — загальна назва програм, які, працюючи на сервері, дозволяють розширити можливості Web-сторінок. Наприклад, без таких програм неможливе створення інтерактивних сторінок.
     • Код HTML -гіпер текстовий документу своєму первісному вигляді, коли видно всі елементи та атрибути.
     • Web-сторінка— документ (файл), підготовлений у форматі гіпертексту та розміщений у World Wide Web.
     • Сайт (site) - Набір Web-сторінок, розташованих в одному місці і пов'язаних між собою.
     • Браузер (browser) - програма для перегляду Web-сторінок.
     () — копіювання файлів із сервера на комп'ютер-клієнт.
     • URL (Uniform Resource Locator) чи універсальний покажчик ресурсу, адресу деякого об'єкта Інтернеті, тобто. типовий URL для WWW, має вигляд: http://www.назва.домен/ім'я файлу.

     Всі елементи мови можна умовно поділити на три групи. До першої належать елементи, що створюють структуру гіпертекстового документа. Використання таких елементів – необхідна формальність, якої не можна нехтувати. До другої групи можна віднести елементи, які створюють ефекти форматування. Їх використання диктується конкретними вимогами до документа, фантазією та компетенцією розробника. До третьої групи належать елементи, які дозволяють керувати програмними засобами, встановленими та працюючими на комп'ютері-клієнті. Часто такі елементи створюються автоматично, коли розробник використовує для вставки деякого об'єкта в документ гіпертекстовий редактор або програму.

     Незважаючи на те, що специфікація HTML є стандартом, ця мова доповнюється новими елементами ( розширеннями). Тому деякі Web-сторінки зручніше переглядати за допомогою певних браузерів. Розширення створюються лише відомими фірмами, які розробляють програмне забезпечення для WWW, а пересічні користувачі можуть удосконалювати свої Web-сторінки за допомогою програмування. Аплети дозволяють зняти обмеження HTML та дають простір фантазії розробника.

     Версії HTML

     Перша версія мови HTML була розроблена на початку 90-х років Тімом БенерсЛі для одного з найпоширеніших у минулому браузера Mosaic. Але тоді ні для браузера, ні для HTML ще не знайшлося гарного застосування. 1993 року з'явився HTML+, і ця версія також залишилася практично непоміченою. Але поширення мову HTML набула завдяки версії 2.0, яка з'явилася в червні 1994 року. І з того моменту відбувається зростання популярності WWW у всьому світі. Стандарти, включені у версію 2, настільки прижилися, що використовуються і донині.

     HTML версія 3.0, яка з'явилася приблизно через рік, в ній була реалізована можливість промальовування математичних символів ( знаків інтеграла, нескінченності, дробу, дужок тощо.) за допомогою елементів мови. Але розвиток цього проекту загальмувався і не набув подальшого поширення.

     1996 року з'явився HTML версії 3.2. Це було блискуче рішення, досить згадати, що у специфікацію мови були введені фрейми, які стали тепер дуже популярними у розробників сайтів. І досі всі браузери підтримують цю версію HTML.

     Офіційна специфікація HTML 4 ( Dynamic HTML) Розроблялася в 1997 рік. В цей час вже було очевидно, що розвиток гіпертексту буде здійснюватися за рахунок web-програмування. Це виявилося набагато ефективнішим, ніж вводити в мову нові елементи.

     Структура Web-сторінки

     Нижче представлений код Web-сторінки, який виконаний на мові HTML, і на прикладі цієї сторінки ми розберемо її структуру, але спочатку скопіюйте весь код у звичайний текстовий блокнот і натисніть «Зберегти як» і зберігайте вже файл з розширенням html, тобто . після назви напишіть.html

     Структура web документа Перехід у Кінець документа<НR> <Н1>Заголовок 1

     <Н2>Заголовок 2 <НЗ>Заголовок 3 <Н4>Заголовок 4 <Н5>Заголовок 5 <Н6>Заголовок 6 <НR>Тут розташована перше посилання<а name ="list2"> <НR> <р>Тут має розташовуватися
     основний текст веб-сторінки.
     А я, наприклад, вставлю сюди
     кілька переносів,
     для того, щоб Ви могли
     наочно спостерігати,
     як у Вас працює
     посилання всередині документа,
     а то якщо у Вас буде великий дозвіл,
     Ви просто не помітите перехід за посиланнями
     <НR> <а name="list1"

     Перехід у<а href ="#list">Початок документа

     Для того щоб зрозуміти структуру Web-сторінки, необхідно розглянути всі її елементи, які входять до наведеного вище коду.

     < html>

     Позначення документа на мові HTML. Один із принципів мови є багаторівневе вкладення елементів. Цей елемент є зовнішнім, оскільки між його початковим і кінцевим тегам повинна бути вся Web-сторінка. За ідеєю, цей елемент можна розглядати як формальність. Він має атрибути version, lang та dir, якими в даному випадку рідко хтось користується, і допускає вкладення елементів HEAD, BODY FRAMESET та інших, що визначають загальну структуру Web-сторінки. Звичайно, що кінцевим тегомзакінчуються усі подібні документи.

     < head>

     Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само, як і попередній елемент, HEAD служить для формування загальної структури документа. Цей елемент може мати атрибути lang та dir.

     < title>

     Елемент для розміщення заголовка веб-сторінки. Рядок тексту, розташований усередині цього елемента, відображається не в документі, а в заголовку вікна браузера. Цей елемент дуже впливає просування у пошуковій системі т.к. пошукові системи приділяють особливу увагу тег TITLE. Моя порада: ніколи не робите дуже довгий текст у цьому тегу ( 65 символів достатньо).

     <МЕТА>

     Цей елемент містить службову інформацію, яка не відображається під час перегляду веб-сторінки. Усередині нього немає тексту у звичному розумінні, тому немає і кінцевого тега. Кожен елемент МЕТА містить два основні атрибути, перший із яких визначає тип даних, а другий - зміст.

     < body>

     Цей елемент поєднує в собі гіпертекст, який визначає власне Web-сторінку. Це та видима частина документа, яку розробляє сторінки авто і яка відображається браузером. Відповідно, кінцевий тег цього елемента треба шукати наприкінці Web-сторінки. Всередині BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Всередині початкового тегу елемента BODY можна розмістити багато атрибутів, які служать для встановлення всієї сторінки. Розглянемо їх у порядку.

     Один з найкорисніших атрибутів даного тега, який впливає на дизайн сторінки.

     background="шлях до файлу фону"

     Простіше оформлення фону зводиться до завдання його кольору

     bgcolor="#FFFFFF"

     Колір фону визначається трьома дворозрядними шістнадцятковими числами, які визначають інтенсивність червоного, зеленого і синього кольорів (rbg).

     Так як можна змінити фон сторінки можна змінити колір тексту. Для цього є наступний атрибут

     text=» #RRGGBB»

     Для завдання кольору тексту гіперпосилань використовується наступний атрибут

     link="#RRGGBB"

     Можна також вказати зміну кольору для останнього вибраного користувачем гіперпосилання

     <Н1>

     Елемент заголовка. Розрізняють шість рівнів заголовків, які позначаються так.
     <Н1>Заголовок
     <Н2>Заголовок
     <Н3>Заголовок
     <Н4>Заголовок
     <Н5>Заголовок
     <Н6>Заголовок

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

     align="left" align="center" align="right"

     Для створення нового абзацу використовується тег

     А для переходу на новий рядок без створення абзацу – тег
     тобто відбувається перенесення. Ці теги закривати необов'язково. Звичайно, якщо Ви не використовуєте тег

     Елемент ALIGN, яким може задавати вирівнювання абзацу:

     Ліворуч

     По центру

     Праворуч

     Текст між цими елементами вирівнюється по ширині

     <НR>

     Горизонтальна лінія ( horizontal rule) - дуже поширений елемент. По-перше, тому що за його допомогою дуже легко та зручно ділити сторінку на частини. По-друге, тому що вибір подібних елементів оформлення автора сторінки дуже невеликий. Елемент не має кінцевого тега, але має ряд атрибутів для вирівнювання вліво, по центру, праворуч, шириною:

     • align = "left"
     • align = "center"
     • align = "right"
     • align = "justify"

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

     <а name=»метка»>Довільний текст

     У цьому випадку даному рядку документа присвоюється ім'я, і, отже, іншій частині документа або навіть на іншому документі може бути створене гіперпосилання, що призводить до цієї мітки.

     Для вставки зображень ( картинки) HTML документ використовується наступний тег ( представлений повний опис атрибутів даного тега):
     

     Списки

     (list) були розроблені в HTML, безперечно, під впливом успіху текстових редакторів. Від звичайного тексту список відрізняється, перш за все, тим, що користувач не повинен думати про нумерацію його пунктів: це завдання HTML бере на себе. Якщо список доповнюється новими пунктами або вкорочується, нумерація продовжується автоматично. У разі ненумерованих списків HTML ставить перед кожним пунктом позначки: кружки, прямокутники, ромби та інші зображення. Зрештою список набуває пристойного, вигляду. Існує дві групи таких тегів: одні визначають загальний вигляд списку ( і дозволяють вказувати атрибути), інші задають його внутрішню структуру. У списках можна використовувати стандартні атрибути. Існує кілька видів списків.

     Найпоширенішим є ненумерований список ( unordered list). Він представлений нижче:

     • Пункт 1 списку
     • Пункт 2 списку
     • Пункт 3 списку

     Елемент ul є своєрідним виділенням списку. Він дає змогу розділяти один список від іншого. Елемент liпозначає кожен із пунктів.

     Таблиці

     Є одним із найнеобхідніших засобом форматування даних на Web-сторінці. Основна зручність полягає в тому, що браузер промальовування усієї таблиці бере на себе. Розмір рамки може бути автоматично узгоджений з розміром вікна перегляду в браузері і, зрозуміло, з розміром рядків тексту та малюнків, що знаходяться в комірках таблиці. Крім того, таблиці дозволяють вирішувати багато дизайнерських завдань: вирівнювати частини сторінки один щодо одного, розміщувати поруч малюнки і текст, керувати колірним оформленням і так далі. При створенні таблиць застосовується принцип вкладення: всередині основного елемента таблиці (TABLE) створюється ряд елементів, що визначають рядки (TR), а всередині цих елементів розташовуються елементи для опису кожної комірки у рядку (ТD, ТН).

     Щоб розібратися у структурі існуючої таблиці чи розробити нову таблицю, є одне правило, що послідовність елементів описує таблицю зверху донизу і праворуч наліво. Наприклад, якщо після елемента TABLE вказано елемент TR, це вказує на те, що починається опис нового рядка таблиці. Все, що розташоване за цим елементом, буде розміщено в одному рядку (справа ліворуч). Це може бути послідовність елементів TD ( осередків), інша таблиця тощо. Після того, як з'явиться новий елемент TR, почнеться опис наступного рядка і т. д. до кінця таблиці (тега).
     Таблицю можна вирівняти по горизонталі за допомогою атрибуту align:

     • align = "left" - вліво;
     • align = "center" - по центру;
     • align = "right" - вправо.

     Ширину таблиці можна встановити точно у пікселях або у відсотковому відношенні до ширини сторінки у вікні браузера. Наприклад: width=400 або width=50%

     Для керування видом рамки використовуються два атрибути. Справа в тому, що браузер створює зображення рамки, імітуючи її тривимірність ( опуклість) за допомогою відмінності у освітленості граней

     Сценарії

     Практично всі web-майстри хочуть, щоб їхні сторінки на сайті мали сучасний вигляд, були багатофункціональними, красивими та динамічними. Стандартними засобами HTML це неможливо, тому застосовуються різні засоби: аплети, об'єкти, каскадні таблиці стилів тощо. Але найпопулярнішим і найпоширенішим видом ( прийомом) є використання сценаріїв.

     Сценарій – це програмний код, який включається до тексту сторінки у вигляді вихідного текстута виконується браузером під час перегляду сторінки. Сценарій може бути написаний на мовою JavaScript, розробленому фірмою Netscape, або Visual Basic Script ( VBScript), розробленому фірмою Microsoft.

     Даний тег дозволяє відокремити текст програми сценарію від іншої інформації сторінки. Тег SCRIPT обов'язково включає атрибут language, який визначає мову і може приймати наступні значення:

     • javascript - код мовою JavaScript;
     • vbscript – код на мові VBScript.

     Атрибут type також може вказувати на тип мови, хоча його застосування не є обов'язковим. Щоб не порушувати всіх правил, всередині елемента можна помістити таке визначення:

     type=»text/javascript»

     Однією з найприкольніших особливостей сценаріїв є можливість зміни вмісту сторінки в результаті виконання програми. Але це лише особливість, а не правило. За допомогою атрибута defer (який не набуває жодних значень) можна «сказати» браузеру, що таких змін не внесено. У деяких випадках це дозволяє прискорити завантаження сторінки.

     Зі стандартних атрибутів можна використовувати атрибут charset.

     Тег SCRIPT ( або ряд таких елементів) може розташовуватись як всередині елемента HEAD, так і всередині елемента BODY. Якщо сценарій знаходиться всередині елемента BODY, можлива і така ситуація, коли якийсь браузер, який не підтримує елемент SCRIPT, сприйме програмний код як звичайний текст і виведе його на екран. Щоб цього не сталося, код сценарію вводять як коментар:

     —
     —
     —

     Усі сучасні браузери розпізнають цей прийом та ігнорують символи коментаря. Якщо в тексті сценарію потрібно ввести коментар, то для цього використовують інше позначення: на початку рядка вводять два сліші //.
     Програмний код сценарію виконується під час завантаження сторінки, тобто. коли на екрані ще видно її зміст. Нижче наведено приклад найпростішого сценарію ( виведення повідомлення у вікні).

     —
     —
     —
     —
     —
     —
     —
     —

     Це проста сторінка, але вона включає сценарій з одного рядка. За допомогою методу alert перед завантаженням виводиться повідомлення. І воно висітиме доти, доки користувач не натисне на кнопку ОК, завантаження не буде продовжено.
     Можливий випадок, наприклад, сторінка, буде переглядатися в браузері, що не підтримує сценаріїв, для цього передбачений елемент NOSCRIPT. Сучасні програми перегляду ігнорують його вміст. Цей елемент можна використати кількома способами. Для початку, всередині нього можна показати оголошення на кшталт наступного: « Ваш браузер не може виконати сценарій, необхідний для перегляду цієї веб-сторінки!» По-друге, всередині елемента можна розробити спрощену версію сторінки без скриптів. По-третє, можна створити посилання інший HTML-документ. Елемент NOSCRIPT повинен обов'язково мати кінцевий тег.

     Ось ми з Вами розглянули основи такої мови WEB-програмування як HTML. Навіть після прочитання цієї невеликої статті Ви вже маєте уявлення, і навіть можливість програмувати цією мовою. Бажаю удачі!