Для публикации информации и её глобального распространения нужен универсальный язык, понятный для всех компьютеров (браузеров). Именно таким языком, используемым в World Wide Web, является HTML (HyperText Markup Language) - язык разметки гипертекста, структурированный язык, используемый для создания Web-страниц.
HTML описывает структуру страниц с помощью разметки и состоит из буквенно-цифровых символов, называемых элементами, помещенных в угловые скобки. Элемент - это контейнер, содержащий данные и правила его форматирования.
Пример элемента HTML - <div id="mydiv">Это блок текста</div>
| <div id="mydiv"> | Это блок текста | </div> |
| открывающий тег, состоящий из: div - имя тега, id - имя атрибута, "mydiv" - значение атрибута (наличие атрибута необязательно) | содержимое элемента, вместо текста могут быть другие html-элементы | закрывающий тег, такой же как и открывающий, но перед именем тега ставится прямая наклонная черта - слеш или слэш (от англ. slash, косая черта) |
Каждая html страница состоит из подобных элементов
Правила HTML
1. Если у элемента есть закрывающий тег, то он должен быть указан.
2. Имя тега и атрибута не должно содержать пробелы.
3. Значения атрибутов должны быть в кавычках: в парных или одиночных. Например, <div style="color:red">.
4. Элементы не должны пересекаться, но могут быть вложены друг в друга. Например:
<div> <span> Правильно </span> </div>
<div> <span> Не правильно </div> </span>
При невыполнении этих правил, содержимое веб-страницы будет отображено браузером с ошибками в виде перекошенного макета, отсутствия указанного тега или стиля css и т.п.
Кроме указанных выше обязательных правил, есть рекомендации составлять HTML - код придерживаясь синтаксиса XHTML:
- * все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами);
- * если у элемента нет закрывающего тега, надо указать слеш перед закрывающей угловой скобкой;
- * нет минимизации атрибутов, например: вместо <input type="checkbox" checked> (HTML), указывать <input type="checkbox" checked="checked" /> (XHTML).
XHTML (EXtensible HyperText Markup Language) - расширяемый язык разметки гипертекста был разработан как промежуточный этап между HTML и XML.. Проще говоря, XHTML - этот тот же HTML 4.01, но с более строгими правилами к синтаксису.
Cтруктура HTML - документа
Для того, чтобы браузер смог отобразить веб-страницу, у неё должна быть структура со следующей минимальной разметкой:
<!DOCTYPE html ...> - тег, указывающий на тип документа - стандарт версии языка разметки.
<html> - контейнер для следующих двух основных элемента: <head> и <body>
<head>
<title> название страницы и её разделов (важный элемент для поисковой оптимизации)</title>
</head>
<body> - Тело страницы, где находится видимое на экране компьютера её содержание.
</body>
</html>
Это, так сказать, "скелет" любой страницы сайта или шаблон HTML-документа. Скопируйте его в текстовый редактор, добавьте между тегами body какой-нибудь элемент с текстом, сохраните с расширением .html и откройте любым браузером.
Декларация !DOCTYPE
!DOCTYPE с указанием версии помогает браузеру правильно отображать веб-страницы. Хотя пожалуй, правильнее будет сказать - помогало, т.к. с появлением HTML5 достаточно !DOCTYPE html.
Например:
DTD (Document Type Definition, описание типа документа) определяет правила для языка разметки, чтобы браузеры корректно отображали содержимое страниц.
W3C - это сокращение названия Консорциума World Wide Web. Его руководитель Тим Бернерс-Ли (Tim Berners-Lee, родился 08.06.1955) - автор первой интернет-страницы в мире, созданной 6 августа 1991.
Миссия W3C, по их словам, заключается в раскрытии полного потенциала Всемирной паутины посредством разработки протоколов и методических рекомендаций, обеспечивающих развитие Web в долгосрочной перспективе.
Ссылка на стандарт версии языка разметки, также нужна, чтобы проверить соответствует ли ваша веб-страница стандарту W3C. Сделать это очень просто - ввести адрес веб-страницы в валидаторе W3C.
Помните, большинство сайтов в валидаторе покажут ошибки, это связано с использованием атрибутов тегов, CSS свойств, которые не признает, или не знает валидатор, но которые необходимы для воплощения всех тонкостей дизайна, или для взаимодействия JS с элементами страницы.
CSS
CSS (Cascading Style Sheets) - каскадные таблицы стилей. Любая веб-страница это комбинация HTML- и CSS-кодов.
<head>
<title>Титул</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<style>
p,div {text-indent:30px;text-align:justify;line-height:1.5;}
</style>
3. В атрибуте style элемента:
<div> style="text-indent:30px;text-align:justify;line-height:1.5;"> Элемент с внутренним стилем </div>
Браузер читает страницу сверху вниз, поэтому значение одного и того же свойства css будет равным значению, которое указано ниже всех.
Таким образом, приоритет выполнения стилей идет в обратном порядке:
значение свойства css в атрибуте style отменяет значение в теге <style> и файле css;
значение параметра css в теге <style> отменяет значение в файле css.
Например, если в теге <style> для тега div установлен отступ - text-indent в 30px;, а в атрибуте style тега div - 0px, то текст в этом элементе будет отображен без отступа.
| div, #id_div, .class_div | { | color: | red; | } |
| селектор - тег, идентификатор, класс | открытие фигурной скобки | свойство c двоеточием | значение с точкой и запятой | закрытие фигурной скобки |
Синтаксис CSS в атрибуте style отличается только отсутствием фигурных скобок. подробнее о CSS можно узнать здесь
