Добавление картинки

Неизвестные теги и атрибуты

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

Порядок тегов

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

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

Закрывайте все теги

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

Атрибуты тегов

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

Для атрибутов тегов используются значения по умолчанию

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

Атрибуты без значений

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

Пример 3.4. Атрибуты без значений

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

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

Порядок атрибутов в тегах

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

Формат атрибутов

Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Так, в примере 3.3 упоминается тег , он добавляет на веб-страницу рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение будет проигнорировано и возникнет ошибка при валидации документа.

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

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

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

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

Заголовок

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

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

Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

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

Переходный синтаксис HTML.

В HTML-документе применяются фреймы.

В этой версии HTML только один доктайп.

Переходный синтаксис XHTML.

Документ написан на XHTML и содержит фреймы.

Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

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

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

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

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

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

Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

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

Рис. 4.2. Вид заголовка в браузере

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

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

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

Заголовок

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

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

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

Тег

определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Тег

является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.

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

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

Источник

Атрибуты элементов

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

Атрибут со значением

Вначале пишется открывающий тег, затем через пробел имя атрибута, после чего ставится знак равно (=) и в кавычках указывается значение атрибута. Общий синтаксис такой:

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

Вместо двойных кавычек («значение») можно писать одинарные кавычки (‘значение’) или вообще опустить кавычки (значение). Однако хорошим тоном будет всегда писать значения атрибутов в кавычках, потому что их отсутствие может привести к неявным ошибкам. Приведём небольшой пример.

В данном примере первая строка написана правильно со всеми кавычками, а в следующей строке у атрибута alt кавычки отсутствуют. Поскольку пробел отделяет один атрибут от другого, то браузер в качестве значения alt возьмёт только первое слово («Вид»), а слово «заголовка» будет воспринимать как новый атрибут. Но так как подобного атрибута не существует, то это приведёт к ошибке.

Каждый атрибут должен быть единственным и не должен повторяться ( alt писать можно, alt alt нельзя).

В примере 1 показано добавление картинки на страницу с помощью элемента с разными атрибутами.

Пример 1. Использование атрибутов

Логические атрибуты

У логических атрибутов нет значений, само наличие или отсутствие атрибута уже меняет поведение элемента. Синтаксис достаточно простой:

В примере 2 показано применение логического атрибута для аудиоплеера.

Пример 2. Использование логического атрибута

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

Опять же имена атрибутов не чувствительны к регистру, это значит, что их можно писать маленькими или большими буквами. Но рекомендуем придерживаться единообразия и писать атрибуты в нижнем регистре — name . А никак не Name или NAME . Ещё раз подчеркнём, что так писать не надо.

Порядок атрибутов

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

Универсальные атрибуты

У некоторых элементов есть свой набор характерных атрибутов, но кроме этого существуют атрибуты, которые можно добавлять к любому элементу. По этой причине они называются универсальными или глобальными атрибутами. Список всех таких атрибутов вы можете посмотреть здесь, перечислим лишь некоторые популярные: class , id , lang , style , title .

Источник