Создание шаблона HTML-документа.

  • Что такое HTML.

    • HTML (HyperText Markup Language ) - язык управления программой, предназначенной для просмотра web-документов (браузером).
    Основным элементом языка HTML является тэг - последовательность символов, заключенная между уговыми скобками. Тэги бывают двух видов - открывающие и закрывающие. Закрывающие тэги отличаются прямым слэшем "/" после первой угловой скобки, например:

    <p> - тэг, открывающий абзац
    </p> - тэг, закрывающий абзац

    Некоторые тэги не имеют закрывающих тэгов, например тэг <br>, который сообщает браузеру о разрыве строки, или тэг <hr> - рисующий горизонтальную линию.
    Для некоторых тэгов закрывающие тэги не обязательны, например для тэга абзаца <p>, закрывающий тэг не обязателен, но наличие его улучшает читабельность документа и придает ему структуру.

    Тэги могут вкладываться друг в друга, например:<b><i>текст</i></b>. В этом случае важно соблюдать последовательность открытия и закрытия:
    <тэг1><тэг2><тэг3>...</закрытие тэга3></закрытие тэга2></закрытие тэга1>

    HTML-документ является обычным текстовым документом, который можно создать, просмотреть и отредактировать в текстовом редакторе.
    HTML не реагирует на регистр символов, например, тэг открывающий таблицу может быть написан так-<TABLE>, или так-<table>, или скажем так-<tAbLe>. Лишние пробелы и переносы тоже не учитываются.
    Можно написать 

    <P>        Красная строка.
Следующая строка</P>
    и все равно браузер выведет это так:

    Красная строка.Следующая строка.

    (Есть единственное исключение- тэг <PRE>, после которого браузер начинает учитывать пробелы и переносы).

  • Создание документа.

    • Итак, создадим простейший документ, который потом можно будет использовать как шаблон для разных HTML-документов. Лучше воспользуйтесь для этого специализированным редактором для работы с HTML (см. раздел С самого начала).

    Первой строкой документа, написанного на языке HTML должна быть строка, начинающаяся декларацией
    <!DOCTYPE>. В ней браузер почерпнет информацию о том какому стандарту соответствует документ.
    Например, строка:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    скажет браузеру, что документ соответствует английскому стандарту HTML 4.0 Transitional DTD.
    Затем идут следующие строки:
    <HTML> - необязательный элемент
    <HEAD>-начало заголовка документа.

    В заголовке располагаются метаданные - информация, позволяющая задать кодовую страницу языка для правильного отображения текста браузером, ключевые слова для индексации страницы поисковыми системами, автора документа и другую информацию. Более подробно о метаданных читайте в разделе META-тэги.
    Например, следующая строка укажет браузеру, что надо использовать для вывода текста стандартную кодовую страницу для вывода кириллицы - windows-1251.
    <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
    Следующие две строки нужны для индексации вашей страницы поисковыми системами.
    <META NAME="Description" content="краткое описание страницы">
    <META NAME="Keywords" content=" ключевые слова через запятую ">
    Следующая строка укажет язык таблицы стилей CSS.
    <META http-equiv="Content-Style-Type" content="text/css">
    Затем следуют описание стилей:
    <STYLE type="text/css">
    Зададим красный цвет ссылок.
    A:link {COLOR: red; TEXT-DECORATION: none}
    Зададим цвет посещенных ссылок.
    A:visited {COLOR: maroon; TEXT-DECORATION: none}
    Зададим цвет ссылки, при клике на ней мышью
    A:active {COLOR: fuschia TEXT-DECORATION: none}
    Зададим цвет ссылки, при наведении на нее мышью
    A:hover {COLOR: black; TEXT-DECORATION: underline}
    Зададим цвет фона документа, и параметры шрифта по умолчанию
    BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}
    </STYLE> -завершаем таблицу стилей.
    Затем указывает титул документа - надпись, которая будет выводится в заголовке окна браузера.
    <TITLE>Моя первая страничка</TITLE>
    </HEAD>- завершаем заголовок.
    После заголовка открываем тело документа
    <BODY>
    Здесь будет содержание нашего документа.
    И наконец, завершаем тело документа и сам документ.
    </BODY>
    </HTML>

    Ваш шаблон будет выглядить так: 

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Description" content="краткое описание страницы">
<META NAME="Keywords" content=" ключевые слова через запятую ">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: maroon; TEXT-DECORATION: none}
A:active {COLOR: fuschia; TEXT-DECORATION: none}
A:hover {COLOR: black; TEXT-DECORATION: underline}
BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}
</STYLE>
<TITLE>Моя первая страничка</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

    Итак, шаблон создан. Теперь введите следующий текст в тело документа (внутри тэгов <BODY></BODY>
    Например:
    <P>Мой первый HTML-документ
    <A HREF="">ссылка</A></P>

    Сохраните документ например как template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, черными буквами будет выведен наш текст и красными буквами ссылка, цвет которой изменится на черный, при наведении на ней курсором.

    Урок2, Работа с текстом.


    -------------------------------------------------------------------------------------
    Мой Email: the_thing@rbcmail.ru

    		  
    Используются технологии uCoz