Создание web-страницы с помощью гипертекстовой разметки html с использованием списков
Процесс разработки языка html Тимом Бернерс-Ли. Понятие тега как команды html, указывающей интерпретатору браузера, каким образом он должен обрабатывать. Правила записи тега в совокупности с его атрибутом. Характеристика основных разновидностей списков.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | русский |
| Дата добавления | 06.02.2014 |
| Размер файла | 33,2 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БЕЛАРУСЬ
Учреждение образования
«Гомельский государственный университет имени Франциска Скорины»
Математический факультет
Кафедра вычислительной математики и программирования
Курсовая работа
Создание web-страницы с помощью гипертекстовой разметки html с использованием списков
Исполнитель
студентка группы М-21 Е.И. Басак
Научный руководитель
преподаватель-стажер Н.А. Свитич
Гомель 2013
Содержание
Введение
1. Структура HTML - документа
2. Цветовые спецификации
3. Форматирование текста
4. Разделы, заголовки и горизонтальные линии
5. Списки
5.1 Маркированный список
5.2 Нумерованный список
5.3 Вложенные списки
5.4 Списки определений
Заключение
Список использованных источников
список html тег
Введение
Чтобы представить информацию для глобального использования, нужен универсальный язык, который понимали бы все компьютеры. Языком публикации, используемым в World Wide Web, является HTML (HyperText Markup Language - язык разметки гипертекстов).
HTML дает авторам средства для публикации электронных документов с заголовками, текстом, таблицами, списками, фотографиями и т.д., загрузки электронной информации с помощью щелчка мыши на гипертекстовой ссылке.
Разработки форм для выполнения транзакций с удаленными службами, для использования в поиске информации, резервировании, заказе продуктов и т.д.
Включения электронных таблиц, видеоклипов, звуковых фрагментов и других приложений непосредственно в документы.
Язык HTML был разработан Тимом Бернерс-Ли во время его работы в CERN и распространен браузером Mosaic, разработанным в NCSA. В 1990-х годах он добился особенных успехов благодаря быстрому росту Web. В это время HTML был расширен и дополнен. В Web очень важно использование одних и тех же соглашений HTML авторами Web-страниц и производителями. Это явилось причиной совместной работы над спецификациями языка HTML.
Большинство людей признают, что документы HTML должны работать в различных браузерах и на разных платформах. Достижение совместимости снижает расходы авторов, поскольку они могут разрабатывать только одну версию документа. В противном случае возникает еще больший риск, что Web будет представлять собой смесь личных несовместимых форматов, что в конечном счете приведет к снижению коммерческого потенциала Web для всех участников.
В каждой версии HTML предпринималась попытка отразить все большее число соглашений между работниками и пользователями этой индустрии, чтобы усилия авторов не были потрачены впустую, а их документы не стали бы нечитаемыми в короткий срок.
Язык HTML разрабатывался с той точки зрения, что все типы устройств должны иметь возможность использовать информацию в Web: персональные компьютеры с графическими дисплеями с различным разрешением и числом цветов, сотовые телефоны, переносные устройства, устройства для вывода и ввода речи, компьютеры с высокой и низкой частотой и т.д.
1. Структура HTML - документа
Директивы HTML называются тегами. Теги заключаются в угловые скобки. Все теги за исключением некоторых - парные. Закрывающий тег отличается от открывающего наличием символа /. Синтаксис записи тега:
<ТЕГ> обрабатываемое значение </ТЕГ>
Теги допускают вложение друг в друга. Все объекты не заключенные в угловые скобки, воспринимаются как текстовые элементы.
HTML не чувствителен к регистру, однако рекомендуется применять при написании тегов заглавный регистр для улучшения читаемости кода. Исключением являются адреса URL и escape-последовательности.
Тег - это команда html, указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение. Это значение называется атрибутом тега. Тег может иметь атрибут или не иметь его. Тег верхнего уровня <HTML> не имеет атрибутов.
Синтаксис записи тега в совокупности с его атрибутом:
<ТЕГ имя_атрибута_1=”значение”
…
имя_атрибута_n=”значение”>
Значения атрибутов заключаются в прямые кавычки <”>. Если внутри атрибута тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве внутренних кавычек рекомендуется использовать одинарные. Такое выражение выглядит следующим образом:
<ТЕГ имя_атрибута_1=”значение_1;
'значение2';
значение3”>
Спецификация языка позволяет опускать кавычки в следующих видах атрибутов:
1) атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например цифр;
2) атрибуты, состоящие только из цифр от 0 до 9;
3) атрибуты, обозначающие промежутки времени.
Например, запись атрибутов border=”1” или align=”center” допустимо представить в виде border=1 или align=center.
Структура HTML документа:
<HTML>
<HEAD> Заголовок документа
<TITLE>Внешний заголовок </TITLE>
</HEAD>
<BODY>
Тело документа, содержащее основной код
</BODY>
</HTML>
Комментарии. Комментарии открываются символьной последовательностью, начинающейся с открывающей угловой скобки, восклицательного знака и двух знаков тире <! - закрываются сочетанием - >.
Формат комментария:
<! - текст комментария - >
Дефинитивный определить. Согласно спецификациям HTML тег DOCTYPE (что означает "объявление типа документа" или дефинитивный определить) сообщает валидатору, какая версия HTML используется на странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него код и CSS не пройдет проверку валидатором.
Тег DOCTYPE также важен для правильного отображения и работы страницы в браузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).
Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает браузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.
Форматы тега DOCTYPE для стандартов HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами)
2. Цветовые спецификации
Определить тот или иной цвет при создании web-страницы можно двумя методами: посредством задания специальных цветовых меток, обозначающий названия цветов словами, или с помощью шестнадцатеричного цифрового кода, заменяющего эти метки.
Для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue).
Согласно данному стандарту, теоретические основы которого были разработаны ученым-физиком Г. Гельмгольцем, можно получить абсолютно любой желаемый оттенок путем смешивания всего лишь трех красок: красной, зеленой и синей.
Для обозначения цвета шестнадцатеричным цифровым кодом перед самим кодом ставится символ <#>, далее следует набор из шести знаков в шестнадцатеричной системе счисления.
Таблица 2.1 Обозначение цветов в шестнадцатеричной системе счисления
|
Цвет |
Символьная метка |
Цифровой код |
|
|
Белый |
White |
#FFFFFF |
|
|
Черный |
Black |
#000000 |
|
|
Зеленый |
Green |
#008000 |
|
|
Светло-зеленый |
Lime |
#00FF00 |
|
|
Серый |
Gray |
#808080 |
|
|
Светло-серый |
Silver |
#C0C0C0 |
|
|
Желтый |
Yellow |
#FFFF00 |
|
|
Темно-бордовый |
Maroon |
#800000 |
|
|
Синий |
Blue |
#0000FF |
|
|
Темно-синий |
Navy |
#000080 |
|
|
Голубой |
Aqua |
#00FFFF |
|
|
Изумрудный |
Teal |
#008080 |
|
|
Красный |
Red |
#FF0000 |
|
|
Пурпурный |
Purple |
#800080 |
|
|
Розовый |
Fuchsia |
#FF00FF |
|
|
Оливковый |
Olive |
#808000 |
Для передачи цветов в html предпочтительнее пользоваться шестнадцатеричным цифровым кодом.
3. Форматирование текста
Escape-последовательности. Иногда возникает необходимость использования в тексте символы, зарезервированные для обозначения элементов кода HTML. Это могут быть угловые скобки, прямые кавычки и т.д. Т. е. необходимо, чтобы символы отображались как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Поэтому существуют escape-последовательности, или их еще называют "нотации символьных объектов". Они начинаются символом & и заканчиваются; а между ними размещается сама команда, записываемая в строчном регистре.
Таблица 3.1 Обозначение символов
|
Символ |
Значение |
Именной примитив |
Числовой примитив |
|
|
< |
Левая угловая скобка |
< |
< |
|
|
> |
Правая угловая скобка |
> |
> |
|
|
“ |
Прямые кавычки |
" |
" |
|
|
& |
Амперсант |
& |
& |
|
|
Неразрывный пробел |
|
  |
