Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Лабораторный практикум
по Web-технологиям
Основы HTML технологий
Лабораторный практикум
Содержание.
Предисловие
Введение в язык HTML
Структура HTML-документа
Функциональные блочные элементы
Лабораторная работа №1
Текстовое оформление страниц
Вставка изображений в html-страницы
Выравнивание изображений
Лабораторная работа №2
Создание гиперссылок
Ссылки внутри страницы
Ссылка на новое окно
Лабораторная работа №3
Создание списков
Нумерованные списки
Маркированные списки
Лабораторная работа № 4
Создание таблиц
Параметры таблицы
Лабораторная работа №5
Создание фреймов
Лабораторная работа №6
Каскадные таблицы стилей 34
CSS Текст
Свойства текста
Границы и рамки
Типы рамок
Приложения
Приложение 1
Названия цветов
Приложение 2
Краткий справочник по тегам
В последние два десятилетия Интернет прочно вошел в нашу жизнь. В наше время он охватывает почти все сферы жизни: культура, искусство, бизнес. Наряду с обычными музеями, библиотеками, магазинами все большую популярность во всем мире завоевывают аналогичные Интернет-ресурсы. Даже бизнес становится виртуальным: создаются Web-представительства фирм, электронные магазины и торговые площадки, электронные банки, которые дают возможность осуществлять типичные для этих сфер операции с большей скоростью. В связи с этим профессия Web-дизайнера и Web-программиста стала востребованной и у нас в России. Интернет-технологии создания указанных web-ресурсов требует владения такими языками для написания серверных скриптов, как Perl, PHP, ASP, владения языком XML, а также умения создавать динамические страницы и сайты, используя скрипты VBScript и JavaScript, которые позволяют осуществлять вычисления, работу с датой и временем, изменение элементов страницы по желанию пользователя.
Perl – язык для написания CGI-скриптов (Common GateWay Interface). CGI-скрипт – это программа, которая выполняется на Web-сервере по запросу посетителя сайта. CGI – это не язык программирования, а специальный интерфейс, с помощью которого и происходит запуск скрипта и взаимодействие с ним.
PHP-скрипт (Hypertext Preprocessor) – скрипт, написанный на языке PHP и внедренный в HTML-документ.
ASP-скрипт (Active Server Pages) – скрипт, написанный на языке Visual Basic Scripting Edition и внедренный в HTML-документ.
Но это потом. А на первом этапе необходимо научиться создавать простые HTML-страницы. Не стоит считать, что в этом нет необходимости. Простого HTML вполне хватит для двухстраничной коммерции, которая распространяется сейчас по всему миру. HTML позволяет создать «заготовки» страниц, а уже потом можно добавлять в них различные скрипты. XML же – это надстройка над HTML. Поэтому без изучения HTML не обойтись. Итак, HTML – HyperText MarkUp Language – язык разметки гипертекста. Гипертекст – расширенный текст, который может содержать в себе текст, иллюстрации, различные внедренные объекты и ссылки на другие ресурсы или на другие Web-страницы.
При передаче информации через Интернет используются как раз HTML-страницы – файлы *.htm и *.html, поскольку они содержат в себе гипертекст, имеют размер меньше, чем текстовые или иные файлы и для их просмотра нужен только браузер.
HTML-документ представляет собой обычный текстовый документ с управляющими конструкциями языка HTML – тегами, которые и производят действия «форматирования» над текстовыми блоками и осуществляют вставку различных объектов в документ.
Создавать HTML-страницы можно вручную – путем самостоятельного написания тегов в текстовом редакторе или используя Web-редакторы с автоматизацией ввода нужных тегов – например, WebEdit, Arachnophilia или же используя программы, которые создают теги сами в ответ на действие пользователя на странице – по принципу What You See Is What You Get – например, MS Word, MS Frontpage. Но они задают абсолютное форматирование и часто дописывают много лишнего кода к странице. К тому же для создания более уникальных страниц ими не обойдешься, для этого лучше писать теги HTML самому и использовать каскадные таблицы стилей.
Мы предлагаем использовать для создания Web-страниц блокнот, который входит в стандартный набор любой из операционных систем Windows и не требует предварительного изучения.
Наш практикум содержит в себе все основные разделы, необходимые для создания Web-страниц. В каждом разделе есть примеры использования тегов, показан результат действия этих тегов, а также представлены лабораторные работы. Практикум можно использовать для самостоятельного изучения технологии создания статических Web-страниц студентам любых специальностей или тем, кто хочет самостоятельно изучить основы языка HTML.
Автономные Web-документы используют язык HTML (HypertextMarkup Language - язык разметки гипертекста). Гипертекст, то есть расширенный текст, включает дополнительные элементы: иллюстрации, ссылки, вставные объекты. Под разметкой понимается использование специальных кодов, легко отделяемых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML.
HTML -документ - это файл, содержащий обыкновенный текст со специальными командами. Такой файл может быть подготовлен в произвольном текстовом редакторе (существуют, однако, специальные программы-конверторы и HTML-редакторы).
HTML -документ состоит из содержимого, то есть собственно полезной информации, и команд, задающих структуру.
Каждая команда (управляющая конструкция ) HTML -документа (тег) должна заключаться в угловые скобки - вот так: <тег>. Чаще всего в документе встречаются парные теги (открывающий и соответствующий ему закрывающий), так как браузеру необходимо знать область действия тега. Существуют и одиночные теги, однако, используются они только там, где область действия очевидна и дополнительной информации не требуется (ясно, например, что если мы встретили тег "начало абзаца" (<Р>), то предыдущий абзац уже закончился). В сомнительном же случае лучше перестраховаться и поставить закрывающий парный тег, иначе документ может оказаться нечитаемым. Открывающий и закрывающий теги называются одинаково и отличаются друг от друга только символом "наклонная черта" или "слэш" - "/", который ставится сразу после открывающей угловой скобки закрывающего тега. Закрытие парных тегов выполняется так, чтобы соблюдались правила вложения.
<В><I>На этот текст воздействуют два тега</I></B>
Кроме того, тег может включать атрибут, дающий дополнительную информацию браузеру. Например, при помощи атрибута можно попросить браузер изменить величину шрифта, ориентацию изображения по отношению к строке следующего за ним текста, поменять цвет фона документа и т. д. В парных тегах атрибуты добавляются только к открывающему тегу. Атрибуты представляют собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа ">". Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом "=" (знак равенства) и заключается в кавычки.
<Н1 ALIGN="LEFT">
Язык HTML в большинстве случаев совершено равнодушен к регистру, в котором набираются теги. Скажем, браузеру совершенно все равно, наберете вы тег, служащий для рисования горизонтальной линии, как <HR> или <hr> - эффект будет один и тот же.
HTML не признает никакого дополнительного форматирования текста, кроме как с помощью тегов. В результате текст, превосходно смотрящийся в текстовом редакторе, в окне браузера сольется в единую нечитаемую массу. Так, на месте нескольких пробелов будет лишь один пробел. Исчезнут все заголовки, пустые строки, деление текста на абзацы. Без HTML -тегов браузер просто игнорирует все элементы форматирования.
Определение HTML как языка разметки основывается на том, что при удалении из документа всех тегов получается текстовый документ, совершенно эквивалентный по содержанию исходному гипертекстовому документу. Таким образом, при отображении документа HTML сами теги не отображаются, но влияют на способ отображения остальной части документа.
<HTML>
<HEAD>
<TITLE> Моя домашняя страница </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Первый тег, который вы здесь видите, <HTML>, сообщает броузеру о том, что он имеет дело именно с документом в формате HTML. Тег <HTML> и парный ему закрывающий тег </HTML> можно считать как бы "конвертом", в который помещается весь документ. Любой HTML -документ состоит из заголовка, который задается при помощи тега <TITLE>, и тела документа, который определяется тегом <BODY>. В заголовке документа размещается служебная информация, комментарии автора и заголовок страницы, заключаемый в теги <TITLE>. Заголовок, вписанный между тегами <TITLE>, в основное текстовое поле браузеру не попадает, а, как правило, размещается в заголовке окна браузера. HTML-документ - это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Большинство элементов языка HTML описывает части содержания документа и помещается между тегами <BODY> и </BODY>, то есть, внутрь структурного элемента BODY. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста. Теперь можно сформулировать правила вложения элементов.
· Элементы не должны пересекаться. Другими словами, если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента.
· Блочные элементы могут содержать вложенные блочные и текстовые элементы.
· Текстовые элементы могут содержать вложенные текстовые элементы.
· Текстовые элементы не могут содержать вложенные блочные элементы.
Строго говоря, все правила языка HTML можно рассматривать исключительно как "пожелания". Средство, используемое для отображения Web-документа, сделает все возможное, чтобы истолковать разметку наиболее разумным образом. Тем не менее, гарантию правильного воспроизведения документа дает только неукоснительное следование требованиям спецификации языка.
В большинстве документов основными функциональными элементами являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <Н1> до <Н6>. При отображении Web-документа на экране компьютера эти элементы показываются при помощи шрифтов разного размера.
Обычные абзацы задаются с помощью парного тега <Р>. Язык HTML не содержит средств для создания абзацного отступа ("красной строки"), поэтому при отображении на экране компьютера абзацы разделяются пустой строкой. Закрывающий тег </Р> рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает начало очередного абзаца документа. Например:
<h1>Заголовок</h1>
<p>Первый абзац
<p>Второй абзац
<h2>Заголовок второго уровня</h2>
Заголовок
Первый абзац
Второй абзац
Заголовок второго уровня
Следствием наличия специального тега, определяющего абзац, является тот факт, что обычного символа конца строки, вводимого по нажатию клавиши ENTER, для создания абзацного отступа недостаточно. Язык HTML рассматривает символы конца строки и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца строки, при отображении документа рассматривается как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом <BR>).
С помощью тега <font> можно изменить параметры шрифта. Для тега используются следующие параметры: face, size и color.
Параметр Face служит для задания гарнитуры шрифтов использующихся для текста. Названий шрифтов можно указать несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, будет использоваться следующий по списку.
Пример 1. Использование параметра face
<font face="Arial, Helvetica, sans-serif">Текст будет написан шрифтом Arial.</font>
Size задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового.
Пример 2. Задание размера шрифта
<font size=1>Шрифт размера 1</font><br>
<font size=2>Шрифт размера 2</font><br>
<font size=3>Шрифт размера 3</font><br>
<font size=4>Шрифт размера 4</font><br>
<font size=5>Шрифт размера 5</font><br>
<font size=6>Шрифт размера 6</font><br>
<font size=7>Шрифт размера 7</font><br>
Шрифт размера 1
Шрифт размера 2
Шрифт размера 3
Шрифт размера 4
Шрифт размера 5
Шрифт размера 6
Шрифт размера 7
Color определяет цвет текста, который можно задавать с помощью названий цветов или в шестнадцатеричном формате.
Пример 3. Изменение цвета текста <font size=5 color=red face=Arial>П</font>ервая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной.</font>
Первая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной.
Видоизменение текста - средства его форматирования, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В таблице перечислены основные теги, которые применяются для изменения оформления текста.
|
Код HTML |
Описание |
Пример |
|
<b>Текст</b> |
Жирный текст |
Текст |
|
<i>Текст</i> |
Курсивное начертание текста |
Текст |
|
<u>Текст</u> |
Подчеркнутый текст |
Текст |
|
<sup>Текст</sup> |
Верхний индекс |
e=mc2 |
|
<sub>Текст</sub> |
Нижний индекс |
H2O |
|
<strike>Текст</strike> |
Зачеркнутый текст |
Текст |
|
<pre>Текст</pre> |
Текст пишется как есть, включая все пробелы |
Текст |
|
<em>Текст</em> |
Курсивный текст |
Текст |
|
<strong>Текст</strong> |
Жирный текст |
Текст |
Обычно для создания верхнего или нижнего индекса используется тег small, делающий индекс меньше по размеру основного шрифта.
Пример 4. Создание нижнего индекса
<b>Формула серной кислоты:</b>
<i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i>
Формула серной кислоты:
H2SO4
Выравнивание текста
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому, правому краю, по центру или по ширине.
|
Код HTML |
Описание |
Пример |
|
<p>Текст</p> |
Добавляет новый параграф, по умолчанию выровненный по левому краю. Перед параграфом автоматически добавляется пустая строка. |
Текст |
|
<p align=left>Текст</p> |
Выравнивание по левому краю. |
Текст |
|
<p align=right>Текст</p> |
Выравнивание по правому краю. |
Текст |
|
<p align=center>Текст</p> |
Выравнивание по центру. |
Текст |
|
<p align=justify>Текст</p> |
Выравнивание по ширине. |
Текст по ширине |
Задание
Оформите текст, как показано ниже:
Октябрь уж наступил,
Уж роща отряхает
Последние листы
С нагих своих ветвей.
Дохнул осенний хлад,
Дорога промерзает,
Журча, еще бежит
За мельницу ручей.
Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.
Файл с рисунком, изображенным ниже, называется sample.gif и размещается в папке images корня сайта.
Для указания адреса изображения можно задавать как абсолютный, так и относительный адрес.
Пример 1 Вставка изображения в документ
<html>
<body>
<img src="../files/190/http://www.htmlbook/images/sample.gif"> - это абсолютный адрес размещения изображения
<img src="../files/190//images/sample.gif"> - адрес размещения изображения относительно корня сайта
<img src="../files/190/images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html>
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG. В таблице перечислены возможные значение этого параметра и результат его использования.
|
Код HTML |
Описание |
Пример |
|
<img src="../files/190/HLPBELL.GIF" align=texttop> |
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
|
<img src=HLPBELL.GIF align=top> |
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
|
<img src=HLPBELL.GIF align=middle> |
Выравнивание середины изображения по базовой линии текущей строки. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
|
<img src=HLPBELL.GIF align=absmiddle> |
Выравнивание середины изображения по средине текущей строки. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
|
<img src=HLPBELL.GIF align=baseline> |
Выравнивание изображения по базовой линии текущей строки. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
|
<img src=HLPBELL.GIF align=bottom> |
Выравнивание нижней границы изображения по окружающему тексту.. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. .. |
|
<img src=HLPBELL.GIF align=left> |
Выравнивает изображение по левому краю окна. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
|
<img src=HLPBELL.GIF align=right> |
Выравнивает изображение по правому краю окна. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
Наиболее популярные параметры – left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.
Пример 2 Обтекание текста вокруг рисунка
<html>
<body>
<img src="../files/190/HLPBELL.GIF" width=50 height=50 hspace=10 vspace=10 align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
Задание
Выровняйте рисунки и текст так, как показано ниже:
Этот рисунок находится слева и текст выравнивается по левой границе. Эффект достигается без таблицы
Этот рисунок находится слева и текст выравнивается по центру. Эффект достигается без таблицы
Этот рисунок находится справа и текст выравнивается по правой границе. Эффект достигается без таблицы
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега A, который имеет единственный параметр href. В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка.
Пример 1. Использование абсолютных ссылок
<html>
<body>
<a href=www.yandex.ru>Поисковая система Яндекс</a>
</body>
</html>
Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса. Примеры таких адресов:
1. /
2. /demo/
3. /images/pic.gif
4. ../help/me.html
5. manual/info.html
Первые две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html) находящемуся в корне сайта (пример 1) или папке demo (пример 2). Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Слэш перед адресом говорит о том, что адресация начинается от корня сайта (пример 3), двоеточие - перейти на уровень выше в списке каталогов сайта (пример 4).
Пример 2. Использование относительных ссылок
<html>
<body>
<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>
<a href=tip.html>Как сделать такое же фото?</a>
</body>
</html>
Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи параметра name тега А.
Пример 1. Создание внутренней ссылки
<html>
<body>
<a name=top></a> Друг уронил утюг в унитаз. И разбил его. Причем так разбил, что по назначению унитаз и использовать никак нельзя. Мгновением назад только что вот все было хорошо и вот уже дыра, да такая, что можно забыть, что есть такой предмет в доме. Махнул рукой нечаянно, а потом мучайся...
<a href=#top>Наверх</a>
</body>
</html>
Между тегами <a name=top> и </a> отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом # , после чего идет название закладки. Название выбирается любое, соответствующее тематике.
Можно, также, делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.
Пример 2. Ссылка на закладку из другой веб-страницы
<html>
<body>
<a href=text.html#bottom>Перейти к нижней части текста</a>
</body>
</html>
Если требуется сделать ссылку на документ, который открывается в новом окне браузера, используется параметр target=_blank тега А.
Создание нового окна обычно требуется в случаях, когда делается ссылка на другой сайт, в остальном лучше открывать документы в текущем окне, поскольку обилие окон может сбить читателя с толку.
Так как ссылки на текущее или новое окно ничем не отличаются друг от друга, на некоторых сайтах рядом со ссылкой ставят специальную иконку, показывающую, что документ открывается в новом окне.
Пример 2. Создание ссылки на новое окно
<html>
<body>
<a href=www.bsu.edu.ru>Обычная ссылка на сайт Ошибка! Недопустимый объект гиперссылки.>
<a href=www.bsu.edu.ru target=_blank>Ссылка открывает новое окно на сайт Ошибка! Недопустимый объект гиперссылки.>
</body>
</html>
|
Обычная ссылка на сайт www.bsu.edu.ru Ссылка открывает новое окно на сайт www.bsu.edu.ru |
Задание
Используя внутренние ссылки, создать следующий словарь терминов:
Словарь терминов
А Б В Г Д Е
А
АВТЕНТИЧЕСКИЙ КАДАНС
кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой
АЛИКВОТНЫЕ СТРУНЫ
резонирующие струны, к которым исполнитель не прикасается во время игры
АТАКТА
гармонический элемент на басу нижнего или верхнего вводного тона
В начало
Б
БАГАТЕЛЬ
небольшая нетрудная для исполнения пьеса
БАРТОКОВСКОЕ ПИЦЦИКАТО
сильный щипок струны с последующим ударом струны о гриф
БОНАНГ
набор из 10-12 гонгов разного размера
В начало
В
В начало
Г
В начало
Д
В начало
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега OL, который и используется для создания списка. В качестве маркеров могут быть следующие значения: арабские цифры заглавные латинские буквы прописные латинские буквы заглавные римские цифры прописные римские цифры
Ниже, в таблице приведены различные параметры тега OL и результат их применения.
|
Код HTML |
Пример |
|
<ol> <li>текст</li> <li>текст</li> <li>текст</li> </ol> |
Нумерованный список с параметрами по умолчанию: 1. текст 2. текст 3. текст |
|
<ol start="5"> |
Нумерованный список начинающийся с пяти: 5. текст 6. текст 7. текст |
|
<ol type="A"> |
Нумерованный список с заглавными буквами латинского алфавита: A. текст B. текст C. текст |
|
<ol type="a"> |
Нумерованный список с прописными буквами латинского алфавита: a текст b текст c текст |
|
<ol type="I"> |
Нумерованный список с римскими буквами: I. текст II. текст III. текст |
|
<ol type="i"> |
Нумерованный список с прописными римскими буквами: i. текст ii. текст iii. текст |
|
<ol type="1"> |
Нумерованный список с арабскими цифрами: 1. текст 2. текст 3. текст |
|
<ol type="I" start="7"> |
Список с римскими цифрами начинающийся с семи: IV. текст V. текст VI. текст |
Задание 1: Создать страницу с указными выше (в таблице) списками.
Маркированные списки позволяют разбить большой текст на отдельные блоки. Тем самым привлекается внимание читателя к тексту и повышается его читабельность. С учетом худшего восприятия текста с экрана монитора, чем печатного варианта, это является весьма полезным приемом.
Для установки маркированного списка используется тег UL и LI (Пример 1)
Пример 1. Создание маркированного списка
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<ul>
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</ul>
</body>
</html>
Ниже показан результат примера 1.
|
Что следует учитывать при тестировании сайта:
|
Обратите внимание, что у маркированного текста появляются отступы сверху и снизу. Чтобы от них избавиться, список можно делать без тега UL. При этом исчезнут и отступы текста перед маркерами.
Пример 2. Создание маркированного списка без отступов
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</body>
</html>
Ниже показан результат примера 2.
|
Что следует учитывать при тестировании сайта:
|
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type="..." тега UL. Вместо многоточия подставляется одно из трех значений указанных в таблице.
|
Код HTML |
Пример |
|
<ul type="disc"> |
Что следует учитывать при тестировании сайта:
|
|
<ul type="circle"> |
Что следует учитывать при тестировании сайта:
|
|
<ul type="square"> |
Что следует учитывать при тестировании сайта:
|
Задание 2: Создать страницу с указными выше (в таблице) списками.
С помощью CSS этот список можно расширить и вместо встроенных символов использовать в качестве маркера рисунок.
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег-контейнер TABLE. Таблица должна содержать хотя бы одну строку и колонку.
Для добавления строк используются теги <tr> и </tr>. Чтобы разделить строки на колонки применяются теги <td> и </td>.
Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE.
<table параметр1=... параметр2=...>
Описание параметров таблицы и их свойств описано ниже.
|
Свойство |
Значение |
Описание |
Пример |
|
align= |
Left Right Center |
Выравнивание таблицы |
align=center |
|
background= |
URL |
Фоновый рисунок |
background=pic.gif |
|
bgcolor= |
#rrggbb |
Цвет фона таблицы |
bgcolor=#FF9900 |
|
border= |
n |
Толщина рамки в пикселах |
border=2 |
|
bordercolor= |
#rrggbb |
Цвет рамки |
bordercolor=#333333 |
|
bordercolordark= |
#rrggbb |
Тень рамки |
bordercolordark=#f0f0f0 |
|
cellpadding= |
n |
Расстояние между ячейкой и ее содержимым |
cellpadding=7 |
|
cellspacing= |
n |
Дистанция между ячейками |
cellspacing=3 |
|
nowrap |
Запрещает переносы строк в тексте |
<table nowrap> |
|
|
frame= |
Void Above Below Lhs Rhs Hsides Vsides Box |
Задание типа рамки таблицы |
frame=hsides |
|
valign= |
Top Bottom |
Выравнивание по высоте |
valign=top |
|
width= |
n n% |
Минимальная ширина таблицы, можно задавать в пикселах или процентах |
width=90% |
|
height |
n n% |
Минимальная высота таблицы, можно задавать в пикселах или процентах |
height=18 |
Примечание
1. Таблица, если не указано особо, всегда выравнивается по левому краю;
2. Параметр background, отвечающий за рисунок фона, своеобразно понимается в разных браузерах. IE вставляет картинку во всю таблицу, если таблица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали. Netscape добавляет фоновое изображение в каждую ячейку таблицы;
3. По умолчанию, таблица выводится без рамки. Однако Netscape добавляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте параметр border=0;
4. Если ширина таблицы не указана, она подгоняется под содержание ячеек.
Задание 1
Создать 3 таблицы, используя приведенный ниже листинг
1.1 Создание таблицы
<HTML>
<HEAD>
<TITLE>ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE border="2" align=center>
<TR>
<TD colspan=2 align=center>
<B>Заголовок Таблицы.</B>
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка первой строки
</TD>
<TD align="center">
Вторая ячейка первой строки
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка второй строки
</TD>
<TD align="center">
Вторая ячейка второй строки
</TD>
</TR>
</TABLE> <
</BODY>
</HTML>
Тег <TABLE> задает таблицу
Атрибуты border="2" и align=center задают, сответственно, размер границ таблицы и выравнивание ее по центру страницы
Тег <TR> задает строку таблицы
Тег <TD> задает ячейку таблицы
Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам)
В результате получится следующая таблица, состоящая из двух столбцов и двух строк:
|
Заголовок Таблицы. |
|
|
1 ячейка первой строки |
2 ячейка первой строки |
|
1 ячейка второй строки |
2 ячейка второй строки |
1.2. Сложная таблица
<HTML>
<HEAD>
<TITLE>СЛОЖНАЯ ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="75%" align=center>
<TR>
<TD width="66%" colspan="2">
<P align="center">
Две ячейки, объединенные по горизонтали
</TD >
</TR >
<TR >
<TD width="33%" rowspan="2" valign="middle" >
Две ячейки, объединенные по вертикали
</TD >
<TD width="33%">
по левому краю
</TD>
</TR >
<TR <
<TD width="33%" <
<P align="right" >по правому краю
</TD >
</TR >
</TABLE >
</BODY >
</HTML >
Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам)
Атрибут rowspan=n объединяет n ячеек по вертикали (по строкам)
Атрибут valign="middle" выравнивает текст в ячейке по центру ячейки по вертикали
В результате получается следующая таблица:
|
Две ячейки, объединенные по горизонтали |
|
|
Две ячейки, объединенные по вертикали |
по левому краю |
|
по правому краю |
1.3. Более сложная таблица
<HTML>
<HEAD>
<TITLE>УЧЕБНАЯ ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6"
CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime"
BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">
<THEAD BGCOLOR="Aqua">
<TR><TH COLSPAN="3">УЧЕБНАЯ ТАБЛИЦА</TH></TR>
</THEAD>
<TBODY>
<TR>
<TD WIDTH="33%">Это первая ячейка</TD>
<TD WIDTH="33%">Это вторая ячейка</TD>
<TD ROWSPAN="3">А это три ячейки третьего столбца
объединились в одну большую</TD>
</TR>
<TR>
<TD COLSPAN="2">Это единственная ячейка второй строки,
объединяющая оба столбца</TD>
</TR>
<TR>
<TD>Это первая ячейка третьей строки</TD>
<TD WIDTH="33%">А это вторая ячейка третьей строки</TD>
</TR>
</TBODY>
<TFOOT BGCOLOR="Yellow">
<TR><TD COLSPAN="3" ALIGN="center">
<SMALL>конец</SMALL></TD></TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>
Атрибут CELLSPACING="6" задает свободное пространство между ячейками таблицы
Атрибут CELLPADDING="20" задает свободное пространство между данными в ячейке и ее границами
Атрибут BORDERCOLORLIGHT="Lime" задает цвет левого и верхнего углов таблицы
Атрибут BORDERCOLORDARK="Green" задает цвет правого и нижнего углов таблицы
Атрибут BGCOLOR="#DFFFDF" задает цвет фона таблицы
В результате получается следующая таблица:
|
УЧЕБНАЯ ТАБЛИЦА |
||
|
Это первая ячейка |
Это вторая ячейка |
А это три ячейки третьего столбца объединились в одну большую |
|
Это единственная ячейка второй строки, объединяющая оба столбца |
||
|
Это первая ячейка третьей строки |
А это вторая ячейка третьей строки |
|
|
конец |
Задание 2
Создать турнирную таблицу, представленную ниже на рисунке.
Для задания кавычек используйте специальные символы « ("«") и » ("»"), для создания длинного тире используйте специальный символ — ("—").
Фреймы - это окна независимого просмотра HTML-документов. Иногда бывает очень удобно использовать навигацию по странице в виде меню, оформленного в отдельном фрейме, и основного окна, где будет представлена вся основная информация, определяемая действиями пользователя в области меню.
Для создания фрейма используется тег FRAMESET, который заменяет тег BODY в документе и используется для разделения экрана на области. Внутри данного тега находятся теги FRAME, которые указывают на HTML-документ, предназначенный для загрузки в область.
Пример 1. Создание простого фрейма
<HTML>
<FRAMESET cols="30%, 70%" border=0>
<FRAME src="../files/190/menu.html" name="Menu">
<FRAME src="../files/190/main.html" name="Main">
</FRAMESET>
</HTML>
В приведенном примере присутствует объявление двух фреймов, которые будут располагаться вертикальными полосами и занимать соответственно 30 и 70 процентов рабочей области. Вертикальное расположение устанавливается параметром cols="…", а для горизонтальных полос используют параметр rows="…". Параметр border="…" определяет границу между фреймами. Определение документа, изначально загружаемого при открытии этого файла (этот документ является HTML-страницей.), задается атрибутом тега <FRAME> src="../files/190/…", при этом необходимо указать параметр name="…", позволяющий задать "имя" созданной области в виде последовательности латинских букв и цифр, использованной как значение этого атрибута. Это имя можно использовать, чтобы загружать новые документы в ранее созданную область. Для этого в тег <A>, определяющий гиперссылку, необходимо добавить атрибут target="…", значение которого совпадает с ранее определенным именем области. При переходе по данной гиперссылке новый документ загрузится в указанный фрейм. Например, предположим, что начальная страница Web-узла состоит из двух фреймов: слева располагается навигационная панель, а справа - текущая страница. Если правой области присвоено имя, используемое во всех ссылках, имеющихся в левой области, то щелчок на любой ссылке навигационной панели приведет к обновлению информации в соседней области, оставляя навигационную панель без изменений. В данном документе находятся только ссылки на другие (существующие) HTML-документы, которые будут загружены броузером при открытии страницы с фреймами. Файл menu.html имеет следующую структуру:
HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1>Первый фрейм</H1>
</BODY>
</HTML>
Файл main.html также имеет указанную выше структуру. Следует сказать, что оба этих файла должны располагаться в том же каталоге, где расположен файл с фреймами.
Задание 1
Расположить эти фреймы по вертикали, используя атрибут rows="…". В результате у вас должно получиться следующее:
Задание 2
Распространенное явление - комбинация вертикальных и горизонтальных фреймов.
<FRAMESET cols="*, 55%"> символ * означает все оставшееся место
<FRAME src="../files/190/homepage.htm" name="Frame1">
<FRAMESET rows="15%, 15%, 70%">
<FRAME src="../files/190/menu.htm" name=" Frame2">
<FRAME src="../files/190/menu2.htm" name=" Frame3">
<FRAME src="../files/190/menu3.htm" name=" Frame4">
</FRAMESET>
</FRAMESET>
Используя вложенные теги FRAMESET, разбейте страницу следующим образом:
Задание 3
Используя атрибут target="…", сделать в фреймах гиперссылки, по нажатию на которые в эти же или в другие фреймы произойдет загрузка других страниц.