Первые_шаги_1 <!-- Комментарии--> <html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> Добро пожаловать! :) </body> </html>
Теперь откроем блокнот (notepad) и скопируем туда следующий текст, А теперь сохраним этот документ, присвоив ему имя index.html
Первые_шаги_2
обязательные тэги.
<html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> <!--<br> (перенос текста на другую строку, что-то вроде Enter:) , не требуют закрывающего тэга.--> Добро пожаловать! :) </body> </html>
Первые_шаги_3
<head> </head> - голова документа
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации (наша служба и опасна и трудна, и на первый взгляд как-будто не видна:). Например <title> - заголовок.
<body> </body> - тело документа
Все тэги, расположенные между <body> </body> - непосредственное содержание документа.
Первые_шаги_4
Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже.
Цвета можно еще задавать в документе - вспомним об открывающем теге <body>: <body text="#336699">
<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699"> <!--синий--> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) <!--красный--> </body> </html>
Первые_шаги_5
<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <!—Здесь bgcolor="#000000" Цвет фона устанавливается в черный цвет--> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) </body> </html>
Первые_шаги_6
<p align="center">текст</p> - С помощью параграфов мы можем центрировать текст, выровнять текст по левому краю или по правому краю документа
<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <center> Здравствуйте, это моя первая страница. <br><font color="#CC0000"> Добро пожаловать!</font> :) </center> <p align="justify"> <!-- Здесь justify он выравнивает текст по обоим краям документа--> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появться еще один виртуальный друг? :) </p> </body> </html>
Первые_шаги_7
<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <center> <H3>Здравствуйте, это моя первая страница.</H3> <!-- В пример я ввела заголовок третьего уровня <H3></H3>--> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </center> <p align="justify"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size="+1"> еще один виртуальный друг? :)</font>
<!-- Итак, <font size="+1"> параметр size задает размер шрифта, но, в отличие от заголовков, текст не выделяется жирным шрифтом--> </p> </body> </html>
Первые_шаги_8
<b> Полужирный текст </b> <i> Наклонный текст (курсив) </i> <u> Подчеркнутый текст </u>
<tt><b><i> текст </i></b></tt> - Тег tt относится к группе тегов физического форматирования
<font face="ARIAL"> текст (шрифт Arial)</font> - С помощью атрибута face в нашем примере я задала шрифт Arial
Первые_шаги_9
<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <center> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </center> <p align="justify"> <img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью <b> еще один виртуальный друг? :)</b></p>
<!-- Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинко --> </body> </html>
Первые_шаги_10
<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <center> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </center> <p align="justify"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью
<!-- Наша картинка будет прижата к левому краю экрана, параметр (X)space - тоже задает расстояние между текстом и рисунком, но по горизонтали или по вертикали. Расстояние задается в пикселях., параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, тогда выскочит описание картинки--> </p> </body> </html>
Первые_шаги_11
<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <!--link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки --> <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> <!--Тег <a> предназначен для создания ссылок. атрибуты name или href тег <a> устанавливает ссылку или якорь. Якорем можно указать в качестве цели ссылки, происходит переход к закладке внутри веб-страницы --> </p> </body> </html>
Первые_шаги_12
<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"> <a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я совсем недавно начал(а) знакомиться с виртуальной жизнью <a href="prf.html">посмотреть мои фотографии</a></p>
<!--Картинка primtocodephoto.gif стала ссылкой--> </body> </html>
Первые_шаги_13
<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a> - Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера
Первые_шаги_14
Текст один <li>Текст один</li>
Текст другой <li>Текст другой</li>
Текст сякой <li>Текст сякой</li>
Текст эдакий <li>Текст эдакий</li>
<ul><li>Сдвиг один</li></ul> <ul><ul><li>Сдвиг другой</li></ul></ul> <ul><ul><ul><li>Сдвиг сякой</li></ul></ul></ul>
Сдвиг один
Сдвиг другой
Сдвиг сякой
Первые_шаги_15
Линия задается тэгом <Hr> и не требует закрывающего тэга:
(1) <Hr align="right"> (center или left) (2) <Hr width="30%"> (ширина линии в процентах/пикселях) (3) <Hr size="6"> (толщина линии) (4) <Hr NoShade> (отмена объемности) (5) <Hr color="cc0000"> (цвет линии, только в IE)
Выглядит
все это так - Первый (1):
Второй (2):
Третий (3):
Четвертый (4):
Пятый (5):
Первые_шаги_16
Спецсимволы
(1) - < - < (2) - > - > (3) - " - " (4) - - пробел (5) - & - &
Первые_шаги_17
Таблица задается тэгом: <table></table>
<tr> -строка
<td> -столбец
Первые_шаги_18
<table> <tr> <td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td> <td width="50" bgcolor="#336699"> <center> 1x2 </center> </td> <td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td> </tr> <tr> <td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td> <td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td> <td width="50" bgcolor="#336699"> <center> 2x3 </center> </td> </tr> </table>
1x1 |
1x2 |
1x3 |
2x1 |
2x2 |
2x3 |
Первые_шаги_19
Вертикальное выравнивание задается следующим аттрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу)
<table> <tr> <td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1x1</center> </td> <td width="50" bgcolor="#336699"> <center>1x2</center> </td> <td width="50" bgcolor="#FFCC33" valign="bottom"> <center>1x3</center> </td> </tr> <tr> <td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td> <td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td> <td width="50" bgcolor="#336699" valign="top"> <center>2x3</center> </td> </tr> </table>
1x1 |
1x2 |
1x3 |
2x1 |
2x2 |
2x3 |