Данный язык представляет собой довольно простой набор команд, описывающий структуру документа. Язык HTML позволяет выделить в документе отдельные элементы – заголовки, абзацы, таблицы и т.д. Файлы с текстом кода на языке HTML имеют расширение .html или .htm.
HTML является описательным языком разметки документов, в нем используются указатели разметки (теги).
Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив закрывающая пара представляет собой , для тега заголовка <ТIТLЕ> закрывающей парой будет ТIТLЕ>). Атрибуты прописываются в начальных тегах. Конечные теги никогда не содержат атрибутов. Теги определяют область действия правил интерпретации текстовых документов.
Для краткости и образности мы будем в ряде случаев вместо словосочетания "элемент разметки" применять термин "контейнер".
Общая схема построения контейнера в формате HTML может быть записана в следующем виде: "контейнер"= <"имя тега" "список атрибутов"> содержание контейнера "имя тега">
Структура HTML-документа позволяет задействовать вложенные друг в друга контейнеры. Собственно, сам документ — это один большой контейнер, который начинается с тега и заканчивается тегом . Он указывает браузеру, что данный текст представляет собой HTML-документ и, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать.
Типичная Интернет-страница состоит из двух частей: головная часть (HEAD) и тела (BODY). Эту базовую структуру в простейшем виде можно представить следующим образом:
<HTML> HTML>Элемент является самым внешним, так как между его начальным и конечным тегами должна находится вся страница. Этот элемент можно рассматривать как формальность.
Область заголовка Wеb-страницы. Служит для формирования общей структуры документа. Должен включать элемент TITLE и допускает вложение элемента META.
Элемент разметки TITLE служит для именования документа в World Wide Web.
Синтаксис контейнера TITLE в общем виде выглядит следующим образом:
название документа
Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа.
Это собственно тело документа. Это та произвольная часть документа, которую разрабатывает автор страницы и которая отображается браузером. Конечный тег этого элемента располагается в конце html-кода. В этом элементе могут использоваться все элементы, предназначенные для дизайна web-страницы.
Так как все html-документы имеют одинаковую структуру, рекомендуется создать общий шаблон, в котором будут меняться только название (содержимое тега <TITLE>…TITLE>) и содержательная часть документа (содержимое контейнера <BODY>…BODY>.
Создавать html-код лучше в программе Блокнот:1. Создать текстовый документ (программа Блокнот).
2. Выбрать Файл/Сохранить как в строке имя файла ввести: имя_документа.htm и нажимает на кнопку Сохранить.
Описание тегов тела документа следует начать с тега <ВОDY>. В отличие от тега <НEАD>, тег <BОDY> имеет атрибуты. Они задают параметры, распространяющиеся на весь документ, такие, как цвет фона, шрифта, гиперссылок и размеры полей страницы.
В теге <BОDY> можно задать свои цветовые параметры документа, используя атрибуты:
bgcolor=цвет фона
tехt=цвет текста
vlink =цвет пройденных гипертекстовых ссылок
link =цвет гипертекстовой ссылки
alink=цвет активной гипертекстовой ссылки
Пример: <ВОDY вgcolor=#FFFFFF техт=#0000FF vlink=#FF0000 link=#00FF00>,то цвет фона будет белым, текст будет синим, ссылки — зелеными, а пройденные ссылки станут красными.
Цвет можно задать просто написав его название на английском языке, или используя RGB-код, который состоит из # и шестизначного кода цвета.
В теге <BODY> можно задать также поля страницы.
При выводе Web-страницы на экран браузер автоматически оставляет небольшие поля (примерно 10 пикселе) вдоль левого и вдоль верхнего краев рабочего окна.
Если же требуется изменить размеры полей или убрать их совсем, нужно включить в тег <BODY> атрибуты left; line-height: 150%">Например, тег <ВОDY left;line-height: 150%"> Абзац <P>…P>
Элемент абзаца (paragraph) применяется для разделения текста на параграфы. Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает не только начало следующего абзаца, но и конец предыдущего.
Браузер использует для отделения одного абзаца от другого пустую строку.
В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег. В некоторых случаях начальных тег удобно ставить в конце строки: он не только обозначит конец абзаца, но и выполнит функцию разрыва строки.
Например:
<P>Текст первого абзаца.
<P>Текст второго абзацаP>
Вместе с элементом абзаца можно использовать атрибут выравнивания align:
align=left – выравнивание по левому краю;
align=right – выравнивание по правому краю;
align=center – выравнивание по центру;
align=justify – выравнивание по ширине.
Например, для форматирования абзаца по ширине следует использовать такую конструкцию:
<P align=right>Текст абзаца выровнен по правому краю
Элемент обеспечивает принудительный переход на новую строку. Он имеет только начальный тег. Отличие тега <BR> от тега <P> состоит в том, что браузер не создает пустой строки между строками.
Тег (Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в теги , не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки.
…
Элемент для обозначения текста, отформатированного заранее (preformatted). Подразумевается, что текст будет выведен в том виде, в котором он записан в HTML-коде – со всеми пробелами и концами строк. Этот удобно при показе сложных страниц. Пример:
Основные средства форматирования текста
Для форматирования текста HTML – документов предусмотрена целая группа тегов.
Заголовки в тексте рекомендуется оформлять стандартными стилями. Для выделения заголовков используются парные тэги от
Страница с кодом будет показана так:
Рисунок 1
Если же нужно задать выравнивание заголовка, необходимо использовать атрибут align (горизонтальное выравнивание), который имеет следующие значения:
align=left – выравнивание по левому краю;
align=right – выравнивание по правому краю;
align=center – выравнивание по центру;
align=justify – выравнивание по ширине.
Например, <H2 align=center>Подзаголовок выровнен по центруH2>
Существует несколько стандартных стилей оформления текста: жирный, курсив, зачеркнутый, подчеркнутый, верхний индекс и нижний индекс.
... (от английского bold), а так же — это жирный текст
... (от английского italic), а так же — это курсив
... (от английского strike out) — это зачеркнутый текст
... (от английского underline) — это подчеркнутый текст
... (от английского superscript) — это верхний индекс
... (от английского subscript) — это нижний индекс
...(от английского preformatted) — это специальный стиль для оформления текстов программ (моноширинный шрифт, остаются все пробелы и переходы на новую строку).
Стиль относится к тексту, заключенному между открывающим и закрывающим тэгами.
Для того чтобы изменить параметры шрифта произвольного объекта текста (части абзаца, целого абзаца или нескольких абзацев) нужно использовать контейнер <FONT>…FONT>, который имеет ряд атрибутов:
Атрибут sizе тега позволяет задавать размер текста в данной области. Уменьшение или увеличение размера шрифта на несколько условных единиц задается значением параметра size=n, где n – размер шрифта в неких абсолютных единицах.
Этот атрибут может принимать значения от 1 до 7 (7-самый крупный, 1- самый мелкий).
Пример:
Шрифт 7
Шрифт 1
Размер шрифта может также задаваться относительно базового:
Size=-2
Size=-1
Size=0 (база)
Size=+1
Size=+2
Size=+3
Size=+4
Установка цвета в этой команде выполняется при помощи атрибута color.
Пример:
<FONT color=blue> Этот отрывок будет выведен на экран синим шрифтом FONT>.
Для управления гарнитурой шрифта используется атрибут face в команде <FONT>.
Пример:
Times New Roman> Этот текст будет показан шрифтом Times New Roman. FONT>
Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру.
В списках можно использовать стандартные атрибуты.
В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists
Самым простым является маркированный (ненумерованный) список.
Ненумерованный список предназначен для создания текста типа:
первый элемент списка;
второй элемент списка;
третий элемент списка.
Записывается данный список в виде последовательности:
<UL>
<LI>Первый элемент спискаLI>
<LI>Второй элемент спискаLI>
<LI>Последний элемент спискаLI>
UL>
Теги
и являются своеобразным обрамлением списка. Он позволяет отделить один список от другого. Тег (List Item) обозначает каждый из пунктов списка. Конечный тег LI> не является обязательным.Для тега <UL> предусмотрен атрибут type, определяющий вид маркера, который браузер помещает перед каждым элементом списка. Этот атрибут может отсутствовать или принимать одно из трех значений:
Пример: Нумерованный списокВ нумерованных списках каждый элемент снабжен номером, вид и начальное значение которого настраивается специальными атрибутами.
Нумерованный список задается при помощи команды <OL>:
<OL>
<LI>Первый элемент спискаLI>
<LI>Второй элемент спискаLI>
<LI>Последний элемент спискаLI>
OL>
Вид номера определяется значением атрибута type в теге <OL>:
Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start=n. Число n задает начальное значение нумерации. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, 4 означает D или IV).Пример:
Еще один способ создания сложных списков – использование принципа вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список. Вложенный список располагается с небольшим отступом вправо относительно списка верхнего уровня.
Пример:
В примере нумерованные списки размещены внутри пунктов ненумерованного списка.Ссылка (гиперссылка) – это возможность «связать» любой находящийся на данной странице фрагмент текста (слово, фразу или целый абзац) либо рисунок с другой Интернет-страницей или файлом данных (например, графическим файлом GIF или JPEG), так что при щелчке мыши на таком тексте или рисунке пользователь автоматически переходит на указанную к ссылке страницу.
Переход к другому документу (файлу)
Для того чтобы браузер загрузил в свое окно новый HTML-документ, нужно записать в программе ссылку при помощи команды <A> с атрибутом href=имя_файла.
На экран выводится ссылка:текст гиперссылки.
При щелчке мыши на ссылке браузер строит на экране документ по программе заданной в файле имя_файла.
<A href=имя_файла>текст гиперссылкиA>
…
Графика
В Интернете наиболее популярны два графических формата: GIF и JPEG.
Обычно используют:
JPEG – для фотографий и очень сложных по цветовой гамме рисунков с плавными цветовыми переходами (в расширении записывается как JPG).
GIF – для логотипов, надписей, заголовков, рисунков, имеющих четкие цветовые граница.
Рисунок 2
Чтобы паркет смотрелся красиво, необходима визуальная стыковка «плит» между собой. Это надо учитывать при создании фоновой иллюстрации. Очень важно, чтобы фон оставался фоном и не отвлекал внимание пользователя от главных элементов документа, не мешал читать текст.
Фоновая картинка задается в команде <BODY> атрибутом background:
<BODY background=файл_с_картинкой>.
Необходимо также всегда записывать атрибут bgcolor, даже если задан паркетный фон, так как браузер может не поддерживать графики или пользователь отключить показ графики.
Можно использовать фоновую картинку высота, которой составляет всего один пиксел, а длина – 1600 пикселов (пример: fon3.jpg) или, наоборот, длина – 1 пиксел, а высота 1200 пикселов (пример: fon.gif).
Рисунок 4
Рисунок 5
При прокрутке длинной страницы фоновая фактура перемещается вместе с текстом и прочими элементами ее содержания. Чтобы зафиксировать фон так, чтобы при прокручивании страницы ее содержание «скользило» по нему используют атрибут bgproperties со значением fixed : <BODY bgproperties= fixed>
Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного значка нужно воспользоваться командой <IMG>. Команда не имеет парного закрывающего тега, но имеет много атрибутов.
Атрибут src=имя_файла
Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Команда вывода графики будет иметь вид <IMG src=./pic/img.gif>.
Атрибут alt=“текст_надписи”
Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt.
Например, выполняя команду:
<IMG src=./pic/monstr.jpg alt=«Страшный зверь»>
браузер, не найдя картинку выведет на экран такой рисунок:
Атрибут alt рекомендуется использовать всегда. Даже если картинка найдется браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию.
Атрибуты width=n и height=m
Эти атрибуты задают ширину (width) и высоту (height) (в пикселях) прямоугольника, в который выводится картинка. Если атрибуты не заданы, картинка рисуется в естественных размерах.
Атрибут border=n
Атрибут позволяет задать рамку вокруг иллюстрации толщиной в n пикселов. При отсутствии атрибута или при значении n=0 рамка не рисуется.
Атрибуты hspace=n vspace=n
Атрибуты hspace и vspace определяют свободное пространство слева и справа (hspace), над и под (vspace) картинкой.
Для прекращения обтекания текста слева и справа от картинки используются теги
и
Картинка как ссылка
Очень легко заставить картинку работать как гиперссылка. достаточно вложить команду <IMG> внутрь команды <A>: <A href=переход…><IMG src=файл…>A>
Курсор при попадании на картинку-ссылку меняет свою форму. Щелчок мыши по картинке заставляет браузер выполнять переход. Картинка-ссылка не подчеркивается, как текстовая ссылка, и не выделяется цветом, а обрамляется в рамочку.
Таблицы являются очень удобным средством форматирования данных на Web-странице. Основное удобство заключается в том, что браузер берет на себя заботу о прорисовке рамки таблицы.
При создании таблиц используется принцип вложения: внутри основного элемента таблицы (<TABLE>) создается ряд элементов, определяющих строки (<TR>), а внутри этих элементов размещаются элементы для описания каждой ячейки в строке (<TD>, <TН>):
<TABLE>Например, после элемента <TABLE> указан элемент <TR>, это означает, что начитается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов <TD> (ячеек), другая таблица и т.д. После того, как встретиться новый элемент <TR>, начинается описание следующей строки, и т.д. до конца таблицы (тега TABLE>):
Таблица
(1,1)
(1,2)
(2,1)
(2,2)
(3,1)
(3,2)
Рисунок 8
Внешний элемент таблицы Он позволяет задавать общие свойства таблицы и отделяет структуру таблицы от остальной части Web-страницы. Большинство его атрибутов могут использоваться и в других элементах таблицы.
Этот атрибут позволяет определять положение таблицы по отношению к соседним элементам документа, т.е. имеет для таблиц тот же смысл, что и для картинок.
align=left – выравнивание слеваalign=center – выравнивание по центру
align=right – выравнивание справа
Задает ширину таблицы. Если атрибут не задан, браузер рисует таблицу минимальных размеров вокруг данных, которые она содержит. Запись width=число заставляет браузер рисовать таблицу шириной в указанное число пикселей. Если реально для таблицы требуется больше места, значение width игнорируется. Если заданный размер уводит таблицу за правую границу окна, браузер добавляет к окну горизонтальную линейку протяжки.
Можно также задавать ширину таблицы в процентном отношении к ширине окна браузера: процент (например: width=90%).
Используя атрибуты команды <TR>, можно установить те или иные свойства одновременно для всех ячеек строки.
baseline ( по самой верхней текстовой строку)
Выравнивание по вертикали
bgcolor
цвет
Цвет фона
bordercolor
цвет
Цвет линий рамки
Горизонтальное выравнивание. Если атрибут не задан, содержимое ячеек выравнивается по левому краю границы ячейки.
Вертикальное выравнивание содержимого ячеек. Принимает следующие значение:
valign=bottom – выравнивает по нижнему краю ячейки (не всегда работает);
valign=center – выравнивает по центру;
valign=baseline – выравнивает по первой строке.
Если атрибут не задан, ячейки выводятся на фон, установленный для таблицы, или на фон документа, если фон таблицы не задан. Позволяет задать собственный фоновый цвет для всех ячеек в строке.
Каждая табличная строка состоит из ячеек, которые последовательно описываются командами<TD> (обычная ячейка) и или <TH> (ячейка заголовок).
Содержимое обычной ячейки по умолчанию выравнивается по левому краю, ячейки-заголовка – по центру. Кроме того, текст в ячейке-заголовке выделяется полужирным шрифтом.
(n) займет в пределах строки
Ширина большой ячейки в столбцах
rowspan
Определяет сколько строк (n) займет в пределах столбца
Высота большой ячейки в строках
Атрибуты для тега <TD> (<TH>), совпадающие с атрибутами тега <TR>, имеют тот же смысл, но относятся не к строке, а к отдельной ячейке.
Атрибуты width и background имеют тот же смысл, что и для тега <TABLE>, то относятся к отдельной ячейке. Наличие у тега <TD> (<TH>) атрибута background означает, что каждая ячейка может иметь свою собственную фоновую картинку (даже если для всей таблицы в целом фоновая картинка уже указана).
Атрибут colspan=n определяет, сколько табличных столбцов (n) займет ячейка в проделах строки:
Атрибут rowspan=n определяет, сколько табличных строк (n) займет ячейка в пределах столбца:
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR> или пробелом ( ). Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Использование заголовков таблицы — тег <САРТIОN>
Тег позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION аlign=top>), либо под таблицей (<САРТION align=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.
Пример таблицы:
Таблица с объединенными
ячейками
Заголовок 1
Заголовок 1.1
Заголовок 1.2
Заголовок 2
Ячейка 1
Ячейка 2
Заголовок 3
Ячейка 3
Ячейка 4
Таблицы, как дизайнерский инструмент
В гипертекстовом документе можно создать поля, если размещать информацию внутри таблицы, состоящей всего из одной клетки с невидимыми границами. При изменении значения атрибута cell; line-height: 150%">Используя таблицы, можно выводить на экран информацию в несколько колонок.
Используя таблицы, можно выровнять информационные блоки на экранеи разместить их в соответствии с дизайн-проектом документа.
Иногда Web-страницу делят на несколько частей (чаще всего — на две, реже — на три, совсем редко — на большее количество). Одна такая часть называется фреймом (от английского frame — рамка). В каждом фрейме отображается отдельная Web-страница.
Структура фреймов описывается в специальном файле. Таким образом, для создания страницы с двумя фреймами надо по крайней мере три файла: в одном описывается структура, а в двух других — страницы, которые будут показаны в первом и втором фреймах.
В отличие от обычной Web-страницы, страница, которая описывает структуру фреймов, не содержит тела, то есть блока .... Вместо этого записывается блок ... (от английского frameset- набор фреймов).
Чаще всего используется разбивка страницы на столбцы, когда левая часть содержит оглавление сложного документа, а в правой показан выбранный раздел. Пример файла, в котором описана такая структура, приведен ниже:
<HTML>
<HEAD>
<TITLE>Фреймы-столбцыTITLE>
HEAD>
<FRAMESET COLS="30%,*" FRAMESPACING="20">
<FRAME SRC="left.html" NORESIZE SCROLLING="auto">
<FRAME SRC="right.html" NAME="qq">
FRAMESET>
HTML>
Браузер отображает эту страницу так:
Описание структуры заключено внутрь блока .... В параметре COLS тэга указывается, сколько фреймов-столбцов будет на странице и какова ширина каждого из них (через запятую).
Ширина фреймов может быть задана в процентах от всей ширины окна браузера или в пикселах. Знак * означает «использовать все оставшееся место». В этом примере левая часть занимает 30 процентов ширины окна.
Параметр FRAMESPACING тэга задает ширину границы между фреймами в пикселах. Границу можно перетаскивать мышкой, изменяя размеры фреймов, если это разрешено.
Если требуется скрыть границу между фреймами, в тэге надо установит дополнительные параметры (для разных браузеров):
Каждый фрейм описывается непарным тэгом , у которого есть один обязательный параметр SRC, указывающий имя файла для или URL документа в Интернете, который будет загружен в этот фрейм.
Параметр NORESIZE тэга говорит о том, что размеры этого фрейма запрещено менять. Параметр SCROLLING задает режим работы вертикальной линейки прокрутки и может принимать три значения:
yes — линейка прокрутки видна всегда
no — прокрутка запрещена, линейки прокрутки нет
auto — линейка прокрутки появляется только тогда, когда информация не помещается в окно
Каждый фрейм может иметь имя, которое указывается в параметре NAME тэга . Оно служит для того, чтобы загружать документы в другой фрейм, обращаясь к нему по имени.
Параметры ;background: #ffffff; line-height: 150%"> Например, чтобы убрать эти поля, надо написать
Разбивка на строки
Аналогично описывается и деление страницы на фреймы-строки. Для этого используется параметр ROWS тэга.
Фреймы-строки
отображается на экране так:
Обратите внимание, что высота первой строки задана в пикселах (без знака процента).
Легко заметить, что страница разбита на два столбца, а второй столбец - еще на 2 строки. Таким образом, получилась вложенная структура, где вместо второго столбца использован набор фреймов с разбивкой на строки:
Фреймы
Часто один фрейм используется как оглавление, а другой является рабочей частью. Для того, чтобы после щелчка на пункте оглавления заданный файл открывался не в том же фрейме, а в другом, в параметре TARGET тэга надо указать имя нужного фрейма.
Например, если надо открыть документ во фрейме с именем OKNO, можно записать:
Настоящий материал опубликован пользователем Белева Людмила Федоровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Курс профессиональной переподготовки
Курс повышения квалификации
Курс повышения квалификации
Курс профессиональной переподготовки
Рабочие листы
к вашим урокам
Скачать
6 975 796 материалов в базе
Вам будут доступны для скачивания все 158 635 материалов из нашего маркетплейса.
Мини-курс
4 ч.
Мини-курс
10 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.