Урок 10. HTML с нуля

HTML расшифровывается как HyperText Markup Language, а переводится как язык разметки гипертекста.
Это стандартный язык форматирования документов в Интернете. Рассмотрим HTML с нуля.

Купить книгу можно в интернет-магазине OZON.ru

Посмотрите подборку книг по теме HTML и CSS, выберите и купите

На момент написания статьи есть книга автора сайта htmlbook.ru Влада Мержевича HTML и CSS на примерах

C o p y r i g h t a r u l . r_u
Теперь по порядку. Любой документ состоит из элементов. Элементом может быть что угодно. Любой текст, заголовок или картинка являются элементами.
Что такое разметка? Это схема расположения элементов.

Для того, чтобы браузер понимал, как расположить элементы на странице, нужен язык. Таким языком является HTML.

Основной принцип HTML — последовательный ввод (поток). Этот принцип позволяет не ждать, когда будет загружено описание всего документа, а выводить содержимое по мере его поступления в компьютер.

C o p y r i g h t a r u l . r_u
В дальнейшем будем называть документ, отформатированный на языке HTML, html-документом.

Для построения html-документа используется DOM (Document Object Model — объектная модель документа). Не пугайтесь. Сейчас я объясню, что это такое, и как эта модель описывается с помощью HTML.

Проще говоря, документ — это объект, и каждый элемент в этом документе — тоже объект. Каждый объект имеет свои свойства, а у каждого свойства есть определенное значение.

Представьте себе параграф в тексте. У него есть такие свойства, как ширина, размер шрифта, отступ, выравнивание текста, цвет заливки и другие.
Чтобы правильно отобразить параграф, браузер должен знать, какая ширина, какой размер шрифта, какой цвет и т.д.

Элементы в DOM могут быть вложенными. Внутри одного элемента может быть другой элемент, внутри которого может быть третий и т.д.

В то же время элементы могут располагаться последовательно.

Получается нечто вроде комплекта МАТРЕШЕК. Отличием от матрешки является то, что внутри одного элемента может быть несколько других, в каждом из которых тоже может быть несколько других элементов.


 

Для описания элементов используются тэги. Тэг — это специальная последовательность символов. Каждый тэг имеет название и атрибуты.
Примеры тэгов:

  <div> текст </div>
  <span class="xarxulx"> text </span>
  <img src="urlura.jpg" />
  <meta charset="utf-8">

Тэгом считается информация, находящаяся между символами < и >, если сразу за символом < следует название тэга латинскими буквами (либо знак ! или ?).

Тэги могут быть парные (открывающий и закрывающий) и одиночные.

Открывающий тэг начинается с символа <, за которым сразу следует название тэга без пробела.

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

Одиночный тэг не требует закрывающего тэга, причем перед символом > может быть символ /, символизирующий конец тэга (т.е. не нужно искать закрывающий тэг).

Какие тэги являются парными, а какие нет, необходимо смотреть в спецификации (например, HTML4.0) или справочнике (webref.ru).

Атрибуты тэга записываются в формате свойство="значение" путем перечисления через пробел в интервале между названием тэга и закрывающим символом >

Любой набор символов, не являющийся тэгом, становится элементом Текст.
 

C o p y r i g h t a r u l . r_u
В любом html-документе обязательными являются три элемента, которые обозначаются следующими тэгами:

  <html></html> - сам документ
  <head></head> - голова документа
  <body></body> - тело документа

Голова и тело находятся внутри элемента документ.

Даже если браузер получит просто текст или пустой документ, он автоматически создаст эти три элемента.

 
Любой элемент, находящийся внутри другого элемента, является дочерним. А элемент, содержащий внутри себя другой элемент, — родительским. Дочерние элементы подчиняются родительским и наследуют их стили (свойства форматирования).

Символы < и > являются специальными и, если они не обозначают тэг, их необходимо экранировать, т.е. записывать в виде специальной последовательности &lt; (<),   &gt; (>).
Кроме этих двух, существует много специальных символов, в том числе &amp; (символ &),   &nbsp; (неразрывный пробел). Перечень специальных символов и их обозначений следует искать в справочниках.
 

