Главная » Мастерская » Статьи » Web-сайт своими руками » Шаг 2
Шаг 1 - Шаг первый - создание простейшего документа HTML
Шаг 2 - Рассмотрим теги нашего документа
Шаг 3 - Рассмотрим создание таблиц в документах HTML
Шаг 4 - Вставка графических изображений в документах HTML
Шаг 5 - Создание карт-изображений
Шаг 6 - Форматирование текста HTML
Шаг 7 - Создадим простейшую страничку HTML
Шаг 8 - Как разместить свою HTML страницу в интернете
Шаг 9 - Как разместить на HTML-странице счетчик посещений
Шаг 10 - Создание фрэймов в документах HTML
Шаг 11 - Бегущая строка в HTML документе
Шаг 12 - Где взять и как сделать гостевую книгу
Шаг 13 - Создание форм
Шаг 14 -Изменение дизайна Гостевой книги
Шаг 15 - Немного о JavaScript
Шаг 16 - Примеры фотоальбомов с использованием JavaScript
Шаг 17 - Еще раз о фреймах
Шаг 18 - Изменение информации в двух разных фреймах, нажатием на одну ссылку
Шаг 19 - Анимация и JavaScript
Шаг 20 - Изменение картинки при наведении курсора мыши
Шаг 21 - Как адаптировать сайт под различные видеорежимы

Шаг 2 - Рассмотрим теги нашего документа

<HTML>

Данный тег используется для открытия HTML-документа. Каждая Web-страница начинается тегом <HTML> и заканчивается закрывающим тегом </HTML>.

<HEAD>

Любой HTML-документ состоит как минимум из двух частей: заголовка и собственно документа. Данный тег определяет заголовок Web-страницы и должен иметь обязательный закрывающий тег </HEAD>. Также обязательным атрибутом этого тега является тег <TITLE>.

<TITLE>

Каждый HTML-документ имеет название, заключенное между тегами <TITLE> и </TITLE>. По названию документа HTML броузеры могут найти информацию, поэтому место для названия всегда определено - оно находится вверху и отдельно от содержимого HTML-документа. Отображается название в заголовке окна броузера, поэтому на него накладывается ограничение: максимальная длина названия - 40 символов.

<BODY>

Данный тег заключает в себе непосредственно документ. Также необходим закрывающий тег </BODY>.

Атрибуты тега <BODY>

Почти все теги в языке разметки Web-страниц имеют некоторые параметры, которые принято называть атрибутами. Они предназначены для модифицирования параметров документа, а их значения принято заключать в кавычки. Тег <BODY> имеет атрибуты, которые перечислены ниже:

  • bgcolor="..." - определяет цвет фона документа. Работа с цветами в HTML-документах будет рассмотрена ниже;
  • background="..." - указывает броузеру местоположение файла (*.gif или *.jpg), который необходимо использовать в качестве фонового рисунка. В кавычках указывается абсолютный или относительный путь к файлу. Окно полностью заполняется изображением, начиная с верхнего левого угла;
  • text="..." -устанавливает цвет текста;
  • alink=" .." - определяет цвет активной ссылки;
  • link="..." - определяет цвет не просмотренной ссылки;
  • vlink="..." - определяет цвет просмотренной ссылки;
  • topmargin="..." - устанавливает границу верхнего поля;
  • leftmargin="..." - граница левого поля;
  • bgproperties="fixed" - в случае установки данного параметра в значение fixed фоновое изображение не будет прокручиваться вместе с текстом;
  • onload="..." - определяет те действия броузера, которые должны произойти после загрузки документа из сети.

Очень часто исходные коды программ сопровождаются комментариями. Они предназначены для сопровождения исходного кода программы пояснениями, которые, в свою очередь, облегчают понимание кода как самим разработчиком при его модифицировании, так и при чтении кода другими людьми. В спецификации HTML для комментариев определен специальный тег, который начинается символами <!-- и заканчивается символами -->. Текст, заключенный в теге комментария, не отображается в броузере.

Цвета документа.

