Главная | Обратная связь | Поможем написать вашу работу!

Задание стандартных цветов

Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тег <BODY> дополнительные параметры:

< BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX">

где каждый из атрибутов определяет цвет того или иного элемента. BGCOLOR - цвет фона документа;

TEXT - цвет простого текста документа;

LINK -Цвет ссылок.

Горизонтальная линия

Используя тег <HR> можно разделить текст горизонтальной чертой.

Формат тега:

<HR SIZE=number WIDTH= number|percent ALIGN= left|right|center NOSHADE >

Атрибуты тега:

SIZE - толщина линии в пикселях;

WIDTH - ширина линии в пикселях или процентах от ширины окна браузера.

ALIGN - расположение на экране (слева | по центру | справа).

NOSHADE - по умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

Пример встраивания изображений

Таблицы в HTML

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

Основные теги таблиц

Все элементы таблицы должны находиться внутри двух тегов <TABLE>...</TABLE>. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

Строка таблицызадается парой тегов <TR>...</TR>. Количество строк таблицы определяется количеством встречающихся пар тегов <TR>...</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице (соответственно, расположение по горизонтали и по вертикали).

Пара тегов <TD>...</TD> описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть изменено как на уровне описания строки, так и на уровне описания ячейки.

Ячейка заголовка таблицы определяется тегами <TH>...</TH> и имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Теги <CAPTION>...</CAPTION> описывают название таблицы (подпись). Тег <CAPTION> может присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. Атрибут ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. Подпись всегда центрирована в рамках ширины таблицы.

Основные атрибуты таблиц

BORDER - данный атрибут используется в теге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

ALIGN - Если атрибут ALIGN присутствует внутри тегов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру). Пример.

VALIGN - данный атрибут встречается внутри тегов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (верх), bottom (низ), middle (по середине) и baseline (все ячейки строки прижаты вверх). Пример.

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

COLSPAN - указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию - 1.

ROWSPAN - указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию - 1.

COLSPEC - данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".

СЕLLРАDDING - д анный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки. Пример.

СЕLLSPACING - определяет ширину промежутков между ячейками в пикселях. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселям. Пример.

Примечание: для задания различных параметров таблиц рекомендуется использование таблиц стилей. Пример таблицы c использованием стилей:

<BODY>

.title {font-weight: bold; text-align: left}

.data {font-weight: italic; text-align: center}

</STYLE>

<CAPTION> Таблица №1 </CAPTION>

<TH COLSPAN=2>Среднее значение</TH>

</TR>

</TR>

<TR>

<TD CLASS=title>Юноши</TD>

</TR>

<TR>

<TD CLASS=title>Девушки</TD>

</TR>

</TABLE>

</BODY>

Верстка HTML документов

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

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

Блочная верстка HTML страницы выполняется с помошью тегов <div>(см. ниже) с набором CSS стилей для них. Верстка блоками DIV[8] имеет ряд преимуществ по сравнению с табличной версткой. Верстка блоками DIV обеспечивает более быструю загрузку страницы сайта, содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, содержимое которой не отобразится до тех пор, пока полностью не загрузится в браузер).

Элемент DIV

DIV играет роль универсального блока. Блочный элемент всегда отделен от прочих элементов страницы (контекста) пустой строкой. DIV не несет никакой смысловой нагрузки. Часто говорят, что DIV — это раздел страницы. Применение элемента DIV имеет больший в контексте CSS. DIV позволяет применить атрибуты стиля, связанные с границей блока и отступами блока от границ старшего элемента, а также "набивку", т.е. отступ от границы блока до границы вложенного элемента. Например:

<DIV STYLE="border-color:#003366;

border-width:1px;

margin:20px;padding:10px;">

Блочный элемент, заданный элементом разметки

DIV.

</DIV>

<P>Для него определена граница и отступы как

от границ старшего элемента разметки, так и

для вложенных в него элементов разметки.</P>

Рисунок 2.1 – Пример отображения блокаDiv

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

Элемент SPAN

Элемент разметки SPAN — это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он применяется для задания свойств отображения текста с иcпользованием CSS и должен заменять устаревшие элементы HTML, такие как: FONT, I, B, U, SUB, SUP и т.п.

Стандарт XHTML

XHTML (англ. Extensible Hypertext Markup Language — Расширяемый язык разметки гипертекста) — язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML(eXtensible Markup Language — расширяемый язык разметки). Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 31 мая 2001 года.

Основными отличиями XHTML от HTML являются:

· Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или <br>) должны иметь на конце / (например, <br />).

· Булевы атрибуты записываются в развёрнутой форме. Например, следует писать <option selected="selected"> или <td nowrap="nowrap">.

· Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img alt="" /> вместо <IMG ALT="" />).

· XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться < и & соответственно.

· Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).

По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ.

Валидация HTML-документов

Консорциум W3С обеспечивает службу валидации страниц Web для проверки страницы на соответствие стандартам. Служба валидации W3C доступна по адресу: http://validator.w3.org.

Для корректного отображения Web-страницы в браузере желательно указать, с каким стандартом она согласована. Для этого необходимо указать Определение типа документа (DTD - Document Type Definition) с использованием декларации DOCTYPE, которая должна предшествовать любой разметке в документе. Например:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE задает тип корневого элемента документа (<html>), публичный идентификатор и системный идентификатор.

