HTML для чайников

[cordeie]

Собсно, давно хотел изучить это дело. Полезная штука. В принципе, с базой я знаком, кое как написать сайт могу, но всеравно, у меня считай все "интуитивно" т.е я догадываюсь как сделать то, или иное. Но бывает, что скрипт тежелым получается, оптимизация бы не помешала. Кто знает где можно добыть что-то типа "азбуки HTMLа и джаваскипта"

[ved]

Веб-страница

Веб-страницей называется сетевой документ, открываемый в браузере. Обычно веб-страница создается в формате HTML и содержит, как правило, текст, изображения и ссылки. В связи с развитием технологий, веб-страницей также могут называться документы и в другом формате, например, XML, Flash, PDF и т.д.

Сайт (интернет-ресурс)

Cайт — это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

HTML (HyperText Markup Language, язык разметки гипертекста)

HTML — это система верстки веб-страниц, которая определяет, какие элементы и как должны располагаться в документе. Чтобы показать, что мы имеем дело не с обычным текстовым документом, используется термин HTML-документ. Подобные документы открываются под управлением браузера.

HTML-документ

Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.

Браузер

Браузером называется программа для просмотра веб-страниц. Браузер анализирует код HTML, находит специальные символы, называемые тегами, и использует их для отображения изображений, изменения вида текста, создание ссылок на другие веб-страницы и т.д.

Наиболее популярны следующие браузеры: Internet Explorer, Firefox, Opera.

Тег

Тег — это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида. Для обозначения тегов используется символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.

Контейнер

Контейнером называется парный тег, внутри которого могут располагаться другие теги. Контейнер требует закрывающего тега, обозначаемого </тег>. Таким образом, контейнер состоит из открывающего тега (<тег>) и закрывающего (</тег>).

Ссылки (гиперссылки)

Ссылки являются основой сетевых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может указывать не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к файлу, на который делается ссылка, был доступ.

CSS (Cascading Style Sheets, каскадные таблицы стилей)

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

Редактор веб-страниц

Хотя HTML-документ представляет собой обычный текстовый файл и его можно править в любом текстовом редакторе, для этой цели лучше использовать специализированные программы, которые называются редакторами веб-страниц. Такие программы по своему подходу делятся на WYSIWYG-редакторы и HTML-редакторы.

WYSIWYG (What You See Is What You Get; Что видишь, то и получишь)

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

HTML-редактор

Редактор, предназначенный для добавления и изменения кода HTML. В отличие от обычных текстовых редакторов здесь существует подсветка синтаксиса, проверка правильности кода, удобное добавление и редактирование параметров тегов, и многое другое.

Кодировка

Чтобы русскоязычные символы корректно отображались в браузере, их необходимо указывать в определенной кодировке. Браузер понимает, какая кодировка используется в документе, если определенным образом настроен веб-сервер или внутри веб-страницы добавлен соответствующий параметр.

Веб-сервер

Веб-сервером называется компьютер, на котором хранятся документы сайта. Одновременно так же называется программа, которая обеспечивает выдачу документов при их запросе браузером, а также работу с различными сервисами. Наиболее популярными веб-серверами являются Apache и Internet Information Server (IIS).

[ved]

Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые остаются исходными, независимо от вида и направления сайта. Рассмотрим код, который первоначально создается в редакторе Nvu (пример 4.1). Для удобства добавлены номера строк, но в коде их, конечно же, быть не должно, иначе это приведет к ошибке.

Пример 4.1. Исходный код веб-страницы

Код: Выделить всё

01. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02. <html>
03. <head>
04. <meta content="text/html; charset=Windows-1251" http-equiv="content-type">
05. <title>Вторая страница</title>
06. </head>
07. <body>
08. <br>
09. </body>
10. </html>

Далее разберем отдельные строки нашего кода.

01. !DOCTYPE предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы (пример 4.2).

Пример 4.2. Допустимые DTD

Код: Выделить всё

HTML 3.2 (предыдущая версия HTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Строгий HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Переходный HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 при использовании фреймов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок, что обычно приводит к иному отображению документа, чем планировал разработчик. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип использовать предпочтительнее.

Заметьте, что в примере 4.1 не указывается путь к DTD-файлу, как это показано в примере 4.2. Этот параметр не является обязательным и его можно опустить.

Замечание

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании <!DOCTYPE> и без него. Чтобы не произошло подобных ситуаций, всегда добавляйте этот тег в начало документа.

02. Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

03. Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице.

04. Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег с разными параметрами, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Так, чтобы браузер понимал, что имеет дело с кодировкой «Кириллица (Windows)» и добавляется строка, как в примере 4.1.

05. Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера

06. Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.

07. Тело документа <body> предназначено для размещения тегов и содержательной части.

08. Внутри контейнера <body> могут размещаться практически любые элементы веб-страницы, в частности, тег <br>, как показано в примере 4.1, создает перенос строки.

09. Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

10. Последним элементом в коде идет закрывающий тег </html>.