Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3




Скачать 217.96 Kb.
НазваниеПравила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3
Дата публикации30.03.2014
Размер217.96 Kb.
ТипДокументы
uchebilka.ru > Информатика > Документы
, а заканчивается . Закрывающий тег не обязателен, но его рекомендуется ставить для обозначения границы каждой строки.

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

Ячейки (элемент TD)

Для описания содержимого отдельных ячеек таблицы предназначен парный тег , размещаемого непосредственно после элемента TABLE (но обязательно до элементов TR, TD или ТН.

По умолчанию название таблицы располагается над таблицей по центру и отображается тем же шрифтом, что и содержимое ячеек данных. Для изменения формата названия тег , ,
Лекції 2-3. Мова HTML. Структура веб-документа.



HTML – основные понятия, структура документа.Основные понятия. 2

Правила записи тега: 2

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

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

Форматирование HTML — документа 3

Работа с графическими изображениями в веб документе. Работа со списками 3

Использование списков 5

Виды списков: 5

Ссылки. Связь с другими документами. Использование объектов в качестве ссылок. 6

Виды ссылок: 6

Соединение с другими документами 6

Обращение к определенным разделам других документов 7

Использование изображения в качестве ссылки 7

Контрольные вопросы. 7

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

Основные понятия. 7

Общая структура таблицы 7

Задание общих параметров таблицы 8

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

Основные понятия. 10

Элемент задания фреймов FRAMESET 10

Безфреймовая версия страницы (элемент NOFRAMES) 12



^

HTML – основные понятия, структура документа.Основные понятия.



HTML – язык разметки гипертекста (текст содержащий гипессылки).

Гипертекст – это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации и т.д.

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

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

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

Браузеры – специальные программы просмотра HTML-документов, служащие для форматирования файлов в виде Web-страниц и отображения их на экране (Internet Explorer,Opera, Mozila)

Web-страницы – комплексные документы, которые могут содержать любые виды данных: текст, графику, звук, видео, анимацию).

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

Большинство тегов используются попарно и называются парными (существуют также одиночные теги):

  • Открывающийся

  • Закрывающиеся
    (не используют параметры)

Открывающийся тег создаёт эффект, а закрывающийся - прекращает его действие.

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


название документа
^

Правила записи тега:


  • После имени тега следуют параметры, которые определяются друг от друга пробелами

  • Порядок следования параметров произволен

  • Если параметр требует значения, то оно указывается после названия параметра через знак равенства (align="center")

  • Значение параметра может записываться в кавычках и без них (обязательны кавычки, если в параметре имеется пробел)

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

^

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


сам документ - первый тег, с которого следует начинать описание (эти теги сообщают браузеру, что перед ним документ HTML).