Публичный идентификатор (-//W3C//DTD HTML 4.01//EN) показывает кто использовал декларацию типа документа, или DTD, (W3C); название DTD (DTD HTML 4.01); и язык на котором написана DTD (EN, т.е. английский). Обратите внимание, что DTD не указывает на язык самой Web-страницы; там указан язык, на котором составлен DTD.

Системный идентификатор (www.w3.org/TR/html4/strict.dtd) — это путь к используемой DTD.

Варианты DOCTYPE для HTML 4.01:

· Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

· Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

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

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

· С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов(см. л.р.№2).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Аналогично для XHTML:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Порядок выполнения работы

В процессе выполнения лабораторной работы необходимо реализовать Ваш персональный Web-сайт, имеющий структуру, представленную на рисунке 1.

Рисунок 1 – Структура Web-сайта

Рекомендуется следующее содержимое Web-страниц:

· Главная страница:

o Меню, содержащее гиперссылки на все страницы сайта;

o Фамилия Имя Отчество;

o Фотография;

o Класс;

o Название настоящей лабораторной работы.

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

· Обо мне:

o Меню, содержащее гиперссылки на все страницы сайта;

o Автобиография в произвольной форме (возможно использование и графического материала);

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

· Мои интересы:

o Меню, содержащее гиперссылки на все страницы сайта;

o содержание страницы, выполненное в виде списка гиперссылок на якоря внутри этой страницы (например: мое хобби, мои любимые книги, моя любимая музыка, мои любимые фильмы и т.п.);

o непосредственно содержимое каждого из разделов;

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

· Учеба:

o Меню, содержащее гиперссылки на все страницы сайта;

o Полное название школы;

o Полное название класса;

o Перечень изучаемых дисциплин, выполненный в виде таблицы.

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

· Фотоальбом:

o 15 фотографий представленных в виде таблицы, по N^*) фото в строке; каждое фото должно иметь всплывающую подсказку с его названием, а также подпись с его названием под фото.

o гиперссылка на главную страницу.

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

Примечания:

1) Заголовок каждой HTML страницы должен содержать название сайта и название данной страницы (например: «Персональный сайт Иванова Ивана. Главная страница.»). Все страницы должны быть выполненными в одном стиле (иметь одинаковый цвет фона (или фоновое изображение) и тп).

2) При выполнении верстки страниц использовать блочный метод. Приветствуется использование CSS фреймворка[9-11]

3) Для задания внешнего вида содержимого веб-страниц использовать CSS[7].

4) Необходимо выполнить валидацию разработанных страниц в соответствии со стандартами HTML 4.01 Strict(или XHTML 1.1) и CSS2.

5) ПРИ ВЫПОЛНЕНИИ ЛАБОРАТОРНОЙ РАБОТЫ ЗАПРЕЩАЕТСЯ ПОЛЬЗОВАТЬСЯ ГРАФИЧЕСКИМИ HTML-РЕДАКТОРАМИ ИЛИ КОНВЕРТЕРАМИ В ФОРМАТ HTML!

Содержание отчёта

4.1. Цель работы.

4.2. Порядок выполнения работы.

4.3. Тексты разработанных HTML-документов.

4.4. Изображения разработанных Web-страниц.

4.5. Выводы по результатам работы.

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

5.1. Что такое HTML?

5.2. Для чего в HTML используются теги?

5.3. Расскажите о структуре HTML-документов?

5.4. Для чего в HTML-документах используется элемент META?

5.5. Как в HTML-документах реализуются заголовки частей текста?

5.6. Как вставить в HTML-документ преформатированный текст?

5.8. В чем преимущества использования каскадных таблиц стилей в HTML?

5.9. Где возможно размещение информации о стилях в HTML-документе?

5.10. Что такое URL? Расскажите о формате URL?

5.11. Как задаются ссылки в HTML-документе?

5.12. Приведите пример организации списков в HTML?

5.13. Как вставить графический элемент в HTML-документ?

5.14. Какие атрибуты используются в тегах таблиц HTML?

5.15. В чем состоят основные отличия HTML и XHTML?

5.16. Что понимают под HTML вёрсткой?

5.17. Что такое валидация HTML?

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

1. П.Б. Храмцов «Основы web-технологий» - Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И. - Интернет-университет информационных технологий - ИНТУИТ.ру, 2003 г., 512 стр.

2. В.А.Будилов – “Практические занятия по HTML. Краткий курс” Наука и техника, 2001г., 256 с.

3. А.К. Гультяев “Уроки WEB мастера. Технология и инструменты: Практическое пособие”, Гультяев А.К., Машин В.А.:М, КОРОНАпринт, 2001 г., 448 с.

4.Спейнауэр С., Куэрсиа В. Справочник Web-мастера. - К: «BHV», 1997. – 368 с.

5. Спецификация HTML 4.01 - http://www.w3.org/TR/html401

6. Спецификация XHTML 1. 1 http://www.w3.org/TR/xhtml11/

7. Спецификация CSS2 - http://www.w3.org/TR/CSS2

8. Верстка блоками DIV - http://www.linedmk.com/page32.html

9. XHTML/CSS шаблон для создания кроссбраузерных сайтов - http://css-framework.ru/

10. Yet Another Multicolumn Layout | An (X)HTML/CSS Framework - http://www.yaml.de/en/

11. Blueprint:A CSS framework - http://www.blueprintcss.org/

⇐ Предыдущая 1 2 34

Воспользуйтесь поиском по сайту: