В этой статье научимся создавать простейший html документ с использованием удобной программы.
В чем создавать HTML документы? Для этого на начальном этапе лучше всего использовать текстовый редактор Notepad++. Свежую версию можно скачать на официальном сайте www.notepad-plus-plus.org.
Структура HTML страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Пример HTML страницы</title> </head> <body> <h1>Мой первый HTML-документ</h1> <hr> Это абзац. </body> </html>
В угловые скобки заключены теги. У них есть имена (body, h1, p, head). Теги бывают парные: открывающие (например, body) и закрывающие со слешем (например, /body). Когда браузер находит эти теги в тексте, он формирует html элементы (с таким же именем, что и теги). В итоге визуально у себя на мониторе мы видим html-элементы.
Также есть одиночные теги. Когда элементы формируются с помощью одиночного тега, им закрывающий тег не нужен, он даже запрещен.
Объявление «!DOCTYPE»
Разберем строку в самом начале html документа:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN" "http://www.w3.org/TR/html4/strict.dtd">
Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие фреймы.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
Документы, использующие такое объявление типа документа, включают все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиеся к визуальному оформлению.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd">
Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также фреймы.
Схематически структуру html документа можно изобразить так:
Здесь присутствуют три обязательных тега: html, head, body. Даже если мы забудем их создать, браузер сделает это за нас.
Вообще, в языке разметки html различают следующие теги:
- optional — опциональные, т.е. если мы их не поставим, браузер сделает это за нас.
- forbidden — одиночные теги, т.е. нет закрывающенр тега.
- empty — пустые теги; все одиночные теги являются пустыми.
- deprecated — «вымирающие», т.е. в следующей версии html они уже не будут поддерживаться (либо уже не поддерживаются браузерами).
Какие бывают элементы HTML
- Блочные (например, тег «div») — подстраиваются под область, в которой они стоят.
- Строчные (например, тег «span») — ведут себя как строки. Внимание! Внутри строчных элементов блочные ставить нельзя. Наоборот можно.
