→ Пошук по сайту       Увійти / Зареєструватися
Знання HTML — мова розмітки гіпертексту

Вивчення HTML та XHTML

Компетенція Робота з HTML

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

Введение в HTML

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

Быстрый старт

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

Инструментарий

Для эффективной работы не обойтись без необходимых и привычных инструментов, в том числе и при написании кода HTML.

Теги

Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются теги.

Теги

Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются теги.

Парные теги

Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег.

Правила применения тегов

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

Значение параметров

Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров и применяются параметры тегов.

Структура HTML-кода

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

Типы тегов

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

Теги верхнего уровня

Эти теги предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа.

Теги заголовка документа

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

Блочные элементы

Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Встроенные элементы

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

Универсальные элементы

Особенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или встроенные элементы.

Списки

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

Таблицы

Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления табличных данных.

Фреймы

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

Значения параметров у тегов

Параметры тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы.

Цвет

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

Размер

В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах...

Адрес

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

Текст

Для изменения вида текста существует достаточно большое количество различных тегов.

Особенности текста в HTML

Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом...

Абзацы

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

Заголовки

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

Выравнивание текста

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

Начертание

Жирное начертание. Курсивное начертание.

Верхний и нижний индекс

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

Спецсимволы

Для отображения символов, которых нет на клавиатуре применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;).

Ссылки

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

Ссылки

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку.

Абсолютные и относительные ссылки

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.

Виды ссылок

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

Параметры ссылок

Основной параметр href тега <a> мы уже освоили, рассмотрим еще несколько полезных, но необязательных атрибутов этого тега.

Ссылка на адрес электронной почты

Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты.

Якоря

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

Изоображение

Добавление изображения происходит в два этапа: вначале готовится графический файл желаемого размера, затем он добавляется на страницу через тег <IMG>. Сам HTML предназначен только для того, чтобы отобразить требуемую картинку, при этом никак ее не меняя.

Форматы файлов

Широкое распространение для веб-графики получили два формата — GIF и JPEG. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт веб-изображений.

Добавление рисунка

Для добавления изображения на веб-страницу используется тег <img>, параметр src которого определяет адрес графического файла.

Альтернативный текст

Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений

Изменение размеров рисунка

Для изменения размеров рисунка средствами HTML у тега <img> предусмотрены параметры width (ширина) и height (высота). В качестве значения используются пикселы, при этом аргументы должны совпадать с физическими размерами картинки.

Списки

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

Маркированный список

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

Нумерованный список

Нумерованные списки представляют собой набор элементов с их порядковыми номерами.

Список определений

Список определений состоит из двух элементов — термина и его определения.

Таблицы

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

Создание таблицы

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

Параметры тега <table>

Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию параметров тегов <table>, <tr> и <td>

Параметры тега <td>

Каждая ячейка таблицы, задаваемая через тег <td>, в свою очередь тоже имеет свои параметры, часть из которых совпадает с параметрами тега <table>.

Особенности таблиц

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

Выравнивание таблиц

Для задания выравнивания таблицы по центру веб-страницы или по одному из ее краев предназначен параметр align тега <table>. Результат будет заметен только в том случае, если ширина таблицы не занимает всю доступную область, другими словами, меньше, чем 100%. На самом деле align не только устанавливает выравнивание, но и заставляет текст обтекать таблицу с других сторон аналогично поведению тега <img>.

Объединение ячеек

Для объединения двух и более ячеек в одну используется параметр colspan тега <td>. Он устанавливает, сколько ячеек следует объединить по горизонтали. Аналогично работает и параметр rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan="3"> заменяет три ячейки, поэтому в следующей строке должно быть три тега <td> или конструкция вида <td colspan="2">...</td><td>...</td>.. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки.

Вложенные таблицы

Объединение ячеек имеет некоторые недостатки, поэтому этот метод создания таблиц нельзя использовать повсеместно. Для примера рассмотрим ...

Заголовок таблицы

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

Фреймы

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

Достоинства и недостатки фреймов

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

Создание фреймов

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

Ссылки во фреймах

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

Границы между фреймами

Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии.

Изменение размеров фреймов

