| Astrom | Дата: Пятница, 04.01.2013, 22:38 | Сообщение # 1 |
|
Рядовой
Группа: Администраторы
Сообщений: 10
Статус: Offline
| Структура html
Язык html представляет собой следующее: имеется один “БОЛЬШОЙ” html, он делится на два раздела “поменьше”, на head (шапку документа) и body (тело документа). Соответственно эти два тега могут содержать множество других “маленьких” тегов, а они в свою очередь могут быть наполнены еще одними. НО “пересекаться” эти теги не могут ни в коем случае.
1
шаг
Создаем страницу
Для того, чтобы начать писать, вам нужна программа блокнот или Akel Pad(существуют специальные html редакторы, но лично мне больше по душе обычный редактор). Я вам советую писать в Akel Pad’е, так как в нём больше функций по редактированию текста.
2
шаг
Теги html пишутся в треугольных скобках “<>” если это начальный тег и в треугольных скобках со слешем “</>” конечный тег.
Итак, чтобы дать браузеру понять, что это html документ открываем начальный тег всего документа <html>, в нем мы пишем “шапку” документа <head>. В этом теге прописывается название документа, его favicon и другие теги не относящиеся к “телу”. Чтобы озаглавить текст впишите название между тегами <title> и </title>, расположенные в “шапке”. Далее мы, по окончании работы с “шапкой”, закрываем ее тегом </head>.
Затем открываем тело тегом <body>, в нем пишется тег и текст (тот, что будет показан на готовой странице). По окончании работы с документами закрываем тело тегом </body>, а затем закрываем тег html (</html>)
3
шаг
Пример самого короткого html-документа
<html>
<head>
<title>Пример</title>
</head> <body>
Тело документа
</body> </html>
4
шаг
Пример длинного html-документа
<html>
<head>
<title>Длинный html-документ</title>
<link rel="shortcut icon" href="*ссылка на фавикон"/>
<link rel="stylesheet" href="*ссылка на CSS файл, содержащий стили для текстов*"/>
<style type="text/css"><!-- .style1 {color: #6699ff;} //--></style>
</head> <body> <div align=center> <div class=style1>
<b>Таблица</b><br>
</div> </div> <div align=center> <table border="1"> <tr> <td>
Первый столбец первой строчки
</td> <td>
Второй столбец первой строчки
</td> </tr> <tr> <td>
Первый столбец второй строчки
</td> </tr> </table> </div> </body> </html>
Описание
Итак, тегом <html> мы начинаем весь документ. Затем идет “шапка документа” (<head>), в ней сначала расположен заголовок (<title>Длинный html-документ</title>), затем идет тег фавикона в котором параметр href указывает ссылку на изобравжение. Следующий элемент указывает на .css файл содержащий стили для текстов, эти стили можно прописать в самом документе внедрением в него CSS языка(тег “style”), но я считаю этот способ не удобным, так как если на сайте много страниц и во всех нужно изменить цвет удобнее прописать этот цвет в одном файле чем в каждой странице. Затем мы закрываем шапку(</head>) и открываем тело(<body>) В нем види элемент div, у которого имеется множество параметров, в данном случае это параметр “выравнивание”(align) у которого есть параметры спава(right), слева(left) и по центру(center), затем идет еще лдин div показывающий стиль введенный либо в css файле, либо в самом документе элементом style. Далее мы видим <b>, выделяющий текст жирным, и элемент <br>, делающий спуск “курсора” на одну строчку, дальше два элемента </div>. Затем начинается еще один div, показывающий выравнивание по центру, а в нем начинается таблица(<table>), а элемент border говорит о наличии рамки(рамку можно убрать изменив значение 1 на 0). Следом идет <tr> открывающий первую строчку, затем <td> открывающий первый столбец, затем текст этого столбца, и закрытие столбца тегом </td>. Надеюсь по таблице все понятно, а то рука отваливается писать:) Таблица закрывается тегом </table>. Потом закрывается div, который выравнивал таблицу по центру. Далее закрывается “тело” </body> и html </html>.
5
шаг
Другие языки
Часто, чтобы улучшить свою страницу в html вставляются другие языки, например JavaScript, CSS и другие.
|
| |
|
|