Документ может состоять из 2 разделов:

  1. ^ Раздел заголовка (начинается тегом ) – предоставляется необходимая информация для браузера, не является обязательным.

  2. Название документа. Тег – контейнер даёт документу название (название может иметь неограниченную длину и содержать любые символы, кроме некоторых зарезервированных) Это название обычно показывается в заголовке окна браузера <br /></ol> <br /><title>Компьютерный класс

    1. Раздел содержательной части. Начинается тегом тело документа



    ^

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


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

        --------

        до
        --------


      • Абзацы. Для абзаца используется тег

        ------

        (HTML не создает красную строку, а отделяет абзацы пустой строкой).

      • Горизонтальная линейка. Разделение различных частей документа друг от друга создаётся одиночным тегом


      • Переход на новую строку (без создания абзаца) – тег


      • Выделение фрагментовтег (курсив), (жирный)



    ^

    Форматирование HTML — документа


    Выравнивание:

    Теги , <Р> и др. могут задаваться с параметром горизонтального выравнивания ALIGN. Его значения:

    ^ Left - выравнивание текста по левой границе окна браузера

    Сenter — по центру

    Right - по правой границе

    Justify - выравнивание по ширине

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

    Индексы:

    Удобно использовать для индексов и степеней

    Верхний - Нижний -

    ^ Параметры шрифта:

    Тег указывает параметры шрифта

    Параметр SIZE имеет значение размера шрифта в условных единицах от 1 до 7 (нормальный - 3).

    Параметр Color устанавливает цвет шрифта (с помощью стандартных имён или в формате RGB .

    ^ Параметр Face - указание типа шрифта.

    Тег - используется для указания размера, типа, и цвета шрифта, используемого по умолчанию. Для него не существует закрывающегося тега. Его значение чаще всего не распространяется на таблицы. Эти значения обязательны для всего документа, но могут переопределяться с помощью тега . Этот тег имеет те же параметры, что тег
    ^ Параметры тега


    Align (выравнивание по краю или по центру, имеет значения left center right).

    Width - (устанавливает длину линии в пикселях, в процентах от ширины).

    Size – (устанавливает толщину линии в пикселях).

    Noshade (отменяет рельефность линии).

    Color (указывает цвет линии).

    Контрольные вопросы:

    1. Что такое гипертекстовый документ?

    2. Какие теги используются в заголовке Веб документа?

    3. Какова структура HTML документа?

    4. С помощью каких тегов можно задать или изменить шрифт?

    5. Какие Вы знаете параметры тегов?
    ^

    Работа с графическими изображениями в веб документе. Работа со списками



    Для создания графического фона используются небольшие картинки в формате gif и jpeg. Браузер автоматически заполняет ими весь экран. Для задания фона используется атрибут BACKGROUND тега .

    Например:

    Для того, чтобы вставить картинку в web-страничку лучше всего использовать форматы gif и jpg. Первый популярен из-за возможности использовать прозрачный цвет (тогда изображения могут иметь прозрачные участки), а второй - имеет малый размер и удобен для фотографий.
    ^ Для вставки картинки используется тег IMG.

    Его синтаксис:

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

    Место расположения может иметь следующие значения:

    • TOP - последующий текст располагается в верхней части изображения;

    • BOTTOM - последующий текст располагается в нижней части изображения;

    • LEFT - изображение находится в левой части листа, текст обтекает изображение справа;

    • MIDDLE - изображение находится в центре листа,

    • RIGHT - изображение находится в правой части листа, текст обтекает изображение слева.

    Атрибуты alt, align, width, height являются необязательными.
    Выравнивание изображения (Параметр Align)

    • Задание размеров. Параметры: WIDTH – ширина изображения, HEIGHT – высота изображения

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

    Параметры HSPACE и VSPACE значения, которых определяют отступы по горизонтали и по вертикали
    Рамки вокруг изображения

    Параметр BORDER. в качестве значения используется число в пикселях, определяющее толщину рамки.
    ^ Альтернативный текст

    Параметр ALT даёт некоторую информацию о графическом изображении, если режим просмотра отключен (иногда он используется в качестве подсказки).
    ^ Использование изображения в качестве ссылки

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

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

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

    ^

    Использование списков


    необходимо для:

    1. объединения фрагментов в единую удобную структуру

    2. описания сложных пошаговых процессов

    3. расположения информации в стиле оглавления



    ^

    Виды списков:


    1. Маркированный

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

Заголовки (элемент ТН)

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

<ТН>Содержимое ячейки заголовка

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

Название (элемент CAPTION)

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

  • align - определяет выравнивание названия относительно границы таблицы. Этот атрибут принимает любое из четырех значений: left (выравнивание по левой границе, название располагается над таблицей), right (выравнивание по правой границе), top (название располагается над таблицей по центру) и bottom (название под таблицей по центру);

  • valign - применяется для выравнивания названия при размещении его над или под таблицей (атрибут align не выполняет выравнивания названия вправо или влево при значениях top и bottom). Для выравнивания нужно применить оба атрибута valign и align: атрибут valign будет задавать расположение названия над или под таблицей, а атрибут align -определять его выравнивание по левой или правой границе таблицы;

  • style - устанавливает свойства стиля, относящиеся к тексту.



^

Задание общих параметров таблицы


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

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

Ширина таблицы (атрибут width)

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

Выравнивание таблицы в документе (атрибут align)

Для назначения положения таблицы относительно боковых границ окна броузера применяется атрибут align тега < table >. Может принимать одно из трех значений: left, center, right.

Вывод внешней рамки (атрибут border)

По умолчанию равен нулю (границы не отображаются). Таблицы без рамок используются для скрытого позиционирования элементов таблицы. Ширина рамки задаётся только для внешних границ числовым значением (при этом отобразятся и внутренние границы).

Ширина границ таблицы (атрибут cellspacing)

Границы таблицы представляются в виде двух линий (по умолчанию общая ширина 2 пиксела). Атрибут cellspasing изменяет расстояние между ячейками (т.е. ширину границ).

Расстояние от содержимого ячейки до границ (атрибут cellpadding).

По умолчанию равен одному пикселу. Задает расстояние до всех границ в ячейках таблицы.
Таблица1. Основные значения тега Table.

имя атрибута

возможные значения

смысл

примечания

ALIGN

^ LEFT, CENTER, RIGHT

горизонтальное выравнивание всей таблицы

по умолчанию LEFT

WIDTH

числовые, процентные

ширина всей таблицы

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

BORDER

целое

ширина рамки

значение 0 (по умолчанию) означает - без рамки; некоторые броузеры допускают просто написание BORDER, которое воспринимается, как BORDER=1

CELLSPACING

целое

промежуток между ячейками




CELLPADDING

целое

промежуток между содержимым ячейки и рамкой вокруг ячейки в

 



^ Форматирование данных в таблице, оформление рамок (форматирование строк и ячеек)

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

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

^ Параметры выравнивания содержимого ячейки (применяется в тегах
, )

Горизонтальное выравнивание - ALIGN может принимать значения (left, right, center)

Вертикальное выравнивание – VALIGN может принимать значение:

Top – по верхнему краю,

^ Bottom – по нижнему краю,

Middle- по середине,

baseline – обеспечивает привязку текста отдельной строки к во всех ячейках к единой линии.

Параметр NOWRAP – отключает возможность автоматического разбиения текста ячейки на строки (применяется в тегах
, )

^ Параметр COLSPAN=числовое значение, определяющее объединение ячеек по горизонтали

Параметр ROWSPAN = числовое значение, определяющее объединение ячеек по вертикали

^ Заливка таблицы: (применяется в тегах ,
, )

Параметр BGCOLOR – заливка определенным цветом

Параметр BACKGROUND – заливка текстурой
Контрольные вопросы.

  1. Опишите общую структуру таблицы.

  2. Назовите общие параметры форматирования таблиц.

  3. Какими параметрами выравнивают содержимое ячейек?

^

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




Основные понятия.


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

Применяется при:

  • необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;

  • для расположения в определенном месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана;

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

Поскольку документ с фреймами фактически состоит из нескольких документов, вместо элемента BODY необходимо записывать FRAMESET - элемент фреймовой структуры. Этот элемент с помощью своих атрибутов задает набор фреймов, отображаемых броузером. То, что находится внутри каждого фрейма, определяется элементом FRAME. Все элементы FRAME располагаются внутри контейнера "FRAMESET>... .

^

Элемент задания фреймов FRAMESET


Контейнер из тэгов и обрамляет каждый блок определений фрейма. Внутри контейнера могут содержаться только теги и вложенные тэги . Тег имеет два основных параметра: rows (строки) и cols (столбцы):

. Например:



Каждый элемент FRAMESET формирует фреймы, относящиеся к одному набору (или уровню). Чтобы задать фреймы с разными свойствами (например, размеры или вид обрамления), применяются вложенные фреймы.

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

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



Общее количество значений в списке равно количеству фреймов, описываемых данным элементом FRAMESET. Первое значение соответствует ширине крайнего левого фрейма, а последующие значения относятся ко второму, третьему фрейму и т.д. В приведенной выше записи ширина первого фрейма 20% от общей ширины окна, второго фрейма - 55% , а третьему фрейму отводится оставшаяся часть окна, этот факт отмечается звездочкой *. Можно также указывать размер в пикселях, например:

Изменить размеры фрейма можно перемещением мышью границы между фреймами. Границы допускают перемещение, если в отсутствует атрибут noresize.
^ Атрибут rows

Атрибут rows назначает количество и размеры горизонтальных фреймов. Значением этого атрибута является список размеров (аналогично значению атрибута cols). В последовательности перечисляемых чисел или символов сначала указывается высота верхнего фрейма, завершается список размером нижнего фрейма.
^ Совместное использование атрибутов rows и cols

В теге можно одновременно указывать атрибуты rows и cols. При этом каждый горизонтальный фрейм броузер разобьет на заданное число вертикальных фреймов.
^ Толщина и цвет рамок (атрибуты border, bordercolor)

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

Атрибут bordercolor позволяет управлять цветом границ между фреймами. Например, bordercolor = "white " задает границу белого цвета. На экране будет присутствовать узкая полоска от тени рамки.
^ Содержимое фреймов (элемент FRAME)

Cодержимое каждого отдельного фрейма задается элементом FRAME, который указывает на документ, загружаемый в область фрейма. Каждому фрейму отвечает свой одиночный тег .
^ Задание файла-источника (атрибут src)

В HTML не предусмотрено другого описания содержимого фрейма, поэтому src - это обязательный атрибут тега .

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

Если фрейм декларирован в элементе frameset, но для него не существует тега , указывающего на документ-источник, то на месте последнего фрейма броузер отобразит поле серого (Internet Explorer) или белого (Netscape) цвета. Если в элементе frame указан неверный url, то в соответствующем фрейме появится сообщение «Невозможно отобразить страницу».
^ Пустой фрейм

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



<ТІТLЕ> Пустая страница




^ Вложенные фреймы

В пункте «Совместное использование атрибутов rows и cols» нами было ассмотрено формирование на странице вертикальных и горизонтальных реймов одного уровня, которое выполнялось с помощью одного элемента RAMESET. Более сложную структуру можно создать, если использовать эле-шты FRAMESET, вложенные друг в друга.

^

Безфреймовая версия страницы (элемент NOFRAMES)


Если броузер не воспроизводит содержимое фреймов, то разработчики создают два варианта Web-страниц: с фреймами и без фреймов (все современные броузеры поддерживают фреймовую структуру дакумента).

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

Расположение и размеры фреймов, вид границ определяются атрибутами элемента FRAMESET. Два главных атрибута этого элемента cols и rows мы уже описывали, рассмотрим остальные атрибуты.
^ Стилевые свойства рамки

Фреймы относятся к блочным HTML-элементам, поэтому при работе с ними можно применять стилевые свойства, вводимые атрибутом style. Перечислим свойства, с помощью которых вы сможете управлять внешней рамкой:

  • border-width - определяет толщину внешней рамки вокруг фреймов. Например, встроенный стиль style="border-width: thick" устанавливает отображение толстой рамки с внешней стороны набора фреймов элемента FRAMESET;

  • border-color - задает цвет внешней рамки. Например, стиль style= "border-color : aqua" будет указывать броузеру на отображение рамки бирюзовым цветом;

  • border-style устанавливает стиль внешней рамки, например, атрибут style= "border-style: double" задает отображение рамки в виде двойной линии.




  1. Как организуется плавающий фрейм?

  2. Как загрузить документ внутрь указанного фрейма?

  3. Назовите атрибуты, отвечающие за рамки и поля фреймов?

  4. Как убрать поля прокрутки?

  5. Как организовать панель навигации?


Добавить документ в свой блог или на сайт

Похожие:

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 iconЛекция 2 Тема: Структурное форматирование документа. Форматирование символов
Цель: Научиться использовать элементы структурного форматирования документа и символов

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 iconHtml. Определение, описание, назначение. Понятие тэгов
Стандартная структура html – документа. Описать назначение блоков, привести пример

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 iconЛабораторная работа №1 «структура html – документа. Основные средства...

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 iconПрактическая работа №33. Тема : Создание простейшего Web-документа
Цель: Познакомиться с языком html, овладеть техникой  создания Web-страниц, научиться применять гиперссылки внутри Web-документа

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 iconУказывает программе просмотра страниц на то, что документ имеет формат html
Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тэг названия документа,...

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 iconТема: Основы JavaScript. Методы объкта Window. События
Создать html-файл lab javascript htm который будет выводит текст в тело документа. Обратите внимание на то как включен JavaScript...

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 iconЛекция: Редактирование документа Лекция посвящена вопросам работы...
Показаны способы поиска и замены текста в документе. Приведены возможности использования синонимов. Изучаются способы перемещения...

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 iconРешением методсовета нпб бгпу заголовок записи в обоих случаях в библиотеке применяется
Библиографическое описание составной части документа", что более соответствует заглавию документа ифла "Руководство по применению...

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 iconНазвание документа
Копия документа, подтверждающего полномочия лица, подписывающего договор со стороны контрагента (протокол о назначении (избрании),...

Правила записи тега: 2 Структура документа 2 Определение и оформление функциональных разделов документа 3 Форматирование html документа 3 icon2 Обработка текстовой информации. Текстовые процессоры
...

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
uchebilka.ru
Главная страница


<