HTML 5 часть 1. Введение.

htmlНу что ж, пришло время оправдывать статус «пока ещё преподавателя,» и начать цикл небольших уроков. Вы спросите почему пока ещё? Ну так избавиться от назойливого «препода» сейчас так просто, пару докладных и «давай, до свидания.» А учитывая, что я что-то уже стал не выдерживать на последних парах, повышать голос и семантически подбирать грубые эпитеты — чувствую уже скоро. 🙂

Но тем не менее, продолжим. Сама структура записей будет представлять собой сначала разъяснения теоретического материала, после чего последует пошаговая инструкционная карта.

Начинать будем с самых азов, а именно с определения, что же такое HTML. HTML (HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов в Интернете.  Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. Проще говоря — особая разметка, позволяющая создать статическую веб-страницу. HTML не является непосредственно языком программирования, поскольку никаких циклов в себя не включает. Сразу определимся, что мы понимаем под статической Интернет-страницей.

Статическая страница это страница, в которой не происходит непосредственной генерации кода, только статическая разметка.

Пример, вот есть такой сайтик Вконтакте, доступ к которому я с великой радостью заблокировал в ГАПК’е.  Тысячи людей заходят на этот ресурс, вводят свои учётные данные, и, не смотря на то, что все они находятся на одном сайте — у каждого формируется свой личный кабинет, своя личная страничка. То есть HTML-код генерируется в зависимости от условия.Такие страницы называют динамические. Генерация HTML происходит средствами языков программирования PHP, реже ASP, и ещё реже Python на стороне сервера, а сам браузер (программа для просмотра Интернет-страницы — Internet Explorer, Mozilla Firefox, Opera и т.д.) получает уже готовый документ и отображает пользователю.  Можете нажать правой кнопкой мышью по любому из сайтов и выбрать «просмотр кода страницы» или «просмотр html-кода» — вот так «видит» страничку непосредственно программа, это и есть html-код.

Так в чём же создавать сайт? Существует множество визуальных редакторов, вроде Adobe Dreamweaver, Kompozer и т.д., позволяющих «визуально» разрабатывать дизайн сайта. Однако генерируемый код этими программами зачастую далёк от стандартов W3.  Консорциум Всеми́рной паути́ны (англ. World Wide Web Consortium, W3C) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Часто бывает, что в Goggle Chrome сайт выглядит нормально, а в программке Internet Explorer 6.0 — «сикось-накось.» Происходит это, как правило, по тем причинам, что или разработчик страницы стандартам не следовал, или сам браузер вводит какие-то свои, специфические стандарты в разметку, чем особо грешили версии Internet Explorer с 6-ю по 7.

Сейчас, конечно, уже «все, всё поняли,» так что современные версии браузеров соответствуют стандартам W3 в полной мере. Браузер попытается отобразить страницу в любом случае, неважно соответствует она стандартам или нет! Существуют специальные сервисы для проверки, например http://validator.w3.org/ Проверим через него главную страницу gapk.ru и makson.ru — зелёный цвет, ошибок не найдено, полное соответствие стандартам.

Ну и ещё момент, человек, который начинает с визуальных редакторов — часто не понимает, что он делает. Так что мы будем заниматься непосредственно со структурным кодом. Отдельно стоит выделить Системы Построения Сайтов (Content management systemCMS), или «движок сайта.»  Это информационные системы , используемые для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым). Проще говоря набор уже готовых программ для быстрого создания сайта. По большому счёту в этом случае знания языков не требуются, всё уже создано за нас. Особо останавливаться на данном вопросе в рамках курса HTML не будем, скажу ли, что если нужно быстро поднять портал для предприятия — используйте CMS. Рекомендую WordPress, Joomla или ModX — это законченные продукты с колоссальным сообществом. Вы думаете у меня было время разрабатывать как следует makson.ru? Нет, конечно, используется WordPress.

