Продолжаем разговор об HTML. Скажите, часто ли Вам приходилось при загрузке страницы видеть вместо текста, какой-то странный набор символов? Отчего так происходит? Все наши действия – это набор нулей и единиц. Ядро операционной системы преобразовывает наши действия в двоичный код, понятный центральному процессору, и наоборот. Таким образом любой символ, который мы вводим – имеет определённый код. А вот чтобы этот самый код преобразовался в понятный простому человеку вид – программа «использует» специальную таблицу, в которой описывается соответствие определённого символа и числа. Таблицы соответствия определённого символа и числа и называют кодировкой.
Само собой различные языки используют разный набор символов. И если Вы набираете текст на русском языке, а программа почему-то «использует» китайскую таблицу соответствия – мы получаем «кракозябры.» А вот теперь – хорошие новости – мудрые умы объединили кодировки в одну таблицу. Имя её – UTF-8 (Unicode Transformation Format, 8-bit — «формат преобразования Юникода, 8-битный»).
Ранее во многих сайтах использовалась кодировка windows-1251. Windows-1251 – это набор символов и кодировка, являющаяся стандартной 8-битной кодировкой для всех русских версий Microsoft Windows. Была создана на базе кодировок, использовавшихся в ранних «самопальных» русификаторах Windows в 1990—1991 гг. совместно представителями «Параграфа», «Диалога» и российского отделения Microsoft.
В общем если Вы планируете на своём сайте использовать язык, отличный от английского – смело используйте UTF-8. Использовать Windows-1251 в настоящее время как-то странно, и сам консорциум W3 (Вы ведь помните что это за организация из предыдущего урока), рекомендует переходить на Unicode.
И что же мы сейчас сделаем? Ни за что не догадаетесь. Пропишем кодировку в наш код.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Самая первая статическая страничка</title> </head> <body> </body> </html>
Если кодировка не определена в документе то браузер попробует «выбрать» ее сам, что может не соответствовать потребностям Вашего сайта.
Собственно «charset» и переводится как «кодировка.» /> — прямой слэш (ещё говорят косая черта) в данном случае обязателен, Этим символом мы «закрываем» строку записи. А вот что такое «meta»? Сейчас мы столкнулись с особыми мета-тэгами. META-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей. Мэта-тэги размещаются внутри элемента head!
В предыдущих версиях HTML кодировка объявлялась с помощью дополнительных
атрибутов и значений:
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> однако в рамках курса HTML 5 подробно останавливаться на этой записи не буду.
Теперь давайте определим основной язык веб-страницы. Добавим в открывающий тег элемента html атрибут lang и присвоим ему значение:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Самая первая статическая страничка</title> </head> <body> </body> </html>
Понятно, что lang происходит от английского language – язык. Браузеры, программы для чтения с экрана и другие пользовательские агенты применяют атрибут lang для определения языка интерпретации контента. Объявлять основной язык документа – необязательно.
Давайте немного разнообразим страничку. Из прошлого урока Вы помните, что динамические страницы – это такие страницы, где HTML-код генерируется средствами сервера при помощи определённого языка программирования (PHP, ASP, Perl). То есть нагрузка по генерации страницы ложится на сервер. Поэтому говорят: серверные скрипты. Сцена́рный язы́к или скрипт (англ. scripting language, в русской литературе принято название язык сценариев) — высокоуровневый язык программирования для написания сценариев — кратких описаний действий, выполняемых системой. Разница между программами и сценариями довольно размыта. Сценарий — это программа, имеющая дело с готовыми программными компонентами.
Но есть ещё и клиентские скрипты. Вычисления, которые выполняются уже на компьютере пользователя непосредственно. К таким относятся скрипты, написанные на языках программирования JavaScript и Java. Опять же, в рамках курса HTML 5 мы не будем подробно останавливаться на этих понятиях, рассмотрим лишь процесс подключения JavaScript-скрипта к документу.
Скачайте клиентский скрипт ОТСЮДА, после чего положите его в папку site (там у Вас уже должен находиться index.html). Добавьте элемент script в Ваш документ HTML5.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Самая первая статическая страничка</title> <script src="script.js"></script> </head> <body> </body> </html>
Откройте в браузере Ваш index.html. Как Вы видите, теперь у Вас не просто пустая страница, а количество дней до Великого дня – дня Победы.
Важно запомнить, что вычисления времени до Дня Победы подключённый сценарий, написанный на языке JavaScript выполнил силами центрального процессора компьютера пользователя, то есть того ПК, за котором сидите Вы. Таким образом чрезмерное злоупотребление JavaScript’ами на сайте может привести к чрезмерной загрузке центрального процессора компьютера. Страничка станет «дёрганой» при прокручивании, «тяжёлой». Помните – всё хорошо в меру.
Элемент «src» импортирует файл со скриптами из внешнего файла. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ. Грубо говоря при помощи этого элемента мы указываем путь JavaScript’у. Говорят «атрибут src имеет значение script.js.» Поскольку мы положили script.js в ту же папку, что и index.html, то прописываем просто <script src=»script.js»></script>. А если бы мы, к примеру, создали папку include, и положили туда js-файл, то уже писали бы как <script src=»include/script.js»></script>
Следующие мета-теги, который нам нужно прописать – это description (описание) и keywords (ключевые слова). Предназначены они исключительно для поисковых систем, вроде Яндекс и Google. Вот вводим мы в Яндексе, к примеру, «завести хомячка» — нам показывают кучу страниц. Какие-то сайты расположены на первых страницах поисковой выдачи, какие-то в конце. Каждый день поисковой «робот» Яндекса сканирует интернет-страницы, «инлексирует» их. Точный алгоритм его работы изместен совсем не многим, но на поисковую выдачу также влияют и мета-теги description и keywords, ссылки с других сайтов, статьи в блогах о Вашем ресурсе и прочее и прочее.
Поисковые системы проверяют содержимое веб-страницы на соответствие заявленным ключевым словам!
Что касается поля description, то его содержимое отображается при выводе результатов поиска в большинстве случаев. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице. Теперь – к делу.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Самая первая статическая страничка</title> <meta name="keywords" content="HTML, META, метатег, WEB"> <meta name="description" content="Наша первая простенькая страничка"> <script src="script.js"></script> </head> <body> </body> </html>
Кстати, пока нам больше не требуется подключение javascript’а. Но удалять строку мы не будем – мы её закомментируем. Тег добавляет комментарий в код документа, сам текст комментария на странице не отображается. Разрешается внутрь комментария добавлять другие теги, вложенные комментарии (когда один комментарий расположен внутри другого) недопустимы.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Самая первая статическая страничка</title> <meta name="keywords" content="HTML, META, метатег, WEB"> <meta name="description" content="Наша первая простенькая страничка"> <!—JavaScript закомментирован! <script src="script.js"></script> --> </head> <body> </body> </html>
Ну что ж, теперь пора переходить к новым элементам HTML5 в структуре документа.
К новым элементам HTML5 следует отнести: header, footer, nav, aside, section и article. Рассмотрим кратко каждый из них:
- header — используется для хранения заголовков страницы и/или разделов section. Может содержать дополнительную информацию, например логотипы и навигацию.
- footer — содержит информацию о странице и/или разделе section, например информацию об авторе, ссылки на использованные источники, а также сведения об авторских правах.
- nav — включает основные навигационные ссылки на страницы и зачастую содержится в header.
- aside — хранит информацию, связанную с окружающим контентом, но существующую независимо, например на боковой панели.
- section — основной из новых структурных элементов, контент которых может быть сгруппирован тематически или связан между собой.
- article — определяет автономный контент, который может использоваться независимо от страницы в целом, подобно записи в блоге.
Схема структуры следующая:
Примерная схема структуры веб-документа HTML5
Теперь наберём следующий код в Ваш файл.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Самая первая статическая страничка</title>
<meta name="keywords" content="HTML, META, метатег, WEB">
<meta name="description" content="Наша первая простенькая страничка">
<!-- JavaScript закомментирован! <script src="script.js"></script> -->
</head>
<body>
<header>
<img src="images/hamster100x100.jpg" alt="Хомячок" class="top-image">
<h1 class="toptitle">Первая страница</h1>
<nav>
<hr>
<h1>Меню Навигации</h1>
<ul>
<li><a href="page1.html">страница1</a> - </li>
<li><a href="page2.html">страница2</a> - </li>
<li><a href="page3.html">страница3</a></li>
</ul>
<hr>
</nav>
</header>
<aside>
<h1>Левый блок</h1>
<div>
<h2>Хорошие ссылки</h2>
<ul>
<li><a href="http:// makson.ru">Блог пока преподавателя</a></li>
<li><a href="http://gapk.ru">Гусевский Агро. Колледж</a></li>
<li><a href=" http://mebik.ru/ ">Курский ВУЗ</a></li>
</ul>
</div>
<div class="quote">
<h2>Цитаты дня</h2>
<p>"Вот крот, вот хомяк – хрум-хрум, шмяк-шмяк-шмяк!"</p>
</div>
</aside>
<p>Задача этой страницы – отображать
каскадные таблицы стилей (CSS) <br />
Далее следуют случайные элементы.
<ul class="body-list">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</p>
<section>
<h2>Секция 1: Веб-приложения</h2>
<p>Это первая секция нашей страничке.
Добро пожаловать, детишки.</p>
<h3>Ввод</h3>
<p>Это подсекция «ввода».<br />
Она ориентирована на получение данных от пользователей.
<br />Обычно реализовывается через веб-форму.</p>
<h3>Вывод</h3>
<p>Это подсекция «вывода».</p>
</section>
<section>
<h2>Секция 2: Веб файлы</h2>
<p>Вторая часть нашей страничке,
пусть будет предназначена для скачивания файлов.</p>
<h3>Ещё один раздел</h3>
<p>Я пока не придумал для чего эта подсекция.<br>
Будет для рекламы! Заходи на <a href="www.makson.ru">makson.ru</a>
</p>
</section>
<footer>
Здесь наши непоколебимые авторские права!
</footer>
</body>
</html>
Давайте рассмотрим из каких тегов состоит вышеприведённый код.
<img src=»images/hamster100x100.jpg» alt=»Хомячок»>
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Атрибут alt задаёт всплывающую подсказку над изображением.
<h1 class=»toptitle»>Первая страница</h1>
h1 — это заголовок первого уровня. Язык HTML в чистом виде предоставляет 6 заголовков различного уровня, задающих относительную важность для секции с контентом, расположенной после. Считается, что h1 — самый важный заголовок первого уровня, соответственно <h6> — гораздо меньше по размеру и секция, следующая после h6 наименее значима.
А вот атрибут class со значением «toptitle» мы рассмотрим на третьем занятии, которое посвятим каскадным таблицам стилей CSS (Cascading Style Sheets — каскадные таблицы стилей). Сейчас скажу лишь, что благодаря этому атрибуту можно связать определенный тег со стилевым оформлением.
При помощи тега <hr> браузер вырисовывает горизонтальную линию, внешний вид которой зависит как от используемого браузера, так и от используемых дополнительных параметров, о них мы будем говорить позже.
Тег <ul> определяет маркированный список. Каждый элемент списка должен начинаться с тега <li>.
Тег <a> — очень важный элемент, и предназначен он для создания ссылок на другие документы. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход.
<div> предназначен, чтобы выделить фрагмент документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей, вышеназванных CSS. В данном случае никакой стиль не задан.
Теперь попробуйте набрать вышеуказанный код и открыть файл, что увидели? Странную мешанину текста, уж совсем не похожую на структурную схему HTML5. Давайте это исправим, для этого в папке с Вашим index.html создайте папку css и положите в неё ЭТОТ ФАЙЛ (styles.css). После чего создайте папку images в папке с Вашим index.html и отправьте туда ЭТОТ ФАЙЛ с именем hamster100x100.jpg. Ну что ж, осталось подключить styles.css в index.html. Для этого между тэгами <head></head> следует дописать:
<link rel=»stylesheet» href=»css/style.css» type=»text/css»>
Тег <link> устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Атрибут rel со значением stylesheet можно расшифровать как «стильный лист» (styles — стили, sheet — лист). Вообще rel определяет отношения между текущим документом и файлом, на который делается ссылка. Нужно подключить файл стилей — «stylesheet,» нужно подключить шрифт — «fontdef.»
Параметр type=»text/css» является обязательным и служит для указания браузеру использовать CSS.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Самая первая статическая страничка</title>
<meta name="keywords" content="HTML, META, метатег, WEB">
<meta name="description" content="Наша первая простенькая страничка">
<!-- JavaScript закомментирован! <script src="script.js"></script> -->
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<header>
<img src="images/hamster100x100.jpg" alt="Хомячок" class="top-image">
<h1 class="toptitle">Первая страница</h1>
<nav>
<hr>
<h1>Меню Навигации</h1>
<ul>
<li><a href="page1.html">страница1</a> - </li>
<li><a href="page2.html">страница2</a> - </li>
<li><a href="page3.html">страница3</a></li>
</ul>
<hr>
</nav>
</header>
<aside>
<h1>Левый блок</h1>
<div>
<h2>Хорошие ссылки</h2>
<ul>
<li><a href="http:// makson.ru">Блог пока преподавателя</a></li>
<li><a href="http://gapk.ru">Гусевский Агро. Колледж</a></li>
<li><a href=" http://mebik.ru/ ">Курский ВУЗ</a></li>
</ul>
</div>
<div class="quote">
<h2>Цитаты дня</h2>
<p>"Вот крот, вот хомяк – хрум-хрум, шмяк-шмяк-шмяк!"</p>
</div>
</aside>
<p>Задача этой страницы – отображать
каскадные таблицы стилей (CSS) <br />
Далее следуют случайные элементы.
<ul class="body-list">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</p>
<section>
<h2>Секция 1: Веб-приложения</h2>
<p>Это первая секция нашей страничке.
Добро пожаловать, детишки.</p>
<h3>Ввод</h3>
<p>Это подсекция «ввода».<br />
Она ориентирована на получение данных от пользователей.
<br />Обычно реализовывается через веб-форму.</p>
<h3>Вывод</h3>
<p>Это подсекция «вывода».</p>
</section>
<section>
<h2>Секция 2: Веб файлы</h2>
<p>Вторая часть нашей страничке,
пусть будет предназначена для скачивания файлов.</p>
<h3>Ещё один раздел</h3>
<p>Я пока не придумал для чего эта подсекция.<br>
Будет для рекламы! Заходи на <a href="www.makson.ru">makson.ru</a>
</p>
</section>
<footer>
Здесь наши непоколебимые авторские права!
</footer>
</body>
</html>
Ну а теперь попробуйте открыть Ваш index.html. Что-то получилось? Тогда ждём следующую заметку о каскадных стилях.
