Для публикации информации и её глобального распространения нужен универсальный язык, понятный для всех компьютеров (браузеров). Именно таким языком, используемым в 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.
Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- строгий синтаксис HTML: не включает презентационные или устаревшие элементы, фреймы не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">- переходный синтаксис HTML: содержит все элементы и атрибуты, включая презентационные и устаревшие, фреймы не допускаются.
<!DOCTYPE html>- HTML 5, который в отличие от HTML 4.01 не основывается на языке SGML, и, следовательно, не требует ссылку на DTD.
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>
2. Внутри тега <style> </style>, разместив его в заголовке или любом месте странице:
<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 можно узнать здесь
