Краткая история разметки
Tim Berners-Lee разработал язык разметки гипертекста (HTML) в 1989 году. К этому времени Интернет уже существовал, но у него был серьёзный недостаток: переход от одного обособленного ресурса к другому был очень трудным. Тим справился с этой проблемой, придумав две технологии: HTTP (протокол передачи гипертекста) и HTML (Hypertext Transfer Protocol)
HTML — связующий язык Всемирной паутины. С помощью простых тегов, которые содержит этот язык, род человеческий сумел сумел создать ошеломительно разнообразную суть документов, связанных между собой гиперссылками — от Amazon, eBay и Wikipedia до личных блогов и страничек, посвященных котикам, похожим на Гитлера.
HTML5 — последняя интеграция (на данный момент разрабатывается HTML6).
Как и собственно веб, гипертекстовый язык разметки был детищем Тима, который в 1991 году составил документ под названием HTML Tags, предложив в нём около 20 элементов, которые можно было использовать для написания веб страниц.
Не сэр Тим придумал использовать теги, состоящие из слов в угловых скобках; такие теги уже существовали в формате SGML (стандартный обобщённый язык разметки). Вместо того, что бы изобретать новый стандарт, сэр Тим увидел все преимущества того, что бы разрабатывать язык как надстройку к уже существующему стандарту, — эта тенденция заметна и сейчас, в разработке HTML5.
От IETF до W3С: путь к HTML4
Такой вещи, как HTML1, никогда не было. Первой официальной стала спецификация HTML2.0. Многие из пунктов появились в данной спецификации потому, что они существовали на практике. Например, лидировавший на рынке браузер Mosaic уже в 1994 году позволял авторам веб-страниц вставлять в документы картинки с помощью тега <img>. В последствии элемент img появился в спецификации HTML2.0.
Во второй половине 90-х появился целый шквал исправлений в спецификации, пока в 1999 году не была наконец опубликована спецификация HTML4.01.
XHTML1:
HTML по правилам XML
Cледующая после HTML4.01 версия языка называлась XHTML1.0. X значило eXtensible, расширяемый.
Содержимое XHTML1 было совершенно идентично спецификации HTML4. Не было добавлено никаких новых элементов и атрибутов. Единственная разница заключалась в том, что XHTML требовал следовать правилам гораздо более строго языка разметки.
Введение более строгих правил было не так уж и плохо. Это способствовало тому, что авторы документов стали придерживаться общего стиля написания.
Публикация стандарта XHTML1.0 совпала с началом поддержки CSS в браузерах. По мере того, как веб-разработчкики стали принимать появившиеся стандарты, более строгий XHTML стал рассматриваться, как передовая практика в написании разметки.
XHTM2: терпению пришёл конец
С точки зрения W3C разработка HTML закончилась на версии 4. Они начали работать на XHTML2, который был спроектирован так, что бы привести веб к светлому будущему, основанному на XML. И хотя название XHTML2 звучало достаточно похоже на XHTML1, между ними не было ничего общего. В XHTML2 не предусмотрено обратной совместимости с существующим веб-содержимым и даже с предыдущими версиями HTML.
Наступила полная катастрофа.
Раскол:
WHATWG?
(Web Hypertext Application Technology Working Group)
Внутри W3C назрело восстание. Со стороны казалось, что консорциум формулировал теоретически чистые стандарты, никак не связанные с нуждами веб-разработчиков.
Конфликт перещёл в критическую фазу в 2004 году. Была предложена идея расширения HTML с целью сделать возможным создание веб приложений. Недовольные повстанцы организовали свою собственную группу: рабочую группу по разработке гипертекстовых приложений для веба.
От веб-приложение 1.0
к HTML5
C самого начала WHATWG стала работать совершенно не так, как W3C. В теории процесс W3C выглядел более демократичным, но на практике подход WHATWG, где кто угодно мог внести своё предложение или мнение, всё двигалось быстрее. Сначала основной объём работы в WHATWG был разбит на две спецификации:
Web Forms 2.0 и Web Apps 1.0. Обе спецификации должны быть расширениями для HTML. Со временем они объединились в одну — HTML5.
XHTML умер:
да здравствует
синтаксис XHTML
Туман неразберихи начал рассеиваться в 2009 году. W3C объявил, что договор на XHTML2 не будет продлён. Формат был мёртв уже несколько лет, и это объявление стало только официальным свидетельством о смерти.
В то же время авторы, которые писали на XHTML1, стали волноваться, что HTML5 будет означать возвращение в небрежной разметке. Как вы скоро увидите, это не обязательно. Вы можете писать на HTML5 и небрежно, и строго — как захотите.
Развитие HTML5
Текущее состояние HTML5 не такое запутанное, как было когда-то, но всё равно не до конца понятно. Пожалуй, самая сбивающая с толку проблема для тех, кто пробует кончиком ноги воду HTML5, — ответ на вопрос "когда он будет готов?"
Ян Хиксон в интервью сказал, что HTML5 получит статус предложенной рекомендации в 2022 году.
Та дата, которая действительно имеет значение для HTML5, — 2012 год. В этом году спецификация должна была стать кандидатом на рекомендацию.
Не будет никакого чёткого момента, когда мы могли бы объявить, что язык готов к использованию. Однако, мы можем начинать использовать части спецификации по мере того, как браузеры начинают поддерживать эти функции.
Ян Хиксон несколько раз говорил, что настоящие судьи в споре того, что окажется в HTML5, а что нет, — разработчики браузеров. Если разработчики браузера откажутся поддерживать какое-либо предложение, нет смысла добавлять это в спецификацию, иначе она окажется фиктивным документом. Согласно приоритету голос веб-разработчиков имеет ещё больший вес. Если мы откажемся использовать какую-либо часть спецификации, это так же сделает её фиктивной.
Помните, что HTML5 — это не новый язык, созданный с нуля. Это скорее эволюционное, чем революционно изменение в продолжающейся истории разметки. Если сейчас вы создаёте сайт на любой версии HTML, вы уже используете HTML5.
SublimeText 3
packagecontrol.io/installation
Emmet
CSScomb
BracketHighlighter
Общие понятия HTML
Элемент — основа построения сайта. Название элемента помещается в угловые скобки, полученное выражение называется тегом. <p>элемент</p>
Атрибут — позволяет указать различные способы отображения информации, добавляемой с помощью одинаковых элементов.
<p class="newClass">элемент с атрибутом</p>
Структура HTML
DOCTYPE HTML4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE XHTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOCTYPE HTML5
<!DOCTYPE html>
Элемент HTML
<html> </html>
Оборачивает содержимое всего документа
Элемент HEAD
<head> </head>
Информация внутри head не отображается в браузер, а помогает ему в обработке страницы.
Элемент META
<meta charset="UTF-8">
Используется для хранения дополнительной информации о странице.
Кодировка.
Элемент TITLE
<title>моя страница</title>
Название веб-страницы.
Элемент LINK
<link rel="stylesheet" type="text/css" href="s.css">
Подключение файла с таблицами стилей к документу.
Элемент BODY
<body> тело документа </body>
Внутри данного элемента располагается сам документ. Весь текст, помещённый в BODY будет отображаться браузером.
Элемент DIV
<div> </div>
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей.
Комментарии
<!-- текст комментария -->
Комментарии могут располагаться в любом месте страницы, так какони не отображаются браузером.
Селекторы
Селекторы — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.
Class
<div class="meClass"> </div>
По существу, классы позволяют нам расширять структурную логику веб-документа в тех случаях, когда определенных в стандарте элементов не хватает для описания реалий нашего конкретного документа.
<!DOCTYPE HTML>
<html>
——<head>
————<meta charset="UTF-8">
————<title>Пример документа</title>
————<link rel="stylesheet" type="text/css" href="s.css">
——</head>
——<body>
————<h1>Заголововк</h1>
————<p>Некий текст</p>
——</body>
</html>
Элемент h1 — h6
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка.
Элемент p
<p> </p>
Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей.
Элемент span
<span> </span>
Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль.
Элементы ul и ol
<ul> </ul>
<ol> </ol>
Тег <ul> устанавливает маркированный список. Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>.
Элемент li
<li> </li>
Тег <li> определяет отдельный элемент списка.
Элемент a
<a href="google.com"> google </a>
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход.
Элемент img
<img src="URL" alt="альтернативный текст">
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>.
ОТ CSS к CSS3
CSS
Это широкий спектр технологий, который одобрен консорциумом WЗС и получил такое название, как «Web Стандарты». В 1990 г. возникла необходимость стандартизировать их в какие-то определенные единые правила, благодаря которым веб-дизайнеры и программисты проектировали бы сайты. Именно так и появились такие языки, как XHTML, HTML 4.01 и стандарт CSS.
CSS(Cascading Style Sheets) с английского переводится как каскадные таблицы стилей, — это язык, который используется как средство оформления web-страниц, а именно для работы с шрифтами, цветами, полями, таблицам, картинками, расположением элементов.
Первое упоминание о CSS было в 1994 году, когда Хоком Виум Ли предложил использовать CSS (Каскадные таблицы стилей) для стилистического оформления web-страниц. У него не сразу получилось продвинуть свою технологию, — только через пару лет ему удалось привлечь внимание к CSS. Итак, 17 декабря 1996 года опубликована первая спецификация (CSS1) и она была рекомендована к использованию Консорциумом Всемирной паутины (W3C).
После небольшого успеха положение дел у технологии CSS пошли куда лучше и 12 мая 1998 года (через 2 года) была принята рекомендация W3C для CSS2. Следующим этапом была CSS 2.1 — версия W3C от 8 сентября 2009 года, она была построена на базе CSS2, и была работой над исправлением существующих ошибок.
До того, как появился CSS, оформление web-страниц могло осуществляться непосредственно внутри содержимого документа, появление же технологии CSS дало возможность разделению содержания и представления документа. Благодаря этой возможности стало реальным простое применение единого стиля оформления для большинства подобных документов, и стало доступно быстрое изменение их оформления. Использование CSS в разработке сайтов имеет свои плюсы и минусы.
Синтаксис
div {
——color: #000;
——margin: 10px;
——width: 500px;
}
Комментарии
/* текст комментария */
div {
——width: 300px;
——height: 500px;
}
px | % | vh | vw | em
div {
——border: 5px solid #000;
}
border-style: dotted | dashed | solid | double | groove | ridge
div {
——margin: 30px;
——padding: 10px;
}
px | % | vh | vw | em
h1 {
——color: #000;
}
#000
rgb(0,0,0)
rgba(0,0,0, 0.3)
black
div {
——opacity: 0.5;
}
h1 {
——font-family: Georgia, 'Times New Roman', Times, serif;
——font-size: 24px;
——font-style: italic;
——font-weight: 900;
}
size: px | % | em | pt
style: normal | italic | oblique
weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
h1 {
——text-align: center;
——text-decoration: underline;
——text-transform: uppercase;
}
text-align: left | center | right | justify
decoration: blink | line-through | overline | underline | none
transform: capitalize | lowercase | uppercase
div {
——background: #000;
}
background-color: red;
background-image: url(images/bg.jpg)
background-repeat: no-repeat | repeat | repeat-x | repeat-y
background-position: left | center | right | top | center | bottom | значение
background-size: | cover | contain | значение
background-attachment: fixed | scroll
deck
By Polina Shchukina
deck
- 849
