Материал: Управление web-документами. методические указания к практическим занятиям по дисциплине «Информационная безопасность РИС». Москалева Е.А
образом, вы можете синтезировать любой цвет.
|
|
|
|
|
Таблица 1 |
|
|
|
HEX-значения |
|
|
||
#110000 |
#330000 |
|
#550000 |
#990000 |
#ff0000 |
|
#001100 |
#003300 |
|
#005500 |
#009900 |
#00ff00 |
|
#000011 |
#000033 |
|
#000055 |
#000099 |
#0000ff |
|
|
|
|
|
|
Таблица 2 |
|
|
|
Color -значения |
|
|
||
red |
cyan |
|
lime |
pink |
fuchsia |
|
green |
gray |
|
maroon |
navy |
olive |
|
blue |
purple |
|
silver |
teal |
yellow |
|
Заголовки
Подобно названию страницы, заголовки должны быть краткими и полезными. Существует шесть размеров шрифта заголовков (они пронумерованы от одного до шести, причем первый номер соответствует самому крупному размеру шрифта). Нужно обозначить выделяемый текст тэгами <h1> и </h1> (<h2> </h2> … <h6> </h6>).
Процедура набора текста в HTML-документ является самой простой.
Обратите внимание на порядок следования тэгов, вложенных в другие тэги. Тэги [4] должны быть вложены друг в друга, как матрешки.
Чтобы все не смещалось, необходимо отформатировать текст. Тэг <br> нужно вставлять в месте, где нужно делать перенос строки. Тэг <dd> задает отступ от начала строки.
Например: Я умею:<br>
<dd>создавать сайты <dd>размещать их в интернете <dd>веб дизайну
<dd>веб графике
14
Для определения абзаца используйте тэги <p> и </p>. Для того чтобы сделать текст жирными используются
парные тэги <b> и </b>, курсивом <i> и </i>( b- от слова bold, т.е. жирный, i- от слова italic, т.е. курсив).
Помимо тонкой линии поперек страницы можно применить и другой тип линии, используя расширения тэга
<hr>.
<hr noshade> По умолчанию, линия отбрасывает трудно-видимую тень. Для того чтобы тени от линии не было, необходимо использовать синтаксис <hr noshade>.
<hr size="10"> По умолчанию линия имеет размер 1 пиксель. Можно его менять. Для этого необходимо вписать size=число, где число – число пикселей.
<hr width="80%"> По умолчанию линия имеет ширину равную 100%, т.е. во всю длину окна браузера. В данном случае мы изменили этот параметр на 80%, т.е. ширина линии равна не 100, а 80% занимаемой ширины окна.
<hr color="orange"> По умолчанию, линия имеет прозрачный цвет. Но из-за тени, нам кажется, что линия серая. Можно изменить цвет линии.
Все эти параметры могут сочетаться и использоваться параллельно.
Выравнивание текста
Выравнивание текста по центру позволяют сделать тэги <center>…</center>. При использовании этих тэгов заголовки или текст не будут прижаты к левому краю, они равномерно заполнят область вывода текста.
Команды для выравнивания:
<h1 align="left">Выровнять заголовок по левому краю</h1>
<h2 align="right"> Выровнять заголовок по правому краю</h2>
<h3 align="center">Выровнять заголовок по центру</h3>
15
<h4 align="justify">Выровнять заголовок равномерно</h4>
<p align="left">Выровнять абзац по левому краю</p> <p align="center">Выровнять абзац по центру</p> <p align="justify">Выровнять абзац равномерно</p>
Размер шрифта можно менять тэгами <big>…</big> и <small>…</small>.
Тэг <font> имеет дополнительные возможности для задания размера шрифта основного текста. Вместо определенного номера вы можете задать относительный размер шрифта, например +3 или –1. Браузер прибавляет (или вычитает) заданное число к номеру шрифта, используемого по умолчанию (размер 3).
Например:
<br> <font color="#0000FF" size="4"><b>Я освою Web
дизайн и создам свой сайт!</b></font>
Для вставки на страницу картинки используется тэг <img>. В качестве параметра для этого тэга, используется имя файла картинки (например, заяц.bmp, fer,gif). Вставьте тэг <img> в код страницы в то место, куда мы хотим вставить картинку:
<img src="images/sv1.gif" width="553" height="468">
Параметр src указывает имя файла-картинки, images – папку, где она находится. Параметры width="553" и height="468" – размеры (ширину и высоту) картинки в пикселях.
16
Задания
1. Создайте текстовый документ в Блокноте.
Создавая новый HTML-файл, в первую очередь необходимо ввести пару тэгов <html>….</html> Для этого наберите <html> в самом начале текста. Затем наберите его «напарника» </html> в конце. Теперь весь текст, написанный между ними, будет принят браузерам за текст HTML. Вы заметили, что во втором тэге присутствует символ "/"? Правый слэш (/) используется для обозначения закрывающихся тэгов. Большинство HTML-тэгов парные: один открывает (<html>), другой закрывает (</html>). Их действие распространяется только на тот текст, который находится между ними. Открыв в браузере эту страницу, мы ничего не увидим, пока не завершим работу над <head> и </head>.
Теперь введем тэги <head> и </head>. Они должны быть между тэгами <html> и </html>. Тэги <head> и </head> отмечают ту информацию в документе, которая будет служить названием.
Заголовок вводится между тэгами <title>…</title>
Если Вы создаете свой документ в блокноте или другом простейшем текстовом редакторе, то надо вставить строку:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Зона тэгов <body> … </body> – тело страницы, т.е. отображающаяся в браузере. То, что написано и изображено в этой зоне, увидит посетитель страницы.
Создайте в удобном для Вас месте жесткого диска новую папку, пусть она будет называться WWW. В этой папке создайте текстовый документ (блокнот).
Для этого воспользуемся текстовым редактором Блокнот. Для запуска Блокнота, используем кнопку Пуск > Все программы > Стандартные > Блокнот.
17
Пишем в него следующее (рис. 7): <html>
<head>
<title>Моя первая web страница </title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1251"> </head>
<body> Рабочая область </body> </html>
Рис. 7. Файл в блокноте
Теперь выбираем в меню Блокнота: Файл > Сохранить как и сохраняем в папку WWW файл как … .html (интернетстраницу) (рис. 8).
Рис. 8. Сохранение текста
Для просмотра созданного файла заходим в папку WWW, находим файл на диске и запускаем его. У вас запустится ваш браузер, например Internet Explorer и откроется html-страничка.
18