По умолчанию размеры фреймов можно изменять с помощью курсора мыши, наведя его на границу между фреймами.

Плавающие фреймы

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

Полосы прокрутки

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

Теги

Ответы по теме Теги

Структура HTML-кода

Ответы на вопросы для проверки.

Типы тегов

Ответы на вопросы и задания

Текст

Ответы на вопросы и задания.

Ссылки

Ответы на вопросы и задания

Изображения

Ответы на вопросы и задания.

Якоря

Ответы на вопросы и задания

Списки

Ответы на вопросы и задания.

Таблицы

Ответы на вопросы и задания.

Фреймы

Ответы на вопросы для проверки.

Валидация

Валидацией будем называть проверку документа на соответствие веб-стандартам и выявление существующих ошибок. Соответственно, валидным является такой веб-документ, который прошел подобную процедуру и не имеет замечаний по коду. Код веб-страницы должен подчиняться определенным правилам, которые называются спецификацией, ее разрабатывает W3 Консорциум (www.w3c.org) при поддержке разработчиков браузеров.

Зачем нужна валидация

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

Проверка данных на валидность

Для проверки веб-страниц на наличие ошибок и замечаний существует множество путей и способов. Условно они делятся на онлайновые и локальные. Онлайновые предназначены для проверки страниц с помощью браузера через Интернет, а локальные используются для проверки документов на текущем компьютере.

Написание корректного кода

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

Исправление ошибок

Большинство ошибок, возникающих при валидации кода можно свести к набору типовых вариантов, зная которые легко понять, на что «намекает» валидатор. В качестве образца возьмем расширение HTML Tidy для браузера Firefox, предназначенное для проверки кода и рассмотрим список ошибок и замечаний по коду.

XHTML

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

Что такое XHTML

XHTML (EXtensible HyperText Markup Language, Расширенный язык разметки гипертекста) предназначен для замены HTML и считается его более строгой версией. Вообще,W3C определяет XHTML как последнюю версию HTML, которая постепенно его вытеснит. Так ли это будет обстоять на самом деле, покажет только время.

Структура XHTML-документа

Любой XHTML-файл состоит из четырех разделов — <!DOCTYPE>, контейнера <html>, заголовка (<head>) и тела документа (<body>). Последние два элемента перекочевали из HTML и ничем не отличаются от своего родоначальника .

Синтаксис XHTML

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

Основні поняття розділу[Приховати / показати]

!DOCTYPE</body></тег><A>ALIGNalt<B>BGCOLOR<BIG><BLOCKQUOTE><body>BORDER<BR><Caption>CELLPADDINGCELLSPACINGCOLSColspanCOLSPAN<DD><DEL>Description<DIV><DL><DT><EM>EXtensible HyperText Markup LanguageFirefox<FRAME><Frameset>GIF<H1>...<H6><head>Height<HR>HTML<html><I><Iframe><IMG><INS>Internet ExplorerJPEGKeywords<LI>Mailto<meta>Noresize<OL><P>PNG-24PNG-8<PRE>RowspanROWSPANRULESScrolling<SMALL><SPAN><STRONG><SUB><SUP><TABLE><TD><TH>Tidy<title><TR><UL>URLVALIGNWidthXHTMLXHTML 1.0 FramesetXHTML 1.0 StrictXHTML 1.0 TransitionalXMLАбсолютная ссылкаАбсолютный адресАктивная ссылкаАльтернативный текстБитая ссылкаБлочные элементыБраузерВалидаторВалидацияВалидация HTML-документаВеб-серверВеб-цветаГрафический редакторИндексный файлКомментарийЛокальный справочникМаркированный списокНаиболее популярные браузерыНепосещенная ссылкаНумерованный списокОдиночный тегОтносительная ссылкаПараметры теговПарный тегПикселПлавающий фреймПодсветка синтаксисаПосещенная ссылкаСайтСпецификация HTMLСписокСписок определенийСсылки<тег>ТегиТеги верхнего уровняТипы теговФреймыШестнадцатеричная системаЯкорь_blank_parent_self_top


Раздел подготовлен на основе материалов учебника "Самоучитель HTML и XHTML" Влада Мержевича.

загрузка...
Сторінки, близькі за змістом