HTML Урок 1.1. Структура и история языка HTML

Цель урока: рассмотрение хронологического развития версий языка HTML. Изучение структурных элементов языка и основных тегов.

История версий html

Историю развития версий языка HTML можно рассмотреть на изображении:

версии HTML

Структурные элементы языка

  • Единицей языка HTML является тег — команда, заключенная в угловые скобки.
  • Теги бывают открывающие (запускающие действие команды) и закрывающие (останавливающие действие команды, соответственно).
  • Закрывающий тег отличается наличием прямого слэша /.
  • Команды тегов распространяются на их содержимое:

html-элемент

  • Целиком пара открывающий-закрывающий тег называется элементом или контейнером.
  • Помимо элементов, которые содержат и открывающий и закрывающий тег, есть пустые элементы, в которых содержание как бы отсутствует, и, соответственно у них нет закрывающего тега. Хотя на самом деле их содержанием является сам открывающий тег.

Пример пустых элементов:

<img/>
<br/>

Пример html-документа с разъяснениями:

пример html-страницы

Еще пример HTML-страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
 
...Служебная информация...
 
</head>
<body>
<h1>Мой первый HTML документ</h1>  
<hr>      <!-- горизонтальная линия -->
<p>Некоторый текст. Основное содержание текущей страницы. Первый абзац
<p>Второй абзац. Для форматирования текста используют разные
элементы языка HTML.</p>    <!–- абзац -->
</body>
</html>

На языке html комментарии ставятся при помощи символов

<!-- содержание комментария строчного-->
<!-- содержание 
             комментария 
                     блочного-->

Такой комментарий может быть как строчным, т.е. занимать одну строку документа, так и блочным, занимающим несколько строк.

Важно: Для того, чтобы не было проблем с кодировкой символов, необходимо указать тип кодировки в области head (т.е. после открывающего тега head — головная часть документа)
кодировка в html

Элементы могут быть вложены друг в друга, тогда это выглядит примерно вот так:

<p>Это <em>очень</em> интересно</p>

Схематично родительские теги и вложенные (дочерние) выглядят так:
html вложенные теги

Блочные и строчные элементы

Все элементы языка html делятся на строчные (inline) и блочные (block). Строчные элементы отличаются тем, что они позволяют разместиться на «своей» строке следующим за ними элементам (позволяют «встать» рядом).

Тогда как блочные элементы займут всю строку, не «пуская» на нее следующие  за ними элементы. Схематично это выглядит так:
блочные и строчные элементы

Поделитесь уроком с коллегами и друзьями:
One Comment

    FARID 12YEARS OLD

    Спасибо большое нигде не понимал,а здесь понял)))УДАЧИ!!!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить