Синтаксис html5. Синтаксис html и структура html-документа
HTML5 возвращает нас к стилю десятилетней давности, когда практиковалось не закрывать некоторые теги, писать значения без кавычек и по желанию набирать теги в верхнем или нижнем регистре. Такая вольность не означает, что любые правила должны игнорироваться, по-прежнему следует соблюдать корректную вложенность тегов и вставлять обязательные элементы. Отход от жёсткого синтаксиса XHTML позволяет сосредоточиться на содержании сайта, а не на соблюдении пустых формальностей, большинство из которых вызывает раздражение из-за своего несущественного значения и ненужности.
Элементы HTMLБазовым кирпичиком веб-страницы выступает элемент. Они могут делиться по разным критериям, например, по типу или своему назначению.
Элементы по типуПустые элементы
К ним относятся элементы, у которых нет закрывающего тега:
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
.
Предназначены для вывода скриптов или стилей, имеющих синтаксис отличный от HTML: , .
RCDATAЭти элементы могут содержать любой текст или спецсимволы, за исключением нестандартных спецсимволов, которые называются сомнительным амперсандом, например: &copi; или &T. К этой группе элементов относятся и .
Инородные элементыЭлементы, относящиеся к MathML или SVG.
Обычные элементыВсе остальные элементы, которые не входят в предыдущие группы.
Элементы по назначениюКорневой элемент
Элемент .
Метаданные документа, а также элементы, которые располагаются внутри него.
СкриптыСкрипты позволяют добавлять интерактивности на веб-страницу, в эту группу входят элементы, управляющие скриптами.
Структурные элементыЭлементы, управляющие основными разделами веб-страницы, вроде , , , , и др.
Группирование контентаЭлементы, обрамляющие текст, списки, изображения.
ТекстЭлементы, изменяющие вид текста, например, делающие его жирным или курсивным, а также выделяющие текст по смыслу - аббревиатура, цитата, переменная, код и т.д.
РецензированиеЭлементы и показывающие редактирования в документе.
Внедряемый контентЭлементы, вставляемые на страницу в виде разных объектов - изображения, видео, аудио и др.
Табличные данныеЭлементы для создания и управления видом таблиц.
ФормыФормы являются одним из важных элементов любого сайта и предназначены для обмена данными между пользователем и сервером. В эту группу входят элементы для создания формы и её полей.
Интерактивные элементыСпециальные виджеты, с помощью которых пользователь может получать дополнительную информацию или управление.
СсылкиЭлементы и .
Подобное группирование условно и может принимать другой вид, потому что одни и те же элементы могут принадлежать разным группам.
ТегиДля обозначения начала и конца элемента применяются теги. Внутри тегов могут быть атрибуты со своими значениями, расширяющими возможности тегов, а также содержимое (рис. 1).
Рис. 1. Тег с атрибутом href
Закрывающий тег похож на открывающий, но содержит слэш (/) внутри угловых скобок.
Пустые элементы не имеют закрывающего тега и содержимого (рис. 2).
Рис. 2. Пустой тег
Атрибуты тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы. Общее количество атрибутов достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Например, элемент добавляет на веб-страницу изображение, при этом адрес графического файла мы указываем через атрибут src .
Доктайп
предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа) для того, чтобы браузер понимал, с какой версией HTML он имеет дело. Если доктайп не указан, браузеры переходят в режим совместимости, в котором не работают многие возможности HTML5, а также возникают ошибки с отображением документа.
Доктайп не чувствителен к регистру и содержит всего два слова:
Это ключевой элемент и обычно он располагается в первой строке кода.
КомментарииНекоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом . Все, что находится между этими тегами отображаться на веб-странице не будет.
Необязательные тегиЕсли какой-то тег не указан, это не означает, что он не представлен вообще. Существуют определённые правила, позволяющие не писать некоторые теги. В табл. 1 представлены теги, которые можно не указывать и условие, при котором это происходит.
Если внутри имеются другие элементы. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Если пустой, а также содержит что-то кроме пробела или комментария. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Если после элемента следует | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Если после элемента следует или . | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Если после элемента следует , или он последний у родителя. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Если после элемента следует
,
,
,
,
,
,
,
,
,
,
,...,
,
,
,
,
,
,
, , , ,
Если открывающий тег содержит один или несколько атрибутов, то тег должен указываться обязательно. Из-за того, что многие теги можно не указывать, т.к. они подразумеваются по умолчанию, любой документ сводится к следующим частям. До и после доктайпа разрешается вставлять любое количество пробелов или комментариев. Таким образом, доктайп не обязательно должен располагаться в первой строке кода. В примере 1 показан минимальный код HTML для вывода традиционного приветствия. Пример 1. Минимальный HTML HTML5 IE Cr Op Sa Fx Привет, мир! Метка порядка байтов состоит из кода символа U+FEFF в начале документа, где она используется для определения кодировки. Рекомендуется убирать этот символ, поскольку его наличие приводит к ошибкам отображения документа в некоторых браузерах. Для этого можно использовать редактор Notepad++, в меню «Кодировки» выбрать пункт «Кодировать в UTF-8 (без BOM)» (рис. 3). Рис. 3. Выбор кодировки Полезные ссылки
Поток кодовых точек Unicode, включающий ввод в этап мнемонизации, будут первоначально виден ПАгенту как поток байтов (обычно приходящий по сети или из локальной файловой системы). Байты кодируют реальные символы в соответствии с конкретной кодировкой символа , которую ПА использует для декодирования байтов в символы. Для XML-документов этот алгоритм ПАгенты должны использовать для определения кодировки символов, заданной XML-спецификацией. Этот раздел не применяется к XML-документам. 8.2.2.1 Парсинг с известной кодировкой символовКогда HTML-парсер работает с байтовым потоком ввода, имеющим определённую известную кодировку, тогда кодировка символов – эта кодировка, а – certain . 8.2.2.2 Определение кодировки символовВ некоторых случаях может быть нецелесообразно однозначно определять кодировку до разбора документа. По этой причине данная спецификация предоставляет двух шаговый механизм с опционным предварительным сканированием. В реализациях разрешается, как описано ниже, применять упрощённый алгоритм парсинга к каким бы то ни было доступным байтам до начала парсинга документа. Затем реальный парсер стартует, с использованием предварительного кодирования, взятого из этого предварительного парсинга и других out-of-band метаданных. Если, пока документ загружается, ПА обнаруживает объявление кодировки символов, которое конфликтует с этой информацией, тогда парсер может снова вызван для выполнения парсинга документа с реальной кодировкой. ПАгенты должны должны использовать ниже следующий алгоритм, называемый алгоритм снифинга кодировки, для определения кодировки символов для использования при декодировании документа в первом шаге. Этот алгоритм принимает в качестве ввода любые out-of-band метаданные, доступные ПАгенту (например, Content-Type метаданные документа), и все доступные до сих пор байты, и возвращает кодировку символов и , которая tentative или certain . Если пользователь явно указывает ПАгенту переопределить кодировка символов документа особой кодировкой, опционно возвратить эту кодировку с certain Обычно ПАгенты запоминают такой запрос пользователя между сессиями и иногда применяют это также к документам в iframe ах. ПА может больше доступных байтов ресурса либо на этом шаге, либо на более позднем шаге этого алгоритма. Например, ПА может ожидать 500ms или 1024 байт, смотря что будет первым. В целом предварительный парсинг ресурса для определения кодировки повышает производительность, так как это уменьшает необходимость отбрасывать структуры данных, используемых при парсинге после поиска информации кодировки. Однако, если ПА слишком затягивает с получением данных для определения кодировки, затраты времени на ожидание могут превысить любой выигрыш от препарсинга. Требования соответствия для декларации кодировки символов ограничивают её появление только в рамках первых 1024 байт . ПАгентам, следовательно, рекомендуется использовать алгоритм предварительного сканирования (далее) как вызванный этими шагами на первых 1024 байтах, но не останавливаться на этом. Для каждого ряда следующей таблицы, начиная с первого и вниз, если имеется доступных байтов больше, чем в первом столбце и первые байты файла совпадают с байтами первого столбца, тогда возвратить кодировку из ячейки второго столбца того же ряда, с – certain , и прервать выполнение этих шагов:
Этот шаг ищет Unicode Byte Order Marks (BOMs). То, что этот шаг идёт перед следующим, соблюдающим HTTP-хедэр Content-Type , является умышленным нарушение спецификации HTTP, что объясняется желанием быть максимально совместимым со старым содержимым. Если транспортный слой специфицирует кодировку символов, и она поддерживается, возвратит эту кодировку с – certain и прервать выполнение этих шагов. UTF-8 кодирование имеет точно определяемый битовый патэрн. Документы, содержащие байты более 0x7F, совпадающие с UTF-8 патэрном, весьма вероятно, являются UTF-8, а документы с байтовыми последовательностями, не совпадающими с ним – очень вероятно, что нет. ПАгентам, следовательно, рекомендуется искать эту общую кодировку. Иначе – возвратить определяемую реализацией или пользователем кодировка символов по умолчанию, с – tentative . В управляемых окружениях или в окружениях, где кодировка документов может быть предписана (например, для ПАгенты, предназначенных конкретно для использования в новых сетях), рекомендуется исчерпывающая кодировка UTF-8 . В других окружениях кодировка по умолчанию обычно зависит от локали пользователя (аппроксимации языков и, таким образом, часто – кодировок страниц, которые пользователь, весьма вероятно, посещает). Следующая таблица рекомендует умолчания на базе пользовательской локали, для совместимости со старым содержимым. Локали идентифицируются по BCP 47 тэгам языка.
Содержимое этой таблицы выведено из умолчаний Windows, Chrome и Firefox. последовательность байтов, начинающуюся с байта 0x3C (ASCII Продвинуть указатель position так, чтобы он указывал на первый байт 0x3E (ASCII >), который идёт после найденного байта 0x3C.Любой другой байт Ничего не делать с этим байтом. Поддержка кодировок на базе EBCDIC особенно не рекомендуется. Эта кодировка редко используется для публичного вэб-содержимого. Поддерживать UTF-32 также настоятельно не рекомендуется. Эта кодировка редко используется и часто некорректно реализуется. Данная спецификация не пытается поддерживать кодировки на базе EBCDIC и UTF-32 в своих алгоритмах; поддержка и использование этих кодировок, следовательно, может дать непредсказуемое поведение в реализациях данной спецификации. 8.2.2.4 Определение кодировки во время парсингаКогда парсер требует от ПА изменить кодировку, ПА должен выполнить следующие шаги. Это может произойти, если , рассмотренный выше, потерпит неудачу при поиске кодировки символов, или если он найдёт кодировку символов, которая не была фактической кодировкой файла. 8.2.2.5 Препроцессинг входного потокаПоток ввода состоит из символов, протолкнутых в него как декодированный или из различных API, которые напрямую манипулируют потоком ввода. Один ведущий символ U+FEFF BYTE ORDER MARK должен быть игнорирован, если они присутствуют в . Требование вырезать символ U+FEFF BYTE ORDER MARK, независимо от того, использовался ли этот символ для определения порядка байтов, является умышленным нарушением Unicode, которое объясняется желанием повысить устойчивость ПАгентов в плане собственных транскодеров. Любые появления любых символов из диапазонов от U+0001 до U+0008, от U+000E до U+001F, от U+007F до U+009F, от U+FDD0 до U+FDEF и символов U+000B, U+FFFE, U+FFFF, U+1FFFE, U+1FFFF, U+2FFFE, U+2FFFF, U+3FFFE, U+3FFFF, U+4FFFE, U+4FFFF, U+5FFFE, U+5FFFF, U+6FFFE, U+6FFFF, U+7FFFE, U+7FFFF, U+8FFFE, U+8FFFF, U+9FFFE, U+9FFFF, U+AFFFE, U+AFFFF, U+BFFFE, U+BFFFF, U+CFFFE, U+CFFFF, U+DFFFE, U+DFFFF, U+EFFFE, U+EFFFF, U+FFFFE, U+FFFFF, U+10FFFE и U+10FFFF являются . Все они – управляющие символы или перманентно неопределённые/undefined Unicode-символы(несимволы/noncharacters). Символы "CR" (U+000D) и "LF" (U+000A) рассматриваются особо. Все символы CR должны быть конвертированы в символы LF, а любые символы LF, которые идут после символа CR, должны игнорироваться. Таким образом, новые строки/newlines в HTML DOM представлены символами LF и никогда – символами CR во вводе к этапу . Следующий символ ввода это первый символ в , который ещё не использован/consumed или явно игнорируется требованиями этого раздела. Начально это первый символ в потоке ввода. Текущий символ ввода это последний символ, который был . Точка вставки/точка вставки это позиция (непосредственно перед символом или непосредственно перед концом потока ввода), где содержимое, вставленное с использованием document.write() , реально вставляется. Точка вставки является относительной к позиции символа сразу после неё, это не абсолютное смещение в потоке ввода. Начально точка вставки не определена/undefined. Символ "EOF" в последующих таблицах это концептуальный символ, представляющий конец . Если парсер это парсер, созданный скриптом , тогда конец достигается, когда используется явный символ "EOF" (вставленный методом document.close()). Иначе символ "EOF" – это не реальный символ в потоке, а обозначение отсутствия любых последующих символов. Обработка символов U+0000 NULL варьируется в зависимости от того, где символы находятся. В целом они игнорируются, кроме случаев, когда это может реально подставить по удар. Такая обработка, по необходимости, распространяется на стадии мнемонизации и построения дерева. Интернет представляет собой всемирную сеть, объединяющую компьютерные сети по всему миру на базе единых стандартных соглашений (протоколов) о способах обмена информациейи единой системой адресации. К настоящему времени сеть Интернет получила беспрецедентное распространение. По оценкам экспертов Интернет объединяет более 100 миллионов компьютеров. Услугами Интернет пользуется свыше300 миллионов человек в 170 странах мира. С функциональной точки зрения Интернет представляет собой: ü недорогое быстродействующее средство общения между абонентами по всему миру; ü не имеющее аналогов хранилище информации по любым областям знаний; ü новую перспективную среду длядеятельности. Влияние Интернет распространяется не только на технологическую область компьютерных коммуникаций, оно имеет также социальную направленность и пронизывает все общество по мере того, как все более широкое распространение получают оперативные средства получения знаний, электронной коммерции. Самым распространенным и востребованным сегодня является такой сервис Интернет, как WWW (World Wide Web − всемирная паутина). Информацияв WWW представлена в виде так называемых гипертекстовых (или, более широко, гипермедийных) документов,которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты.Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши.Активными могут быть фрагменты текста, целые изображения и их части;щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа. Чтобы научиться размещать материалы в Интернет, прежде всего необходимо познакомиться с языком разметки гипертекста HTML (H yperT ext M arkup L anguage) Основы языка HTMLЯзык разметки гипертекстовых документов HTML представляет собой совокупностькоманд, называемых тегами(от английского tag ).Встречающиеся в тексте документа HTML-теги интерпретируются браузером при отображении документа. Просмотр HTML-документов осуществляется с помощью программ-браузеров (от английского browser ), которые отображают документ в соответствии с HTML-разметкой и обеспечивают навигацию по гиперссылкам. Наиболее распространенными являются браузеры Microsoft Internet Explorer фирмы Microsoft Corporation и Netscape Navigator фирмы Netscape Communications Corporation . Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (Notepad ), но это очень трудоемко. Чаще используют специализированные редакторы, предназначенные именно для подготовки HTML-документов, которые позволяют вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых окнах, например, Macromedia Dreamweaver, Microsoft FrontPage , HomeSite и др. HTML-документ может быть получен преобразованием в HTML-формат, например, из формата документов пакета Microsoft Office. Надо отметить, что при таком преобразовании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.Значительно эффективнее пользоваться специальными HTML - редакторами. Синтаксис HTML-теговHTML-тег записывается в угловых скобках (символы)и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры. Теги условно можно разделить на две группы: Парные теги (называемые также контейнерами ) имеют два компонента: открывающий (начальный) и закрывающий (конечный); закрывающий компонент имеет то же название, но при записи перед названием ставится косая черта(символ / ). Между открывающим и закрывающим компонентами может располагаться текст документа и другие теги. Фрагмент документа, расположенный между открывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега.Например, текст, расположенный между тегамии , будет выведен полужирным начертанием (название тега - от английского bold ). Парные теги могут быть вложены друг в друга, но не должны пересекаться. Непарные теги (называемые также автономными ) не имеют конечного компонента.При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег , встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict.gif . Атрибуты в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки;последовательность записи атрибутов несущественна. Подавляющее большинство атрибутов употребляются в виде парыназвание атрибута = значение атрибута . В случае, когда значение атрибута представляет собой более чем одно слово либо одно число, его следует заключить в одинарные или двойные кавычки. В закрывающих компонентах тегов атрибуты не указываются. Вот пример тега с атрибутами:
Привет ! Встретив такой тег в HTML-документе, браузер интерпретирует его, выводя следующий за тегом текст символами, увеличенными относительно базового размера(SIZE=+2) и красного цвета (COLOR=RED); это форматирование текста применяется до тех пор, пока не встретится закрывающий тег. Регистр символов в записи тегов и атрибутов значения не имеет. Структура HTML-документаHTML-документ заключается в теги и.Между этими тегами располагаются две секции:секция заголовка (между тегами и) и секция тела документа (между тегами и).Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера.Секция тела документа содержит основной текст, предназначенный для отображения браузером, теги форматирования, размещения рисунков, таблиц, гиперссылок и т.д. HTML -код простейшего документа, пригодного для размещений в Интернет, выглядит так: < TITLE > Наша первая страничкаTITLE > Самый простой HTML- документ Данный кодможет быть набран в текстовом редакторе Блокнот и сохранен как файл с расширением. htm или. html − в этом случай документ откроется в браузере, установленном на вашем компьютере по умолчанию. Браузер отобразит этот документ, выведя в своем окне строку "Самый простой HTML-документ", расположенную в секции тела документа. Фраза "Наша первая страничка" будет отображаться в строке заголовка браузера. Раздел HEADСекция заголовка обычно содержит теги, незаметные для пользователя, но тем не менее способные активно влиять не внешний вид документа.
Этот раздел включает в себя основное содержание веб-страницы − текст документа, изображения, таблицы и т.п. Элемент BODY должен встречаться в документе не более одного раза и может включать следующие атрибуты:
Все теги форматирования символов имеют как открывающий, так и закрывающий компонент и действуют на заключенные между ними текст. Основным является тег ... FONT>, обязательно использующийся с одним или несколькими атрибутами, изменяющими размер, цвет и гарнитуру шрифта:
Кроме того, используются теги, позволяющие изменить начертание символов: . .. (от английского bold) − полужирный шрифт; .. . (от английского italic) − курсив; ... (от английского TeleType) − моноширинный шрифт; ... (от английского u nderline) − подчеркнутый; ... S > (от английского s trikethrough ) − перечеркнутый; ... (от английского s ubscript ) − нижний индекс; ... (от английского superscript ) − верхний индекс. Текст, заключенный между тегами и(от английского preformatted ), отображается так, как он был отформатирован предварительно, со всеми пробелами и переносами строк. Форматирование абзацевТекст выводится в окно браузера слово за словом, при достижении правой границы окна очередное слово автоматически переносится на новую строку. Даже если в коде страницы было введено несколько пробелов или текст записывался с новой строки, при просмотре в браузере эти действия отображены не будут. Поэтому чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги. Тег Тег(от английского paragraph )начинает абзац;новый абзац отделяется от предыдущего двойным межстрочным интервалом.Абзац пустым быть не может, то есть несколько последовательных тегов интерпретируются как один (в отличие от тега не обязателен, так как предыдущий абзац заканчивается там, где начинается новый.Тег имеет необязательный атрибут ALIGN, указывающий на вид выравнивания абзаца, который может принимать значенияLEFT, CENTER, RIGHT и JUSTIFY , задающие выравнивание соответственно по левому краю, центру, правому краю и по ширине. По центру будет выровнен и текст, заключенный в теги ...Если закрывающий компонент опустить, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, или до конца документа. HTML позволяет создавать форматировать абзацы как нумерованные или маркированные списки. Фрагмент текста, представляющий собой список, заключается в теги: упорядоченный (нумерованный) список (от английского ordered list ) неупорядоченный (маркированный) список (от английского unordered list ) Каждый элемент упорядоченного или неупорядоченного списка заключается в теги ... (от английского list item ). При выводе текста каждый элемент списка будет располагаться с новой строки, обозначенной номером или маркером. Кроме того, у списка может быть заголовок, который задается тегом (от английского l ist h eader ). Закрывающие теги и не обязательны.
Многоуровневый список может быть организован посредством комбинации нумерованных и маркированных списков. Тегимеет необязательные атрибуты:
Тегимеет необязательный атрибут
Абзацы можно оформить и в видезаголовков уровня (от n =1 до n =6), для этого используют теги вида ... n>. Заголовок первого уровня выводится наиболее крупным шрифтом. Теги , ... , могут иметь атрибут выравниванияALIGNсо значениямиLEFT,RIGHT и CENTER. Размещение рисунковИзображения, которые демонстрируются браузером при просмотре веб-страницы, хранятся в отдельных файлах формата gif , jpg (jpeg ) или png , а в коде страницы делается ссылка на нужный файл. Для этого используется непарный тег , имеющий один обязательный и ряд необязательных атрибутов..
Рассмотрим подробнее абсолютный и относительный способы адресации файла. Адресация в абсолютной форме используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL (Uniform Resource Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере,это протокол http .Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ / ), в именах файлов и каталогов различаются прописные и строчные буквы , пробелы не допускаются. Вот примеры URL: http://www. vshu . kirov .ru/ site / images / picture 1. jpg http://195.21.123.13:8110 ftp://everything.com/soft/prog.zip mailto:This email address is being protected from spambots. You need JavaScript enabled to view it. Последний URL, указывающий на протокол mailto и адрес электронной почты, не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты. Адресация рисунков в абсолютной форме при создании веб-сайта практически не используется. Адресация в относительной форме используется при ссылках на ресурсы, находящиеся на том же сервере. При записи пути к файлу названия каталогов разделяются прямой косой чертой (символ / ), переход по каталогам файловой системы на один уровень вверх обозначается двумя точками (символы .. ). Чтобы было понятнее, представим себе компьютер, например, с такой структурой каталогов, содержащих HTML-файлы: SHAPE\* MERGEFORMAT
В этом случае возможны, например, такие варианты записи тега IMG : ü < IMG SRC = Picture . jpg > (изображение Picture . jpg располагается на страничке Index . htm ) ü < IMG SRC = Images / Pict 1. jpg > (изображение Pict 1. jpg располагается на страничке Index . htm ) ü < IMG SRC =../ Picture . jpg > (изображение Picture . jpg располагается на страничке Page 1. htm ) ü < IMG SRC =../ Images / Pict 1. jpg > (изображение Pict 1. jpg располагается на страничке Page 1. htm ) Несмотря на то, что формально обязательным является только атрибут SRC,на практике необходимо указывать и альтернативный текст (атрибут ALT), так как многие работают с браузером в режиме без загрузки изображений. Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов width и height в пикселях или в процентах к размеру экрана. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Применение только одного из атрибутов изменяет оба размера рисунка. Гиперссылкой называют объект (текст, изображение, фрагмент изображения), при щелчке мышью по которому происходит переход к новому документу или фрагменту документа. Именно гиперссылки позволяют организовать переходы между любыми размещенными в сети Интернет документами. Текстовые гиперссылкиСвязь между HTML-документами и фрагментами документов организуется с помощью тега ... (от английского a nchor - якорь ). Тегупотребляется как для создания ссылки на другой документ, так и для ссылки на фрагмент документа.
Текст и изображения, размещенные между тегамистановятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветами, указанными как значение атрибутов LINK, A LINK, V LINK тега (либо цветом по умолчанию). Гиперссылки-картинкиЧтобы сделать гиперссылкой целое изображение, также применяется тег ... ., только вместо текста (или вместе с текстом) между < A > и A > располагается тег < IMG …> со всеми соответствующими атрибутами. Например , . Карта гиперссылокТег позволяет сделать активной зоной текстовый фрагмент или изображение целиком ; для того же, чтобы разные фрагменты одного изображения ссылались на разные целевые документы, придется использовать тег, реализующий изображение-карту. У тега-контейнера единственным обязательным атрибутом является NAME , значением которого будет имя (например, NAME=" mymap " , которое должно быть использовано при описании атрибута USEMAP тега IMG, описывающего изображение, призванного служить картой (при этом к имени карты приписывается слева # − USEMAP ="# mymap ") Внутри контейнера каждой чувствительной к перемещению мыши зоне изображения должен соответствовать тег с атрибутами:
Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью расположения фрагментов текста и изображений друг относительно друга. Таблицы в HTML строятся построчно. Все табличные данные заключаются в теги ; описание каждого ряда ячеек (строк) заключается в теги ... ; содержимое каждой ячейки заключается в теги ... (обычные ячейки) или ... H > (заголовки). Таким образом, для описания, например, таблицы из двух строк, каждая из которых содержит по две ячейки, придется создать следующую конструкцию: Ячейки таблицы могут содержать текст, изображения, вложенные таблицы и т.д. Не следует оставлять ячейки таблицы незаполненными; если какая-то ячейка должна выглядеть пустой, поместите в нее неразрывный пробел. Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером; текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку. Ячейки таблицы могут охватывать несколько строк или столбцов;при описании таких ячеек используется атрибуты ROWSPAN (ячейка, тег которой содержит данный атрибут, "растягивается" на указанное количество строк) и COLSPAN (ячейка "растягивается" на несколько столбцов). Приведем пример организации таблицы с объединенными ячейками: < TR > < TD ROWSPAN=2> 1-1 TD > Теги, описывающие таблицы, имеют целый ряд необязательных атрибутов. Атрибуты тегазадают параметры таблицы в целом:
Атрибуты тегазадают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге, отменяются). Выравнивание содержимого ячеек;возможны значенияleft, right и center | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
BACKGROUND = url |
Фоновое изображение для ячеек данного ряда таблицы |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
BGCOLOR = цвет |
Фоновый цвет для ячеек данного ряда |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
BORDER = значение |
Толщина рамки, обрамляющей ячейки данного ряда;BORDER=0 обозначает невидимую рамку |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
VALIGN = значение |
Вертикальное выравнивание содержимого ячеек;возможны значения top, center и bottom |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Синтаксис атрибута |
Назначение |
ALIGN = значение |
Выравнивание содержимого ячейки; возможны значенияleft, right и center |
BACKGROUND = ur l |
Фоновое изображение для ячейки таблицы |
BGCOLOR = цвет |
Фоновый цвет для ячейки |
BORDER = значение |
Толщина рамки, обрамляющей ячейку |
VALIGN = значение |
Вертикальное выравнивание содержимого ячейки;возможны значения top, center и bottom |
WIDTH = значение |
Ширина ячейки в пикселях или в процентах от ширины таблицы |
ROWSPAN= значение |
Указывает количество строк, охватываемых ячейкой |
COLSPAN = значение |
Указывает количество столбцов, охватываемых ячейкой |
При работе с таблицами учтите, что указанное значение атрибута WIDTHво многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).
Бегущая строкаИспользование бегущей строки на веб-странице делает ее более динамичной, позволяет создать эффект движения объекта. Создается бегущая строка с помощью тега < MARQUEE > … MARQUEE >.
Между < MARQUEE > и MARQUEE > могут располагаться текстовые фрагменты и рисунки. Текст может быть отформатирован с помощью соответствующих тегов, а рисунок вставляется с использованием .
Синтаксис атрибута |
Назначение |
BGCOLOR =цвет |
Фоновый цвет. Если фон задан, то браузер рисует на экране цветную полосу, вдоль которой движется текст или картинка. |
HEIGHT = значение |
Высота фоновой полосы. Значение указывается в пикселях или в процентах от высоты окна браузера. Например, если указать атрибут HEIGHT=25%, то полоса бегущей строки будет занимать четверть высоты окна |
WIDTH = значение |
Ширина полосы бегущей строки, указывается в пикселях или в процентах от ширины окна браузера |
DIRECTION= значение |
Направление движения строки: left − налево (по умолчанию), right − направо, up − вверх, down − вниз |
BEHAVIOR = значение |
Атрибут управляет поведением бегущей строки: scroll (по умолчанию) − дойдя до края окна, строка уходит из поля зрения, а затем появляется с противоположной стороны; slide − строка появляется из-за края окна, достигает противоположного и останавливается; alternate − строка движется вправо или влево, «отражаясь» от краев окна и меняя направление движения |
HSPACE = смещение в пикселях |
Сдвиг полосы бегущей строки по горизонтали вправо |
VSPACE = вы co т a в пикселях |
Создание пустого пространства выше и ниже полосы |
LOOP = значение |
Количество переходов строки по экрану |
SCROOLAMOUNT = значение |
Число пикселей, которые проходит строка за каждый шаг. Режим по умолчанию соответствует примерно 10 пкс/шаг. Данный атрибут позволяет регулировать скорость движения строки |
SCROLLDELAY = значение |
Определяет временной интервал (в миллисекундах) между шагами, с помощью этого атрибута можно заставить строку двигаться рывками |
TRUESPEED |
При установке этого флага (атрибута без значения) будет использовано заданное значение SCROLLDELAY. Если флаг не установлен значение SCROLLDELAY Статьи по теме:
|