|
|
Интересные статьи
|
|
|
|
|
Как написать html-документ
Инструкция Уровень сложности: Несложно Что вам понадобится: Компьютер Программа блокнот или Akel Pad(стандартное приложение Total Comander'а) 1 шаг
HTML HTML – язык разметки гипертекста. Большинство интернет-страниц написаны на html.
2 шаг Показаны теги html, head, body. Заметте, что эти теги не соединены.
Структура html Язык html представляет собой следующее: имеется один “БОЛЬШОЙ” html, он делится на два раздела “поменьше”, на head (шапку документа) и body (тело документа). Соответственно эти два тега могут содержать множество других “маленьких” тегов, а они в свою очередь могут быть наполнены еще одними. НО “пересекаться” эти теги не могут ни в коем случае.
3 шаг
Создаем страницу Для того, чтобы начать писать, вам нужна программа блокнот или Akel Pad(существуют специальные html редакторы, но лично мне больше по душе обычный редактор). Я вам советую писать в Akel Pad’е, так как в нём больше функций по редактированию текста.
4 шаг
Теги html пишутся в треугольных скобках “<>” если это начальный тег и в треугольных скобках со слешем “</>” конечный тег. Итак, чтобы дать браузеру понять, что это html документ открываем начальный тег всего документа <html>, в нем мы пишем “шапку” документа <head>. В этом теге прописывается название документа, его favicon и другие теги не относящиеся к “телу”. Чтобы озаглавить текст впишите название между тегами <title> и </title>, расположенные в “шапке”. Далее мы, по окончании работы с “шапкой”, закрываем ее тегом </head>. Затем открываем тело тегом <body>, в нем пишется тег и текст (тот, что будет показан на готовой странице). По окончании работы с документами закрываем тело тегом </body>, а затем закрываем тег html (</html>)
5 шаг
Пример самого короткого html-документа <html> <head> <title>Пример</title> </head> <body>
Тело документа </body> </html>
6 шаг
Пример длинного 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>. Надеюсь всё понятно?? Ссылка на то, что получилось
7 шаг
Другие языки Часто, чтобы улучшить свою страницу в html вставляются другие языки, например JavaScript, CSS и другие.
|
|
|
|