5 Основы создания web-страниц средствами языка разметки
advertisement
5 Основы создания web-страниц средствами языка разметки гипертекста HTML Цель работы: изучение основ языка разметки гипертекста HTML и приобретение практических навыков создания HTML-документов. 5.1 Общие сведения о языке разметки гипертекста Основой разработки веб-страниц является язык HTML (HyperText Markup Language – язык разметки гипертекстов). Этот язык появился вместе с технологией WWW в 1989 году. Сама идея гипертекста появилась несколько ранее, она была предложена американским социологом, философом и первооткрыватель в области информационных технологий Тедом Нельсоном в 1965 году. Веб-страницы могут разрабатываться в простейшем текстовом редакторе или при помощи специализированных программ. Просматриваются страницы в браузере. Обычно файлам страниц присваиваются разрешения «.htm» или «.html». Совокупность единых по тематике, оформлению и физическому расположению веб-страниц называется веб-сайтом. Основной структурной единицей языка HTML является тег (от англ. tag – маркер). Теги делятся на контейнеры и не контейнеры. Контейнер определяет, каким образом должен быть интерпретирован тот или иной текст, располагающийся в этом контейнере. Начало интерпретируемого текста отмечается как <имя_тега>. Завершение этого текста отмечается как </имя_тега>. При этом имена тегов в начале и завершении совпадают. Теги, не являющиеся контейнерами, не закрываются (не имеют части </имя_тега>) и служат для создания каких-либо эффектов. Если при написании тегов были допущены ошибки, то просто не выполняется форматирование текста, заданного ошибочным тегом, но никаких сообщений браузер не выдает. Теги могут иметь параметры. Параметры бывают двух видов. Первый вид можно трактовать как некоторый флаг, наличие которого требует включить некоторую характеристику, например, трехмерность. В этом случае тег выглядит следующим образом: <имя_тега имя_параметра> (обязательно внутри скобок тега через знак «пробел»). Второй вид параметров – параметры, имеющие значения, например, ширина=10. В этом случае тег выглядит так: <имя_тега имя_параметра=значение> или <имя_тега имя_параметра="значение">. Значение заключается в кавычки, если оно включает в себя пробелы или другие символы, которые могут быть истолкованы браузером как конец значения. 5.2 Структура HTML-документа Тег <HTML></HTML> определяет границы HTML-документа (страницы), т.е. любой документ должен начинаться с <HTML> и заканчиваться </HTML>. В литературе часто говорится об обязательности этого тега, в то время как большинство браузеров корректно обрабатывают страницы без него. HTML-документ можно разделить на две основные части: заголовок и тело. Заголовок документа выделяется тегом <HEAD></HEAD>. Заголовок может включать несколько тегов. Наиболее часто используется тег <TITLE></TITLE>. Этот тег отмечает заголовок документа. Текст, помещенный внутри этого тега, будет отображен в заголовке окна браузера. Тело документа определяется тегом <BODY></BODY>. Именно в тело документа помещается основная информация, которая должна быть размещена при отображении страницы в рабочем поле окна браузера. В тексте страницы могут быть комментарии. Они начинаются тегом <!-- и заканчиваются тегом -->. Комментарии не выводятся на экран при отображении страницы и предназначены для разработчиков. 5.3 Основные теги языка HTML Форматирование HTML-документа <BODY></BODY> – тело документа. Параметры: TEXT – цвет текста для документа в целом. Цвет указывается в формате RGB или константами red, green, blue и т.п. По умолчанию – «black» (#000000). BGCOLOR – фоновый цвет всего документа. По умолчанию – «white» (#FFFFFF). LINK – цвет «непосещенной» гиперссылки, т.е. ссылки, к которой посетитель данного сайта еще не обращался. По умолчанию ей присваивается значение «blue» (#0000FF). VLINK – цвет «посещенной» гиперссылки. Значение по умолчанию – «purple» (#800080). <P></P> – абзац. Параметры: ALIGN – выравнивание. Возможные значения: LEFT – по левому краю, RIGHT – по правому краю, CENTER – по центру, JUSTIFY – по ширине. Пример: <P>Текст первого абзаца.</P><P>Текст второго абзаца.</P> <BR> – начало новой строки без начала нового абзаца. <NOBR></NOBR> – запрет переноса текста на новую строку. <H1></H1>...<H6></H6> – заголовки разного уровня (от первого до шестого). Параметры: ALIGN – выравнивание (аналогично как для тега <P>). Пример: <H3 ALIGN=CENTER>Заголовок третьего уровня с выравниванием по центру</H3> <HR> – горизонтальная линия. Параметры: ALIGN – выравнивание. WIDTH – длина линии в процентах от окна браузера или пикселях. SIZE – ширина линии в процентах от окна браузера или пикселях. COLOR – цвет линии. Пример: <HR ALIGN=CENTER WIDTH=50% SIZE=6 COLOR=RED> Дополнительные возможности по форматированию <B></B> – полужирный текст. <I></I> – курсивный текст. <U></U> – эффект подчеркивания. <STRIKE></STRIKE> – эффект зачеркивания. <BIG></BIG>– увеличенный текст (на 1 пункт). <SMALL></SMALL> – уменьшенный текст (на 1 пункт). <SUB></SUB> – нижний индекс. <SUP></SUP> – верхний индекс. <FONT></FONT> – используется для указания начертания шрифта в документе. Параметры: SIZE – размер шрифта. COLOR – цвет шрифта. FACE – гарнитура шрифта. Примеры: <P><FONT FACE="ARIAL" SIZE=4 COLOR=RED>Красная строка набранная шрифтом Arial 4 размера.</FONT></P> <P><FONT FACE="TIMES NEW ROMAN" SIZE=2 COLOR=#0000FF>Синяя строка набранная шрифтом Times New Roman 2 размера.</FONT></P> Графика в HTML-документах <IMG> – рисунок. Параметры: SRC – адрес файла на веб-сервере (URL), содержащего графическое изображение. ALIGN – выравнивание. Возможные значения: ТОР – по верху; BOTTOM – по низу; MIDDLE – по центру; LEFT – слева; RIGHT – справа. ALT – текст, который увидит пользователь, если рисунок не может быть выведен или при наведении указателя мыши. WIDTH и HEIGHT – соответственно ширина и высота изображения в пикселях. Пример: <IMG SRC="priroda.jpg" ALT="Природа">. Гиперссылки в HTML-документах <A HREF="Адрес веб-ресурса">Описание веб-ресурса</A> – ссылка на вебресурс. Адрес веб-ресурса – может включать абсолютный или относительный адрес. Во втором случае адрес может вычисляться относительно текущего документа. В реальных случаях практически всегда используются относительные ссылки, так как это обеспечивает возможность перемещения проекта в любую папку без изменения HTML-кода страниц. Например, в папке D:\Site\ располагаются страницы с именами page1.html и page2.html. Организуется ссылка из документа page1.html на документ page2.html. Относительная ссылка будет выглядеть так: <A HREF=page2.html>…</A>. Абсолютная ссылка будет выглядеть так: <A HREF=D:\Site\page2.html>…</A>. Еще пример абсолютной ссылки: <A HREF=http://www.yandex.ru>Поисковая система Yandex</А>. Если page2.html располагается в подкаталоге catalog1 папки Site, то относительная ссылка на него из документа page1.html выглядит так: <A HREF=catalog1\page2.html>…</A>. Для того чтобы подняться на каталог выше, используется фрагмент «../». Например, если page2.html располагается в подкаталоге catalog1 папки Site, то относительная ссылка из него на документ page1.html выглядит так: <A HREF=..\pagel.html>…</A>. Описание веб-ресурса – может быть текстом или рисунком. В первом случае указатель содержит соответствующий текст, во втором – тег <IMG>. Если документ имеет большие размеры, то имеет смысл использования локальных ссылок, то есть ссылок на фрагмент самого документа. Списки в HTML-документах <OL></OL> – нумерованный список. Параметры: TYPE – вид нумерации. Возможные значения: А – прописные буквы, а – строчные буквы, I – большие римские цифры, i – маленькие римские цифры, 1 – арабские цифры; START n – список будет начинаться с числа n. <UL></UL> – маркированный список. Параметры: TYPE – вид маркеров. Может иметь значения: disc – круг, square – квадрат, circle – окружность. <LH></LH> – заголовок списка. <LI></LI> – элемент списка. Примеры: <UL TYPE=square> <LH>Части html-документа</LH> <LI>Заголовок</LI> <LI>Тело</LI> </UL> <OL> <LH>Популярные интренет-браузеры</LH> <LI>Mozilla Firefox</LI> <LI>Opera</LI> <LI>Safari</LI> <LI>Internet Explorer</LI> </OL> Таблицы в HTML-документах <TABLE></TABLE> – таблица. Параметры: ALIGN – выравнивание таблицы. Значения: LEFT, RIGHT или CENTER. WIDTH – ширина таблицы в пикселях или процентах. BORDER – ширина обрамления ячеек таблицы в пикселях. BORDERCOLOR – цвет границ таблицы. BGCOLOR – фоновый цвет таблицы. <TR></TR> – строка таблицы. Параметры: ALIGN – горизонтальное выравнивание содержимого строки. Значения: LEFT, RIGHT или CENTER. VALIGN – вертикальное выравнивание содержимого строки. Значения: TOP, MIDDLE или BOTTOM. <TD></TD> – ячейка строки. Параметры: ALIGN и VALIGN – аналогичны параметрам тега <TR>. HEIGHT и WIDTH – высота и ширина в пикселях, либо в процентах. ROWSPAN – объединение смежных ячеек в одном столбце. Этот параметр принимает значения в зависимости от того, сколько ячеек нужно объединить. COLSPAN – аналогично ROWSPAN, но для объединения ячеек в одной строке. BORDERCOLOR – цвет границ ячейки. BGCOLOR – фоновый цвет ячейки. Пример: <TABLE> <TR> <TD><B>Наименование</B></TD> <TD><B>Цена</B></TD> <TD><B>Количество</B></TD> </TR> <TR> <TD>Крепления створчатые</TD><TD>12</TD><TD>10</TD> </TR> <TR> <TD>Уплотнители полимерные</TD><TD>22</TD><TD>5</TD> </TR> <TR> <TD>Фиксаторы алюминиевые</TD><TD>5</TD><TD>120</TD> </TR> </TABLE> 5.4 Задание на лабораторную работу Студенты при выполнении заданий должны подготовить оригинальный текстовый материал, отличный от нижеприведенного,который приведен в качестве примера. Этап 1. Изучение основных конструкций языка HTML 1.1. Ознакомьтесь с теоретическим материалом и основными тегами языка HTML. 1.2. В своей папке создайте папку Site. Здесь будут размещаться все файлы проекта. 1.3. Запустите текстовый редактор Блокнот. Создайте типовую структуру HTMLдокумента: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> Между тегами <TITLE> введите заголовок главной страницы: «Путешествие по странам Европы». 1.4. Сохраните документ в папку Site. При сохранении в качестве типа файла укажите «Все файлы», в качестве имени файла index.html. 1.5. Закройте Блокнот. Найдите файл index.html и откройте его с помощью интернетбраузера (как правило – двойным щелчком левой кнопки мыши). Перед вами появится пустое окно браузера. Обратите внимание, что в заголовке страницы уже присутствует титул. 1.6. Откройте файл index.html для редактирования с помощью блокнота. 1.7. Добавьте заголовком первого уровня (тег <H1>) фразу: «Добро пожаловать на страничку, посвященную странам Европы! ». Сохраните файл. Вернитесь в браузер и выполните команду «Обновить» (как правило, клавиша F5). Оцените полученный результат. 1.8. Вернитесь к Блокноту. Создайте новый абзац (тег <P>). Задайте выравнивание текста абзаца по ширине. В качестве текста абзаца введите следующее: «Здравствуйте уважаемые путешественницы и путешественники. Если ваше собственное желание или судьба манят вас в дорогу, в новые страны в экзотические места в необычные путешествия загляните прежде на наш сайт. Загляните как в будущее, чтобы заранее узнать, что вас ожидает за ближайшим поворотом, что вам понадобится в дороге, и о чем не вредно позаботиться заранее. Мы предлагаем вашему вниманию полную объективную и достоверную информацию о разных уголках Земли о странах и путешествиях.». Слова «полную, объективную и достоверную» оформите курсивом. Сохраните страницу, оцените полученный эффект. Далее без дополнительного напоминания просматривайте страницу по мере необходимости. 1.9. Добавьте к документу следующий абзац (настройки соответствуют предыдущему абзацу): «Несмотря на то, что стран Европы огромное количество мы по мере возможности попытаемся вам рассказать обо всех этих странах. На нашем сайте вас ждет рассказ о странах Европы, в том числе их краткая характеристика.». Слова «Рассказ о станах Европы» оформите курсивом. 1.10. Добавьте третий абзац: «Этот сайт наполнен демонстрационным содержанием для отработки технологии разметки гипертекстовых документов используемых в сети интернет. Информация на сайте может не соответствовать реальному положению дел.». Слова «демонстрационным содержанием» оформите полужирным начертанием. 1.11. Текст следующего абзаца расположите по центру. Размер шрифта для текста внутри абзаца увеличьте на один пункт. В качестве текста укажите: «Заходите на нашу страничку почаще!» 1.12. Поставьте в качестве разделителя горизонтальную линию (толщина – 1 пиксель, ширина – 80% рабочего поля, цвет – синий). После горизонтальной линии вставьте разрыв строки. 1.13. Вставьте информацию об авторских правах, добавив абзац, выровненный по центру. Размер шрифта для текста внутри абзаца уменьшите на один пункт. В качестве текста укажите: «&copy; Ваши инициалы и фамилия, группа, факультет, ГУАП &ndash; 2010. Все права защищены.» Конструкции «&copy;» и «&ndash;», в теле html-документа, будут преобразованы браузером в символ «©» и «–» (длинное тире), соответственно. 1.14. Отцентрируйте заголовок «Добро пожаловать на страничку, посвященную странам Европы». 1.15. Первый вариант начальной страницы сайта должен выглядеть примерно так: Этап 2. Установка свойств текста, использование списков, организация гиперссылок 2.1. Измените цвет фона на #FCEAD4 и цвет не посещенных гиперссылок на #014CA1 для всей страницы. 2.2. Измените гарнитуру шрифта в текстовых абзацах на Verdana. Установите для них размер шрифта – 2. 2.3. Трижды сохраните получившийся шаблон веб-страницы под именами italy.html, france.html и germany.html. На первой из этих страничек будет размещен рассказ об Италии, на второй – о Франции, на третьей – о Германии. 2.4. Исправьте заголовки новых страниц, например, Италия для страницы Italy.html. Заголовок первого уровня поменяйте на заголовок второго уровня. Вместо трех текстовых абзацев разместите надпись: «Раздел находится в стадии разработки.». 2.5. Соедините получившиеся странички гиперсвязями. После разделительной горизонтальной черты главной страницы начните новый абзац, задайте гарнитуру шрифта Verdana, размер шрифта – 2 и выравнивание по центру. В новом абзаце организуйте гиперссылки на страницы сайта. «Главная | Италия | Франция | Германия». Таким образом, данный абзац содержит наименования всех четырех страниц сайта. После окончания абзаца с гиперссылками поставьте еще одну разделительную черту с теми же настройками. 2.6. Оформите фамилию и инициалы, указанные в нижней части страницы, гиперссылкой на ваш почтовый ящик. Для этого в качестве параметра открывающего тега укажите следующее: HREF="mailto:адрес_электронной_почты". В результате код ссылки будет выглядеть, например, так: <A HREF="mailto:petrov@mail.ru">А. В. Петров</A>. 2.7. Сделайте изменения, аналогичные описанным в пунктах 2.5–2.6, на страницах для Италии, Франции и Германии. После изменений страница будет иметь примерно такой вид: 2.8. Создайте абзац, содержащий первый подраздел документа. В качестве текста укажите следующее: «Италия государство на юге Европы в центральной части Средиземноморья. Берега Италии омываются морями на Западе – Лигурийским и Тирренским, на Юге – Ионическим, на Востоке – Адриатическим. Сухопутные границы Италии проходят преимущественно по различным частям Альп. На Севере граничит с Францией, Швейцарией, Австрией; на Северо-востоке – с Югославией. Территория Италии охватывает южные склоны Альп, Паданскую равнину, Апеннинский полуостров, острова Сицилию и Сардинию, и многочисленные мелкие острова.» Перед абзацем добавьте заголовок 3 уровня (<H3>) «Географическое положение». 2.9. Создайте следующий абзац. В качестве текста укажите: «Этому причудливому ботфорту Европы есть чем похвастаться: религиозными и культурными деятелями, кукурузной кашей, знаменитыми памятниками архитектуры и своим политическим ребячеством. Его трех тысячелетняя история, культура и кухня, могут покорить едва ли не каждого. В Италии можно посетить римские развалины, увидеть искусство ренессанса, побывать в крошечных средневековых городках, покататься на лыжах в Альпах, исследовать каналы Венеции, и увидеть церкви, прекраснее которых, трудно себе представить. Конечно, можно также насладиться и более простыми вещами: хорошей едой, вином, походами по магазинам и огромным выбором развлечений.». Перед абзацем аналогично предыдущему пункту добавьте заголовок 3 уровня «Национальные особенности». 2.11. Создайте следующий абзац. В качестве текста введите: «Рим Милан Неаполь Флоренция» Перед абзацем добавьте заголовок 3 уровня «Крупные города». Оформите абзац в виде маркированного списка. Этап 3. Вставка изображений и таблиц 3.1. В папке Site создайте папку images. В ней будут размещаться файлы с изображениями, используемыми на страницах сайта. Найдите в сети интернет картинку с изображением флага Италии и сохраните ее в папке images. 3.2. Откройте файл italy.html в текстовом редакторе Блокнот. 3.3. Вставьте картинку с флагом в верхней части страницы после заголовка Италия. Выровняйте картинку по центру. Если картинка флага будет слишком большая, можно уменьшить ее, указав параметры WIDTH и HEIGHT с меньшими значениями, например: WIDTH=120 HEIGHT=80. 3.4. Добавьте на страницу еще один раздел – «Общие сведения», расположив его между разделами «Географическое положение» и «Национальные особенности». Новый раздел оформите в виде таблицы, согласно следующему примеру: Столица Площадь Население Язык Рим 301250 км2 57 млн. чел. Итальянский (классический плюс несколько диалектов), Немецкий, Французский, Словенский Таблица должна быть выровнена по центру, иметь ширину 500 пикселей и границу шириной 1 пиксель. Первый столбец должен иметь ширину 150 пикселей. Для получения надписи в виде верхнего индекса заключите цифру «2» между <SUP></SUP>. 3.5. Сохраните документ и просмотрите получившийся результат в браузере. 3.6. Пригласите преподавателя для отчета о проделанной работе. Этап 4. Создание web-сайта 4.1. Создайте веб-сайт, кратко раскрывающий тему курсовой работы по изучаемой дисциплине. Сайт должен содержать от 4 до 8 веб-страниц (одна из которых является главной), не менее 3 изображений и 2 таблиц. 4.2. Пригласите преподавателя для отчета о проделанной работе. 5.5 Контрольные вопросы 1. Дайте определение и поясните назначение тега. 2. Перечислите принципы записи тегов. 3. Назовите структурные составляющие HTML-документа. Охарактеризуйте их назначение. 4. Перечислите параметры, которые могут задаваться для текста. 6. Поясните принцип описания таблиц с помощью тегов языка HTML.