01_HTML

Ликбез по HTML
(создание веб-страниц).

Опрос показал, что некоторые из вас уже уверенно владеют HTML и умеют создавать веб-странички.
 * NB: если вы уже хорошо знаете HTML, можете дальше не читать - просто выполните домашнее задание
 * NB: это очень примитивная и устаревшая версия HTML! умееете сделать лучше (например, с CSS) -- сделайте

На этой странице приведена справка лишь о некоторых самых востребованных возможностях HTML - языка верстки веб-страниц, который указывает браузерам, где и как располагать элементы текста, графики и аудио/видео на странице. Об остальных возможностях и тонкостях использования HTML можно узнать из многочисленных справочников и учебников, свободно доступных в Интернете (например: самоучители @http://htmlbook.ru/samhtml по-русски или @http://www.w3schools.com/html/ по-английски). Если вам не хватает какой-то опции, советуем набрать в поисковике "html help" и затем нужное свойство, тег или параметр, например, "html help font size", "html help a href". Продвинутые веб-дизайнеры используют HTML совместно с [|CSS] - форматом поддержания единообразных стилей у элементов по всей страницы и на всех страницах сайта.

Основные блоки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> < html >  < head >  < meta  http-equiv= "content-type"  content= "text/html; charset=utf-8" >  < title <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">> <span style="background-color: #f8f7f2; font-family: 'Courier New',Courier,mono; font-size: 14px;">Это моя страница <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"></ <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">title <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">> <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> </ <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">head <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">> <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> < <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">body <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">> <span style="color: #006699; font-family: Courier New,Courier,mono; font-size: 14px; line-height: 21px;">............... <span style="color: #006699; font-family: Courier New,Courier,mono; font-size: 14px; line-height: 21px;">............... <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> </ <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">body <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">> <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"></ <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">html <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">>

Файл начинается и закрывается тегами <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">, выше располагается объявление для браузера о типе документа (!DOCTYPE): текст в версии HTML 4.01, строгий синтаксис (strict) и т.д. <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> - начало и конец HTML кода. <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> - зона заголовка, там находится заголовок страницы (отображается в шапке браузера) и другая служебная информациия <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> - "тело" страницы, основная зона теста.

Основные теги
<span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">, , ... - заголовки разного уровня, делают шрифт крупным и жирным, делают отступы до и после текста. <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> - границы абзаца <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> - перенос строки <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"><b> - жирный шрифт <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"><i> - курсив <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">, , , - подчеркивание, перечеркивание, верхний регистр, нижний регистр. <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> Списки:

<span style="color: #006699; font-family: 'Courier New',Courier,monospace;"><ul> > <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> <li>пункт 1</li> > <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> <li>пункт 2</li> > <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> <li>...</li> <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> </ul>

Пункты списка с тегом <li> должны находиться внутри тегов <ul>... </ul> (быть вложены). Списки второго уровня можно делать так:

<span style="color: #006699; font-family: 'Courier New',Courier,monospace;"><ul> > <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> <li> > <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> <li> >> <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> <ul> >>> <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> <li> >>> <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> <li> >> <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> </ul> > <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> </li> <span style="color: #006699; font-family: 'Courier New',Courier,monospace;"> </ul>

Подробнее

Теги с атрибутами
<span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> - вставка рисунка: <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"><img <span class="attribute" style="background-color: #f8f7f2; color: #b61039; font-family: 'Courier New',Courier,mono; font-size: 14px;"> src= <span class="value" style="background-color: #f8f7f2; color: #39892f; font-family: 'Courier New',Courier,mono; font-size: 14px;">"myportrait.jpg" <span class="attribute" style="background-color: #f8f7f2; color: #b61039; font-family: 'Courier New',Courier,mono; font-size: 14px;"> border= <span class="value" style="background-color: #f8f7f2; color: #39892f; font-family: 'Courier New',Courier,mono; font-size: 14px;">"0" <span class="attribute" style="background-color: #f8f7f2; color: #b61039; font-family: 'Courier New',Courier,mono; font-size: 14px;"> height= <span class="value" style="background-color: #f8f7f2; color: #39892f; font-family: 'Courier New',Courier,mono; font-size: 14px;">"200" <span class="attribute" style="background-color: #f8f7f2; color: #b61039; font-family: 'Courier New',Courier,mono; font-size: 14px;"> width= <span class="value" style="background-color: #f8f7f2; color: #39892f; font-family: 'Courier New',Courier,mono; font-size: 14px;">"150" <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">> src - название файла-источника (обязательный атрибут), border - указывает толщину рамки (если 0, то границы нет), height и width - размер рисунка.

<span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"><a> - вставка гиперссылки на другую страницу: <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"><a <span class="attribute" style="background-color: #f8f7f2; color: #b61039; font-family: 'Courier New',Courier,mono; font-size: 14px;"> href= <span class="value" style="background-color: #f8f7f2; color: #39892f; font-family: 'Courier New',Courier,mono; font-size: 14px;">"cv.html" <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">> Мое резюме<span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"></a>

<span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> - изменение стиля фрагмента текста: <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"><span <span class="attribute" style="background-color: #f8f7f2; color: #b61039; font-family: 'Courier New',Courier,mono; font-size: 14px;"> style= <span class="value" style="background-color: #f8f7f2; color: #39892f; font-family: 'Courier New',Courier,mono; font-size: 14px;">"color: darkblue; font-size: 14pt; font-weight:bold; font-family: Courier New" <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">> шрифт синего цвета Аргументы стиля могут использоваться также в тегах абзаца и заголовков, это более мощная и универсальная нотация, заменяющая устаревающие теги <i>, <b>, и т.д.

Теги заголовка
<span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> - тег заголовка страницы (отображается в верхней строке браузера), пример см. выше. <span class="keyword" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"> - теги, дающие инструкции браузеру, как читать кодировку файла. Так выглядит указание о кодировке Сyrillic Windows (атрибут charset=windows-1251): <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;"><meta <span class="attribute" style="background-color: #f8f7f2; color: #b61039; font-family: 'Courier New',Courier,mono; font-size: 14px;"> http-equiv= <span class="value" style="background-color: #f8f7f2; color: #39892f; font-family: 'Courier New',Courier,mono; font-size: 14px;">"content-type" <span class="attribute" style="background-color: #f8f7f2; color: #b61039; font-family: 'Courier New',Courier,mono; font-size: 14px;"> content= <span class="value" style="background-color: #f8f7f2; color: #39892f; font-family: 'Courier New',Courier,mono; font-size: 14px;">"text/html; charset=windows-1251" <span class="tag" style="background-color: #f8f7f2; color: #006699; font-family: 'Courier New',Courier,mono; font-size: 14px;">> Кодировка Unicode (UTF-8) обозначается атрибутом charset=utf-8, см. пример выше.

Парные и непарные теги и другие правила
Большинство тегов являются парными, так как обозначают начало и конец зоны разметки (например, ..., ...). Тег конца строки является непарным, иногда его еще обозначают. Некоторые теги (например, теги таблиц, и др.) разрешено не закрывать, так как начало следующего однозначно указывает, закрыт или не закрыт предыдущий.

Теги можно писать как большими, так и маленькими буквами - это неважно ( = <BR>). Значения атрибутов тегов могут стоять как в кавычках, так и без них.

Любое количество пробелов, идущих подряд, в браузере отображается как один. Форматировать текст с помощью пробелов бесполезно. Если очень нужно, можете использовать несколько идущих подряд спецсимволов  (неразрывного пробела): Конец строки, а также отделение блоков текста несколькими пустыми строчками, никак не влияет на конечное изображение - HTML их просто игнорирует. Нет расстановки переносов. Если нет особых указаний, текст идет от левой до правой границы окна и автоматически переносится на новую строку.

===Валидность HTML=== Код страницы должен быть валидным, т.е. все открывающие теги должны иметь парные закрывающие, а пары тегов должны быть вложены друг в друга. Запомните правило контейнеров: если один контейнер вложен в другой, то правый край внутреннего никак не может торчать снаружи, правее края внешнего. Примеры: Вот так! - валидный код, теги ... вложены внутрь тегов ... . <i>Не так! - невалидный HTML, тег <i> не закрыт. ''И не так!  - невалидный HTML, теги ...'' не вложены внутрь тегов ... .

Как просмотреть код веб-страницы?
Код HTML любой страницы в Интернете можно увидеть, нажав Ctrl + U или выбрав в меню команду "Показать исходный код" (в некоторых браузерах ее можно найти в разделе "Инструменты разработчика"). Правда, нужно иметь в виду, что иногда страницы создаются динамически (например, с помощью языка **javascript** или **php**), и тот HTML-код, который вы видите, может быть конечным кодом, который генерируется автоматически. Код страницы можно также увидеть (и отредактировать), скачав страницу и открыв ее в текстовом редакторе.

Для чего мы изучаем основы HTML в начале курса?
В Интернете предлагается множество программ и конструкторов сайтов, облегчающих верстку в HTML. Редакторы типа Word также умеют преобразовывать текстовые файлы пользователей в формат HTML. Однако, можно ожидать, что код HTML этих страниц будет громоздким, в нем будет много лишних тегов. HTML будет валидным, но "тяжелым". Мы редактируем файлы "руками" в текстовом редакторе, чтобы:
 * по шагам разобраться, как работает HTML
 * уметь очищать текст от HTML-разметки (например, при подготовке корпуса)
 * уметь извлекать из текста релевантную (т.е. важную) информацию, опираясь на HTML-теги (кстати, файл, созданный вами в качестве домашнего задания, еще понадобится нам на занятиях - ровно для этой цели).
 * HTML - один из возможных форматов представления текстов в файлах. Поняв его суть, проще разобраться, что такое XML и другие форматы
 * при желании, вы сможете представить свой итоговый проект в виде веб-страницы или даже нескольких связанных страниц.

===Возможные проблемы:===
 * я открываю файл в браузере, и там видны кракозябры, ничего нельзя прочитать
 * я открываю файл в браузере, но там видна вся html-разметка
 * я открываю файл в браузере, но там остались видны некоторые теги
 * страничка выглядит не так, как ожидалось (например, весь текст выделен жирным)

__В браузере видны кракозябры__: браузер не понимает кодировку вашего файла. Простой способ: в браузере в меню настроек выберите пункт "Изменить кодировку" (разделы Разработчикам или Инструменты). Обычно вместо Cyrillic Windows (1251) нужно поставить UTF-8 или наоборот. Кодировка исходного файла видна в текстовом редакторе в нижней строке статуса. Умный способ: добавьте тег meta с кодировкой файла в шапку html-файла. Пример.

__В браузере видна вся html-разметка__: скорее всего, вы (или ваш текстовый редактор) сохранил файл с расширением .txt. В этом случае браузер не понимает, что перед ним html-файл. В проводнике переименуйте файл, дав ему расширение .html. Если расширения файлов в проводнике не видны, измените настройки обозревателя (менеджера файлов).

__В браузере видны отдельные теги__: редактируя файл, вы случайно стерли часть тега (например, угловую скобку). Проверьте в текстовом редакторе, что все теги записаны правильно.

__Странное оформление текста__: редактируя файл, вы забыли поставить закрывающий тег (например, после зоны выделения жирным шрифтом нужно поставить </b>, а после гиперссылки - </a>. Проверьте, что ваш HTML валиден.