||
|
© |
Символ копирайта |
© |
© |
|
|
® |
Символ зарегистрированной торговой марки |
® |
® |
|
|
= |
Знак равенства |
≡ |
= |
|
|
Стрелка влево |
← |
← |
||
|
Стрелка вправо |
→ |
→ |
||
|
Стрелка вверх |
↑ |
↑ |
||
|
Стрелка вниз |
↓ |
↓ |
Перевод строки, пробелы, табуляция. Введенное пользователем с помощью клавиатуры форматирование текста, включающее в себя пробелы, отступы табуляции и переводы строки, игнорируется браузером при интерпретации html-документа.
Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> - командой предварительного форматирования. Формат команды:
<PRE> предварительно отформатированный текст </PRE>
В этом случае все, что расположено между открывающим и закрывающим тегами <PRE> отобразится в окне броузера с сохранением всех введенных дизайнером пробелов, переводов строк и отступов табуляции.
Тег стандартного абзаца.
<P align= аргумент> Текст, заключенный в абзац </P>
Аргументы ALIGN:
1) right - выравнивание текста по правому краю;
2) left - выравнивание текста по левому краю;
3) center - выравнивание текста по центру;
4) justify - выравнивание текста по ширине.
Если при использовании тега <P> не задано никаких атрибутов, по умолчанию используется левое выравнивание.
Для выравнивания текста по центру можно использовать тег:
<CENTER> Текст </CENTER>
Разрывы строк. Для того, чтобы внутри тестового блока броузер отобразил перевод строки, например, для отделения одного абзаца от другого, в конце строки следует поместить тег <BR>. Следующее слово, встречающееся за данным тегом, будет перенесено на новую строку. Возможно использование нескольких тегов <BR> подряд для задания последовательности из нескольких пустых строк. Команда <BR> не имеет закрывающего тега.
Иногда тег <BR> содержит атрибут clear, который может принимать одно из трех значений: left, right, all. Указанные параметры позволяют переносить текст со смещением новой строки соответственно к левой, правой или обеим границам экрана одновременно. Синтаксис записи этого тега с атрибутом clear:
<BR clear=”значение”>
Некоторые браузеры переносят строки самостоятельно, причем разрывают строку в том месте, где она выходит за границы экрана. Если программисту необходимо отобразить текстовую строку фиксированной длины без переносов, используется тег <NOBR>:
<NOBR> строка без переносов </NOBR>
При использовании данного тега в случае, если длина строки превышает ширину экрана, в нижней части окна браузера появляется горизонтальная полоса прокрутки.
Шрифты. Элемент <FONT> определяет свойства шрифта.
Синтаксис записи тега <FONT>:
<FONT face=”значение1”
size=”значение2”
color=”значение3”>
текст
</FONT>
Значением атрибута face является название шрифта, который используется для отображения текста, заключенного в теги <FONT> </FONT>. Если, например, вместо параметра "значение1" в приведенном примере вы подставите "Arial", помеченный тегом <FONT>, текст будет отображаться именно этим шрифтом. В атрибуте face в качестве значений допустимо указывать несколько гарнитур шрифтов, разделяя их запятой. Для отображения текста браузер применит одну из перечисленных гарнитур, имя которой первой совпадает с имеющимся в его распоряжении набором гарнитур.
<FONT face=”Helvetica, Arial”>
Атрибут size указывает на размер шрифта. Параметр этого атрибута может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или - 1), - это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого браузером по умолчанию (12pt). Так, запись <FONT size="+1"> говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа. Кроме того, размер шрифта можно записывать целыми числами от 1до 7. В этих единицах основному шрифту, используемому по умолчанию, присваивается размер 3. Самый мелкий шрифт имеет размер 1, самый крупный - 7. Каждый шрифт в шкале "1-7" на 20% больше или меньше размера основного шрифта.
Атрибут color определяет цвет шрифта и подставляется либо цифровым кодом, либо символьной меткой. Очевидно, что при использовании тега <FONT> любой из его атрибутов может быть опущен.
<FONT face=”Arial"
size="+2"
color="#OOOOFF">
отрывок текста
</FONT>
<FONT face=”Arial"
size=5
color="olive">
отрывок текста
</FONT>
<Font size=6> текст </Font>
<Font size=+2> текст </Font>
<Font size=-1> текст </Font>
Изменение основного шрифта. По умолчанию текстовое содержимое документа отображается основным шрифтом, заданным в начальных установках браузера. Обычно основной шрифт имеет размер 3 и гарнитуру Times New Roman. Для изменения свойств основного шрифта предназначен одиночный тег <BASEFONT>, который имеет атрибуты size, color и face.
<BASEFONT size=5>
Задание цвета фона. Цвет фона всего документа определяется атрибутом bgcolor тега <BODY>.
<BODY bgcolor=”blue”>
Цвет текста. Для определения цвета шрифта можно пользоваться одним из 3 способов:
1) назначить цвет символов всего документа с помощью атрибута text тега <BODY>
<BODY text=”green”>;
2) если в документе определен основной шрифт с помощью тега <BASEFONT>, можно дополнить этот элемент атрибутом color
<BASEFONT size=5 color=”red”>;
3) для текстовых фрагментов цвет задается с помощью атрибута color в тегах <FONT>, при этом такое задание цвета отменяет действие атрибута text тега <BODY>
<FONT color=”red”>.
Элементы стиля шрифтов.
<B> Выделение текста полужирным шрифтом</B>
<I> Выделение курсивным шрифтом</I>
<U> Выделение текста подчеркиванием </U>
<TT> Моноширинный текст </TT>
<SMALL> Уменьшение размера шрифта на 10-20% относительно текущего размера шрифта </SMALL>
<BIG> Увеличение размера шрифта на 10-20% относительно текущего размера шрифта </BIG>
<STRIKE> Зачеркнутый текст </STRIKE>
<S> Зачеркнутый текст </S>
<SUB> Нижний индекс </SUB>
<SUP> Верхний индекс </SUP>
Данные пары тегов можно вкладывать одна в другую. Например, выделить текст жирным курсивным шрифтом можно так:
<В><I>Текст, выделенный жирным курсивным шрифтом</I></В>
Фразеологические элементы. Фразеологический элемент не указывает точного способа отображения текста, а лишь определяет, что содержимое элемента несет определенную смысловую нагрузку и должно быть каким-то образом выделено относительно обычного текста.
<EM> Элемент акцентирования. Большинство броузеров воспринимают его как выделение текста курсивом. </EM>
<STRONG> Элемент акцентирования. Этот элемент обычно интерпретируется браузерами как выделение полужирным шрифтом. </STRONG>
<DFN> Термин и его определение. Отображается курсивом. </DFN>
<KBD> “Текст, набранный с клавиатуры”. Отображается шрифтом Courier. </KBD>
<VAR> Задание переменной или ее значения. Содержимое выводится курсивом. </VAR>
<CODE> Воспроизведение специальных символов. Применяется в случаях, когда необходимо показать, что текст является исходным кодом какой-либо программы. </CODE>
<SAMP> Воспроизведение буквенных символов. Указывает, что текст является образцом. </SAMP>
<ACRONYM title=”значение”>
Элемент аббревиатуры. В содержимом располагается сокращенное название аббревиатуры. Расшифровка термина появляется в виде всплывающей подсказки, текст которой задается значением атрибута title. Содержимое ACRONUM появляется обычным текстом. Назначение ACRONUM состоит в подготовке информации для поисковых серверов по расшифровке аббревиатур. </ACRONYM>
Оформление цитат.
<BLOCKQUOTE cite=”URL”>
Текст длинной цитаты
</BLOCKQUOTE>.
Задает отображение длинных цитат отдельным текстовым блоком. Содержимое элемента выводится с небольшим отступом от левого и правого краев страницы (по умолчанию отступ равен 40px). Перед цитатой и после нее браузер оставляет по одной пустой строке. Атрибут cite предназначен для указания URL-адреса цитируемого документа. Этот атрибут не влияет на отображение цитаты и носит справочный характер.
<Q> Текст короткой цитаты </Q>
Тег применяется для форматирования коротких цитат. Содержимое элемента отображается без разрыва строки.
<CITE> Текст цитаты </CITE>
Цитаты, оформленные с помощью этого элемента, выделяются курсивным шрифтом.
Элемент <ADDRESS>. Используется для размещения в документе контактной информации. Элемент представляет собой блок, содержимое которого отображается курсивом и внутрь которого можно помещать другие элементы, например, разрывы строк, рисунки, гиперссылки и т.д., но нельзя вставлять блоки (разделы, списки, абзацы).
Формат элемента:
<ADDRESS>
Содержимое
</ADDRESS>
Пример:
<ADDRESS>
Екатерина Семенова <BR>
Ведущий менеджер
Телефон 123-123-123
<A href=”URL”>realiz@kdk. com</A>
</ADDRESS>
Атрибуты тега <BODY>. Общий формат записи тега <BODY> со всеми допустимыми атрибутами имеет вид:
<BODY background=”URL”
bgcolor=”значение1”
text=”значение2”
link=”значение3”
vlink=”значение4”
alink=”значение5”>
тело документа HTML
</BODY>
Атрибут background позволяет поместить на web-страницу фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например, "http: // www. server. ru/images/имя_файла. gif"), либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, ". . /images/имя_файла. gif”). Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его файл HTML. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне броузера.
Атрибут text позволяет задать цвет текста для всего документа в целом. Однако он может быть изменен в определенном участке текста путем использования команды <FONT> с атрибутом color.
Атрибут bgcolor используется для задания фонового цвета всему документу. Атрибуты bgcolor и background не исключают друг друга, однако у последнего имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибута, сначала выполняется заливка web-страницы цветом, назначенным в атрибуте bgcolor, поверх которой размещается изображение, заданное атрибутом background.
Атрибут link задает цвет, которым отображается не посещенная гиперссылка, то есть ссылка, к которой посетитель данного web-сайта еще не обращался. По умолчанию ей присваивается значение "blue" (#0000FF). В свою очередь, атрибут vlink указывает на цвет посещенной ссылки, значение которой по умолчанию - "purple" (#800080).
Атрибут alink определяет цвет гиперссылки в момент нажатия. По умолчанию данный атрибут также имеет значение "purple".
Применение многоязычного текста. Указание языка, на котором составлен документ или его фрагмент выполняется атрибутом lang. В качестве значения этого атрибута представляется код языка (en - английский, en-US - английский США, de - немецкий, ru - русский, uk - украинский). Например,
<HTML lang=”de”> - документ составлен на немецком языке,
<Q lang=”uk”> - цитата на украинском.
Направление чтения текста.
Задается атрибутом dir, принимающим значения:
ltr - слева направо,
rtl - справа налево.
Атрибут задается для текстов на арабском языке или иврите.
4. Разделы, заголовки и горизонтальные линии
Разделы. Формат задания раздела:
<DIV> HTML-код или текст </DIV>
<SPAN> HTML-код или текст </SPAN>
Разделы используются для задания параметров текста и его расположения. К разделу можно применять любые атрибуты стиля. Теги <DIV> и <SPAN> отличаются тем, что при использовании тега <DIV> браузер производит перенос раздела на новую строку и перед ним автоматически устанавливается пустая строка. При использовании тега <SPAN> переноса не возникает.
Заголовки. Заголовки позволяют разделить web-страницу на логически законченные блоки и помогают ориентироваться в содержимом документа.
Спецификация HTML позволяет программисту использовать шесть различных стилей, или, как их еще принято называть, логических уровней заголовков.
Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег <Нn>, где n - целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды:
<Нn аlign="параметр"> Текст заголовка </Нn>
Атрибут align дает возможность web-мастеру определить расположение заголовка в окне браузера. Параметр этого атрибута может принимать одно из трех возможных значений:
1) right - позиционирование заголовка по правой границе документа;
2) left - позиционирование заголовка по левой границе документа;
3) center - позиционирование заголовка по центру документа.
По умолчанию заголовки выравниваются по левому краю страницы. Высоты заголовков относятся как 2: 1,5: 1,17: 1,33: 0,83: 0,67. Заголовки как блоковые элементы отделяются от текста пустыми строками.
Пример:
<Н1 align=”center”>
ДОБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ!
</Н1>
Горизонтальные линии. Чтобы визуально отделить часть объектов документа от других, применяются горизонтальные линии. Горизонтальная линия - это графический элемент, имеющий длину, толщину и цвет.д.ля создания таких линий в HTML используется непарный тег <HR> (сокращение от Horizontal Ruler). В спецификации HTML для отображения вертикальных линий не предусмотрено специальных тегов.
Формат создание стандартной линии (по умолчанию стандартная линия занимает всю ширину окна браузера, а её толщина составляет 2px, верхняя часть линии несколько темнее нижней):
<HR>
Формат сплошной темной линии без тени:
<HR noshade>
Формат горизонтальной линии с указанием свойств:
<HR align=”значение”
width=”значение”
size=”значение”
color=”значение”>
Атрибут align задает выравнивание линии и может принимать значения center, left или right. По умолчанию линии выравниваются по центру страницы.
Атрибут width задает длину линии в пикселях или процентах. Например, тег <HR width=25> определяет горизонтальную линию шириной 25 пикселов. Если значение атрибута задается в процентах (ставится символ %), то ширина линии вычисляется относительно ширины окна, например <HR width=”25%”>. Задание длины линии в относительных единицах предпочтительнее.
Толщина линии задается атрибутом size. Значение этого атрибута задается в пикселах в диапазоне от 1 до 175. Присвоение больших значений игнорируется. По умолчание size=2px.
Цвет линии определяется атрибутом color.
5. Списки
Существуют 3 вида списков: маркированный (неупорядоченный), нумерованный (упорядоченный), список определений.
5.1 Маркированный список
Формат задания списка:
<UL tуре="параметр">
<LH>Заголовок списка</LH>
<LI>Содержимое 1 строки списка</LI>
<LI>Содержимое 2 строки списка </LI>
…
<LI> Содержимое n строки списка</LI>
</UL>
Атрибут type позволяет программисту управлять так называемым "буллет-стилем", то есть внешним видом и формой обозначающих каждое вхождение меток. Параметр этого атрибута может принимать одно из трех значений:
1) disc - метки отображаются в виде заполненных черным цветом окружностей;
2) circle - метки отображаются в виде полых окружностей;
3) square - метки отображаются в виде заполненных черным цветом квадратов.
По умолчанию, то есть в случае, когда в маркированном списке тег <UL> записывается без атрибутов, type="disc".
5.2 Нумерованный список
Нумерованный список позволяет отображать упорядоченную информацию, которая выводится на экран в виде обозначенного цифрами перечисления.
Формат задания списка:
<OL tуре=”параметр”
start=”значение”>
<LI>Содержимое 1 строки списка</LI>
<LI>Содержимое 2 строки списка </LI>
…
<LI> Содержимое n строки списка</LI>
</OL>
Атрибут type позволяет изменять буллет-стиль, то есть определять вид маркеров, которыми будут обозначаться составляющие список значения. В составе атрибута type можно использовать один из следующих параметров:
1) "1" - обычные арабские числа 1, 2, 3 и т. д.
2) "I" - римские цифры в заглавном регистре I, II, III, IV и т. д.
3) "i" - римские цифры в строчном регистре i, ii, iii и т. д.
4) "А" - символьная маркировка в заглавном регистре А, В, С и т. д.
5) "а" - символьная маркировка в строчном регистре а, b, с и т. д.
В НТМL возможно изменить порядок нумерации строк списка и порядок нумерации внутри списка.
Атрибут start позволяет задавать позицию, с которой следует начать маркировку. Например, если атрибут type задан как "I", а атрибут start - как "5", то нумерация начнется с цифры 5. Если же type имеет значение "А", а start - "D", то маркировка начнется с символа D.
Можно изменить нумерацию внутри списка, указав в теге <LI> атрибут value.
<LI value= значение> Содержимое 1 строки списка </LI>
По умолчанию значение атрибута type принимается как "I", нумерация начинается с первого элемента в каждом из типов маркировки.
5.3 Вложенные списки
Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой, например, команд создания маркированного списка внутри нумерованного. Простая реализация вложенного списка имеет вид:
1. Вхождение 1
Вхождение 1-а
Вхождение 1-б
2. Вхождение 2
Вхождение 2-а
Вхождение 2-б
Такой список можно представить следующим набором команд:
<OL>
<LI> Вхождение 1
<UL>
<LI>Вхождение l-a</LI>
<LI>Вхождение 1-б</LI>
</UL>
</LI>
<LI> Вхождение 2
<UL>
<LI>Вхождение 2-a</LI>
<LI>Вхождение 2-б</LI>
</UL>
</LI>
</OL>
Тег <LI> может включать те же атрибуты, что и теги самих списков <UL> и <OL>. Если, например, вхождения маркированного списка отображаются принятым по умолчанию маркером disc, но одно из наиболее значимых по контексту вхождений программисту необходимо пометить маркером square, можно записать тег данного элемента следующим образом: <LI type=”square”>Вхождение</LI>. Аналогично, один из пунктов нумерованного арабскими цифрами списка можно пометить символьным маркером, записав соответствующий тег следующим образом: <LI type=”А”>Вхождение</LI>.
5.4 Списки определений
Эти списки представляют собой списки терминов вместе с их определениями, то есть они напоминают толковый словарь.
Формат записи списка:
<DL>
<DT> Тег, задающий определяемый термин </DT>
<DD>Тег, задающий определение термина</DD>
<DD> Тег, задающий определение термина </DD>
<DТ> Тег задающий определяемый термин </DT>
<DD> Тег, задающий определение термина </DD>
<DD> Тег, задающий определение термина </DD>
</DL>
Закрывающие теги для команд <DТ> и <DD> списка определений можно опустить. Данные теги могут использоваться и самостоятельно: <DT> для отображения терминов, выделяемых в тексте шрифтом, a <DD> - для их расшифровки, помеченной отступом. В этом случае наличие соответствующих закрывающих тегов обязательно.
Заключение
В ходе выполнения курсовой работы мною были изучены вопросы, посвящённые HTML (Hyper Text Markup Language - язык разметки гипертекстов). Я ознакомилась с историей возникновения HTML, овладела особенностями создания web-страниц с использованием списков.
В ходе выполнения курсовой работы мною были изучены вопросы, посвящённые гипертекстовой разметке HTML и способах создания c её помощью, web-страницы с использованием мультимедиа.
Я ознакомилась с основными тегами, используемыми в HTML, функциями, которые они выполняют, овладела навыками создания web-страницы с помощью гипертекстовой разметки HTML с использованием мультимедиа, выполнила практическое задание, которое заключалось в создании web-страницы.
HTML, Hyper Text Markup Language, «язык разметки гипертекста», язык, используемый для создания документов в Интернете. Он позволяет формировать на странице сайта текстовые блоки, включать в них изображения, организовывать таблицы, управлять отображением цвета документа и текста, добавлять в дизайн сайта звуковое сопровождение, организовывать гиперссылки с контекстным переходом в другие разделы сервера или обращаться к иным ресурсам Сети и компоновать все эти элементы между собой.
Использование мультимедиа на web-станице даёт возможность добавлять на неё не только текстовые, но и аудио и видео файлы, что делает её очень удобной и практически незаменимой вещью при создании web-страницы. Большинство сайтов сейчас просто не могут обойтись без использования в них мультимедиа.
Список использованных источников
1 Алленова, Н. Учебник по HTML для чайников.
2 Городулин, B. HTML-справочник.
3 Гаевский, А. Ю., Романовский, В. А. Самоучитель по созданию Web-страниц: HTML, JavaScript и Dynamic HTML. - К. : А.С.К., 2002. - 472 с.
4 Холмогоров, В. Основы web-мастерства. Учебный курс. - СПб. : Питер, 2001. - 352 с. : ил.
5 Пауэл, Т. HTML: справочник программиста / Т. А. Пауэл, Д. Уитворт. - М. : АСТ, 2003. - 383 с.
Размещено на Allbest.ru
...Подобные документы
Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Значение атрибута TITLE тега HTML-документа. Возможности HTML для разработчиков Web-страниц. Параметры тега
, регулирующие отступы вокруг изображения. Оформление комментариев в CSS. Теги логического форматирования текста (phrase elements).
тест [19,9 K], добавлен 11.10.2012Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Основы языка программирования Web-страниц – HTML. Виды информации, которую может содержать Web-страница: текст, графика, звук, анимация и видео. Инструментарий для создания Web-страниц. Основные HTML-редакторы, которые используются для Web-дизайна.
реферат [374,0 K], добавлен 19.01.2011Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.
презентация [4,3 M], добавлен 15.02.2014Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.
дипломная работа [86,7 K], добавлен 25.03.2013Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010История возникновения интернета. Первый интернет-браузер, способный отображать не только текст, но графику, разработанный группой студентов из штата Иллинойс. Тим Бернерс-Ли - разработчик языка гипертекстовой разметки HTML (HyperText Markup Language).
презентация [423,5 K], добавлен 14.11.2013Цель и место размещения документа Web. Язык гипертекстовой разметки. Сценарий и структура Web-документа. Основные редакторы гипертекста. Создание документов в стандарте HTML. Создание заголовков, форматирование и изменение стиля, нумерация списков.
реферат [34,4 K], добавлен 22.11.2009Термин HTML (HiperText Markup Language) и его реализация. Программы просмотра страниц написанных на зыке манипулирования гипертекстами. Характеристика специальных программ – браузеров: Google Chrome, Opera, Mozilla Firefox. Структура HTML-страницы.
контрольная работа [118,8 K], добавлен 05.04.2015Концептуальное проектирование сайта по онлайн-продаже кофе, его древовидная логическая структура страниц. Описание языка гипертекстовой разметки сайта HTML, особенности отображения HTML-тегов в браузерах. Создание формы заказа для онлайн-торговли.
курсовая работа [2,2 M], добавлен 16.04.2017Цели, задачи и компоненты информационной технологии управления. Разработка структуры сайта и программный код работы в HTML–редакторе: создание титульной страницы, документа с фреймами, связь информационных документов с помощью гипертекстовых ссылок.
курсовая работа [34,3 K], добавлен 11.08.2011Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011
