Web документ должен начинаться с тэга: Вопрос: Web-документ должен начинаться с тэга: : Смотреть ответ

Содержание

Коротко о стандартах

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

Разделение содержимого и представления

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

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

Такая философия, прежде всего, подразумевает, что в коде HTML не должно быть ничего, определяющего стиль документа. Теги вроде <font> и атрибуты вроде bgcolor должны быть исключены. Даже атрибут border в теге вставки изображения <img> по стандартам XHTML 1.1 считается неприемлемым. Это вовсе не проблема, — нет такого стиля, который можно было бы сделать средствами HTML, и который нельзя было бы сделать, и сделать лучше, средствами CSS.

Речь идет не только о том, чтобы увести визуальное представление из сферы ответственности HTML, «приложение содержимого» означает, что все теги HTML должны использоваться для тех целей, для которых они и предназначались. Например, теги <h2>, <h3> и т.п. должны использоваться для создания заголовков, не следует одними только средствами CSS увеличивать размер шрифтов.

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

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

В XHTML все теги следует писать в нижнем регистре, и все они должны быть закрыты. Те теги, у которых нет парного закрывающего тега (таких как тег <br> и тег <img>), должны закрывать сами себя при помощи символа «/», размещенного в конце тега (например, <br />). Обратите внимание, что перед символом слеша должен быть пробел.

Разметка должна быть хорошо сформированной, и все элементы должны быть вложены на соответствующих уровнях (например, <strong><em>так</em></strong>, но не <strong><em>так</strong></em>).

Во всех документах должны присутствовать элементы <html>, <head>, <title> и <body>. Также веб-страница должна начинаться с декларации типа документа.

Тело документа (элемент <body>) должен начинаться с тега <p>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, тега <div>, тега <pre>, тега <address>, тега <ins> или тега <del>.

Атрибуты

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

Усеченные атрибуты (такие как <input type=»checkbox» checked />) запрещены. Усеченным атрибутам нужно присваивать то же значение, что и имя усеченного атрибута (например, <input type=»checkbox» checked=»checked» />).

Атрибут name теперь вне закона (за исключением элементов форм) и должен быть заменен атрибутом id.

Атрибут target также больше не используется. Ну и бог с ним. Все равно от него было больше неудобств, чем пользы.

Атрибут alt в теге <img> теперь обязателен.

Доступность

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

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

Структура документа HTML — romanovatanya84

w3.org/1999/xhtml» cellspacing=»0″>

HTTP (HyperText Transfer Protocol — протокол передачи гипертекста) – это протокола обмена информацией. Вместе с этим протоколом появилась и служба World Wide Web (часто также называемая WWW или просто Web), которая представляет собой обширную сеть серверов HTTP, передающих файлы через Internet.

Основную часть этих файлов представляют собой Web-страницы — специальные файлы, написанные на языке HTML (HyperText Markup Language — язык разметки гипертекста). Web-страницы публикуются в Internet путем размещения таких файлов на серверах HTTP (Web-узлах). Содержание Web-страниц может быть разным и посвященным совершенно произвольным темам, но все они используют одну и ту же основу — язык HTML. Документы HTML обычно имеют расширение .НТМ или .HTML.

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

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

Несмотря на то что Web-страницы появляются на экране компьютера в отформатированном виде, язык HTML не предназначен для форматирования документов, поскольку жесткое задание оформления и точное позиционирование элементов текста на странице приводит к ограничениям, недопустимым в Internet.

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

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

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

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

Теги HTML

Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются тегами. Тег — это набор символов. Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют

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

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

Как правило, один тег HTML воздействует только на часть документа, например на абзац. В таких случаях используют парные теги: открывающий и закрывающий. Открывающий тег создает эффект, а закрывающий — прекращает его действие. Закрывающие теги начинаются с символа косой черты (/).

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

Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.

При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.

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

Некоторые атрибуты требуют указания значения атрибута. Это значение отделяется от ключевого слова знаком равенства (=). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда.

Закрывающие теги никогда не содержат атрибутов.

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

Комментарии в языке HTML начинаются со специального тега <!—. Следует обратить внимание на отсутствие закрывающей угловой скобки. Любой текст, идущий за этим тегом, рассматривается как комментарий и не отображается при отображении документа.

Заканчивают комментарий символами —>. Комментарий может содержать любые символы, кроме символа «больше» (>), и, таким образом, не может включать в себя теги.

Примеры тегов HTML:

Примеры парных тегов HTML:

Примеры одиночных тегов HTML:

Примеры тегов HTML с атрибутами:

Структура документа HTML

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

Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега <НТМL> и заканчиваться соответствующим закрывающим тегом </НТМL>. Эта пара тегов сообщает браузеру, что перед ним действительно документ HTML.

Документ HTML состоит из раздела заголовков и тела документа, идущих именно в таком порядке. Раздел заголовков заключен между тегами <HEAD> и </HEAD> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <TITLE> и </TITLE>, между которыми размещают «официальный» заголовок документа. Большинство браузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна браузера.

Сам текст документа располагается в теле документа. Тело документа располагается между тегами <BODY> и </BODY>.

Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML.

На практике определить местоположение этих основных структурных тегов можно и при их отсутствии. Поэтому, если теги <HTML>, <HEAD> и <BODY>, а также соответствующие им закрывающие теги опущены, то программа-броузер может сама определить то место, где они должны были находиться. Тег <TITLE>, определяющий заголовок документа, считается обязательным, но и его пропуск не вызовет катастрофических последствий в современных браузерах. Но все-таки при создании Web-страниц опускать все эти теги не рекомендуется, ведь заранее неизвестно, как поведет себя конкретный броузер, установленный на компьютере.

