Основы языка Hypertext Markup Language (HTML)
Общие сведения о языке Hypertext Markup Language (HTML). Структура и форматирование HTML-документа, работа с графикой и таблицами в нем. Реализация гипертекстовых связей между web-страничками, создание форм, использование фреймов, каскадных таблиц стилей.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | учебное пособие |
| Язык | русский |
| Дата добавления | 23.10.2015 |
| Размер файла | 4,3 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Вятский государственный гуманитарный университет
Основы ЯЗЫКА Hypertext Markup Language (HTML)
Учебно-методическое пособие для студентов прикладных и экономических специальностей
Васенина Е.А.
Киров, 2005
ББК
Печатается по разрешению редакционно-издательского совета Вятского государственного гуманитарного университета.
Рецензент - И.А. Бабушкина, кандидат педагогических наук, доцент
Васенина Е.А. Основы языка HTML. - Киров: Изд-во ВятГГУ, 2005. - 107 с.
В пособии рассматриваются основные направления использования HTML. Основные темы, включенные в пособие: общие сведения о языке HTML, структура HTML-документа, форматирование HTML-документа, работа с графикой и таблицами в HTML, реализация гипертекстовых связей между web-страничками, создание форм, использование фреймов, использование каскадных таблиц стилей при форматировании HTML_документа, слои и позиционирование. Каждая глава сопровождается практическими упражнениями и заданиями, в конце каждой главы предлагаются вопросы для повторения теоретического материала и одно или несколько контрольных заданий.
Издание предназначено для студентов гуманитарных и прикладных специальностей, а так же для тех, кто желает научиться создавать странички в сети Интернет.
Учебное пособие написано по материалам практических занятий со студентами Вятского государственного гуманитарного университета.
© Вятский государственный гуманитарный университет (ВГГУ), 2005
© Васенина Е.А., 2005
Оглавление
- Предисловие
- Введение
- Глава 1. Структура HTML-документа
- Вопросы для повторения
- Контрольное задание
- Глава 2. Форматирование HTML-документа
- Вопросы для повторения
- Контрольное задание
- Глава 3. Графика в HTML-документе
- Вопросы для повторения
- Контрольные задания
- Глава 4. Работа с таблицами
- Вопросы для повторения
- Контрольные задания
- Глава 5. Гиперссылки
- Вопросы для повторения
- Контрольные задания
- Глава 6. Фреймы
- Вопросы для повторения
- Контрольное задание
- Глава 7. Создание форм
- Вопросы для повторения
- Контрольное задание
- Глава 8. Каскадные таблицы стилей
- Вопросы для повторения
- Контрольное задание
- Проектное задание
- Приложение 1. Web-палитра цветов
- Приложение 2. Таблица замены специальных символов
- Приложение 3. Параметры, доступные при использовании CSS
- Приложение 4. Список тэгов и параметров, использованных в пособии
- Библиографический список
Предисловие
Данное пособие можно рекомендовать для индивидуального обучения и для использования в качестве учебного пособия в гуманитарных вузах и средних учебных заведениях различного типа.
В пособии изложены основные направления использования HTML: форматирование текста, работа с графикой и таблицами, реализация гипертекстовых связей между web-страничками, создание форм, использование фреймов, использование каскадных таблиц стилей, слои и позиционирование.
В каждой главе краткий справочный материал сопровождается упражнениями с подробным описанием последовательности действий и заданиями, позволяющими закрепить изученный материал. В конце главы приводится список теоретических вопросов для повторения и одно или несколько контрольных заданий, которые позволяют оценить качество полученных знаний по текущему разделу.
Проектное задание в конце пособия дает возможность обобщить и структурировать полученные знания и перенести приобретенные умения в новую, незнакомую среду. Выполнение проектного задания может быть «сквозным», т.е. осуществляться в течение всего курса.
Все замечания и предложения направляйте по адресу evasenina@inbox.ru.
Введение
Вся информация в сети Интернет хранится в виде страниц с гипертекстовыми связями - ссылками на другие страницы. Такие страницы еще называют Интернет_страницами, web_страницами, HTML_страницами или HTML_документами.
Web-страничка - это обычный текстовый файл в соответствующей кодировке, с расширением *.htm, *.html, *.dhtml, *.shtml В данном пособии все HTML-документы для определенности имеют расширение *.html. и т.д. В нем описывается вся страничка с помощью специального языка - HTML (hypertext mark-up language - гипертекстовый язык разметки документов). В основе HTML лежат тэги. Тэги - это управляющие элементы, которые определяют параметры отображения той или иной части HTML-документа: размер, цвет и начертание символов, размеры рисунка, выравнивание абзацев, расположение объектов на странице и т.д.
Для просмотра готовых web-страниц используются специальные программы - браузеры. Браузер (встречаются такие термины, как браузер или браоузер) предназначен для просмотра web-страничек, которые находятся в сети Интернет или на Вашем компьютере. Существует большое количество различных браузеров. На момент написания данного пособия самые распространенные и наиболее часто используемые - это Internet Explorer (компания Microsoft), Mozilla Firefox (компания Mozilla) и Netscape Navigator (компания Netscape). Браузеры являются бесплатными программами и доступны для скачивания на официальных сайтах компаний Microsoft, Mozilla и Netscape. Последней версией Internet Explorer'a является 6-я версия В данном пособии при выполнении упражнений была использована 6-я версия Internet Explorer. (в том числе русская 6-я версия), Mozilla Firefox 1-ой версии и Netscape 7-ой версии (в том числе русская 7-я версия).
Когда Вы в своем браузере загружаете web-страничку, то браузер выполняет команды, записанные на языке HTML, и, подчиняясь им, выводит на экран страничку. Различные браузеры могут поддерживать или нет различное форматирование, поэтому внешний вид web-странички зависит от браузера, в котором она просматривается.
Часто, говоря о web-строительстве, речь идет о сайтах и страничках. Чем же web-сайт отличается от web-странички? Web-страничка (иногда еще говорят, HTML-страничка) это текстовый файл, написанный на языке HTML в определенной кодировке и с определенным расширением. Когда говорят о web-страничке, подразумевают один, два или три таких файла, которые могут быть связаны друг с другом или нет, иметь ссылки на другие ресурсы Интернета или нет.
А web-сайт содержит много (больше трех) файлов в формате HTML, обязательно связанных между собой гиперссылками. Как правило, все эти файлы оформлены в едином стиле, имеют одно и то же расширение и посвящены одной или нескольким связанным между собой темам.
Создание сайта или странички начинается с проектирования. В процессе проектирования разрабатывается техническое задание на создание сайта, где указывается информация, которую требуется учитывать при непосредственном создании сайта: перечисление разделов сайта, макеты страниц, основные параметры форматирования страниц и замечания по содержанию сайта.
Затем начинается техническая реализация сайта: создание HTML-страничек, форматирование и т.д.
Создавать web-странички можно как вручную - путем написания кода на HTML (в любом текстовом редакторе, чаще всего в стандартном приложении Windows «Блокнот») - так и с помощью специальных визуальных редакторов («Microsoft FrontPage», «Macromedia Dreamweaver»).
Каждый способ имеет ряд плюсов и минусов.
Визуальные редакторы позволяют создавать web-странички без особых знаний HTML. Кроме того, при создании странички более сложной структуры, гораздо удобнее «видеть» ее.
Недостатком работы с программами-редакторами является тот факт, что они создают не такой оптимальный HTML-код, как опытный web-мастер, да и встраивать многие элементы возможно, только непосредственно редактируя код странички.
Создавая странички вручную, Вы получаете страничку с меньшим количеством кода. Следовательно, ваша страничка будет быстрее загружаться из Интернета (а это довольно важно для профессиональных и любительских сайтов). Кроме того, создавая страничку через HTML-код, Вы сможете использовать многие дополнительные возможности, которые невозможно реализовать с помощью редакторов, например DHTML.
Как было сказано выше, чтобы создавать страничку вручную, нужны знания основ HTML. Поэтому, если Вы собираетесь делать более или менее серьезный сайт, то знание HTML просто необходимо.
Глава 1. Структура HTML-документа
Просмотр кода готовой web-страницы.
Для того чтобы посмотреть HTML-код страницы, на которой Вы сейчас находитесь, нужно в меню браузера выбрать команду Вид/Просмотр HTML_кода или щелкнуть правой кнопкой мыши по рабочему полю страницы и в контекстном меню выбрать пункт Просмотр HTML_кода (рис.1.1).
Рис.1.1. Просмотр HTML-кода через команду главного меню
Упражнение 1.1
Загрузите любую страницу из Интернета и посмотрите код этой странички.
Структура HTML-документа.
HTML-документ (или web-страничка) создается в любом текстовом редакторе и представляет собой простой текстовый документ, в который вставлены флаги разметки - «тэги» (markup tags). Все тэги записываются в угловых скобках _ < >. Существуют тэги парные (имеют открывающийся элемент, заключенный в угловых скобках < >, и закрывающийся, заключенный между </ и >) и непарные.
Любой HTML-документ должен начинаться открывающим тэгом <HTML> и заканчиваться закрывающим тэгом </HTML>. Эти тэги показывают, что находящиеся между ними строки представляют единый HTML-документ. Без этих тэгов браузер или другая программа просмотра не в состоянии идентифицировать HTML-формат документа и правильно его интерпретировать.
Примечание. Хотя большинство современных браузеров могут распознать документ и не содержащий тэгов <HTML> и </HTML>, все же их употребление крайне желательно, так как некоторые программы с большой долей вероятности примут HTML-документ без открывающего и закрывающего тегов за обычный текстовый документ. В этом случае в окне программы просмотра откроется код HTML-документа, который мы обычно видим, выполнив команду Вид/Просмотра HTML кода.
HTML-документ состоит из двух частей: голова (HEAD) и тело (BODY).
Голова HTML-документа заключается между парными тэгами <head> и </head>. В нем указывается заголовок (название) создаваемой web-странички (при просмотре в окне браузера оно отображается в заголовке окна браузера) и определяется кодировка страницы.
Заголовок странички располагается между парными тэгами <title> и </title>. Например,
<title>Моя страничка</title>.
Кодировка HTML-документа используется для отображения на странице символов кириллицы. Самые распространенные кодировки - это «Windows_1251» (стандарт Windows) и «KOI8_r» (стандарт UNIX и некоторых других систем). Соответственно символы кириллицы могут быть закодированы в одном из этих стандартов.
Если кодировку не определить в коде странички, то браузер будет отображать ее в кодировке, установленной по умолчанию.
Для определения кодировки странички браузером между тэгами <HEAD> и </HEAD> нужно вставить одну из следующих строчек:
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
- для Windows-1251 кодировки. В этой кодировке вы можете писать код странички в редакторе «Блокнот», используя, как русский, так и английский язык; эта кодировка наиболее предпочтительна.
<META http-equiv="Content-Type" content="text/html; charset=koi8-r">
- для KOI8-r кодировки. Как правило, эта кодировка используется визуальными HTML-редакторами, открыв документ этой кодировки в редакторе «Блокнот», вы увидите лишь непонятные символы, однако некоторые серверы работают лишь с этой кодировкой. В этом случае вам придется использовать специальные перекодировщики).
Тело HTML-документа находится между парными тэгами <body> и </body>. Здесь располагается информация, которую мы видим в окне браузера при просмотре странички: текст, кнопки, рисунки, списки и т.д.
Таким образом, структуру HTML-документа можно представить в виде схемы:
Упражнение 1.2
Создайте HTML-документ main.html с заголовком «Страничка Ивана Иванова» со следующим содержанием: «Здравствуйте, это моя первая страничка!».
Для этого:
· В любом текстовом редакторе (например, «Блокнот») создайте новый документ.
· Внесите в документ следующий текст:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE> Страничка Ивана Иванова</TITLE>
</HEAD>
<BODY>
Здравствуйте, это моя первая страничка!
</BODY>
</HTML>
· Сохраните этот файл в свою папку под именем main.html. Для этого в окне сохранения документа в поле Тип файла выберите Все файлы.
· Просмотрите страничку в браузере: просто щелкните по вашему файлу двойным щелчком левой кнопкой мыши. Если расширение файла задано правильно, то автоматически файл откроется в окне браузера (см рис 1.2).
Упражнение 1.3
Измените HTML-документ main.html: в заголовок внесите свою фамилию и имя.
Для этого:
· Откройте HTML-код странички:
1 способ. Через меню браузера - Вид/Просмотра HTML-кода.
2 способ. Через меню текстового редактора - Файл/Открыть, поле Тип файла выбрать Все файлы и выбрать нужный html-файл.
3 способ. Через контекстное меню html-файла - щелкнув правой кнопкой мыши по значку файла, вызвать контекстное меню и в пункте Открыть с помощью... выбрать Блокнот.
· В разделе <TITLE></TITLE> внесите свою фамилию и имя.
· Сохраните изменения.
· Просмотрите страничку в окне браузера.
Вопросы для повторения
1. С помощью какой команды главного меню браузера Internet Explorer можно просмотреть HTML-код web-страницы?
2. Чем HTML-документ отличается от простого текстового документа?
3. На какие 2 части можно логически разделить обычный HTML-документ?
4. Какие тэги задают заголовок HTML-документа? Какая информация может содержаться в заголовке HTML-документа?
5. Какие тэги задают тело HTML-документа? Какая информация содержится в теле HTML-документа?
6. Что такое кодировка?
7. Какое расширение может иметь HTML-документ?
Контрольное задание
Создайте HTML-документ в кодировке KOI8-r с названием странички «Вторая страничка …(здесь впишите свою фамилию и имя)» и с текстом «Всем привет! Мы изучили структуру HTML-документа! Эта страничка создана в кодировке KOI8-r».
Глава 2. Форматирование HTML-документа
К форматированию документа можно отнести изменение внешнего вида документа: форматирование страницы, разбиение текста на абзацы, выделение заголовков, форматирование символов и др.
Настройка внешнего вида страницы
Задавая параметры у тэга <BODY> можно изменять внешний вид всей web_странички.
Тэг <BODY> может иметь следующие параметры:
· bgcolor - задает цвет фона страницы;
· text - задает цвет текста всей страницы по умолчанию;
· link - задает цвет ссылки, еще не посещенной;
· vlink - задает цвет ссылки, уже посещенной;
· alink - задает цвет активной ссылки (в момент нажатия по ней);
· background - задает фоновый рисунок страницы;
· leftmargin , rightmargin, topmargin, bottommargin - задают левое, правое, верхнее и нижнее поля страницы соответственно (в пикселях, px).
Рассмотрим параметры более подробно.
Задание цвета фона и текста странички
Цвет можно задавать тремя способами:
1. через английский эквивалент названия цвета. Например,
<BODY bgcolor=”red”>
задает красный цвет фона.
2. через RGB-формат “#XXXXXX ”, где X - это число от 0 до F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F), первая пара цифр отвечает за насыщенность красного цвета, вторая пара - за насыщенность зеленого, третья пара - синего. Например, для задания красного цвета используем название «red»
<BODY bgcolor=”#FF0000”>
задает красный цвет фона.
3. через RGB-формат rgb(Х,Х,Х), где Х - это число от 0 до 255, первая цифра отвечает за насыщенность красного цвета, вторая - за насыщенность зеленого, третья - синего. Например,
<BODY bgcolor=rgb(255,0,0)>
задает красный цвет фона.
Примечание. Основные оттенки цветов web-палитры можно посмотреть в приложении к методическому пособию.
Упражнение 2.1
Создайте HTML-документ format.html. В нем задайте желтовато-коричневый цвет фона и темно-зеленый цвет текста.
Для этого:
· В конце пособия откройте web-палитру цветов.
· Найдите в ней соответствующие значения нужных цветов: желтовато-коричневый - #D2B48C, темно-зеленый - darkgreen.
· Для задания цвета фона и текста используйте параметры тэга <BODY> - bgcolor и text:
<BODY bgcolor=”#D2B48C” text=”darkgreen”>
· В теле странички напишите текст: «В языке HTML значения параметров тэгов, как правило, пишутся в кавычках. Но если в значении параметра нет пробелов, то кавычки можно и опустить. Нет правил без исключений!».
· Просмотрите страничку в окне браузера.
Задание фонового рисунка.
Вы также можете повысить интерес к своей страничке, сделав фон страницы не одним цветом, а текстурой. Текстура - это небольшое изображение, которым «мостят» фон, т.е. оно многократно копируется как по вертикали, так и по горизонтали. Для создания текстур, обычно, применяют специальные графические редакторы, в которых есть инструменты создания текстур - текстуризаторы. Однако можно создать текстуру с помощью простых редакторов и инструментов, соблюдая следующие правила:
1. Рисунок не должен быть очень контрастным, т.е. пестрым.
2. Рисунок либо не должен обрываться на границе, либо его границы должны «сшиваться».
3. Если рисунок яркий, то шрифт документа должен быть темным и наоборот.
4. Размер «плитки» текстуры выбирайте в пределах от 3х3 до 5х5 см.
Текстурный рисунок должен быть сохранен в формате GIF или JPG. После чего, в параметре background тэга <BODY> нужно указать путь к фоновому рисунку. Например,
<BODY background=”fon.gif”>
Примечание. Данный пример, говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ.
Если картинка лежит в поддиректории (например, “images”), то путь к ней будет выглядеть так:
<BODY background=”images/fon.gif”>
Если картинка лежит на уровень выше, а документ находится в поддиректории, то путь к ней будет выглядеть так:
<BODY background=”../fon.gif”>
Если картинка лежит на другом сайте, то путь прописывается полностью:
<BODY background=”http://www.mypage/images/fon.gif”>
Для вашего удобства размещайте картинку в той же директории, что и документ, тогда путаницы будет меньше.
Упражнение 2.2.
Страничке format.html, созданной в упражнении 2.1, задайте фоновый рисунок (рис. 2.1).
Для этого:
· В графическом редакторе «Paint» создайте простейший фоновый рисунок. (Например,).
· Сохраните его в ту папку, где находится Ваша страничка под именем fon.jpg.
· В коде странички у тэга <BODY> добавьте параметр background:
<BODY bgcolor=”#DBDCAB” background=”fon.jpg” text=”darkgreen”>
· Не забудьте про заголовок странички: «Форматирование HTML-документа».
· Посмотрите результат в окне браузера.
Задание полей странички.
Поля страницы (отступы текста от границ окна браузера) задаются через параметры leftmargin, rightmargin, topmargin, bottommargin. Значения этих параметров указываются в пикселях. Например,
<BODY leftmagin=”100” topmargin=”40”>
Упражнение 2.3
У созданного в предыдущих упражнениях HTML-документа format.html задайте поля: левое - 100 пикселей, правое - 80 пикселей, верхнее и нижнее - 50 пикселей.
Для этого:
· У тэга <BODY> опишите новые параметры (выделено полужирным шрифтом):
<BODY bgcolor=”#DBDCAB” text=”darkgreen” leftmargin=”100” rightmargin=”80” topmargin=”50”>
· Посмотрите результат в окне браузера.
Задание 2.1.
Создайте HTML-документ pautina.html с названием «Всемирная паутина: первое знакомство». Отформатируйте документ: цвет фона - голубовато-стальной, цвет текста - блекло-голубой, поля страницы - все по 50 пикселей. В тело странички внесите текст:
«WWW (World Wide Web) - территориально распределенная гипертекстовая система Internet, или «Всемирная паутина». В сети Internet это сервис, предназначенный для доступа к информации, организованной при помощи гипертекстовых связей».
Задание 2.2
Задайте фоновый рисунок у HTML-документа pautina.html.
Форматирование абзаца
Параграфы
Предположим, что Вы хотите разбить текст на параграфы. Для этого нужно перед началом параграфа поставить тэг <P>. Когда браузер обнаружит этот тэг, то он сам вставит перед началом параграфа пустую строку. Тэг параграфа - парный, и у открывающего тэга <P> существует закрывающий </P>.
Тэг <P> имеет следующие параметры:
· title - краткое описание параграфа (всплывает в виде подсказки при наведении на текст параграфа);
· align - задает выравнивание абзаца. Параметр align может принимать следующие значения:
- сenter - текст абзаца выравнивается по центру;
- left - по левому краю;
- right - по правому краю.
- justify - по ширине экрана
Упражнение 2.4
Создайте HTML-документ paragraph.html с названием странички «Параграфы». В этот документ добавьте текст, используя разбиение на абзацы с различным выравниваем:
<P align=left title=”Выравнивание по левому краю”>Этот текст выровнен по левому краю, при этом правый край окажется неровным, «рваным». Такой текст хотя и выглядит не очень аккуратным, но его все-таки легко читать.</P>
<P align=right title=”Выравнивание по правому краю”> Этот абзац выровнен по правому краю. Такое выравнивание текста значительно затрудняет чтение, но привлекает к себе внимание. Поэтому его часто используют для оформления заголовков и эпиграфов.</P>
<P align=center title=”Выравнивание по центру”>А текст, выровненный по центру, используют для оформления коротких заголовков, но большой текст в таком виде читать очень тяжело.</P>
Просмотрите ее в окне браузера.
Примечание. Обратите внимание на то, что значение у параметра align указано без кавычек, а у параметра title значение задано в кавычках. Почему? Подсказка: прочтите текст странички format.html.
Заголовок.
Большинство документов имеют заголовок. Для его создания используют тэги <Hx></Hx>, где x - число от 1 до 6. Заключив текст между этими тэгами, Вы получите заголовок соответствующего уровня.
Упражнение 2.5
Создайте HTML-документ headings.html и добавьте в него примеры встроенных заголовков различного уровня:
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
<H3>Заголовок 3</H3>
<H4>Заголовок 4</H4>
<H5>Заголовок 5</H5>
<H6>Заголовок 6</H6>
Просмотрите результат в окне браузера (см. рис. 2.2).
Задание 2.3.
В HTML-документ pautina.html, созданный в задании 2.1, добавьте заглавие текста «Всемирная паутина: первое знакомство». Отформатируйте заглавие с помощью встроенных заголовков.
Принудительный перенос на новую строку.
Браузеры игнорируют множественные пробелы и символы конца строки. Для принудительного переноса на следующую строку используется тэг <BR>. С помощью этого тэга так же можно вставлять пустые строки.
Упражнение 2.6
Создайте HTML-документ romans3.html, содержащий текст стихотворения Игоря Северянина «Романс 3».
Для этого:
· Каждое четверостишие начинайте новым абзацем (тэг <P>).
· Используйте тэг <BR> для принудительного переноса строк внутри четверостиший.
· Название стихотворения оформите встроенным заголовком 3 уровня.
· Подпись автора стихотворения выровняйте по правому краю.
<H3>РОМАНС III</H3>
<P>За каждую строку, написанную кровью,<BR>
За каждую улыбку обо мне, -<BR>
Тебе ответствую спокойною любовью<BR>
И образ твой храню в душевной глубине.</P>
<P>Не видимся ли миг, не видимся ль столетье -<BR>
Не все ли мне равно, не все ль равно тебе,<BR>
Раз примагничены к бессмертью цветоплетью<BR>
Сердца углубные в медузовой алчбе?..</P>
<P>О, да: нам все равно, что мы с тобой в разлуке,<BR>
Что у тебя есть муж, а у меня - жена.<BR>
Ищи забвения в искусстве и в науке.<BR>
И в сновидениях, и в грезности вина.</P>
<P align=right>Игорь Северянин</P>
· Посмотрите страничку в окне браузера.
Текст с отступом.
Текст, заключенный между тэгами <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.
Упражнение 2.7
Создайте HTML-документ viveskam.html со стихотворением Владимира Маяковского «Вывескам»:
Вывескам
Читайте железные книги!
Под флейту золоченой буквы
Полезут копченые сиги
И золотокудрые брюквы.
А если веселостью песьей
Закружат созвездия «Магги» -
Бюро похоронных процессий
Свои проведут саркофаги.
Когда же, хмур и плачевен,
Загасил фонарные знаки,
Влюбляйтесь под небом харчевен
В фаянсовых чайников маки!
Для этого:
· Отформатируйте название стихотворения встроенным заголовком, например, 4 уровня:
<H4>Вывескам</H4>
· Четверостишия стихотворения оформите с использованием тэга <BR> (как в упражнении 2.6).
· Для отступа второго четверостишия заключите его текст между тэгами <BLOCKQUOTE> и </BLOCKQUOTE>:
<BLOCKQUOTE>А если веселостью песьей<BR>
Закружат созвездия «Магги» - <BR>
Бюро похоронных процессий<BR>
Свои проведут саркофаги.</BLOCKQUOTE>
· Посмотрите результат в окне браузера.
Предварительно форматированный текст.
Как уже было сказано ранее, браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение. Текст, заключенный между метками <PRE> и </PRE> (от англ. preformatted - предварительно форматированный), выводится браузером на экран как есть - со всеми пробелами, символами табуляции и конца строки.
Упражнение 2.8
Добавьте на вашу страничку стихотворение Маяковского, сохраняя все отступы и переносы, для сохранения отступов и переносов используйте тэг <PRE>:
<PRE>
Только
солнце усядется,
канув
за опустевшие
фабричные стройки,
стонут
окраины
от хулиганов
вроде вот этой
милой тройки.
Владимир Маяковский
</PRE>
Посмотрите результат в окне браузера.
Примечание. Обратите внимание, что в предварительно форматированном тексте по умолчанию используется шрифт фиксированной ширины (Courier).
Форматирование символов.
Форматирование символов можно условно разделить на логическое и физическое. При логическом форматировании разработчик web-странички структурирует документ, выделяет логические части, одновременно изменяя внешний вид символов. При физическом форматировании разработчик не учитывает контекста и лишь придает некоторым символам конкретный вид.
Применяя тэги логического или физического форматирования, мы в принципе получаем одинаковый результат. Но логическое форматирование и четкое структурирование являются признаками хорошо составленного документа. При использовании логических тэгов в ближайшем будущем станет возможным, например, автоматический поиск цитат в сети Internet.
Логическое форматирование.
Для логического форматирования существует группа форматирующих тэгов.
<CITE> - используется для выделения цитат или названий книг и статей, при этом текст обычно выводится курсивом. Например:
Я прочитал <CITE>Войну и мир</CITE>
<CODE> - применяется для вывода небольшого куска программного кода шрифтом фиксированной длины (для больших листингов используется тэг <PRE>). Например,
Одну из первых строчек, которые узнает программист, это:
<CODE>Print “Hello, World!”</CODE>
<EM> - используется для выделения важных фрагментов текста. Браузер обычно отображает такой текст курсивом. Например,
Изменение внешнего вида символов и абзацев называется <EM>форматированием</EM>
<KBD> - выделяет шрифтом фиксированной ширины текст, который предлагают ввести пользователю с клавиатуры. Например,
Для запуска программы-кодировщика введите в поле слово <KBD>Кодировка</KBD>
<SAMP> - используется для выделения нескольких символов шрифтом фиксированной ширины. Например,
<SAMP>ABC</SAMP> - этими буквами в Америке обозначают алфавит.
<STRONG></STRONG> - используется для выделения важных фрагментов текста полужирным шрифтом.
<VAR><VAR> - используется для отметки имен переменных. Обычно такой текст выделяется курсивом. Например,
Пусть задана функция: <VAR>y=2x<VAR>
<ADDRESS></ADDRESS> - используется при выделении почтового адреса курсивом.
<strike></strike> - используется для зачеркивания текста.
Упражнение 2.9
Создайте HTML-документ logical.html. Внесите в него тексты приведенных выше примеров и просмотрите страничку в окне браузера.
Физическое форматирование
Для физического форматирования используются следующие тэги:
· <b></b> - полужирный шрифт
· <i></i> - курсив
· <u></u> - подчеркнутый
· <s></s>- выделение перечеркиванием
· <tt></tt> - текст отображается шрифтом фиксированной ширины (чаще всего шрифт Courier)
· <big></big> - текст отображается больше, чем основной шрифт
· <small></small> - текст отображается меньше, чем основной шрифт
· <sub></sub> - нижний индекс
· <sup></sup> - верхний индекс
Упражнение 2.10
Создайте HTML-документ physical.html и добавьте на страничку текст с использованием описанных выше тэгов физического форматирования:
<P>При использовании тэгов начертания текст может быть <B>полужирным</B>, <I>курсивным</I> и <U>подчеркнутым</U>
Также можно сделать <B><I>полужирный курсив</I></B>, <U><B>полужирный подчеркнутый</B></U> и даже <B><I><U>полужирный подчеркнутый курсив!</U></I></B>. Кроме того, текст можно <S>зачеркнуть</S>!</P>
Просмотрите результат в окне браузера.
Примечание. Обратите внимание, что при использовании комбинации парных тэгов следует быть внимательней с порядком их расположения. Последовательность закрывающих тэгов должна быть «зеркальной» по отношению к последовательности открывающих тэгов. То есть, если первым из открывающих тэгов стоит <b>, а затем <i>, то сначала следует написать тэг </i>, а затем уже </b>.
Упражнение 2.11
Создайте HTML-документ formula.html и добавьте в него химическую формулу воды - H2O и математическую формулу кубической функции - y=x 3 (рис.2.3)
· Для создания верхнего и нижнего индексов используйте соответствующие тэги <SUP> и <SUB>.
· Результат просмотрите в окне браузера.
Работа со шрифтом.
Некоторые тэги вообще не имеет смысла применять без атрибутов. К таким тегам можно отнести тэг <FONT></FONT>. Тэг <FONT> применяется при работе со шрифтом и имеет следующие параметры:
· size - задает размер шрифта (задается в пунктах; по умолчанию размер шрифта принят равным 3);
· face - задает тип шрифта. Очень аккуратно используйте этот атрибут, так как заданный шрифт должен присутствовать на компьютере пользователя - в противном случае браузер подставит шрифт, определенный по умолчанию (как правило, это Times New Roman). Применяйте шрифты, в наличии которых вы уверены, иначе пользователь увидит текст иначе, чем вы. К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 95/98, MS Office;
· color - задает цвет шрифта. Способы задания цвета были рассмотрены в разделе «Настройка внешнего вида страницы»;
Упражнение 2.12.
Работа с размером шрифта. Создайте HTML-документ font.html и добавьте текст в тело странички:
<P><FONT size="1">Увеличиваем</FONT>
<FONT size="3">размер</FONT>
<FONT size="5">символов</FONT>
<FONT size="6">текста</FONT></P>
Просмотрите страничку в окне браузера.
Упражнение 2.13.
Работа с цветом шрифта. Добавьте текст в тело странички font.html и просмотрите ее в окне браузера:
<P><FONT color="red">красный</FONT> - стой!</P>
<P><FONT color="yellow">желтый</FONT> - внимание!</P>
<P><FONT color="green">зеленый</FONT> - иди!</P>
Задание 2.4.
Создайте HTML-документ rainbow.html и внесите в него текст:
Каждый охотник желает знать, где сидит фазан.
Каждое слово окрасьте в соответствующий цвет радуги.
Специальные символы
Некоторые символы не возможно просто набрать с клавиатуры: это буквы алфавитов части европейских языков, математические и некоторые другие символы. Некоторые символы, введенные в HTML-документ, могут быть неверно поняты браузером: например, символы "<" и ">" используются браузером для указания тэгов и, возможно, быть интерпретированы только так.
Вместо символов этой группы необходимо использовать замену. Например,
|
Символ |
Замена |
|
|
< |
< |
|
|
> |
> |
Примечание. Более полную таблицу специальных символов можно посмотреть в приложении к методическому пособию.
Упражнение 2.14
Создайте HTML-документ symbols.html с заголовком «Использование замены спецсимволов».
В тело документа внесите текст, используя замены символам < и >:
Тэг <BR> используется для принудительного переноса строк.
Текст, заключенный между парными тегами <BLOCKQUOTE> и </BLOCKQUOTE> будет иметь отступ от левого края окна браузера.
Посмотрите результат в окне браузера.
Задание 2.5
Создайте HTML-документ functions.html, содержащий следующие формулы (для специальных символов <,>, ,, используйте замену):
|
Функции сокращенного умножения: а2-b2=(a+b)(a-b) (a+b)2=a2+2ab+b2 Логарифмы: Запись logab=х означает, что ax=b; здесь a>0, b>0, a2 Тригонометрия: sin(б+)=sin*cos+cos*sin |
Создание бегущей строки
Текст абзаца можно сделать "движущимся", т.е. оформить его в виде бегущей строки. Для этого используйте тэг <marquee>..</marquee>
Тэг <MARQUEE> имеет следующие параметры:
· bgcolor - задает цвет фона;
· height - задает высоту фоновой полосы (в пикселях или процентах от высоты окна бруазера);
· width - ширина полосы бегущей строки (в пикселях или процентах от ширины окна браузера;
· direction - задает направление бегущей строки:
- left - справа налево (это значение используется по умолчанию),
- right - слева направо,
- up - снизу вверх,
- down - сверху вниз.
· behavior - управляет поведением бегущей строки:
- scroll - дойдя до края, строка уходит из поля зрения, затем появляется с противоположной стороны,
- slide - строка, достигнув края окна, останавливается,
- alternate - строка, достигнув противоположного края окна, меняет свое направление.
· hspace, vspace - задает горизонтальный и вертикальный соответственно отступы у бегущей строки (в пикселях);
· loop - задает количество переходов строки по экрану;
· scrollamount - задает скорость движения строки (в пикселях в секунду);
· scrolldelay - определяет временной интервал (в миллисекундах) между шагам;
Упражнение 2.14
Добавьте в начало вашей странички бегущую строку «Всем привет! Меня зовут…».
· Для этого заключите текст строки между тэгами <MARQUEE> и </MARQUEE>
<P><MARQUEE>Всем привет! Меня зовут…</MARQUEE></P>
· Отформатируйте строку: измените размер шрифта, начертание, цвет текста.
· Изменяя значения атрибутов тэга <MARQUEE> измените поведение бегущей строки: при достижении границы окна, она должна менять направление, увеличьте скорость перемещения строки.
Задание 2.6
Создайте страничку hello.html с бегущей строкой «Привет!», которая двигается в различных направлениях, подобно бильярдному шарику, отталкиваясь от края окна браузера и меняя свое направление.
Примечание. Используйте вложенную конструкцию <MARQUEE> с различными направлениями.
Списки
Очень важный элемент web-страничек - это списки. Они бывают:
нумерованными, например:
Повышение квалификации:
1. Кадровик.
2. Секретарь.
3. Заведующий магазинами.
4. Маркетолог.
маркированными, например:
Предлагаем стоматологические услуги:
· протезирование зубов;
· удаление зубов без боли;
· рентген;
· детский прием.
смешанными, то есть, сочетать в себе элементы того и другого списка.
В нумерованном списке (Оrdered List) каждому элементу предшествует его порядковый номер. Для организации нумерованного списка используются следующие тэги:
<ol> - открывает нумерованный список
<li> - задает элемент списка (List Item)
</ol> - закрывает список
Тэг <OL> имеет два параметра:
· start - задает число, с которого начинается нумерация (по умолчанию с 1);
· type - задает тип нумерации (по умолчанию арабская нумерация 1,2,3,…):
- type=“i” - нумерация римскими малыми (i, ii, iii, …);
- type=“I” - нумерация римскими заглавными (I,II,III,…);
- type=“a” - нумерация английскими малыми (a, b, c, …);
- type=“A” - нумерация английскими заглавными (A, B, C,…).
В маркированном списке (Unordered List) каждому элементу списка предшествует маркер. Для создания маркированного списка используют следующие тэги:
<ul> - открывает список
<li> - задает элемент списка
</ul> - закрывает список
Тэг <UL> тоже имеет параметр type, с помощью которого можно задавать вид маркера:
- type="circle" - в списке используется маркер ;
- type="square" - в списке используется маркер ;
- type="disc" - в списке используется маркер (этот маркер используется по умолчанию).
Упражнение 2.15
Создайте HTML-документ orderedlist.html и добавьте в него нумерованный список, указанный в примере:
<P>Повышение квалификации </P>
<OL>
<LI>Кадровик.</LI>
<LI>Секретарь.<LI>
<LI>Заведующий магазинами.</LI>
<LI>Маркетолог.<LI>
</OL>
· Просмотрите результат в окне браузера.
· C помощью параметра type задайте нумерацию римскими заглавными:
<OL type=”I”>
· Просмотрите результат в окне браузера: нумерация сменилась на заглавные римские цифры.
Упражнение 2.16
Создайте HTML-документ unorderedlist.html и добавьте в него маркированный список, указанный в примере:
<P> Предлагаем стоматологические услуги:</P>
<UL>
<LI>протезирование зубов;</LI>
<LI>удаление зубов без боли;</LI>
<LI>рентген;</LI>
<LI>детский прием.</LI>
</UL>
· Просмотрите результат в окне браузера.
· C помощью параметра type измените стандартный вид маркера на квадратик :
<UL type=”square”>
· Просмотрите результат в окне браузера: маркер с кружка «» сменился на квадратик «».
Упражнение 2.17
Создайте HTML-документ kurs.html и добавьте в него смешанный список: во внешнем нумерованном списке используйте нумерацию заглавными римскими цифрами, во вложенном маркированном - маркер «диск» - (см. рис. 2.12):
<P>Изучение курса HTML включает в себя:</P>
<OL type=”I”>
<LI>Введение в HTML</LI>
<LI>Структура HTML-документа</LI>
<LI>Форматирование HTML-документа</LI>
<UL type=”disc”>
<LI>Настройка внешнего вида страницы</LI>
<LI>Форматирование абзацев</LI>
<LI>Форматирование символов</LI>
<LI>Списки</LI>
</UL>
<LI>Вставка рисунков в HTML-документа</LI>
<LI>Работа с таблицами</LI>
<LI>Ссылки</LI>
<LI>Фреймы</LI>
<LI>Формы</LI>
<LI>Каскадные таблицы стилей (CSS) </LI>
<LI>Классы</LI>
<LI>Слои и позиционирование</LI>
</OL>
Просмотрите результат в окне браузера (рис. 2.4).
Задание 2.7
Создайте HTML-документ about.html и перечислите ваши увлечения, используя маркированный список, и список дисциплин, которые вы изучаете в университете, используя нумерованный список. Отформатируйте текст: задайте цвет, тип шрифта, начертание, размер шрифта. В конце документа добавьте строчку:
Иванов И.И. 2005г
Для вставки специального символа используйте замену на соответствующий код или имя.
Задание 2.8
Измените HTML-документ kurs.html, созданный в упражнении 2.17: в скобочках у каждого пройденного раздела напишите примеры изученных тэгов (используйте замену для символов «<» и «>»). Например,
<LI>Структура HTML документа (тэги <HTML>, <BODY>, <HEAD> и другие)</LI>
Результат в окне браузера (рис. 2.5)
Вопросы для повторения
1. С помощью параметров какого тэга можно настроить внешний вид всей web_странички? Перечислите эти параметры.
2. С помощью какого тэга можно форматировать абзац? Какие параметры имеет данный тэг?
3. С помощью какого тэга можно создать встроенный заголовок? Сколько уровней имеет встроенный заголовок?
4. В каких случаях нужно применять тэг <BR>? тэг <BLOCKQUOTE>? тэг <PRE>?
5. Чем логическое форматирование символов отличается от физического форматирования?
6. С помощью какого тэга можно управлять цветом, размером, типом шрифта? Какие параметры нужно при этом использовать?
7. Какими тремя способами можно задавать цвет?
8. Что такое специальные символы?
9. Какие виды списков вы знаете? С помощью каких тэгов они задаются?
Контрольное задание
Создайте HTML-документ formatting.html по образцу (см. рис. 2.6). Страничка должна иметь левое и верхнее поля, фоновый рисунок и название, перечисление оформлено в виде списка.
Глава 3. Графика в HTML-документе
Использование рисунков.
Большинство браузеров могут вместе с текстом показывать рисунки форматов gif (*.gif), jpg, jpeg (*.jpg), png (*.png) или bmp (*.bmp) .
Поскольку каждый рисунок занимает много времени на отображение на экране (что замедляет загрузку всей странички), не рекомендуется включать слишком большое количество или чрезмерно большие по размеру рисунки в Ваш HTML_документ.
Вставка рисунков.
Для вставки картинки используется непарный тег <IMG>.
<IMG src=”путь к картинке”>
src - обязательный параметр тэга <IMG>, в котором указывается путь к картинке. Если картинка находится в той же папке, что и web-страничка, то достаточно написать имя файла.
Примечание. Подробнее о формировании пути к рисунку смотрите в предыдущей главе в пункте «Задание фонового рисунка».
Упражнение 3.1
Создайте новый HTML-документ picture.html с названием странички «Вставка рисунков в HTML-документ» и разместите на нем рисунок.
Для этого:
· Добавьте в тело странички абзац с текстом, комментирующим, что изображено на рисунке. Например:
<P>Перед вами изображена цапля</P>
· Затем, используя тэг <IMG>, добавьте на страничку рисунок:
<IMG src="bird.jpg">
· Посмотрите результат в окне браузера (рис.3.1)
Дополнительные параметры графических изображений
Тэг <IMG> имеет дополнительные параметры с использованием которых можно форматировать рисунок:
· width - задает ширину рисунка;
· height - задает высоту рисунка;
· align - задает положение рисунка относительно абзаца, внутри которого помещен рисунок. Данный тэг может принимать значения:
- top - вывод рисунка на уровне самого высокого элемента абзаца;
- middle - вывод рисунка по центру строки абзаца;
- center - вывод рисунка по центру строки абзаца;
- bottom - вывод рисунка на уровне самого низкого элемента абзаца;
- left - вывод рисунка слева от абзаца;
- right - вывод рисунка справа от абзаца.
· hspace, vspace - задает горизонтальный и вертикальный отступы текста от изображения (задается в пикселях);
· border - задает границу картинки (измеряется в пикселях, по умолчанию border=1, отсутствие границы - border=0);
· alt - задает альтернативный текст картинки.
Упражнение 3.2
Уменьшите размеры рисунка, который Вы поместили в HTML-документе picture.html в упражнении 3.1.
Для этого:
· У тэга <IMG> добавьте параметры width и height с нужными значениями. Например,
<IMG src=”bird.jpg” width=50 height=100>
· Будьте осторожны - при изменении размеров соблюдайте пропорции!
Преимущества и недостатки уменьшения размеров изображений средствами HTML
В уменьшении размеров рисунка средствами HTML есть плюсы и минусы.
Минусы уменьшения размеров рисунка при помощи HTML:
· рисунок сохраняет свои реальные размеры и, соответственно, его «вес» не измениться, даже если вы сделаете огромный рисунок, который «весит» 1 Мб, размером с почтовую марку. А следовательно и вес странички будет большим.
· картинка потеряет много деталей, что в некоторых случаях превращает ее в нечто непонятное.
Плюсы уменьшения размеров рисунка при помощи HTML:
· рисунок можно вписать в дизайн, уменьшив его размер, а при копировании его на локальный диск, он сохранит свои размеры.
Совет будущему HTML-редактору. При грамотном размещении на странице рисунков лучше указать еще и их ширину и высоту. В этом случае браузеру не нужно будет выполнять работу по определению размера рисунка, что значительно ускорит загрузку страницы.
Упражнение 3.3
Работа с положением рисунка относительно текста абзаца.
В созданный в предыдущих упражнениях HTML-документ picture.html добавьте еще один абзац текста, а рисунок переместите внутрь этого абзаца (между тэгами <P> и </P>):
<P><IMG src=bird.jpg width=100 height=117>Цапля обитает на болотах, имеет длинные ноги. Постоянно стоит на одной ноге, чтобы не спугнуть свою добычу - лягушек.</P>
Задайте у рисунка положение справа относительно текста абзаца.
Для этого:
· У тэга <IMG> добавляем параметр align, которому присваиваем значение right:
<IMG src=bird.jpg align=right>
· Посмотрите результат в окне браузера (рис.3.2)
Задание 3.1.
Изменяя значение параметра align у тэга <IMG>, поэкспериментируйте с положением рисунка на страничке.
Примечание. Не забывайте, что положением рисунка можно управлять, если рисунок помещен внутрь абзаца!
Упражнение 3.4.
Задайте у рисунка горизонтальный отступ текста- 40 пикселей.
Для этого:
· У тэга <IMG> добавьте еще один параметр hspace:
<img src=bird.jpg width=100 height=117 align=left hspace=40>
· Посмотрите результат в окне браузера.
Альтернативный текст
Пользователь, путешествуя по сети Internet, в целях уменьшения количества скачанной информации, может отключить отображение рисунков (команда меню браузера Internet Explorer Сервис/Свойства обозревателя, вкладка Дополнительно -> убрать галочку Отображать рисунки).
...Подобные документы
Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Суть и составные части Web технологии, ее базовые элементы. Стандартный язык, предназначенный для создания гипертекстовых документов: HyperText Markup Language (HTML). HTML-тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.
реферат [19,4 K], добавлен 01.04.2010Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010Термин HTML (HiperText Markup Language) и его реализация. Программы просмотра страниц написанных на зыке манипулирования гипертекстами. Характеристика специальных программ – браузеров: Google Chrome, Opera, Mozilla Firefox. Структура HTML-страницы.
контрольная работа [118,8 K], добавлен 05.04.2015Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Значение атрибута TITLE тега HTML-документа. Возможности HTML для разработчиков Web-страниц. Параметры тега
, регулирующие отступы вокруг изображения. Оформление комментариев в CSS. Теги логического форматирования текста (phrase elements).
тест [19,9 K], добавлен 11.10.2012История возникновения интернета. Первый интернет-браузер, способный отображать не только текст, но графику, разработанный группой студентов из штата Иллинойс. Тим Бернерс-Ли - разработчик языка гипертекстовой разметки HTML (HyperText Markup Language).
презентация [423,5 K], добавлен 14.11.2013История Hyper Text Markup Language, таблицы стилей, уровни Cascading Style Sheets. Описание средств разработки шаблона. Верстка элементов шаблона и создание стилей. Требования к качеству html-верстки и тестирование сайта. Листинг html и css-кода.
курсовая работа [237,5 K], добавлен 28.12.2014Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011Цели, задачи и компоненты информационной технологии управления. Разработка структуры сайта и программный код работы в HTML–редакторе: создание титульной страницы, документа с фреймами, связь информационных документов с помощью гипертекстовых ссылок.
курсовая работа [34,3 K], добавлен 11.08.2011Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Создание Web-документов (от простейших статических до документов на основе динамического HTML): форматирование текста, создание списков, таблиц, встраивание различных объектов, использование средств интерактивного общения с пользователем.
методичка [45,5 K], добавлен 27.10.2010Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Понятие и функциональные особенности фреймов, внутренняя структура и атрибуты. Мультимедийные возможности HTML, их исследование и оценка эффективности. Формы в соответствующих документах, их назначение, классификация и типы, нестандартное использование.
контрольная работа [130,2 K], добавлен 09.08.2014Java Script как язык управления сценарием отображения документа. Отличие world wide web от остальных инструментов для работы с Internet. Использование каскадных таблиц стилей в рамках разработки спецификации HTML. Элементы программы Netscape Navigator.
контрольная работа [1,1 M], добавлен 02.12.2009Знакомство с основными принципами построения Web-сайтов. Рассмотрение этапов создания простой страницы HTML. Анализ способов форматирования сайтов. Общая характеристика видов списков: маркированные, нумерованные. Особенности таблиц каскадных стилей.
курсовая работа [2,5 M], добавлен 18.07.2014
