UMKD_KSIM
.pdfЗдравствуйте, это моя первая страница. <br>
<font color= «#CC0000»> Добро пожаловать!</font> :) </p> </body>
</html>
Заметьте, что текст в документе, если не задавать параграфы (абзацы), всегда выравнивается по умолчанию по левому краю. Также запомните, что к параграфу (абзацу) уже не нужен тэг <br> для переноса строки, т.к. перенос задается по умолчанию. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align= «center»>:
<center>текст</center>
<html>
<head>
<title>Мой первый шаг </title> </head>
<body text= «#336699» bgcolor= «#000000»>
<center>
Здравствуйте, это моя первая страница. <br>
<font color= «#CC0000»> Добро пожаловать!</font> :) </center> </body>
</html>
Заголовки
Деление текста на абзацы – это далеко не единственный способ форматирования текста веб-страницы. Например, для создания заголовков в HTML предусмотрены шесть различных тегов:
<H1> текст </H1> – Заголовок первого уровня (самый крупный) <H2> текст </H2>
<H3> текст </H3> (обычный шрифт) <H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6> – Заголовок шестого уровня
Заголовок выделяется жирным текстом. После заголовка автоматически добавляется пустая строка.
<html>
<head>
<title>Мой первый шаг </title> </head>
<body text=«#336699» bgcolor=«#000000»>
80
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color=«#CC0000»> Добро пожаловать!</font> :) </center> <p align=«justify»>
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :) </p>
</body>
</html>
Дескрипторы форматирования текста
Таблица 3. Дескрипторы форматирования
|
|
|
|
|
|
|
|
Открывающий |
|
Закрывающий |
|
Описание |
|
|
дескриптор |
|
дескриптор |
|
|
|
|
|
|
|
|
|
|
|
<b> |
|
</b> |
|
Полужирный шрифт |
|
|
<strong> |
|
</strong> |
|
|
|
|
|
|
|
|
|
|
|
<big> |
|
</big> |
|
Увеличивает шрифт текста на один |
|
|
|
|
|
|
размер по сравнению с обычным |
|
|
|
|
|
|
|
|
|
<i> |
|
</i> |
|
Курсив |
|
|
<em> |
|
</em> |
|
|
|
|
|
|
|
|
|
|
|
<small> |
|
</small> |
|
Уменьшает шрифт текста на один |
|
|
|
|
|
|
размер по сравнению с обычным |
|
|
|
|
|
|
|
|
|
<sub> |
|
</sub> |
|
Подстрочный индекс |
|
|
|
|
|
|
|
|
|
<sup> |
|
</sup> |
|
Надстрочный индекс |
|
|
|
|
|
|
|
|
|
<tt> |
|
</tt> |
|
Фиксированный шрифт. Это шрифт с |
|
|
|
|
|
|
символами одинаковой ширины, от- |
|
|
|
|
|
|
того и зовется фиксированным |
|
|
|
|
|
|
|
|
|
<u> |
|
</u> |
|
Подчеркнутый шрифт |
|
|
|
|
|
|
|
|
Списки
В Html предусмотрено три типа списков и соответствующие этим типам дескрипторы:
•Маркированный (неупорядоченный) список;
•Нумерованный (литерный) список;
•Многоуровневый список.
81
Маркированный список
Маркеры (обычно, круглой формы, черного цвета) устанавливают в начале каждого элемента неупорядоченного списка. В Html для создания маркированного списка используется дескриптор <ul> </ul> в паре с деск-
риптором <li> </li>.
Например. <ul>
<li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li>
</ul>
Возникает вопрос: можно ли помимо закрашенного кружочка прописать еще чего-нибудь подобное?
У тэга <li> есть параметр type:
В случае (1) – <li type=«disk»>, (маркер – закрашенный кружочек)
вслучае (2) – <li type=«circle»>, (маркер – незакрашенный кружочек)
вслучае (3) – <li type=«square»>. (маркер – квадрат).
Действие дескриптора <ul> аналогично нажатию клавиши Tab, при котором весь текст сдвигается вправо. Чтобы отступ (табуляция) был больше надо вкладывать тэг <ul> в сам себя:
<ul><ul>Два отступа</ul></ul> <ul><ul><ul>Три отступа</ul></ul></ul>
Сдвиг один Сдвиг другой
Сдвиг сякой
Хочу обратить ваше внимание, что это прописано без параметра type, но при помощи тэга <ul>:
<ul><li>Сдвиг один</li></ul> <ul><ul><li>Сдвиг другой</li></ul></ul> <ul><ul><ul><li>Сдвиг сякой</li></ul></ul></ul>
Нумерованный список
Задается дескриптором <ol>
<ol>
<li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li>
</ol>
Каждый элемент списка автоматически нумеруется арабскими цифрами,
82
начиная с 1.
Для изменения формата нумерованного списка используется параметр type.
<li type=«lower-alpha»> (строчные буквы) <li type=«upper-alpha»> (прописные буквы)
<li type=«lower-roman»> (маленькие римские цифры) <li type=«upper-roman»> (большие римские цифры)
Начальный номер списка
<ol>
<li value= «4»>Четвертый элемент списка</li> </ol>
Многоуровневые списки
<dl>
<dt>Элемент списка первого уровня</dt> <dt>Первый элемент списка второго уровня</dt > <dt>Второй элемент списка второго уровня</dt >
</dl>
Добавление изображения в веб-страницу
<img src=«my.jpg»>
Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками
– ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так:
<img src=«/my/my.jpg»>
Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:
<img src=«../my.jpg»>
Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src=«http://www.homepage.ru/my/my.jpg»>
Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше. Запомните: тэг img не требует закрывающего тэга.
<html>
<head>
<title>Мой первый шаг </title> </head>
83
<body text=«#336699» bgcolor=«#000000»> <center>
<H3>Здравствуйте, это моя первая страница.</H3> <br>
<font color=«#CC0000»> Добро пожаловать!</font> :) </center> <p align=«justify»>
<img src=«primtocodephoto.gif»> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :)</b>
</p>
</body>
</html>
Параметры тега <img src=« »> Параметр align есть и у картинок:
align=«left» – что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.
align=«right» – картинка справа, текст слева.
align=«bottom»> – текст может располагаться внизу картинки (это по умолчанию)
align=«middle» – посередине align=«top» – вверху
Кроме параметра align существует еще несколько параметров:
(1)– <img src=«pr1.png» Vspace=«10»>
(2)– <img src=«pr1.png» Hspace=«30»>
(3)– <img src=«pr1.png» alt=«моя фотография»>
(4)– <img src=«pr1.png» width=«100»>
(5)– <img src=«pr1.png» height=«200»>
(6)– <img src=«pr1.png» border=«5»>
(1)– параметр vspace – задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel – минимальная единица изображения, точка. Например разрешение экрана 800х600 – 800 на 600 точек). В нашем примере расстояние равно 10 пикселям.
(2)– параметр hspace – тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
(3)– параметр alt – краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд вы-
84
скочит описание картинки. В нашем случае это будет фраза – «моя фотография». Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась.
(4)– параметр width – ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире).
(5)– параметр height – высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой...
(6)– параметр border – рамка вокруг самой картинки (в пикселях). Можно не задавать.
Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следущие параметры для нашей картинки:
<img src=«pr1.png» align=«left» HSPACE=30 VSPACE=5 alt=«моя фо-
тография»> Наша картинка будет прижата к левому краю экрана, текст будет обтекать
еесправа, расстояние до текста по горизонтали – 30 пикселей, по вертикали – 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись – «моя фотография».
Гиперссылки
Теперь пора поговорить о ссылках. Наша страничка может состоять из нескольких документов. Один из них главный (index.html или main.html) – он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно
(photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.
Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка.
Создание текстовой ссылки
Пусть в одной папке имеется два документа: главный документ index.html и документ prf.html – документ с вашими фотографиями. В основном документе напишите фразу «посмотреть мои фотографии» и сделайте ее ссылкой на prf.html:
<a href=«prf.html»>посмотреть мои фотографии</a> .
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу
85
(текст). Принципы прописывания пути здесь такие же как в случае с картинками:
(1)– <a href=«prf.html»>мои фотографии</a>
(2)– <a href=«/photos/prf.html»>мои фотографии</a>
(3)– <a href=«http://www.homepage.ru/prf.html»>мои фотографии</a>
Вслучае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html,
в случае (2) документ лежит в поддиректории /photos,
в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Примечание: цвет ссылки нужно прописывать, а иначе по умолчанию он будет просто безобразным, поэтому вспомним об открывающем тэге боди:
<body text=«#336699» bgcolor=«#000000» link=«#339999» alink=«#339999» vlink=«#339999»>
link – цвет ссылки,
alink – цвет активной ссылки (нажатой), vlink – цвет уже посещенной ссылки.
Внашем примере цвета одинаковые, но они могут быть разными (ссылка же выделяется чертой). Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:
<html>
<head>
<title>Мой первый шаг </title> </head>
<body text=«#336699» bgcolor=«#000000» link=«#339999» alink=«#339999» vlink=«#339999»>
<center>
<H3>Здравствуйте, это моя первая страница.</H3> <br>
<font color=«#CC0000»> Добро пожаловать!</font> :) </center> <p align=«justify»>
<img src=«primtocodephoto.gif» align=«left» HSPACE=30 VSPACE=5 alt=«моя фотография»>
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href=«prf.html»>посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии
86
изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:) </p>
</body>
</html>
Ссылка на ваш почтовый ящик прописывается так:
<a href=«mailto:pochta@mail.ru»> pochta@mail.ru – пишите письма </a>.
Создание графической ссылки
Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:
<a href=«prf.html»> <img src=«primtocodephoto.gif» align=«left» HSPACE=30 VSPACE=5 alt=«моя фотография»> </a>
Это мы введем в наш пример, сделав ссылкой на документ с фотогра-
фиями (prf.html) картинку pr1.png:
<html>
<head>
<title>Мой первый шаг </title> </head>
<body text=«#336699» bgcolor=«#000000» link=«#339999» alink=«#339999» link=«#339999»>
<center>
<H3>Здравствуйте, это моя первая страница.</H3> <br>
<font color=«#CC0000»> Добро пожаловать!</font> :) </center> <p align=«justify»>
<a href=«prf.html»><img src=«primtocodephoto.gif» align=«left» HSPACE=30 VSPACE=5 alt=«моя фотография»></a>
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href=«prf.html»>посмотреть мои фотографии</a>, почитать обо мне, черк-
нуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то
87
давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:) </p>
</body> </html> (прим.)
Теперь посмотрите в Explorer, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border=«0»
<img src=«primtocodephoto.gif» align=«left» HSPACE=30 VSPACE=5 alt=«моя фотография» border=«0»>
Линии
В последнее время я все реже и реже встречаю такой элемент, как линии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Линия задается тэгом <Hr> и не требует закрывающего тэга:
Вот такая она, в форме канавочки. У линии есть много разных параметров:
(1)<Hr align=«right»> (center или left)
(2)<Hr width=«30%»> (ширина линии в процентах/пикселях)
(3)<Hr size=«6»> (толщина линии)
(4)<Hr NoShade> (отмена объемности)
(5)<Hr color=«cc0000»> (цвет линии, только в IE)
Таблицы в Html
Таблица задается тэгом: <table></table>
Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их. Для начала рисуйте таблицу на листе бумаге, чтобы все наглядно видеть.
<tr></tr> – строчка таблицы <td></td> – столбец (ячейка) таблицы
Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Сначала задаем строки. В нашем примере их две.
88
<table>
<tr></tr>
<tr></tr>
</table>
Теперь в каждой строке зададим по три столбца (ячейки): <table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Итак, теперь нам надо заполнить получившийся каркас: <table>
<tr> <td>1x1</td> <td>1x2</td> <td>1x3</td> </tr>
<tr> <td>2x1</td> <td>2x2</td> <td>2x3</td> </tr> </table>
Первая цифра в загадочных надписях – это номер ряда, а вторая номер столбца (1х2 – первый ряд, второй столбец и т.д). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:
1x1 1x2 1x3
2x1 2x2 2x3
Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается параметром bgcolor=«цвет_фона». Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого столбца.
<table>
<tr>
89