Простейший правильный документ HTML

<HTML>

<HEAD>

<ТITLE> Заголовок документа </ТITLE>

</HEAD>

<BODY>

Этот текст можно прочитать на экране

</BODY>

</HTML>

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

Определение функциональных разделов документа

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

Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от <Н1> и </Н1> до <Н6> и </Н6>. Реально на экране компьютера все эти заголовки изображаются шрифтами разного размера (обычно полужирным начертанием).

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

Для обозначения обычных абзацев в языке HTML используют тег <Р> (и соответствующий закрывающий тег </Р>). Теги, описывающие обычные абзацы, являются необязательными. Однако при наличии этих тегов браузеры четко отслеживают границы между абзацами.

В языке HTML нет никаких средств для создания абзацного отступа («красной строки»), поэтому для удобочитаемости текста между абзацами браузер обычно вводит пустую строку. Важным средством создания разделителей в тексте являются горизонтальные полоски-линейки, визуально отделяющие разные части документа друг от друга. Горизонтальная линейка создается тегом <HR>. Это одиночный тег, не имеющий соответствующего закрывающего тега.

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

Гипертекстовые ссылки и якоря

Способность Web-страниц содержать ссылки на другие Web-страницы — одна из наиболее привлекательных особенностей World Wide Web. Создать гипертекстовую ссылку в документе HTML очень просто. Для этого используются теги <А> (и </А>).

При создании гиперссылки обязателен атрибут HREF=. Его значением является адрес URL, на который указывает ссылка. Текст ссылки размещают между тегами <А> и </А>. При отображении документа в браузере текст ссылки обычно подчеркивается и изображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу URL.

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

Если Web-страница, на которую указывает ссылка, располагается на другом Web-узле, то в качестве значения атрибута HREF= должен использоваться полный адрес URL документа, включая название протокола и адрес Web-узла. Такие ссылки называют внешними.

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

Гипертекстовые ссылки могут указывать на определенное место внутри страницы, если в нужное место предварительно встроить якорь. Якорь также использует теги <А> и </А>, но вместо атрибута HREF= для него обязательным является атрибут NAME=. Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать пробелов.

Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом «#».

Рисунки на Web-страницах

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

Для размещения рисунков в документе служит одиночный тег <IMG>.

Этот тег всегда должен содержать обязательный атрибут SRC=, значение которого составляет адрес URL файла изображения, записанный в абсолютной или относительной форме. При загрузке документа рисунок также загружается и отображается в том месте документа, где расположен тег <IMG>.

Изображение переносится на Web-страницу с сохранением размера. Если при компоновке изображения необходимо его перемасштабировать, нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота) Значения этих атрибутов определяют ширину и высоту изображения на Web-странице в пикселях.

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

Альтернативный текст — это, по сути, более или менее подробное описание изображения. Если браузер не может по той или иной причине показать рисунок, он вместо него выводит этот альтернативный текст. Альтернативный текст задается в теге <IMG> значением специального атрибута ALT=.

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

Определение элементов фразы

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

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

Тег <CITE> указывает, что соответствующий текст является цитатой из другого источника. Такой текст обычно изображается курсивом.

Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними. Так тег <CODE> указывает на исходный текст компьютерной программы. Тег <KBD> оформляет текст, который должен быть (или был) введен с помощью клавиатуры. Этими тегами принято размечать команды пользователя и названия клавиш. Тег <SAMP> заключает в себе текст, который является примером вывода компьютерной программы. Тег <VAR> служит для оформления названий программных переменных или выбранных пользователем параметров компьютерной команды.

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

Тег <ЕМ> предназначен для выделения текста. Выделенный текст обычно изображается курсивом. Более сильное выделение обозначается тегом <STRONG>. Такой текст изображается полужирным шрифтом. Так как здесь используется смысловое выделение вместо чисто оформительского, рекомендуется использовать теги <ЕМ> и <STRONG> вместо тегов <I> и <В>, соответственно.

Создание списков

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

Упорядоченные и неупорядоченные списки создают примерно одинаковым образом. Список всегда располагается между открывающим и закрывающим тегами списка <OL> и </OL> в случае упорядоченного списка, <UL> и </UL> — в случае неупорядоченного.

Внутри списка располагаются элементы списка. Их заключают между тегами <LI> и </LI>, хотя в данном случае закрывающий тег может опускаться, так как в этом случае ясно, где он должен располагаться.

Теги <OL>, <UL> и <LI> могут содержать атрибут TYPE=, значение которого указывает на способ пометки элементов списка. Упорядоченные списки можно нумеровать арабскими цифрами, римскими цифрами, латинскими буквами (как в верхнем, так и в нижнем регистре). Неупорядоченные списки помечаются маркерами в виде черного кружка (по умолчанию), белого кружка или квадратика.

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

Списки определений начинаются с тега <DL> и заканчиваются тегом </DL>. Маркеры или нумерацию в этих списках не используют. Список состоит из определяемых терминов и соответствующих определений. Определяемые термины помечаются тегом <DT>, а определения — тегом <DD>. Закрывающие теги можно опускать. Предполагается, что определяемые термины и определения чередуются, хотя это и не требуется строго. Определения изображаются на экране с отступом от левого края.

Мультимедийные объекты в документе HTML