C o p y r i g h t a r u l . r_u
Элементы по своему расположению могут быть строчными, блочными и табличными.
Строчные элементы последовательно заполняют строку и, если элемент не помещается до конца строки, есть пробел, и не указано особых свойств, то происходит автоматический переход на другую строку.
Блочные элементы могут занимать целую строку или располагаться над другими элементами.
Табличные элементы формируют таблицу.
Все эти особенности вы узнаете постепенно по мере изучения языка HTML и стилей CSS.

 
C o p y r i g h t a r u l . r_u
Пустой html-документ выглядит так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>New page</title>
</head>
 
<body>
</body>

</html>    

Вы можете сохранить его себе в качестве заготовки, либо скачать по ссылке заготовка html-документа.

 
C o p y r i g h t a r u l . r_u
Первой строкой правильного html-документа является

  <!DOCTYPE html>

Эта строка (Conformance Checker) сообщает браузеру о версии HTML, которая использована в документе. Она необходима для совместимости со старыми документами.

Подробнее можно почитать в Википедии HTML (искать DOCTYPE)

Рекомендую использовать эту строку в таком виде, как она приведена выше. И хотя такая запись не утверждена окончательно, ее уже широко используют.

 
C o p y r i g h t a r u l . r_u
Уникальным атрибутом любого элемента является id (идентификатор). Он не обязателен. Но если он есть, его значение не должно повторяться у какого-либо другого элемента.

В html-документе допускаются комментарии, которые игнорируются браузером и необходимы разработчикам в качестве «заметок на полях». Комментарии заключены между символами <!— и —>

  <!-- этот текст не увидит читатель страницы -->

 
Для редактирования html-документа лучше всего использовать редактор Notepad++

Рекомендую для просмотра страниц использовать браузер Firefox. Его можно использовать для проверки вашего кода, если навести мышку на страницу, нажать на правую кнопку и в контекстном меню выбрать Исходный код страницы. Все ошибки в коде будут помечены красным цветом.
Также для проверки своих страниц можно пользоваться Валидатором HTML.
C o p y r i g h t a r u l . r_u
 

Задания:

1. Скачайте и установите себе редактор Notepad++

2. Скачайте заготовку html-документа или создайте сами. Подставляя в документ различные тэги и текст, смотрите браузером, что получается в результате.

Последовательность действий:

сначала

1. Открыть заготовку в Notepad++ — изменить — сохранить
2. Открыть измененный файл браузером.

потом

1. Изменить — сохранить в Notepad++
2. Обновить в браузере F5

3. Добавьте себе в закладки, а потом зайдите на сайт webref.ru, изучите html-тэги

    body,  div,  span,  p,  img,  
    ul,  li,  h1,  h2,  br,  pre

Разберите примеры, постарайтесь понять. Для каждого примера нажмите кнопку «Посмотреть в новом окне».

Используя заготовку html-документа, скопируйте в него пример, сохраните и запустите в браузере.

Меняйте тэги, смотрите, что получается, наматывайте себе на ус.

C o p y r i g h t a r u l . r_u — HTML с нуля

 

  •  
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

5 комментариев к записи “Урок 10. HTML с нуля”

  1. Елена сказал:

    Вот это я понимаю — действительно для чайников. Намного проще написано, чем в одном учебнике, который я пыталась изучить. Буду разбираться. Спасибо.

  2. admin сказал:

    Спасибо! На самом деле, чайников не бывает. Способность разобраться и понять есть у каждого человека.
    Хотелось бы обратить внимание на то, что всю информацию я даю очень сжато. Важно каждое слово. Не все мысли воспринимаются за один раз. Поэтому иногда лучше вернуться к уроку и повторить. В следующих уроках я продолжу тему HTML более глубоко.

  3. Влад сказал:

    Вот тут: http://webref.ru/html/body говорится (в самом конце), что на странице запускается JavaScript. А в коде никаких указаний (

  4. admin сказал:

    Атрибут тэга BODY onload=»alert(‘Документ загружен’)» — это функция, относящаяся к Javascript (вывод сообщения). Если Javascript отключить в браузере, то ничего не произойдет. Уроки по Javascript впереди.

  5. Наталья сказал:

    Урок очень нужный (во всяком случае для меня — все руки не доходят освоить это) и главное написан просто, понятно и без лишних слов. Спасибо, буду потихоньку осваивать.

Оставить комментарий