Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Лабораторная работа № 2. «Списки и ссылки»Стр 1 из 4Следующая ⇒
Разработка HTML-страниц Лабораторный практикум Часть 7
ОГЛАВЛЕНИЕ ВВЕДЕНИЕ. 3 Лабораторная работа № 1. Создание простейшего HTML-файла. 4 Лабораторная работа № 2. «Списки и ссылки». 12 Лабораторная работа № 3. Графика в интернет-документах. 22 Лабораторная работа №4. Создание графического меню с использованием навигационных областей HTML. 28 Лабораторная работа № 5. Таблицы в интернет-документах. 30 Лабораторная работа № 6. Фреймы. 37 Приложение А Названия цветов. 44 Приложение Б Краткий справочник по тегам. 48 Список использованных источников. 51 ВВЕДЕНИЕ Настоящее пособие предназначено для студентов и ориентировано на поддержку дисциплин “Информатика” и “Информационные системы и технологии”. Лабораторный практикум – состоит из шести лабораторных работ, предусматривающих освоение основных возможностей по разработке HTML-страниц. Каждая лабораторная работа содержит перечень заданий для выполнения, учитывающих будущую специализацию студентов. Каждая лабораторная работа способствует закреплению и углублению знаний, полученных студентами на лекционных занятиях. Данное пособие ориентировано на поддержку лабораторных и практических занятий в компьютерных классах; может также использоваться для самостоятельной работы, индивидуального и дистанционного обучения. Краткие теоретические сведения HTML-файл является простым текстовым файлом, содержащим инструкции программе-браузеру (Internet Explorer, Netscape, Opera, Mozilla и т. д.) для отображения информации на экране монитора. Эти инструкции записываются при помощи специальных команд - тегов. Тег представляет собой управляющую конструкцию, заключенную в скобки. Например: < B> этот тег выведет на экран жирный текст < /B> В данном случае первая латинская буква «В», заключенная в скобки является открывающим тегом, а вторая со знаком прямой слэш - закрывающим. Такая конструкция называется парным тегом или тегом-контейнером и управляет внешним видом информации, заключенной между двумя тегами. Кроме парных тегов существуют одиночные. Например: < BR>. Данный тег вставляет в документ принудительный перенос на следующую строку. В теги могут добавляться различные параметры, уточняющие его. HTML-файл имеет строго определенную структуру. В обязательном порядке это должны быть три раздела: 1. HTML 2. HEAD 3. BODY. Раздел HTML Раздел HTML определяет специфику документа, содержание которого будет интерпретироваться браузером. Раздел описывается тегом- контейнером < HTML>... < /HTML> и дает браузеру информацию о том, что документ разработан с помощью языка разметки HTML. Раздел HEAD Раздел HEAD выполняет функцию рабочего заголовка HTML- документа. Теги, указываемые внутри этого раздела, чрезвычайно важны и могут сильно влиять на внешний вид документа, но сами остаются незаметными глазу пользователя. Данному разделу сопоставлен парный тег < HEAD>. < /HEAD>. Внутри этого тега могут использоваться следующие вложенные теги: 1. < TITLE> - это парный тег задает заголовок окна программы- браузера. Например: < TITLE> Мой первый файл< /TITLE> В заголовке окна программы отобразится фраза «Мой первый файл». Какие-либо дополнительные параметры в данном теге не используются, поскольку внешний вид заголовка окна программы определяется настройками операционной системы компьютера. 2. < BASE> - непарный тег служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер. Тег < BASE> работает аналогично команде path MS-DOS. < BASE HREF=" //www.my host.by/manukevich" > В данном примере использован тег < BASE> с параметром HREF, который определяет базовый адрес основного Интернет-документа. 3. Мета-определения < МЕТА>. Мета-определения электронного документа описываются целым рядом параметров, входящих в состав непарного тега < МЕТА> и предназначенных для описания внутренних свойств HTML-файла. Например: а. < МЕТА NAME=" keywords" CONTENT= " HTML, Web, WWW, Web-страница, Интернет" > Данная строка в файле задает ключевые слова документа. Таких строк в документе может быть много. б. < МЕТА NАМЕ=" беБСг1рб1оп" СОЫТЕЫТ=" НТМЬ. Лабораторный практикум: Быстрое освоение популярного языка гипертекстовой разметки HTML" > Данная строка представляет краткое описание Интернет- документа. в. < МЕТА ЫАМЕ=" Аи^ог" СОЫТЕЫТ=" Александр Шевченко" > Конструкция предназначена для указания автора (авторов) текущего документа. Также могут использоваться иные параметры, приведенные в табл. 1.1. Таблица 1.1 Параметры типа мета-определений NAME
Раздел Body описывается парным тегом < BODY>...< /BODY>, внутри которого размещается большинство существующих тегов HTML. Тег < BODY> имеет ряд параметров (табл. 1.2), которые условно можно разделить на четыре основные группы (параметры фона, границ документа, текста и гиперссылок). Таблица 1.2 Параметры тега < BODY>
BGCOLOR устанавливает цвет фона, значение которого может быть введено в символьном эквиваленте, в шестнадцатеричном коде или в формате цветовой модели RGB. На примере показано три варианта установки цвета фона (белого): 1) < BODY BGCOLOR=" white" > 2) < BODY BGCOLOR=" #FFFFFF" > 3) < BODY BGCOLOR=" 255, 255, 255" > Параметр BACKGROUND позволяет накладывать на фон документа графическое изображение: < BODY BACKGROUND=" images/bg.gif" > Из параметров текста документа реально применяется только один - TEXT. Он задает цвет основного текста на странице (значение параметра может быть введено аналогично цвету фона документа): < BODY TEXT=" black" > Параметры гиперссылок (связей с внутренними или внешними документами) определяют цвет активных (ALINK), не посещенных (LINK) и посещенных (VLINK) ссылок: < BODY LINK=" #OOOOFF" ALINK=" #OOOOFF" VLmK=" blue" > Форматирование текста Область работы с текстом в HTML включает в себя большое количество всевозможных тегов, составляющих две основные группы: теги логического форматирования и теги физического форматирования. Тег < ACRONYM> — используется для расшифровки аббревиатур. Реализуется через параметр TITLE и отображается в браузере при наведении курсора на слово-аббревиатуру. Пример: < ACRONYM TITLE=”HyperText Markup Language”> HTML< / ACRONYM> - один из наиболее популярных и распространенных на сегодня языков разметки текста, используемый для создания Web-сайтов. Тег < CITE> — призван выделять различные цитаты и высказывания, названия библиографических источников и пр. Текст, помещенный между тегами < CITE> и < /CITE>, браузером выделяется курсивом. Тег < CODE> — предназначен для визуального выделения небольших фрагментов программного кода. Код, размещенный в этом парном теге, отображается моноширинным шрифтом. Тег < ЕМ> — используется для интонационного выделения определенного текстового фрагмента. Браузерами отображается курсивом (так же, как теги < CITE> и < I> ). Теги < H1>, < Н2>... < H6> — тег < H> с указанием одной из цифр (от 1 до 6) задает определенный размер заголовка всего текста целиком или его конкретного фрагмента. Соответственно заголовок < H6> будет минимальным, a < H1> — самым большим. Особенностью тегов < H> является то, что они уже подразумевают отступ от текстовой части и разработчикам HTML-документов не приходится делать отступ самостоятельно. Тег < STRONG> используется для выделения фрагментов текста, на которых необходимо акцентировать внимание пользователя. Браузерами результат такого форматирования отображается жирным начертанием. В визуальном плане аналогичен тегу < B>. Теги физического форматирования Тег < B> - функция этого тега аналогична действию тега < STRONG>, а именно - визуальное выделение фрагмента текста, на котором следует сделать акцент, отображается жирным начертанием. Тег < BASEFONT> предназначен для определения типа шрифта, а также его цвета и размера, которые будут считаться принятыми по умолчанию для всего HTML-документа. Параметры тега < BASEFONT> аналогичны параметрам тега < FONT> и могут быть изменены по ходу текста дополнительным форматированием с помощью тега < FONT>. Следует заметить, что тег < BASEFONT> используется в двух разделах документа: HEAD и BODY. Закрывающего тега < BASEFONT> не требует. Тег < FONT> - один из основных тегов физического форматирования текста отображающий свойства шрифтов. Для него могут использоваться следующие параметры: FACE - параметр, посредством которого браузер отображает текст указанным в HTML-коде шрифтом. При этом значение параметра FACE должно соответствовать установленному на компьютере пользователя шрифту. В случае если такого шрифта нет, текст будет показан стандартным (по умолчанию) шрифтом. Часто разработчики HTML-документов добавляют сразу несколько значений параметра FACE. Таким образом, если первого шрифта не окажется на компьютере пользователя, то браузер отобразит текст вторым шрифтом. Не будет найдено второго шрифта, браузер приступит к поиску третьего и т. д. Пример: < FONT FACE=" Tahoma", " Arial", " Verdana " > Этот текст будет показан одним из 3-х указанных шрифтов.< /FONT> COLOR — параметр, предназначенный для выбора цвета, которым будет написан текст. HTML-конструкция имеет следующий вид: < FONT COLOR=" red" > Этот текст будет написан красным цветом. < /FONT> SIZE - функцией этого параметра является определение размера шрифта, которое происходит по условной шкале от 1 до 7. При этом указание размера может осуществляться как в виде относительного показателя (+1), так и в виде абсолютного (1). Средним значением размера шрифта принято считать показатель 3. Однако окончательный вид шрифта с учетом свойств его размеров может отличаться в зависимости от модели и версии браузера. Тег < I> - тег, аналогичный тегам логического форматирования < CITE> и < ЕМ> (выделяет нужную часть текста курсивом). В ряде случаев использование < I> рекомендуется заменять соответствующими тегами логического форматирования. Тег < SMALL> - предназначен для установки размера шрифта немного меньшего, чем остальные слова (поместив нужный фрагмент между парным тегом < SMALL>, получим эффект, противоположный действию тега < BIG> ). Тег < SPAN> - применяется в случае, когда выделенному фрагменту текста необходимо присвоить определенные свойства, а к помощи никакого логического тега прибегнуть нельзя. Тег < SUB> - позиционирует фрагмент текста относительно нижней линии строки. Весьма удобный инструмент для написания математических и химических формул. Тег < SUP> - размещает текстовый фрагмент относительно верхней линии строки. Также подходит для включения в разнообразные формулы. Тег < TT> - спецификация определяет его как тег для отображения телетайпа или текста, набранного моноширинным шрифтом. В ряде случаев может быть заменен тегом < CODE>. Тег < U> делает текст подчеркнутым. Разделение на абзацы При отображении HTML-файла на компьютере необходимо производить структурирование документа при помощи специального тега < P>. Перед началом каждого абзаца текста следует поместить тег < Р>. Закрывающий тег < /P> не обязателен. Браузеры обычно отделяют абзацы друг от друга пустой строкой. Тег < Р> может задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра приведены в табл. 1.3. По умолчанию выполняется выравнивание по левому краю. Тег < BR> производит принудительный перенос строки текста. Тег < NOBR> запрещает перевод строки. Тег < WBR> дает возможность указать браузеру место возможного перевода строки, что будет выполнено только при необходимости. Таблица 1.3 Значения параметра ALIGN
Горизонтальные линии Тег < HR> позволяет провести рельефную горизонтальную линию. Этот тег не является контейнером, поэтому не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Параметры тега < HR> представлены в табл. 1.4. Таблица 1.4 Параметры тега < HR>
Пример:
< HR АLIGN=CENTER WIDTH=50% NOSHADE> В этом примере задается горизонтальная линия, которая занимает половину ширины окна просмотра и располагается посередине окна. Ход работы 1. Создать пустой текстовый файл с именем Proba_1.HTM на диске С:. Для этого можно использовать текстовый редактор Notepad, либо в любом файловом мониторе (FAR, TotalCommander) установить на одной из панелей диск C: и нажать сочетание клавиш ALT+F4. После этого ввести имя файла. 2. Набрать следующий текст: < HTML> < HEAD> < TITLE> Мой первый HTML-документ< /TITLE> < META HTTP-EQUIV=" Content-Type" CONTENT=" text/ html; charset=Windows-1251" > < META NAME=" keywords" CONTENT=" HTML, документ, первый" > < META NAME=" description" СО^Е^=" Это мой первый HTML-документ" > < /HEAD> < BODY BGCOLOR=" #FFFFFF" TOPMARGIN=" 30" TEXT=" black" LINK=" #00FF00" ALINK=" #00FF00" VLINK=" blue" > Это мой первый HTML-документ! < /BODY> < /HTML> 3. Сохранить документ. Открыть при помощи доступного интернет-броузера. Внимательно изучить то, что появилось в окне просмотра. 4. Изменить цвет фона на желтый. Для этого задать значение BGCOLOR=" #FFFF00". 5. Сохранить текстовый файл. Обновить отображаемый HTML- файл. Дополнить существующий файл следующим фрагментом текста и изучить действие использованных тегов: < BR> < ACRONYM TITLE=" Harry Potter and the Deathly Hallows" > Гарри Поттер < /ACRONYM> - Фрагмент последнего романа Дж.Роулинг < BR> < CITE> Чувство напряженного ожидания наполнило тёплый воздух шатра, гул голосов кое-где нарушался взрывами хохота. < /CITE> < CODE> Мистер и миссис Уизли ходили по проходам, улыбались и приветствовали родственников. < /CODE> < EM> Миссис Уизли < /EM> была в мантии нежно-аметистового цвета и такого же цвета шляпе. Секундой позже < B> Бил и Чарли< /B> встали перед шатром, < I> оба в праздничных робах с большими белыми розами, заколотыми в петлицах. < /I> < SMALL> Фред свистнул по-волчьи, < /SMALL> что вызвало < TT> всплеск хохота по залу< /TT>, но затем в шатре наступила тишина< U> и только тихая музыка исходила из того, что выглядело как золотые надувные шары. < /U> < BR> 6. Сохранить текстовый файл. Обновить отображаемый HTML- файл. 7. Набрать в существующем файле следующий текст: < P Align= Right> Сжала руки под тёмной вуалью... < BR> " Отчего ты сегодня бледна? " < BR> -От того, что я терпкой печалью < BR> Напоила его допьяна.< BR> < CITE> Анна Ахматова< CITE> < BR> < BR> < /P> < P Align=CENTER> < FONT FACE=" Verdana", " Arial", " Helvetica" SIZE=+3 COLOR=red> < b> Баллада о Любви < /b> < br> Когда вода Всемирного потопа< br> Вернулась вновь в границы берегов, < br> Из пены уходящего потока< br> На берег тихо выбралась Любовь < br> -И растворилась в воздухе до срока, < br> А срока было - сорок сороков... < br> < I> Владимир Высоцкий< /I> 8. Подвести под текстом черту при помощи следующего тега: < HR ALIGN=CENTER WIDTH=50% NOSHADE COLOR=Blue> 9. Используя теги SUB и SUP написать формулы (a + b)2 = a2 + 2ab + b2; cij = aij + bij 10. Выполнить самостоятельно следующее задание: а) создать html-файл, в мета-описаниях которого фигурирует название дисциплины, университета, факультета и фамилии преподавателя и студента; б) задать название, состоящее из фамилии и имени; в) средствами html добиться, чтобы внешний вид документа был максимально приближен к следующему:
НЕСКАЗАННОЕ, СИНЕЕ, НЕЖНОЕ...
Несказанное, синее, нежное... Тих мой край после бурь, после гроз, И душа моя - поле безбрежное – Дышит запахом меда и роз. Я утих. Годы сделали дело, Но того, что прошло, не кляну. Словно тройка коней оголтелая Прокатилась во всю страну. Сергей Есенин Ход работы 1. Создать документ на основании текста программы, приведенного в теоретической части (пример 1). 2. Создать фреймовую структуру следующего вида:
Размеры фреймов задать самостоятельно.
Приложение А
Приложение Б Краткий справочник содержит описание тегов HTML. IE - Microsoft Internet Explorer, NC - Netscape Communicator. Число означает, с какой версии браузер поддерживает данный тег.
Разработка HTML-страниц Лабораторный практикум Часть 7
ОГЛАВЛЕНИЕ ВВЕДЕНИЕ. 3 Лабораторная работа № 1. Создание простейшего HTML-файла. 4 Лабораторная работа № 2. «Списки и ссылки». 12 Лабораторная работа № 3. Графика в интернет-документах. 22 Лабораторная работа №4. Создание графического меню с использованием навигационных областей HTML. 28 Лабораторная работа № 5. Таблицы в интернет-документах. 30 Лабораторная работа № 6. Фреймы. 37 Приложение А Названия цветов. 44 Приложение Б Краткий справочник по тегам. 48 Список использованных источников. 51 ВВЕДЕНИЕ Настоящее пособие предназначено для студентов и ориентировано на поддержку дисциплин “Информатика” и “Информационные системы и технологии”. Лабораторный практикум – состоит из шести лабораторных работ, предусматривающих освоение основных возможностей по разработке HTML-страниц. Каждая лабораторная работа содержит перечень заданий для выполнения, учитывающих будущую специализацию студентов. Каждая лабораторная работа способствует закреплению и углублению знаний, полученных студентами на лекционных занятиях. |
Последнее изменение этой страницы: 2017-05-11; Просмотров: 391; Нарушение авторского права страницы