Широкое распространение мультимедиа пришлось на период, когда служба World Wide Web уже существовала, так что язык HTML не сразу приспособился к появлению на Web-страницах мультимедийных объектов. Файлы аудио и видео до сих пор рассматриваются как «внешние» объекты, воспроизводимые через встроенные и вспомогательные приложения.

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

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

В некоторых случаях требуется внедрить звуковой или мультимедийный файл непосредственно в Web-страницу, например для того, чтобы иметь возможность воспроизводить этот файл автоматически. В настоящее время для этой цели удобнее всего применять тег <EMBED>, хотя он, строго говоря, не входит в стандарт HTML. Этот тег распознается двумя наиболее распространенными броузерами — Internet Explorer и Netscape Navigator, хотя возможность воспроизведения мультимедийного файла определяется исключительно наличием соответствующего встроенного приложения.

Тег <EMBED> является одиночным, так что закрывающий тег не требуется. Его обязательным атрибутом является SRC=, значение которого представляет абсолютный или относительный путь поиска соответствующего файла. Возможно также использование атрибутов WIDTH= и HEIGHT=, задающих размеры (ширину и высоту) прямоугольной области на экране, «отведенной» под воспроизведение мультимедийного объекта.

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

Таблица — это один из наиболее удобных способов представления больших объемов данных. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц.

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

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

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

Каждая строка таблицы состоит из ячеек. Ячейки помечаются либо тегами <ТН>, содержащими заголовки столбцов и строк, либо тегами <TD>, содержащими обычные данные. Эти теги также являются парными, но закрывающие теги и здесь могут опускаться, так как это не вызывает разночтений.

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

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

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

Размещение нескольких документов на одной Web-странице

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

Для создания фреймов используют особый документ HTML, структура которого отличается от обычной. Такой документ не содержит раздела «тела» документа и, на самом деле, не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов, заключенное между тегами <FRAMESET> и </FRAMESET>. В этом описании указывают размеры и порядок размещения областей в окне броузера, а также задают документы, которые должны загружаться в каждую из этих областей.

Тег <FRAMESET> должен содержать обязательный атрибут COLS= или ROWS=, определяющий способ разбиения окна. При использовании атрибута COLS= окно делится на области вертикальными линиями, а при использовании атрибута ROWS= — горизонтальными. Если заданы оба эти атрибута, в окне создается сетка из подобластей.

Значения этих атрибутов определяют высоту (или ширину) областей окна. Параметры для каждого столбца (строки) задают через запятую в пикселях или в процентах (символ «%») В качестве последнего параметра можно использовать символ «звездочка» (*). Под такой фрейм выделяется все остающееся свободное пространство.

Между тегами <FRAMESET> и </FRAMESET> располагают дополнительные теги, указывающие назначение созданных областей. Для этой цели можно использовать вложенные теги <FRAMESET>, задающие дополнительное разбиение окна, или одиночные теги <FRAME>, определяющие документы, загружаемые в отдельные области. Число элементов, вложенных между тегами <FRAMESET> и </FRAMESET>, должно соответствовать числу созданных областей.

Тег <FRAME> должен содержать обязательный атрибут SRC=, определяющий документ, который будет загружен в данную область. Дополнительные атрибуты позволяют управлять рамками между отдельными фреймами и некоторыми другими свойствами.

Качество документов HTML

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

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

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

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

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

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

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

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

7. Если собственной фантазии недостаточно, чтобы придумать способ оформления Web-страницы, можно воспользоваться службой World Wide Web как справочником. Internet содержит миллионы Web-страниц, способных предложить идеи оформления, которыми можно пользоваться. Достоинство этого подхода состоит еще и в том, что таким способом можно увидеть не только что сделано, но и как сделано, если обратиться к исходному тексту Web-страницы.

8. Фреймы — очень мощное, но и очень опасное средство оформления Web-страниц. С помощью фреймов создано гораздо больше неудачных Web-страниц, чем удачных. Единственный критерий грамотности применения фреймов — удобство пользователя. Если благодаря фреймам страница становится во много раз красивее, но чуть-чуть менее удобной, от фреймов надо отказываться не задумываясь. Ничего, кроме раздражения, у читателей она не вызовет.

9. Люди ценят заботу и внимание. Размещение самой важной информации в верхней части страницы позволяет им с пользой проводить время, в течение которого происходит загрузка документа. Сопровождение иллюстраций альтернативным текстом не стоит больших трудов, но высоко ценится. Наличие большого количества полезных гипересcылок на странице не только помогает людям плодотворно путешествовать по просторам Internet, но и побуждает их раз за разом возвращаться на страницу, предоставившую им такую возможность.

Язык HTML позволяет создавать Web-документы вручную, при помощи обычного текстового редактора. Хотя освоение языка HTML — это не столь уж и трудное дело, сама необходимость что-то изучать многими воспринимается как досадная неприятность. А нельзя ли свести процесс форматирования Web-документов к тому, как мы форматируем обычные документы в текстовых процессорах? В принципе, это возможно, но из-за особенностей World Wide Web не всегда удобно.

Форматирование документов в современных текстовых процессорах происходит по принципу соответствия экранного образа документа его реальному содержанию, получаемому при печати. Это известный принцип WYSIWYG. Но в Internet никто не может сказать заранее, на каком компьютере и средствами какой операционной системы будет воспроизводиться документ. Автор видит на экране одно изображение, а читатель может увидеть нечто совсем другое. То есть принцип соответствия нарушается. Поэтому использование обычных текстовых процессоров для создания Web-документов считается нецелесообразным.

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

1. Структура web-документа. Вставка комментария.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

«http://www.w3.org/TR/html4/loose.dtd»>

