Простая вёрстка в HTML. Урок №2.

* 25-12-2013, 11:38 * A_Protasov * Комментариев: 0

Рейтинг:

Простая вёрстка в HTML.  Урок №2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Простая вёрстка в HTML</title>
</head>
<body>
<center><h1>Hello world!</h1></center>
</body>
</html>

Перед нами обычный код пустой HTML шаблон (HyperText Markup Language — «язык гипертекстовой разметки» англ.), с одной лишь надписью «Hello world!»  Или «Привет Мир!». Если открыть эту страницу в браузере, то из всего кода мы увидим только эту надпись. Зачем тогда все остальное скажете вы? Если браузер видит только это? Именно это мы и постараемся, а точнее и разберём с вами в этом уроке.  Что бы нам с вами было легче продолжать наше обучение, предлагаю сделать следующее. На рабочем столе создайте папку и назовите её, к примеру «Простая вёрстка в HTML». Теперь скопируйте вышеуказанный код, откройте наш редактор «Notepad++», и в пустой (new) документ вставьте его. Далее откройте пункт меню «Файл», выберете сохранить, или сохранить как.  Найдите вашу ново созданную папку «Простая вёрстка в HTML», откройте её, в поле «Имя файла» впишите «index», без кавычек, а в поле тип файла выбрейте «html» и нажмите сохранить.

Рисунок №1.

Простая вёрстка в HTML.  Урок №2.

Как видим наш, код приобрёл цвет, значит, сделали все правильно. Теперь откройте пункт меню «Запуск», из выпадающего списка выбрейте браузер, которым вы хотите открыть файл, например «Firefox».

Рисунок №2.

Простая вёрстка в HTML.  Урок №2.

В открывшемся окне мы увидим, ту самую надпись «Hello world!». А теперь давайте разберем, по порядку, что и как происходит и для чего столько лишнего кода.

Что видит браузер?

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

В самом начале нашей страницы, мы видим вот такой код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">. Это так называемый элемент  “DOCTYPE”, который говорит браузеру, какой документ и с каким расширением ему предстоит прочесть. Более подробную информацию прочтите здесь

«DOCTYPE. Для чего и как он устроен?»

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

Следующим у нас идёт парный тег  <head> (от англ. Голова, руководитель). Как было сказано это парный тег и поэтому он имеет свойства закрываться </head>.  Согласно переводу, этот тег соответствует своему названию, поскольку он образует некий контейнер, с указаниями для браузера, и содержимом станицы, или для целого сайта.  Так, например мы видим мета-тег <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">, который говорит браузеру, какую кодировку мы используем на данной странице, что бы тот понимал, как её отображать, в нашем случае это русская кодировка windows-1251. В дальнейшем мы с вами ещё будем использовать, некоторые мета-теги, для ключевых слов, описания сайта, подключение стилей и так далее, а пока пойдем дальше. Как правило, между тегами <head> хранится информация, которая не видна простому посетителю сайта, но некоторые элементы он все же отображает. В нашем случае мы видим некий парный тег <title>, что в переводе с английского означает «название». И действительно, между этим тегом мы прописываем название страницы, или имя (не доменное) сайта, которое пользователь видит в открывшийся вкладке.

Следующим этапом нашей странички мы видим парный тег <body>. Body, в переводе с английского означает «тело», или «основная часть», именно здесь и находится вся та информация, которую мы хотим показать пользователю.  Для примера я вставил между тегами <body>, надпись Hello world! И она становится видимой при запуске страницы в браузере. По умолчанию если надпись не чем не обозначена, браузер отобразит её в левом углу и со стандартным размером шрифта (16 px). Но в данном случае, наша надпись заключена в парный тег <h1>? Который говорит браузеру, что это заголовок, этот тег является самым большим из стандартных заголовков, его следует использовать только при оглавление и не просто использовать, а использовать обязательно. Если размеры оглавления будут портить дизайн вашей странички, то их можно уменьшить, как это сделать мы ещё поговорим, но оглавление должно быть заключено только, в тег <h1>, это прихоть поисковых систем и роботов, от которых в дальнейшем зависит индексация вашего веб ресурса и его продвижение.  Ну а дальше я захотел вывести надпись по центру страницы и заключил все это дело в парный тег <center> который и без перевода говорит о своем назначение, то есть отображать содержимое по центру.

Пожалуй, на этом все сегодняшний урок закончен, в следующем уроки мы начнем подготовку к созданию каркаса нашей странички. И так до встречи в следующем уроке «Простая вёрстка в HTML.  Урок №3».


razdacha.jpg

Просмотров: 5 404
Последние новости блога
Бесплатный видео-курс «Писарь».
Данный видео-курс «Писарь» - это абсолютно бесплатный комплекс, состоящий из восьми уроков общей продолжительностью 120 минут.1.Кто такой фрилансер и где его найти?В первой части
Ссылка в новом окне (window.open).
Большинство веб-мастеров знают, как открыть ссылку в новой вкладке, для этого используется следующий код: <a href="http://сайто-строитель.рф" target="_blank">Ссылка в новой вкладке</a>
Понятия слова «Теги». Основные теги в HTML.
Каким браузером вы пользуетесь, Google Chrome, Internet Explorer, Mozilla Firefox, или Opera? В прочем это не важно. Все они программы для чтения и отображения веб документа, а точнее то, что вы
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru