html

Создание HTML документа

В этой статье научимся создавать простейший 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 документа

Здесь присутствуют три обязательных тега: html, head, body. Даже если мы забудем их создать, браузер сделает это за нас.

Вообще, в языке разметки html различают следующие теги:

  • optional — опциональные, т.е. если мы их не поставим, браузер сделает это за нас.
  • forbidden — одиночные теги, т.е. нет закрывающенр тега.
  • empty — пустые теги; все одиночные теги являются пустыми.
  • deprecated — «вымирающие», т.е. в следующей версии html они уже не будут поддерживаться (либо уже не поддерживаются браузерами).

Какие бывают элементы HTML

  • Блочные (например, тег «div») — подстраиваются под область, в которой они стоят.
  • Строчные (например, тег «span») — ведут себя как строки. Внимание! Внутри строчных элементов блочные ставить нельзя. Наоборот можно.



Добавить комментарий

Ваш e-mail не будет опубликован.