Lecaw

Учимся создавать Web-сайты

Основы HTML

HTML (Hyper Text Markup Language) означает язык разметки гипертекста. Этот язык был разработан Тимом Бернерсом-Ли в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Документ на языке HTML может включать следующие компоненты:

Сначала идет doctype. В любом создаваемом документе HTML необходимо, прежде всего, создать объявление DTD. Если вы никогда не слышали, чтобы кто-то упоминал раньше об объявлении DTD, не беспокойтесь. Чтобы упростить ситуацию его часто называют " doctype " ("тип документа"), как оно и будет называться до конца этой лекции.

Чтобы отобразить неотформатированный текст, достаточно просто ввести его между тегами начала и конца документа <body> </body>. При обработке такой страницы браузер найдет и выведет весь этот текст. Если необходимо, чтобы к тексту было применено какое-либо форматирование, например, выделение полужирным или курсивом, необходимо использовать соответствующие теги форматирования. При этом форматируемый текст помещается между тегами.

Гипертекстовые ссылки необходимы для соединения с другими документами в Web. Для их записи используется тег <a>, который называют "якорь" (аnchor).

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

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

В этой лекции мы поговорим о вещах, которые делают дизайн Web привлекательным — об изображениях. К концу этого курса вы узнаете, как добавлять в Web-документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта), и как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы. Можно загрузить используемые в этой лекции файлы примеров отсюда (http://dev.opera.com/articles/view/17-images-in-html/code.zip) — я использую эти файлы в ходе изложения учебного материала.

Все видели формы. Все заполняли формы. Но кодировали ли вы форму?
Форма в сети является любой областью на странице Web, где можно ввести информацию, например, ввод текста или чисел в текстовом поле, постановка флажка, установка радио-кнопки, или выбор варианта из списка. Форма затем, после нажатия на кнопку отправки, посылается на Web-сайт.
Использование форм в Web встречается повсеместно, для ввода имен пользователей и паролей на экране регистрации, комментарии в блоге, заполнение профиля на сайте социальной сети, или сообщение информации для счета на сайте магазина.

Немаловажную роль играет фон, используемый на сайте. Хороший фон может существенно улучшить внешний вид Web-сайта, а при неправильном подборе цветовой схемы читаемость ваших страниц значительно ухудшится, что вызовет негативные ощущения у посетителей сайта. И у них не возникнет желания вернуться сюда еще раз. Рассмотрим все вышеизложенное на примере. В первом примере представлено хорошее сочетание фона и текста, а во втором наоборот, комбинация, использование которой совершенно не рекомендуется.

В этой статье я собираюсь объяснить, как и когда использовать в HTML два элемента, которые не используются для описания контента. Элементы span и div фактически не соответствуют никакому значению контента, который они охватывают; вместо этого они являются базовым механизмом, который позволяет создать специальную структуру или объединить в группы элементы, где не подходит в действительности никакой другой элемент HTML, и затем оформить это некоторым стилем с помощью CSS или выполнить манипуляции с помощью JavaScript. Хотя элементы div не добавляют никакого семантического значения, они могут рассматриваться, как представляющие структурное разбиение разметки, вместе с соответствующим семантическим классом или именем ID.

Итак, вы написали несколько страниц HTML, и они, кажется, выводятся нормально, но имеется несколько не совсем правильных вещей. Как лучше всего начать поиск того, что неправильно, и гарантировать, что эти страницы (и написанные в будущем страницы) будут выводиться правильно в различных браузерах, без каких-либо ошибок?