В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. Не пытайтесь запомнить эту строчку наизусть, главное — вы должны знать, что она необходима. Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox) .

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги головы (<head></head>) и тела документа(<body></body>) .

Обычно основой головы документа является элемент TITLE — заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. А основное содержимое: текст, таблицы, картинки — находится в теле документа.

Как вы видите голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот) . Сначала закрываем голову документа </HEAD>, и лишь затем открываем тело <BODY>. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.

Вставка комментария: <!— —>

Очень полезным при создании сайтов является вставка комментария. Почему? да потому, что через месяц после создания, вам будет трудновато разобраться что к чему, ведь кода будет очень много. А если вы будете комментировать свои действия — тогда разобраться будет значительно легче!

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN»

«http://www.w3.org/TR/html4/loose.dtd»>

<html> <head><title> Сайт о собаках </title></head>

<!— начнем работать с телом документа —>

<body>

<!—вставляем таблицу с перечнем основных пород собак—>. . .

</body>

<!—закончили с телом документа—>

</html>

Вы уже наверное догадались, что закомментированный текст нужен только для Вас, т.е. при просмотре документа через браузер его видно не будет. В начале комментарий нужно открыть тегом <!— затем вписать текст, и закрыть тегом —> . Примечание: тег <!— —> внутри элемента TITLE не действует.

2. Текст — логика и физика..

3.

Форматирование Web-документа

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

Дело в том что все теги предназначенные для работы с текстом можно разделить на две группы: «теги физического форматирования текста» и «теги логического форматирования текста»

Теги физического форматирования текста.

О тегах физического форматирования текста речь в этом учебнике шла ранее, поэтому повторятся, не стану, а просто перечислю их: <b>, <i>, <u>, <strike>, <s>, <tt>, <small>, <big>, <sup>, <sub>, <p>, <font>, <pre>… — всё это теги физического форматирования текста. Почему их так назвали? Да все просто. . потому что данные теги способны тем или иным способом физически воздействовать на текст.. делать его жирным, курсивом, маленьким, большим.. и т. д. Заключив текст, в какой либо тег из вышеперечисленных, мы получаем ожидаемый результат, который описан в спецификации HTML и в различных браузерах отображается практически одинаково.

На всякий случай вновь покажу старый пример:

<html>

<head>

<title>Стили текста</title>

</head>

<body>

<big><b><u>Научная статья.</u></b></big>

<br>

<br> Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>- водка. </i>

<br> Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ.</tt>

<br>

<small>Распитие спиртных напитков вредит вашему здоровью.</small>

</body>

</html>

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

Например, чем отличается тег <em> от тега <i>? или какая разница между <b> и <strong>? ведь результат и там и там одинаков! Так да не так. . отличия есть.. и они достаточно существенные!!..

WebD2: Основные теги

Обзор

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

Результаты учащегося

По завершении этого упражнения:

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

Занятия