Выбор цвета можно производить двумя способами: заданием имени или определением номера цвета по цветовой схеме RGB (Red, Green, Blue). Язык HTML поддерживает следующие имена Цветов: AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, YELLOW. Номер цвета RGB задается тремя двухзначными шестнадцатеричными числами, причем каждое число принадлежит интер-валу от 00 до FF и определяет интенсивность соответствующего цвета. Например, номер цвета #FFOOOO соответствует красному цвету, так как имеет максимальную интенсивность для красного цвета, а зеленый и голубой имеют значения, равные нулю. Соот-ветственно, номер #OOFFOO кодирует зеленый цвет, а номер #OOOOFF - синий. Белый цвет образуется в результате насыще-ния всех основных цветов, т.е. его кодом будет число #FFFFFF. В случае полного отсутствия всех трех цветов можно получить абсолютно черный цвет (код #000000). Очевидно, что, используя такую комбинацию шестнадцатеричных чисел, можно получить очень большое количество цветов. Для удобства, основные шестнадцать цветов, их коды и названия приведены в таблице
Основные цвета и их коды
Цвет Код RGB Имя Цвет Код RGB Имя
черный #000000
black серебряный #СОСОСО
silver
темно-бордовый #800000 maroon красный #FFOOOO red
зеленый #008000 green известь #OOFFOO lime
оливковый #808000 olive желтый #FFFFOO yellow
темно-синий #000080 navy синий #OOOOFF blue
фиолетовый #800080 purple фуксия #FFOOFF fuchsia
чирок #008080 teal аква #OOFFFF aqua
серый #808080 gray белый #FFFFFF white

Гиперссылки

Важнейшим понятием в HTML является гиперссылка, которая позволяет связать текст или какой-либо объект с другими гипертекстовыми документами. Текст, который является гиперссылкой, как правило, выделяется цветом и подчеркивается. Для определения ссылки используется тег <А>, структура которого имеет следующий вид:

<А HREF="filename" target="_self">текст ссылки</A>

Атрибут HREF задает значение адреса документа, на который указывает ссылка, filename - имя файла или адрес Internet, на который необходимо сослаться, а текст_ссылки - текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе. Атрибут TARGET задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:

  • _top - открытие документа в текущем окне
  • _blank - открытие документа в новом окне
  • _self - открытие документа в текущем фрейме
  • _parent - открытие документа в родительском фрейме
Значение по умолчанию: _self

Примеры:

  • <A href="photo/my_photo.html" target="_blank" >Moй фотоальбом</A>
    ссылается на файл my_photo.html, расположенный в каталоге photo, вложенном в текущую папку, и образует ссылку в виде текста "Мой фотоальбом". Документ откроется в новом окне.
  • <A href="aboutme.html" target=MainFrame >Немного обо мне</A>
    откроет страницу aboutme.html, расположенную в текщей папке, и образует ссылку в виде текста "Немного обо мне". Документ откроется во фрайме "MainFrame".
  • <A href="mailto:support@rol.ru">письмо в техподдержку</A>
    выполнят макрокоманду загрузки почтовой программы с автозаполнением адреса получателя.

Теперь попробуем применить наши новые знания на практике. Добавим в нашу страничку атрибуты тега <BODY> и ссылку на страничку в интернете. Изменим код странички:

<HTML>
  <HEAD>
    <TITLE>Моя домашняя страничка</TITLE>
  </head>

  <body bgcolor="#000000" 
        background="Stars.gif" 
        text="#ffffff" 
        alink="#DDOOOO" 
        link="#0000FF"  
        vlink="#FF00FF">
    <br>
    <br>
    Добро пожаловать на мою домашнюю страничку!
    <br>
    <br>
    <a href="http://www.aport.ru" target="_blank">
      Поиск в интернете 
    </a>
  </BODY>
</HTML>

В данном примере был использован еще один тэг <BR>, который позволяет задать принудительный перевод строки в пределах абзаца и является тегом прерывания строки.

Для позиционирования различных элементов на Web-странице используют таблицы. С их помощью можно создавать обтекание рисунков, упорядочивать элементы форм, а также позиционировать другие элементы HTML-документа.


Copyright ByWeb©
Hosted by uCoz