Автор: Пользователь скрыл имя, 17 Марта 2012 в 06:30, реферат
World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц.
Введение ………………………………………………………………………
3
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Что такое HTML……………………………………………………….
С помощью чего создаются Web страницы…………….……………
Структура HTML кода………………………………………………...
Типы тэгов……………………………………………………………..
Значение атрибутов тэгов……………………………………………..
5.1 Цвет………………………………………………………………..
5.2 Размер………………………………………………………………
5.3 Адрес……………………………………………………………….
Текст…………………………………………………………………….
Создание таблиц………………………………………………………..
Свойство фона страницы……………………………………………...
Вставка видеозаписи в Web страницу………………………………..
Гиперссылка на другую страницу…………………………………….
4
5
6
7
14
14
18
19
21
25
27
28
28
Заключение ……………………………………………………………………
30
Список использованных источников……………
Цвета по названию
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В таблице 3 приведены имена популярных названий цветов.
Таблица 3. Названия некоторых цветов
Имя цвета | Цвет | Описание | Шестнадцатеричное значение |
black |
| Черный | #000000 |
blue |
| Синий | #0000FF |
fuchsia |
| Светло-фиолетовый | #FF00FF |
gray |
| Темно-серый | #808080 |
green |
| Зеленый | #008000 |
lime |
| Светло-зеленый | #00FF00 |
maroon |
| Темно-красный | #800000 |
navy |
| Темно-синий | #000080 |
olive |
| Оливковый | #808000 |
purple |
| Темно-фиолетовый | #800080 |
red |
| Красный | #FF0000 |
silver |
| Светло-серый | #C0C0C0 |
teal |
| Сине-зеленый | #008080 |
white |
| Белый | #FFFFFF |
yellow |
| Желтый | #FFFF00 |
Не имеет значения, каким способом вы задаете цвет — по его имени или с помощью шестнадцатеричных чисел. По своему действию эти способы равны. В примере показано, как установить цвет фона и текста веб-страницы:
HTML 4.01IE 7IE 8IE 9Cr 8Op 11Sa 5Fx 3.6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/
<html>
<head>
<title>Цвета</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="teal" text="#ffffff">
<p>Пример текста</p>
</body>
</html>
В данном примере цвет фона задается с помощью атрибута bgcolor тега <body>, а цвет текста через атрибут text. Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal.
5.2 Размер
В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. Пиксел — это элементарная точка на экране монитора, является относительной единицей измерения, ее величина зависит от установленного экранного разрешения и размера монитора. Возьмем, к примеру, популярное разрешение монитора 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране.
При использовании пикселов в качестве значений пишется только число без указания единиц, например: width="380".
Процентная запись удачно дополняет пикселы, поскольку позволяет привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. Браузер понимает, что речь идет о процентах, если после числа добавляется символ %, например: width="40%".
Размеры допустимо задавать только в целых числах. Это правило относится как к пикселам, так и процентам.
5.3 Адрес
Адресом называется путь к документу, например, к графическому файлу. Адрес необходим в тех случаях, когда делается ссылка на веб-страницу или загружается определенный файл. Например, в теге <img> адрес используется в качестве значения атрибута src, он задает путь к файлу с изображением.
Синонимом адреса выступает URL (Universal Resource Locator, универсальный указатель ресурсов), различают абсолютные и относительные адреса.
Абсолютные адреса
Подобные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где задан URL, и начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные адреса начинаются с ключевого слова http://. Ниже в примере приведена ссылка, в которой применяется абсолютный адрес:
HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Ссылка</title>
</head>
<body>
<p><a href="http://htmlbook.ru/html/
</body>
</html>
В данном примере текстовая ссылка ведет на сайт htmlbook.ru и указывает на веб-страницу с именем body.html, которая располагается в каталоге html.
Абсолютные адреса применяются в первую очередь для указания на другой сетевой ресурс и достаточно редко используются в рамках одного сайта.
Относительные адреса
Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src="pic.gif"> означает загрузить графический файл с именем pic.gif, который располагается в той же папке, что и сама веб-страница.
Адрес указывает обычно на файл index.html, который находится в корне сайта. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Имя файла не обязательно должно быть index.html, этот параметр меняется через настройки веб-сервера — так называется программа, которая анализирует приходящие от браузера запросы и передает ему документы, показываемые пользователю.
/images/pic.gif
Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.
../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта и там «поискать» в папке help файл me.html.
manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде точек или слэша, то папка размещена внутри текущего каталога, а уже в ней располагается файл info.html.[5]
6. Текст
Вэб-браузеры игнорируют пустые строки и избыточные пробелы внутри текста страницы. Дескриптор <PRE> указывает браузеру сохранять в неприкосновенности пустые области текста страницы.
Браузер отображает подобный предварительно отформатированный текст с помощью моноширинных шрифтов. Что такое моноширинный шрифт?
Это шрифт, в котором под каждую букву отводится область одинакового размера. Поэтому, используя предварительное форматирование, удобно сразу пользоваться одним из моноширинных шрифтов, например Courier. Тогда сразу будет видно, как текст будет располагаться на экране в окне браузера.
При обработке тэга <PRE>, браузер отображает текст, заключенный в этот тэг, точно так, как он набран - не удаляя избыточных пробелов и переносов. Следует помнить, что слишком длинные строки могут не уместиться в пределах окна.
Удобно пользоваться предварительным форматированием для создания простых таблиц, например:
HTML-код:
У попа была собака, </pre> | Отображение в браузере:
У попа была собака, Он ее любил, Она съела кусок мяса Он ее убил. |
Выделение фрагментов текста
Для придания фрагменту текста смыслового значения очень удобно использовать средства изменения начертания шрифта.
Для выделения текста полужирным шрифтом используется тэг <B> или <STRONG>, для выделения курсивом - <I> или <EM>, для подчеркивания текста - <U>, для зачеркивания текста - <STRIKE>. Фрагменты полужирного или курсивного текста используют для ввода новых терминов, выражения важных мыслей. С подчеркиванием текста надо быть очень осторожным, т.к. в Интернете таким образом принято выделять гиперссылки.
Тэг <CENTER> позволяет центрировать текст на странице по горизонтали. Это удобно для выделения наименований или заголовков.
HTML позволяет одновременно применять несколько дескрипторов, предназначенных для изменения начертания шрифта. Однако в этом случае необходимо следить, чтобы завершающие дескрипторы, содержащие символ косой черты, вводились в обратном порядке.
Для преобразования текста в надстрочный индекс применяют тэг <SUP>, для подстрочного индекса - <SUB>. Эти тэги пригодятся при вводе математических текстов, химических формул, научных статей, построении сносок и т.д. Обычно индексы отображаются шрифтом меньшего размера по сравнению с основным. Это обстоятельство следует учитывать при выборе размера основного шрифта, т.к. при малом размере индексы могут быть просто не видны, например:
HTML-код: <p><strong>Жирный текст</strong></p> <p><em>Курсив</em></p> <p><u>Подчеркнутый текст</u></p> <p><strike>Зачеркнутый текст</strike></p> <center>Центрирование</center> <p><strong><em>Жирный курсив</em></strong></p> <p>Верхний <sup>индекс</sup></p> <p>Нижний <sub>индекс</sub></p> | Отображение в браузере: Жирный текст Курсив Подчеркнутый текст Зачеркнутый текст Центрирование Жирный курсив Верхний индекс Нижний индекс |
Выбор шрифта html-страницы
Для изменения шрифта служит тэг <FONT> с атрибутом FACE. Можно указывать шрифт по названию (Arial, Tahoma, Verdana) или типу(например, monospace). Желательно перечислить несколько имен шрифта, чтобы избежать ситуации, когда окажется, что требуемый шрифт не установлен у пользователя. Рекомендую "забить" хотя бы один из общепринятых шрифтов (например Arial). Не рекомендую на одной странице применять более 2-3 различных шрифтов, иначе страница будет смотреться аляповато и непрофессионально, например:
HTML-код: <p><font face="Times New Roman, Arial">У попа была собака, ОН ЕЕ ЛЮБИЛ</p>
<p><font face="Monotype Corsiva, Arial">Она съела кусок мяса, ОН ЕЕ УБИЛ</p> | Отображение в браузере: У попа была собака, ОН ЕЕ ЛЮБИЛ Она съела кусок мяса, ОН ЕЕ УБИЛ |
Изменение размера шрифта html-страницы
Для изменения размера шрифта используют атрибут SIZE. Чем крупнее шрифт, тем более легким для восприятия становится текст. Однако, мелкий шрифт позволяет уместить в пределах экрана больший объем информации. Используя данный атрибут с тэгом <BASEFONT> , вы можете изменить размер текста вэб-страницы целиком. Применяя атрибут SIZE совместно с тэгом <FONT>, можно воздействовать на внешний вид отдельного фрагмента текста. Доступно 7 размеров шрифтов. Самый малый обозначается цифрой 1, а самый крупный - 7.