Откройте программу текстового редактора и перейдите к папке «portfolio», которую вы создали на уроке Pre-coding. Откройте файл index.html.
Введите в файл следующую разметку. Это базовая структура HTML веб-страницы. Обратите внимание, что вы будете персонализировать выделенный текст, содержащийся в тегах заголовков.
```
  <голова>
    <мета-кодировка="utf-8">
    Веб-портфолио: ваше имя
  
  <тело>
    
  

 
```
Возможно, вам будет легче читать, если вы добавите дополнительные пустые строки, как показано в примере выше. Кроме того, отступ содержимого, которое находится внутри другого содержимого, помогает вам увидеть взаимосвязь между всеми частями страницы. Это стандартная практика для всех языков разметки, сценариев и программирования.
Помните: Дополнительные пробелы и пустые строки будут игнорироваться при отображении HTML браузером.
Теперь рассмотрим каждый из этих тегов:
- Первая строка: DOCTYPE . Он указывает версию HTML, которую вы используете. HTML5 имеет очень простой DOCTYPE. Во всех предыдущих версиях HTML и XHTML операторы DOCTYPE были намного длиннее и сложнее, но их можно легко найти с помощью поиска в Интернете, а также скопировать и вставить на веб-страницу. Оператор DOCTYPE необходим, потому что он сообщает браузеру, какую версию HTML вы используете, чтобы браузер знал, как обрабатывать ваш код. . Распространенной ошибкой среди веб-разработчиков является пренебрежение включением оператора DOCTYPE. Без оператора DOCTYPE браузеры должны угадывать, какую версию HTML вы используете, и иногда ошибаются.
- вводится перед всем текстом в документе. Это отмечает начало html-документа. Он имеет соответствующий тег , который отмечает конец документа. Вся веб-страница, за исключением оператора DOCTYPE, заключена между этими двумя тегами.
- Веб-страницы делятся на два основных раздела: заголовок и тело . Головка предоставляет информацию о документе, включая автора, описание, ключевые слова, заголовок и другую информацию. раздел head закрывается тегом . В нашем «голом» документе внутри головки всего два элемента. Они:
- <название> Вы должны дать своему документу название. Этот заголовок на самом деле не отображается на веб-странице, но отображается в строке заголовка окна браузера. Это также название страницы, которое будет отображаться по умолчанию в результатах поиска или в Избранном пользователя. Название закрывается на
- — это тег, который имеет множество назначений, в зависимости от того, какой у него атрибут. В нашем «голом» документе атрибутом является charset , для которого установлено значение «utf-8». Это обязательный тег, который сообщает браузеру, в каком наборе символов закодирована веб-страница. Существует много возможных наборов символов, но «utf-8» — это международный набор символов, который является одним из наиболее распространенных. Тег не является контейнерным тегом. Поэтому у него нет соответствующего закрывающего тега.
- Раздел body содержит содержимое вашего документа
- Комментарии предназначены исключительно для людей, читающих исходный код, и не видны, когда кто-то просматривает веб-страницу в браузере. Дополнительную информацию об этой функции см. в разделе ниже, посвященном комментариям в вашем коде .
Сохраните файл index.html. Теперь откройте этот файл в своем браузере. Вы заметите, что экран пуст. Это потому, что у вас еще нет контента в разделе body. Однако вы должны увидеть свой заголовок в строке заголовка браузера, обычно в верхней части окна браузера.
Вернуться к текстовому редактору и файлу index.html. Пока вы создаете файлы с использованием «голого» шаблона, вы должны продолжить и создать другие файлы, которые будут составлять ваш веб-сайт. Позже в этом курсе вы добавите содержимое на каждую из этих страниц, но сейчас они будут пустыми, как и домашняя страница. Просто скопируйте код из index.html и вставьте его на новые страницы. Каждый раз, когда вы делаете это, изменяйте элемент, чтобы он отражал содержимое новой страницы. Например, измените заголовок в файле graphics.html на что-то вроде «Веб-портфолио: страница графики вашего имени».<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/581720/slide_2.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/581720/slide_2.jpg' /></noscript> Сохраняйте каждый новый файл в корневой папке со следующими именами файлов:<ul><li> доступность.html</li><li> графика.html</li><li> javascript.html</li><li> удобство использования.html</li><li> tools.html</li><li> видео.html</li></ul></li></ol><h3><span class="ez-toc-section" id="i-10"> Комментарии в вашем коде </span></h3><p> Пример HTML-кода, предоставленный и описанный на этой странице, включает HTML-разметку для добавления комментариев:</p><p></p><p> Все компьютерные языки разметки или программирования предоставляют какой-либо метод для добавления комментариев к вашему коду. Сюда входят все три языка, изучаемые в этом курсе: HTML, каскадные таблицы стилей (CSS) и JavaScript. Фактический метод отличается в зависимости от языка, но идея всегда одна и та же. Комментарии — это примечания для вас или других, кто просматривает ваш исходный код, которые помогают сделать код более понятным. Веб-браузер просто игнорирует их, поэтому они фактически не отображаются для пользователей.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/d/f/9/df92094bc2900f7e8d3fddcfc7f01174.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/d/f/9/df92094bc2900f7e8d3fddcfc7f01174.jpeg' /></noscript> Добавляйте комментарии свободно! Лучше слишком много комментариев, чем слишком мало. Вот две основные цели добавления комментариев к вашему коду:</p><ul><li> <strong> Используйте комментарии, чтобы объяснить свой код <em> другим </em> . </strong> Часто вы создаете веб-страницы в составе группы, и другим членам группы может потребоваться прочитать и понять ваш код. Даже если вы единственный человек, работающий над определенной веб-страницей, позже могут быть другие, которым нужно прочитать и понять ваш код.</li><li> <strong> Используйте комментарии, чтобы объяснить свой код для <em> самостоятельно </em> . </strong> Когда вы изучаете новые методы веб-дизайна, может быть очень полезно добавлять себе напоминания о том, почему вы использовали определенный тег или группу тегов.</li></ul><h3><span class="ez-toc-section" id="i-11"> Ресурсы/Документы в Интернете </span></h3><ul><li> Общие теги HTML</li><li> Спецификация W3C HTML5</li><li> Справочник по элементам HTML от W3Schools</li></ul><h3><span class="ez-toc-section" id="i-12"> Все готово? </span></h3><p> Для каждой страницы вашего сайта отображается соответствующий заголовок в строке заголовка браузера? После того как вы сохранили все изменения в index.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/print-prime.ru/uploads/posts/2016-03/1458811302_33.png' /><noscript><img loading='lazy' src='/800/600/http/print-prime.ru/uploads/posts/2016-03/1458811302_33.png' /></noscript> html и на других страницах, не закрывайте браузер и текстовый редактор для файла index.html. Покажите инструктору свои результаты перед началом Урока 3.</p><h2><span class="ez-toc-section" id="_HTML"> Теги, используемые в HTML </span></h2> Это список тегов, используемых в языке HTML. Каждый тег начинается с открывающим тегом (знак меньше) и заканчивающимся закрывающим тегом (знак больше знака). Многие теги имеют соответствующие закрывающие теги, которые идентичны, за исключением косой черты после открывателя тега. (Например, тег НАЗВАНИЕ).<p> Некоторые теги принимают параметры, называемые атрибутами. Атрибуты даны после тега, разделенные пробелами. Некоторые атрибуты влияют просто по их наличию, за другими следует знак равенства и ценность. (См., например, тег Anchor). Имена тегов и атрибуты не чувствительны к регистру: они могут быть в нижнем, верхнем или смешанный падеж с точно таким же значением. (В этом документе они обычно представлены в верхнем регистре.)</p><p> В настоящее время документы HTML передаются без обычного кадрирования SGML.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/b/4/8b495a4edf565ebd979b1fb4ef0f97ee.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/b/4/8b495a4edf565ebd979b1fb4ef0f97ee.jpeg' /></noscript> теги, но если они включены, синтаксические анализаторы будут их игнорировать.</p> Название документа дается между тегами title: … Текст между открывающим и закрывающим тегами является заголовком для гипертекстовый узел. В любом узле должен быть только один заголовок. Должно идентифицировать содержимое узла в достаточно широком контексте, и следует идеально укладывается в одну линию.<p> Заголовок не является строго частью текста документа, но атрибут узла. Он не может содержать якорей, знаков абзаца, или выделение. заголовок может использоваться для идентификации узла в истории список, чтобы пометить окно, отображающее узел, и т. д. Обычно это не отображается в тексте самого документа. Сравните заголовки с заголовками .</p><h3><span class="ez-toc-section" id="i-13"> Следующий идентификатор </span></h3> Устарело: только браузер NeXT. Может быть проигнорировано. Этот тег занимает один атрибут, который является номером следующего числового идентификатора документа быть выделенным (не очень хороший SGML). Обратите внимание, что при изменении документа старые идентификаторы привязок не должны использоваться повторно, так как могут быть сохранены ссылки в другом месте, которые указывают на них.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/773836/slide_2.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/773836/slide_2.jpg' /></noscript> Это читается и генерируется гипертекстом редакторы. Люди-писатели HTML обычно используют мнемонические альфа-идентификаторы. Программное обеспечение браузера может игнорировать этот тег. Пример использования: Якоря задают адреса других документов в формате «от» по отношению к адрес текущего документа. Как правило, адрес документа известен браузеру, потому что он использовался для доступа к документу. Однако если документ отправлен по почте или каким-либо образом виден с большей чем один адрес (например, через его имя файла, а также через его библиотеку каталожный номер сервера имен), тогда браузер должен знать базовый адрес для правильного вывода внешних адресов документов.<p> Формат этого тега еще не указан. В НАСТОЯЩЕЕ ВРЕМЯ НЕ ИСПОЛЬЗУЕТСЯ</p> Формат привязки следующий: … Текст между открывающим тегом и закрывающим тегом является либо начало или назначение (или оба) ссылки. Атрибуты якоря тег выглядит следующим образом.<dl><dt> ХРЕФ</dt><dd> Если присутствует атрибут HREF, якорь является чувствительным текстом: начало ссылки.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fhd.multiurok.ru/7/0/a/70a0d0e7bbf68ec362ad51e17d053a444281dc61/img19.jpg' /><noscript><img loading='lazy' src='/800/600/http/fhd.multiurok.ru/7/0/a/70a0d0e7bbf68ec362ad51e17d053a444281dc61/img19.jpg' /></noscript> Если читатель выбирает этот текст, он должен быть представлен с другим документом, сетевой адрес которого определяется значение атрибута HREF. Формат сетевого адреса указывается в другом месте. Это позволяет использовать форму HREF=#identifier для ссылки на другой якорь в том же документе. Если якорь в другом документе атрибут является относительным именем относительно адрес документов (или указанный базовый адрес, если таковой имеется).</dd><dt> ИМЯ</dt><dd> Атрибут NAME позволяет якорю быть пунктом назначения ссылка. Значением параметра является часть гипертекстового адреса который следует за знаком решетки.</dd><dt> ТИП</dt><dd> Атрибут TYPE может давать отношение, описанное гипертекстовая ссылка. Тип выражается строкой для расширения. Строки для типов с определенной семантикой будут зарегистрированы команда W3. Отношение по умолчанию, если ничего другого не указано, является недействительным.</dd></dl> Все атрибуты являются необязательными, хотя один из NAME и HREF необходим.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/624314/slide_14.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/624314/slide_14.jpg' /></noscript> чтобы якорь был полезен. Этот тег информирует читателя о том, что документ является индексным документом. Помимо чтения, читатель может использовать поиск по ключевым словам.<p> Формат:</p> Узел может быть запрошен с поиском по ключевому слову путем добавления суффикса узла адрес со знаком вопроса, за которым следует список ключевых слов, разделенных по плюсам. См. формат сетевого адреса. Этот тег указывает, что весь последующий текст следует понимать буквально, до конца файла. Простой текст предназначен для представления так же, как пример текста XMP, с символом фиксированной ширины и значительные разрывы строк. Формат: Этот тег позволяет эффективно читать остальную часть файла без разбор. Его наличие — это оптимизация. Нет закрывающего тега. Эти стили позволяют полностью встраивать текст символов фиксированной ширины. как в документе. Формат: … Текст между этими тегами должен быть отображен шрифтом фиксированной ширины, так что любое форматирование, выполненное с помощью межсимвольного интервала в последовательных строках будет поддерживаться.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/566371/slide_6.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/566371/slide_6.jpg' /></noscript> Между открывающим и закрывающим тегами:<ul><li> Текст может содержать любые печатные символы ISO Latin, в том числе открывающий тег, если он не содержит закрывающий тег в полный.</li><li> Границы линий имеют значение и должны интерпретироваться как перемещение к началу новой строки.</li><li> Символ горизонтальной табуляции ASCII (HT) следует интерпретировать как наименьшее положительное ненулевое количество пробелов, которое оставит число символов до сих пор в строке как кратное 8. Его использование не рекомендуется однако.</li></ul> Тег LISTING отображается таким образом, что содержит не менее 132 символов. уложиться в строчку. Тег XMP изображается шрифтом таким образом, чтобы по крайней мере В строке помещается 80 символов, но в остальном он идентичен СПИСКУ. Здесь приведены примеры разметки с использованием тега XMP.<h3><span class="ez-toc-section" id="i-14"> Абзац </span></h3> Этот тег указывает на новый абзац. Точное представление об этом (отступ, интерлиньяж и т. д.) здесь не определены и могут быть функцией других тегов, таблиц стилей и т.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fhd.multiurok.ru/7/0/a/70a0d0e7bbf68ec362ad51e17d053a444281dc61/img11.jpg' /><noscript><img loading='lazy' src='/800/600/http/fhd.multiurok.ru/7/0/a/70a0d0e7bbf68ec362ad51e17d053a444281dc61/img11.jpg' /></noscript> д. Формат просто (В терминах SGML элементы абзаца передаются в свернутом виде). Поддерживается несколько уровней (не менее шести) заголовков. Обратите внимание, что гипертекстовый документ, как правило, требует меньшего количества уровней заголовка, чем обычный документ, единственная структура которого определяется вложенностью заголовков. h2 — самый высокий уровень заголовка, рекомендуется для начала гипертекстового узла. Предлагается, чтобы первый заголовок был одним подходит для читателя, который уже просматривает связанную информацию, в отличие от тега title, который должен идентифицировать узел в более широком контекст. Эти теги хранятся в соответствии с определением в руководстве CERN SGML. Их определение является полностью историческим, происходящим от набора тегов AAP. Разница заключается в том, что HTML-документы позволяют завершать заголовки закрывающими теги:<h3><span class="ez-toc-section" id="i-15"> Заголовок второго уровня </span></h3> Этот тег предназначен для адресной информации, подписей и т. д., обычно в верхней или нижней части документа.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/f/FrX0QDN7fbwiulU6jnMTChEx93BqvHg5LzPsZa/slide-6.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/f/FrX0QDN7fbwiulU6jnMTChEx93BqvHg5LzPsZa/slide-6.jpg' /></noscript> обычно это курсив и / или справа оправдано или с отступом. Формат: <address> текст … </address><h3><span class="ez-toc-section" id="i-16"> Подсветка </span></h3> Выделенные теги фраз могут встречаться в обычном тексте и могут быть вложенными. За каждым открывающим тегом должен следовать соответствующий закрывающий тег. В НАСТОЯЩЕЕ ВРЕМЯ НЕ ИСПОЛЬЗУЕТСЯ. …… так далее.<h3><span class="ez-toc-section" id="i-17"> Глоссарии </span></h3> Глоссарий (или список определений) представляет собой список параграфов, каждый из которых рядом с ним есть короткое название. Помимо глоссариев, этот формат полезен для представления читателю набора именованных элементов. формат следующий:<dl><dt> Термин</dt><dd> определение страницы</dd><dt> Термин2</dt><dd> Определение термина2</dd></dl><h3><span class="ez-toc-section" id="i-18"> Списки </span></h3> Список представляет собой последовательность абзацев, каждому из которых предшествует специальный знак или порядковый номер. Формат:<ul><li> элемент списка</li><li> еще один элемент списка…</li></ul> За открывающим тегом списка должен сразу следовать первый список элемент.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/538306/slide_9.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/538306/slide_9.jpg' /></noscript> Представление списка здесь не определено, но маркированный список для неупорядоченных списков и последовательность пронумерованных абзацев для упорядоченного списка было бы вполне уместно. Другие возможности для интерактивного отображения включают встроенные прокручиваемые панели просмотра.<p> Открывающие теги списка:</p><dl><dt> УЛ</dt><dd> Список многострочных абзацев, обычно разделенных белым пространство.</dd><dt> МЕНЮ</dt><dd> Список меньших абзацев. Обычно одна строка на элемент, с стиль более компактный, чем UL.</dd><dt> ДИР</dt><dd> Список коротких элементов, менее одной строки. Типичный стиль расположить в четыре колонки или предоставить браузер и т. д.</dd></dl> закрывающий тег должен явно совпадать с открывающим тегом.<h2><span class="ez-toc-section" id="_HTML5"> Что такое документ HTML5 и с чего начать </span></h2><p data-readability-styled="true"> Если вы только начинаете работать с HTML, весь этот код в верхней части документа может показаться немного сумасшедшим, но на самом деле каждая строка имеет определенное назначение.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/architecture-and-design.ru/wp-content/uploads/f/7/b/f7ba407051f0ef17f663d213890d1296.jpeg' /><noscript><img loading='lazy' src='/800/600/http/architecture-and-design.ru/wp-content/uploads/f/7/b/f7ba407051f0ef17f663d213890d1296.jpeg' /></noscript> Проще говоря, весь этот материал в верхней части вашего HTML5-документа содержит всю информацию, которую браузер должен знать, как думать о HTML-документе. Это то, что всегда загружается и запускается браузером в первую очередь. Как правило, информация, находящаяся в верхней части HTML-документа перед его телом, не отображается на веб-страницах. Итак, какова цель всего этого кода и зачем он нужен браузеру? Если вы используете расширенный HTML-редактор, такой как Dreamweaver, эта часть HTML-документа обычно вставляется за вас. Вам не нужно добавлять его снова, но полезно понять, зачем нужен этот код. Начнем с того, что стоит перед элементом head:</p><pre> <strong> <!DOCTYPE html> </strong> </pre><p data-readability-styled="true"> Тег <code> <!DOCTYPE html> </code> необходим для HTML5 и всегда должен быть самым первым в вашем HTML-документе. Это помогает браузеру узнать, какую версию HTML вы используете. Браузер по-прежнему распознает его даже в нижнем или верблюжьем регистре, но рекомендуется писать именно так: <code> <!DOCTYPE html> </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/u/UBOcSM5eaQ3gv1WCrqPY94oTu0FtVfIniwADky/slide-12.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/u/UBOcSM5eaQ3gv1WCrqPY94oTu0FtVfIniwADky/slide-12.jpg' /></noscript></p><pre> <strong> <html lang="ru"> </strong> </pre><p data-readability-styled="true"> Может показаться излишним, что вы ставите <code><html> </code> сразу после <code> <!DOCTYPE html> </code> , но этот тег служит другой цели. Вы могли заметить, что <code> <!DOCTYPE html> </code> не включает закрывающий тег. Это связано с тем, что браузеру не нужна дополнительная информация, кроме типа документа. Однако тег <code><html> </code> включает закрывающий тег. Вы поместите весь свой код страницы в этот тег, чтобы браузер знал, где начинается и заканчивается ваш HTML. Последний тег на вашей странице должен быть <code></html> </code> . Тег html также может иметь атрибуты, сообщающие браузеру немного больше информации о вашем HTML. Атрибут «lang» сообщает браузеру, на каком языке находится ваш контент, что также помогает поисковым системам направлять пользователей на страницы на их языке. W3Schools имеет полный список языковых кодов.</p><pre> <strong> <голова> </strong> </pre><p data-readability-styled="true"> Заголовок вашего HTML-документа содержит много информации не только для браузера, но и для поисковых систем.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/17/1164564/slide_4.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/17/1164564/slide_4.jpg' /></noscript> В этом теге вы найдете ключевые слова, описания, заголовок и метатеги. Все в этом разделе, кроме тега заголовка, не будет видно вашему пользователю. Элемент head HTML-страницы может состоять из строк и строк кода. Мы просто рассмотрим некоторые из самых основных. По мере развития вашего мастерства кодирования вам, вероятно, потребуется добавить теги сценариев для JavaScript или jQuery или более конкретные метатеги.</p><pre> <strong> <метакодировка ="utf-8"> </strong> </pre><p data-readability-styled="true"> В HTML5 метатеги считаются недействительными элементами, то есть они не могут иметь никакого содержимого, поэтому закрывающий тег не требуется. Мета-теги помогают поисковым системам найти ваш сайт и предоставляют информацию о вашей веб-странице. Вы можете добавить свое имя, программы, используемые для создания страницы или описания для поисковых систем. Самый важный метатег, который нужно включить, — это набор символов, и он должен быть первой строкой в элементе head. Атрибут «charset».<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/5/5D38tfZPC6VBLdRFH9AolUuqxbehNGEznp7c2j/slide-24.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/5/5D38tfZPC6VBLdRFH9AolUuqxbehNGEznp7c2j/slide-24.jpg' /></noscript> Вы почти всегда будете использовать атрибут «utf-8», который является Unicode или «универсальным алфавитом». Это набор символов, который охватывает почти все системы письма в мире. Атрибут «utf-8» позволит вашим специальным символам, таким как акценты, цитаты или даже дефисы, отображаться правильно, а не выглядеть сумасшедшей тарабарщиной. Размещение этой небольшой строки кода в элементе head первым может помочь предотвратить изменение вашего сайта хакерами, поскольку им легче манипулировать сайтами без кодировки, такой как «utf-8».</p><pre> <strong> <meta name="description" content="Лучший сайт всех времен"> </strong> </pre><p data-readability-styled="true"> Это предложит поисковым системам описания вашего сайта. То, что написано в мета-описании, часто можно найти на страницах результатов поисковой системы (SERP), чтобы показать фрагмент предварительного просмотра для вашей страницы. Оптимальная длина для поисковых систем — 155 символов. Постарайтесь придумать лучший способ передать контент на вашей странице, чтобы пользователь первым захотел нажать на ваш сайт.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/b/2/6/b266812776742c61d259d7e1c1a1d7b4.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/b/2/6/b266812776742c61d259d7e1c1a1d7b4.jpeg' /></noscript></p><pre> <strong> <название> </strong> </pre><p data-readability-styled="true"> Внутри тега title вы поместите, как вы уже догадались, заголовок вашей страницы. Технически заголовок — это единственный элемент <em>, который должен находиться в голове </em>. Текст, который вы помещаете в тег заголовка, обычно отображается в строке заголовка браузера и будет именем по умолчанию для закладок. Это также первый способ каталогизации сайтов поисковыми системами. Здесь рекомендуется следовать отличной практике — указывать больше, чем что-то вроде <code><title>О , если вы создаете страницу «О программе» для своего сайта. Вы бы хотели написать что-то вроде: О программе | Digital-Tutors , чтобы дать поисковым системам некоторый контекст.
```
    
```
Вам также потребуется ссылка на ваш файл CSS. Возможно, вы научились стилю, добавляя стили непосредственно в HTML-документ. Если вы работаете над очень маленьким и статичным сайтом, это может быть нормально, но если вы работаете над сайтом с большим количеством элементов и страниц, у вас будет файл или папка CSS, которые вам нужны. скажите ваш HTML-файл для доступа. Элемент link для CSS имеет множество различных атрибутов. Атрибут «href» сообщает браузеру, где найти файл. Атрибут «type» сообщает браузеру, что это за файл, а атрибут «rel» сообщает браузеру, какое отношение имеет связанный файл к файлу, в котором он сейчас находится. В HTML5 атрибут «type» больше не нужен, так как значением по умолчанию является «text/css», но вы увидите, что он по-прежнему включен почти в каждый элемент ссылки.
```
    
```
Как и в случае со ссылкой CSS, вам может понадобиться ссылка на шрифты, которые вы используете на своем сайте. Здесь вы можете добавить ссылки на шрифты, которые вы использовали.