Также как и все счастливые семьи – все HTML- документы довольно похожи. Среди миллиардов страниц в интернете есть нечто общее – структура простейшего html-документа. Вот о ней и расскажу. Кто предпочитает формат лекций – добро пожаловать на просмотр по ссылке видео, а кто любит комбинировать – комбинируйте! 
HTML-ДОКУМЕНТ это сочетание контента( текста, картинок, аудио и видео) и тегов- специальных конструкций, рассказывающих, как все это отображать. Это, если грубо. Для того, чтобы браузер( программа для просмотра таких документов) мог отличить теги от текста – они заключены в <>.
В любой интернет-странице Вы найдете такие теги:
<!DOCTYPE html> <!-- Объявление формата документа --> <html> <head> <!-- Техническая информация о документе --> <meta charset="UTF-8"> <!-- Определяем кодировку символов документа --> <title>...</title> <!-- Задаем заголовок документа --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей --> <script src="script.js"></script> <!-- Подключаем сценарии --> </head> <body> <!-- Основная часть документа --> </body> </html>
Разберем сию абракадабру подробнее.
Строчка
<!DOCTYPE html> определяет при помощи каких правил браузер должен отображать веб-страницу,
т.е. версию html и какоЙ dtd-файл использован при кодировке.
Обычно это выглядит так:
<!DOCTYPE HTML PUBLIC “-//W3C//9TD HTML 4.01//EN'”
“http://www.w3.org/TR/html4 /strict.dtd”>
В рамки тега <html> содержатся все остальные теги.
Браузер воспринимает как конструкции htm для распознавания все, что внутри <html>…</html>, это старший тег в иерархии.
Здесь есть практически обязательные теги, по крайней мере никогда не видел страниц без них. Так вот, внутри <html> всегда есть тег head, соответственно конструкция из открывающего и закрывающего тегов: <head>…</head>. Внутри содержится техническая информация о сайте, не отображаемая на страницах, но очень важная.
Это заголовок страницы, ее описание, ключевые слова для поисковиков, кодировку и т.д. Заголовок прячется внутри тегов <title></title>, очень много информации прячется за тегом <meta>, кстати он одинарный и закрывающий тег с косой чертой не требуется.
Через тег <meta> может передаваться много параметров- естественно, и тег будет не один. Обычно это
<meta name=”description” content=”Описание содержимого страницы”>
<meta name=”keywords” content=”Ключевые слова через запятую”>
Описание и ключевые слова можно указывать на разных языках, например
<meta name=”description” lang=”ru” content=”Описание содержимого страницы”>
<meta name=”description” lang=”en” content=”Description”>
<meta name=”keywords” lang=”ru” content=”Ключевые слова через запятую”>
<meta name=”keywords” lang=”en” content=”Keywords”>
Также можно разрешить или запретить индексацию страницы, и запретить или разрешить переход по ссылкам, делается это с помощью команд
<meta name=”robots” content=”index, follow”>
Соответственно индексация разрешена, переход по ссылкам тоже или так
<meta name=”robots” content=”index, nofollow”>
Тогда все это запрещено, зачем это все отдельный и не короткий разговор. Можно установить автоматическую перезагрузку страницы через определенное количество секунд
<meta http-equiv=”refresh” content=”30″>
Можно перебросить пользователя на другую страницу командой
<meta http-equiv="refresh" content="0; url=http://yandex.ru/">
Далее обычно появляется тег <style>, здесь место для указаний стилей, используемых на странице, это может быть один стиль, несколько, например так
<style type=”text/css”>
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
или указание на файл со стилями – стилевую таблицу, где стилей собрано множество. Однако указание на стилевую таблицу оформляется в теге <link>, он не требует закрывающего тега и выглядит обычно так:
<link rel=”stylesheet” href=”style.css” type=”text/css”>
за href указывается путь к стилевой таблице.
Место тегу <script>. Он указывает на подключаемый джава-скрипт и выглядит обычно так:
<script type=”text/javascript” src=”http://www.yk.com/wp-content/themes/charmer/js/dropmenu.js”></script>
Адрес безусловно какой-то другой.Иногда, если скрипт короткий, то указывается его текст. Как-то так
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘UA-37317284-1′, ‘auto’);
ga(‘send’, ‘pageview’);
</script>
Дальше располагается тег <body>, где содержится информация, которая будет отражена на странице. Про теги, которые внутри <body>, про стилевые таблицы, про скрипты написано много умных и весьма толстых книг. У меня получилось сделать короткий и емкий курс, который позволит научиться делать первые интернет-страницы.
Для начала все мои страницы начинались просто с шаблона, который и прилагаю.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>HTML5</title>
<style>
article, aside, details, figcaption, figure, footer,header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Привет, мир</p>
</body>
</html>
Загрузка...