Вы установили Notepad++, запустили и видите, что новый файл создается автоматически. Теперь создадим в этом файле каркас нашей HTML страницы. Каркас мы самостоятельно писать не будем, потому что он от страницы к странице не меняется, и при этом он содержит довольно громоздкий код, который не нужно держать в голове и который создается из какой-то основы. Скопируйте этот текст:
<!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=utf-8">
<title>Документ без названия</title>
</head>
<body>
</body>
</html>
Первым делом обратите внимание, что когда фаил изменился, дискетка в левом углу вкладки загорелась красным – это значит что фаил изменился, но небыл сохранен. Сохраните фаил, для быстрого сохранения лучше использовать сочетание клавиш ctrl+s (для сайта рекомендуется создать отдельную папку и назвать ее “HTML”) и дайте ему название intex.html.
Запомните что главная страница ВСЕГДА называется index.html. Когда мы набираем название сайта без указания нужной страницы, сервер отправляет нам именно index.html, поэтому мы назвали нашу страницу именно index.html.
Теперь перейдем к разбору каждой строки.
Cтрока !DOCTYPE
Cтрока <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> указывает браузеру на тип документа.
!DOCTYPE - можно перевести как тип документа.
Далее мы говорим браузеру что наш документ создан на языке HTML, указываем версию - 4.01 и подверсию – Transitional. Если вам интересно можете почитать http://htmlbook.ru/html/!doctype, здесь вы можете почитать всю информацию про DOCTYPE.
http://www.w3.org/TR/html4/loose.dtd - этот адрес направляет браузер на спецификацию html. Сильно можно не заморачиваться с этой строчкой, она указывается всего раз и учить ее не нужно.
Дальше начинается самое интересное. Далее идет каркас из HTML-тегов.
Что такое HTML-тег?
Тег – это конструкция языка, которая указывает браузеру, что нужно делать. Какие-то теги говорят браузеру, что нужно отобразить абзац, какие-то – что нужно отобразить заголовок, какие-то – что нужно сделать таблицу, т.е. с помощью тегов мы программируем действия браузера.
Тег <html>
Первый такой тег – это тег <html>, обратите внимание, как пишется тег – сначала идет открывающая скобка, название тега и закрывающая скобка, также обратите внимание, что в самом низу есть тег </html> (такой же тег но уже со слешем) – это закрывающий тег. Здесь важно понимать, что есть одинарные теги а есть парные теги, в данном случае мы видим классический пример парного тега. Тег <html> является контейнером для всех остальных тегов.
Запомните, что любой HTML код должен находиться внутри контейнера <html>.
Тег <head>
Следующий тег – тег <head> он также является контейнером и содержит внутри себя два других тега.
Почему head? Head в переводе с английского –голова.
Ниже вы видите тег <body>, body – это тело. Любой HTML код содержит как форматирующие теги, так и специальные.
Что такое форматирующие теги?
Форматирующие теги – это теги, которые отвечают за абзацы, заголовки, картинки и т.д. Они создают видимую часть страницы – все, что видит пользователь. На самом деле нужны еще теги которые будут говорить браузеру в какой кодировке сделана страница, какой у нее должен быть заголовок, какие таблицы стилей должны подключаться, какие скрипты должны подключаться. Это две такие группы тегов – одна форматирующая, а другая вспомогательная, которая осуществляет работу всей страницы.
Область <head>…</head> предназначена для всех вспомогательных тегов, а область <body>…</body> - для всех форматирующих.
Контейнер <head>
Начнем мы с первого тега <meta>, который отвечает за кодировку.
Вообще тег <meta> многогранный, и может отвечать не только за кодировку как в данном случае, но и за многие другие вещи. Пока мы углубляться в тег <meta> не будем, для этого у нас будет отдельный урок попозже, когда вы уже втянитесь в язык HTML. Сейчас это может вас только запутать.
Здесь у нас есть указатель charset=utf-8 –который говорит браузеру что данный документ создан в кодировке UTF-8.
Для чего нужна кодировка?
Ни для кого не секрет что у нас в мире говорят и пишут на разных языках. Если мы с вами создаем и пишем страницу на русском языке, то немец будет писать на немецком, а японец вообще будет писать такими символами, которых у нас даже на клавиатуре нет! Поэтому раньше если мы писали на каком-либо языке, то нам нужно было указывать в кодировке, что мы пишем именно на этом языке. Когда мы заходили на страницу, браузер сразу понимал, на каком языке написан сайт и какой язык для текста используется на этом сайте и соответственно пытался отобразить контент в зависимости от этой кодировки. К сожалению это не всегда получалось. Когда мы заходили на какие-нибудь китайские, арабские и т.п. сайты, у нас вместо их символов отображались черные квадраты, знаки вопроса и т.д. браузер просто не понимал что это за символы. Для решение этой проблемы была создана универсальная кодировка – UTF-8. С того момента как она вошла в обиход и стала стандартом, отпала необходимость указывать кодировку для конкретного языка. Достаточно указывать эту универсальную кодировку – UTF-8, и у вас сайт будет нормально отображаться во всех браузерах и при этом упрощается работа еще и с базой данных.
Имейте ввиду что мы всегда будем указывать эту универсальную кодировку – UTF-8.
Здесь есть один подвох – что-бы браузер правильно отображал страницу в этой кодировке должен быть и сам документ. В Notepad++ на панели инструментов есть такой пункт - кодировки. Здесь если у вас не стоит «Кодировать в UTF-8 (без BOM)» то щелкните пункт «Преобразовать в UTF-8 (без BOM)». В этом случае у вас документ будет преобразован в UTF-8 (возможно загорится красная дискета, просто сохраните файл) и в правом нижнем углу вы увидите, что ваш документ ANSI as UTF-8 в кодировке Dos\Windows – это будет означать что ваш документ создан в режиме UTF-8 и отображение у вас будет нормальным.
Совет:
зайдите в настройки и во вкладке «Новый документ» поставьте что-бы ваши документы сразу создавались в кодировке UTF-8 без метки BOM.
Тег <title>
Title в переводе с английского – заголовок. Здесь указывается название страницы, которое будет отображаться во вкладке браузера. Давайте назовем нашу HTML-страницу – «Моя первая страница», сохраним наш документ и посмотрим как это выглядит в браузере. В Notepad++ на панели инструментов есть пункт «Запуск» и выберите запуск в каком-нибудь браузере. Вот он нам пишет – «Моя первая страница» во вкладке и в заголовке браузера, т.е. то что мы указали в <title> у нас здесь отобразилось. Как вы видите – видимая часть у нас пустая, также как и блок <body>, который у нас пока пуст, который отвечает за форматирующие теги , за то что видит пользователь.
Каркас мы с вами создали, разобрали с вами что такое DOCTYPE, разобрали теги-контейнеры <html> и <head>, тег <meta> который, в данном случае, отвечает за кодировку и тег <title> который отвечает за название страницы. На этом мы с вами остановимся, увидимся в следующем уроке.
