Структура HTML страницы

HTML – язык разметки гипертекстовых документов… но, по сути, это один из языков программирования, который используется для создания веб-страниц. Именно с помощью тегов (команд), мы можем задавать размещение на странице определенных элементов (блоков, текста, графических элементов, таблиц…), можем задавать им разные стили оформления и реализовывать гиперссылочную структуру, характерную для интернет-ресурсов различного уровня.

Что должен понять браузер, прочитав такой документ?

<html> – начало документа…
<head> – тут будет основная служебная информация о документе… ее не надо показывать всем, надо использовать при работе…
<title> – название страницы
</title> – все название закончилось…
</head> – ага и служебная информация закончилась
<body> – “тело” документа всё что написано ниже будет отображаться в окне браузера
<br> – следующий текст начать с абзаца
</body> – ну вот и все, больше выводить на экран нечего…
</html> – конец документа! Заботу закончили!

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

<html> – открывающий тег

</html> – закрывающий тег

Но, не все теги парные, к примеру команда перехода на новую строку<br> не нуждается в паре.

Как сделать так, что бы увидеть результат в браузере?

  1. Открываем программу “Блокнот” или Notepad++ и вводим текст программы. Если Вы выбрали Notepad++, не забудьте установить правильную кодировку (UTF-8), выбрав соответствующий раздел меню, в противном случае вместо русских букв на экране появятся иероглифы.
  2. Сохраняем как файл с расширением html (файл – вохранить как… – вводим имя и расширение). Обратите внимание именно вводим и имя и расширение, не ищем готовые варианты, как мы привыкли это делать с Word.
  3. Находим сохраненный только что файлик в папках нашего компьютера и открываем его двойным щелчком (по умолчанию открывается браузером).
  4. Наслаждаемся результатом. Да, на сайт пока не очень похоже… но это самое начало. И Ваш небольшой прогресс – собственноручно написанная веб-страничка.

Результат:

102Пока это белый экран… О том, как сделать его красочным и интересным, читайте в следующих уроках.

 

Comments are Closed