А вот для gapk.ru изготавливали уникальную систему, за что отдельное спасибо Юрию Петровичу Хабарову, а также уже закрытому проекту fullajax.ru. Как показало время — может и зря, времени на поддержку этой структуры нет, а вот Вордпресс или Джумла обновляются сами в один клик.

Так что всякие разработки, которые поддерживают три с половиной человека, вроде какой-нибудь Slaed CMS, лучше обходить стороной, конечно, если Вы сами не сильны в PHP.

Так зачем же знать эти основы, когда уже всё сделано? Во-первых эти знания ооочень пригождается при администрировании сайтов (а у меня на балансе их около 5),  во-вторых часто приходится сталкиваться с заказами сервисов совсем простых, для внедрения которых ставить целую CMS как-то странно, к тому же под неё нужно будет писать тот модуль, который нужен заказчику. С нуля сделать порой гораздо проще. Ну что ж, давайте ещё раз проверим на валидность через http://validator.w3.org/ какой-нибудь сайт, например chat.ru. В самом сервисе валидатора нажмём на выпадающий список напротив слова «Doctype» (где написано detect automatically), внушительный списочек, правда? Это и есть утверждённые стандарты для интернет-страниц. Как Вы уже поняли из названия, мы с Вами будем изучать один из самых современных стандартов — HTML5.

