HTML. Урок 3. Привет, Голос! ????


Основные теги языка разметки HTML, с помощью которых можно даже посты в Голосе писать и украшать, мы уже рассмотрели.

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

Для вашего удобства рекомендую установить программу brackets. В ней очень удобно работать с кодом.

Если вы откроете любую страничку в интернете и нажмете "View page source" ("Показать код документа"), вы увидите типичные для любого сайта элементы.

˂!DOCTYPE HTML˃
˂html˃
˂head˃
˂meta charset="utf-8"˃
˂title>Пример веб-страницы˂/title˃
˂/head˃
˂body˃
˂h1˃Заголовок˂/h1˃
˂!-- Комментарий --˃
˂p>Первый абзац.˂/p˃
˂p>Второй абзац.˂/p˃
˂/body˃
˂/html˃

Создаём простую веб-страничку

Вы уже установили brackets? Тогда запускайте приложение и создавайте новый файл. Сразу сохраните его и назовите, например index.html. Расширение файла .html позволит программе понять, что файл будет содержать html-код.

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



1. ˂!DOCTYPE html˃

Тег !DOCTYPE необходим для того, чтобы браузер мог понять, как ему следует интерпретировать ваш код, так как существует множество версий HTML.

Я буду показывать примеры и рассказывать о HTML5.

Для того, чтобы дать браузеру понять, что мы используем HTML5, необходимо в первой строке вашего файла с кодом.



2. ˂html˃

Между открывающий и закрывающим тегами ˂html˃ будет распологаться всё содержимое вашей странички. Они необязательны, но негласные правила хорошего стиля диктуют непременное их использование.


3. ˂head˃

В "голове" вашей странички должна хранится информация, которая будет помогать браузеру в ее отображении. Например, метаданные, стили, некоторые скрипты и т.д.


4. ˂meta charset="utf-8"˃

С помощью атрибута charset тега meta мы можем задать кодировку документа. Если этого не сделать или сделать неправильно, то отображаться в браузере может "абракадабра".

5.˂title˃

Между открывающим и закрывающим тегами title находится название вашего сайта, то, что будет отображаться в названии вкладки браузера.



6.˂body˃

А "тело" вашей страницы - это то, что должно быть отображено в окне браузера. Основное содержимое вашей страницы.
Напишите в "теле" вашей странички:
˂p>Привет, мир!.˂/p˃
И нажмите на кнопку "Live Preview".



Ваша первая веб-страничка готова.

Можете поэкспериментировать пока сами.

А в следующий раз я расскажу, что такое стили CSS.




















Comments 0


My pageSettingsLogout
Cancel Confirm
100%
Cancel Confirm
Cancel Confirm