Мова програмування HTML
Однією з спеціалізованих мов програмування є HTML.
HTML -Розробка користувацьких інтерфейсів для веб-сайтів. (Мова розмітки для розробки веб-сайтів).
Практичні заняття з керівництвом по HTML, CSS, JavaScript, SQL, PHP, jQuery та ін., можна знайти ось тут:
З чого починається HTML
Кожний HTML-документ повинен починатися з декларації типу документа або «доктайпа». Тип документа потрібен, щоб браузер міг визначити версію HTML і правильно відобразити сторінку.
Наприклад, для старої версії HTML 4.01 доктайп виглядає так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
А для останньої версії HTML уже набагато простіший:
<!DOCTYPE html>
Останню версію HTML ще називають HTML 5. Но так як ця версія вже прийнята як стандарт і розповсюджена практично всюди, ми будемо називати її просто HTML.
Структура HTML-сторінки
Найпростіша HTML-сторінка складається як мінімум з таких тегів.
Тег <html> — це контейнер, в якому знаходиться вміст усієї HTML сторінки, включаючи теги<head> і <body>. Як правило, тег <html> іде в документі другим після доктайпа.
Тег <head> призначений для зберігання інших елементів, ціль яких — допомогти браузеру в роботі з даними. Вміст цього тегу не відображаються напряму.
Тег <body> призначений для зберігання вмісту веб-сторінки (контенту), що відображається у вікні браузера.
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- Вміст сторінки -->
</body>
</html>
Заголовок HTML-сторінки
Заголовок сторінки — це текст, який відображається в лівому верхньому куті браузера, а також у вкладках.
Щоб задати заголовок сторінки, необхідно використати тег <title> всередині тега <head>. Наприклад, ось так:
<head>
<title>Урок — HTML </title>
</head>
Тип кодування HTML-сторінки
Тип кодування HTML-сторінки необхідно вказувати для того, щоб веб-браузер міг правильно відображати текст на сторінці. Якщо браузер неправильно «вгадає» тип кодування, то замість тексту будуть відображатися ієрогліфи.
Щоб повідомити браузеру тип кодування HTML-сторінки, необхідно всередині тега <head> використати тег:
<meta charset="тип кодування">
Найбільш розповсюджено тип кодування — utf-8. Рекомендується використовувати його в усіх своїх проектах.
Для кирилиці в Windows charset часто задавали як windows-1251. Проте зараз це рахується поганою практикою.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кодування HTML-сторінки</title>
</head>
<body>
<h1>Тип Кодування</h1>
<p>Правильно задавайте кодировку документа</p>
</body>
</html>
Ключові слова
Якщо ціле сімейство тегів <meta>, називаються мета-тегами. Їх можна використовувати всередині тега <head>.
Мета-теги розрізняються набором атрибутів і їх значень, ось деякі з атрибутів: content,http-equiv, name і scheme.
Мета-теги зберігають корисну для браузерів і пошукових систем інформацію. Один з таких тегів — це опис ключових слів сторінки. Задаєтеся він так:
<meta name="keywords" content="різні, ключові, слова">
В атрибуті content через кому перераховуються самі важливі слова зі змісту сторінки. Раніше цей тег був дуже важливим для пошукових систем. Як на даний момент – це невідомо.
Опис вмісту сторінки
Ще один корисний для пошукових систем мета-тег — короткий опис сторінки. Він задається так:
<meta name="description" content="короткий опис сторінки">
В атрибуті content повинен бути короткий зміст або анотація сторінки. Він часто використовується пошуковими системами при відображенні результатів пошуку.
HTML-коментар
Коментарі в HTML-коді задаються так:
<!-- любий текст -->
Текст всередині коментаря не відображається браузером на сторінці. Коментарі зазвичай використовують в таких випадках:
Для коментування коду. Завжди корисно залишити підказку.
Для тимчасового відключення кода. Видаляти код незручно, так як його потрібно буде відновлювати, а закоментувати і потім розкоментувати — самий кращий варіант.
Коментарі можна використовувати в будь якому місті сторінки, крім тега <title> — всередині цього тега вони не працюють.
HTML теги
HTML теги є основою мови HTML. Кожен тег несе в собі певну інформацію, може описувати документ загалом або спосіб форматування тексту. Весь вміст веб-сторінки задається за допомогою тегів.
Тег поміщається в кутові дужки <тег>. Найчастіше для тега задається парний закриваючий тег, але в деяких випадках він відсутній. Інформація, укладена між відкриває і закриває тегом, називається його контейнером.
У запропонованій таблиці наведено повний список тегів, підтримуваних HTML4 і HTML5. Нові теги, додані в специфікацію HTML5, виділені жирним кольором. ТАБЛИЦЯ (HTML Теги)
Додатково:
Існує багато інструментів для верстання веб-сторінок.
Редактори для верстання веб-сторінок є двох типів: візуальні (наприклад: Adobe Dreamweaver) і текстові (наприклад: Notepad++).
завантажити програму Notepad ++
Візуальні редактори не вимагають знань html, css та інших технологій для розмітки сторінок. У візуальному редакторі різні елементи сайту розташовуються, неначе на листі паперу, а редактор пише код самостійно. Саме тому візуальні редактори ще називають WYSIWYG-редакторами.
Проте, жоден візуальний редактор не є досконалим і всі вони так чи інакше є обмеженими за своїми можливостями, тому від професійних кодерів потрібне уміння писати код руками, саме тому професійним кодерам потрібні текстові редактори. У цих редакторах пишуть код своїми руками. У текстових редакторах, як правило, бувають різні функції що полегшують кодеру написання коду, такі, як підсвічування коду (так легше бачити, де в коді вставлені стилі, або скрипти, а де просто текст), різні гарячі кнопки і клавіші, які вставляють вже готові конструкції (фрагменти коду, спецсимволи) в код, і т.п.