HTML - 1. Введение в язык



Html – это язык разметки, который описывает веб-документ (веб-страницу).

  • Язык гипертекстовой разметки (Hyper Text Markup Language)
  • Язык разметки – это набор тегов разметки
  • Html документы описываются тегами
  • Каждый тег описывает различное содержимое документа
<!DOCTYPE html>
<html>
    <head>
        <title>Заголовок документа</title>
    </head>
    <body>

        <h1>Заголовок</h1>
        <p>Параграф.</p>

    </body>
</html>

Пояснение по примеру:

  • декларация DOCTYPE определяет тип HTML документа;
  • тег <html>, </html> описывает документ;
  • тег <head>, </head> содержит информацию о документе;
  • тег <title>, </title> - содержит заголовок документа;
  • тег <body>, </body> описывает видимое содержимое страницы (все, что находится в данном теге, отображается на странице);
  • тег <h1>, </h1> оформляет текст в виде заголовка;
  • тег <p>, </p> оформляет текст в виде параграфа.

Теги

HTML теги – это ключевые слова (имена тегов) заключенные в угловые скобки.

<имя тега>наполнение</имя тега>
  • Теги обычно идут парами.
  • Первый тег открывающий, а второй – закрывающий.
  • Закрывающий тег пишется с косой чертой.

Задание

Создайте файл index.html (для этого можно создать текстовый документ и поменять его расширение .txt, но лучше используйте редактор кода. Например Notepad++), добавьте в него код с примера и запустите в браузере.

Визуализация структуры страницы

<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
<p>Ещё один параграф.</p>
</body>
</html>

<!DOCTYPE> декларация

Декларация <!DOCTYPE> помогает браузеру корректно отображать веб-страницу. HTML имеет несколько версий, для каждой версии существует своя декларация.

Виды деклараций.

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">