Что нам для этого понадобится?

  • Во-первых хороший РЕДАКТОР КОДА. Конечно, можно использовать и стандартный блокнот Windows. Но вот я уже заходя в магазин не вижу ценника на продукте, а выписать очки — это целый квест, пойди в больничку, отбейся от вечно охраняющих её злых бабулек, доберись до врача в день солнцестояния, когда он не пьёт чай, добеги до оптики, найди кузнеца, который выточит линзы.. В общем я пока не готов носить очки. Редактор должен бесплатным (сейчас нам платный ни к чему) и с хорошей подсветкой синтаксиса. Синтаксис — сторона языка программирования (в нашем случае языка разметки), которая описывает структуру программ как наборов символов (обычно говорят — безотносительно к содержанию). Синтаксису языка противопоставляется его семантика. Синтаксис языка описывает «чистый» язык, в то же время семантика приписывает значения (действия) различным синтаксическим конструкциям. Для наших целей отлично подойдёт Notepad++ (под Линукс можно запустить через эмулятор Wine). Пожалуйста, скачайте его отсюда http://notepad-plus-plus.org/download/v6.5.3.html Это действительно просто потрясающая программа и нам хватит её на весь курс основ HTML5.
  • Во-вторых современный браузер для проверки страниц. Поскольку Windows XP с Internet Explorer’ом 6-и всё же явление распространённое, скачайте,  примеру Mozilla Firefox, или Opera или Google Chrome, можно и всё вместе, дабы проверять сайт в разных браузерах (http://www.opera.com/ru/computer/windows ,  http://www.google.ru/intl/ru/chrome/browser/ , http://mozilla-russia.org/)
  • Во-третьих нам нужен растровый графический редактор (напоминаю растровый редактор — это где изображение строится точками (Paint, Photoshop, Gimp) при увеличении изображения качества картинки может ухудшиться, векторный — изображение хранится в памяти в виде математических формул, формируются — линиями (Corel Draw, Inskape). При увеличении изображения качество не ухудшается, однако браузеры не способны отображать векторную графику).   Можно использовать Gimp (и под Linux и под Windows). А можно и Photoshop, причём совершенно легально!! Компания Adobe раздаёт версию CS2 и я рекомендую всё же Photoshop а не Гимп.

Подробнее об акции невиданной щедрости можно прочесть здесь: http://habrahabr.ru/post/164977/

Официальный ответ от Adobe примерно такой:
«Из-за технического сбоя сервера активаций CS2 и Acrobat 7 были отключены. Данные продукты вышли более 7 лет назад и не работают на большинстве современных ОС. Чтобы наши клиенты могли при необходимости воспользоваться данными продуктами мы выпустили универсальный ключ активации для них. Хотя это и может выглядеть как раздача CS2 всем желающим, мы это сделали для того чтобы помочь нашим клиентам.» Комментарий с Хабра: «Как по мне так они сказали примерно следующее — «Ну пользуйтесь раз уж скачали, мы же не можем уже с этим ничего сделать.»

Скачать официальную версию можно отсюда http://www.adobe.com/downloads/cs2_downloads/index.html

Если проблема с регистрацией, тогда с яндекс-диска http://yadi.sk/d/ZApndqydHA6QB

Также размещаю любопытный ролик (видео не моё).

Ну что же, давайте создадим папку site. Теперь давайте вспомним, как операционная система определяет в какой программе открывать тот или иной файл? По расширению. У каждого файла после названия стоит точка, после которой идут какие-то символы. Это и есть расширение. По умолчанию (то есть без вашего согласия, по «заводским» настройкам) расширения не отображаются. Давайте их включим. Для этого нажмите Пуск — панель управления — свойства папок (для Windows 7 в панели управления, возможно, нужно будет нажать «классический вид», для Windows 8, где нормальный пуск по космическим причинам отсутствует, читаем ЭТОТ ПОСТ).

Когда Вы открыли свойства папок, перейдите на вкладку Вид, там уже снимите галочку с пункта «Скрывать расширения для зарегистрированных типов файлов.»  Я всегда работаю с включенным расширением, правда, если переименовании файла Вы его сотрёте — операционная система не «поймёт» с какой программой ассоциировать файл.

Теперь давайте откроем Notepad++ (Пуск — Все программы — Notepad++ — Notepad++). Теперь в верхнем меню выберите Синтаксис — H — HTML. Notepad++ редактор настолько умный, что способен подсвечивать синтаксис большого количества языков программирования. Нам же сейчас нужен только HTML, об этом мы и «сказали» редактору.

Теперь наберите следующий код:


<!DOCTYPE html>
<html>
<head>
<title>Самая первая статическая страничка</title>
</head>
<body>
</body>
</html>

Теперь давайте разберёмся с этим кодом. Первое, что прописывается в HTML-документе — это так называемый !DOCTYPE (<!DOCTYPE html>). !DOCTYPE — это директива, необходимая для уведомления браузера о том, в соответствии каким стандартам сверстан HTML-документ. Это необходимо, чтобы браузер понимал, согласно какому стандарту отображать текущую страницу. Ведь существует много версий (X)HTML и как раз с помощью DOCTYPE мы сообщаем браузеру, какая именно версия использовалась при написание нашей страницы.

Например для стандарта HTML 4.01 это будет <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>. Для XHTML transtitional — <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>. Подробнее о стандартах можно прочесть здесь http://webcareer.ru/kakoj-doctype-vybrat.html.

Вторая строка — это особый тэг <html>.

Теги — это метки, которые Вы используете для указания браузеру, как он должен показывать ваш web-сайт.

Все теги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком sign «>».

Обычно имеются два тега — открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш «/».

Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тега.

Н, как говорится, из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти теги не содержат текста, а являются метками, например, перенос строки выглядит так: <br />.

Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы. 

Следующий тег — <head> (голова). Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Теперь сохраните документ в созданной папке site под именем index (index.html, если у Вас активировано отображение расширений). Файл — сохранить как… Когда Вы открываете сайт, браузер прежде всего ищет файл idnex.html/index.php и подгружает именно его. Таким образом, если не стоит какая-либо хитрая переадресация, файл index.html является главной страницей сайта!

Теперь попробуйте открыть сохранённый файл, Вы ничего не увидите в браузере, за исключением заголовка. Думаю, для первой темы достаточно. Потом ещё напишу.

Вы можете следить за ответами к этой записи через RSS 2.0 ленту.Вы можете оставить ответ, или архив с вашего сайта.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *