Алексей Гладкий - Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Внешне вид веб-страницы не изменится – она будет выглядеть точно так же, как и на рис. 2.13. Но если теперь щелкнуть мышью на ссылке здесь, то в результате откроется главная страница портала www.mail.ru.
Таким образом, в данном разделе мы на конкретном примере рассмотрели основные действия по созданию простейшей веб-страницы. Однако чтобы более детально изучить возможности языка HTML, необходимо познакомиться с его основными тегами. Некоторые из них мы уже знаем, но в реальности их намного больше. Об этом и пойдет речь в следующем разделе.
Основные теги языка HTML
Здесь мы познакомимся с наиболее востребованными тегами языка программирования HTML. Отметим, что многие теги имеют свои атрибуты, о которых также будет рассказано в данном разделе. Мы будем рассматривать все теги (даже те, с которыми уже познакомились) в алфавитном порядке.
ВНИМАНИЕ
Не забывайте, что многие теги HTML-языка являются парными – например, <body> </body>, <b> </b>, и т. д.
Тег <a>, как мы уже знаем, предназначен для создания гиперссылок в тексте веб-страницы. Напомним, что гиперссылка является одним из ключевых элементов любого веб-ресурса, поэтому важность данного тега сложно переоценить. Этот тег имеет следующие атрибуты:
• accesskey – назначение для гиперссылки «горячей клавиши»;
• href – определение адреса, на который ведет гиперссылка;
• name – именование областей веб-страницы;
• tabindex – установка порядка перехода по гиперссылкам;
• target – определение окна для отображения объекта гиперссылки.
Тег <b> предназначен для выделения текста полужирным шрифтом. Иначе говоря, весь текст, находящийся между тегами <b> </b>, будет отображаться полужирным шрифтом.
С помощью тега <basefont> вы можете изменить внешний вид всего текста. Этот тег имеет атрибут size, предназначенный для изменения размера шрифта текста.
Тег <big> позволяет увеличить шрифт текста по сравнению с соседним текстом, а с помощью тега <blockquote> вы можете создать в документе блок цитаты.
Одним из ключевых тегов языка программирования HTML является парный тег <body>. Как мы уже отмечали ранее, с помощью этого тега идентифицируется основной текст документа. Иначе говоря, все, что вы хотите поместить на веб-страницу, должно располагаться между тегами <body> </body>. Данный тег имеет несколько атрибутов, которые перечислены ниже.
• alink, link и vlink – позволяют установить цвет гиперссылок;
• background – выбор графического фона;
• bgcolor – изменение цвета фона веб-страницы (применение данного атрибута мы на конкретном примере рассмотрели в предыдущем разделе);
• bgproperties – установка режима перемещения графического фона при пролистывании веб-страницы;
• bottommargin – позволяет редактировать высоту нижнего поля;
• leftmargin – позволяет редактировать ширину левого поля;
• marginheight – позволяет редактировать высоту верхнего и нижнего полей;
• marginwidth – позволяет редактировать ширину левого и правого полей;
• rightmargin – позволяет редактировать ширину правого поля;
• text – изменение цвета текста (применение данного атрибута мы на конкретном примере рассмотрели в предыдущем разделе);
• topmargin – позволяет редактировать высоту верхнего поля.
Тег <br>, как мы уже отмечали ранее, предназначен для создания новой строки (то есть для переноса текста на нижеследующую строку). Этот тег имеет один атрибут – clear, предназначенный для предотвращения переноса слов текста.
С помощью тега <caption> вы можете снабдить таблицу заголовком, а атрибут данного тега align позволяет установить признак выравнивания заголовка таблицы.
Для центрирования элементов веб-страницы предназначен тег <center>.
<col> – данный тег позволяет создать неструктурную группу столбцов таблицы. Он имеет перечисленные ниже атрибуты.
• align – атрибут позволяет задать признак выравнивания данных в ячейках группы по горизонтали;
• bgcolor – с помощью данного атрибут задается цвет фона ячеек группы;
• char – выбор символа, устанавливающего порядок выравнивания данных в ячейках группы;
• span – установка числа столбцов в группе;
• valign – установка признака выравнивания данных в ячейках группы по вертикали.
<colgroup> – с помощью данного тега создается структурная группа столбцов таблицы. Он имеет те же атрибуты, что и тег <col>.
<dd> – данный тег позволяет отметить статью определения в списке определений.
<del> – с помощью данного тега текст снабжается признаком зачеркивания.
<div> – данный тег позволяет разделить веб-страницу на области. Это бывает целесообразно при использовании стилей. У данного тега есть атрибут class, с помощью которого можно сформировать список исключений.
<font> – с помощью данного тега осуществляется изменение внешнего вида текста. Этот тег имеет перечисленные ниже атрибуты.
• color – изменение цвета текста;
• face – изменение шрифта текста;
• size – изменение размера шрифта.
<form> – это тег используется для создания форм. Он также имеет несколько важных атрибутов, которые перечислены ниже.
• accept-charset – определение формата кодировки данных;
• action – задание места назначения данных формы;
• enctype – выбор формата передаваемых данных формы;
• method – выбор способа пересылки данных формы по сети;
• target – определение места, где будет отображено сообщение о доставке данных формы.
<frame> – с помощью данного тега определяется набор данных фрейма. О том, что такое фреймы, говорилось выше – в разделе «Термины и определения, используемые веб-разработчиками». Данный тег имеет несколько атрибутов, которые перечислены ниже.
• bordercolor – предназначен для изменения цвета линий рамки фрейма;
• frameborder – позволяет скрыть рамку фрейма;
• marginheight – позволяет изменить высоту верхнего и нижнего полей фрейма;
• marginwidth – позволяет изменить ширину левого и правого полей фрейма;
• name – предназначен для присвоения имени фрейму;
• noresize – предотвращает изменение размеров фрейма;
• scrolling – предназначен для управления отображением полос прокрутки фрейма;
• src – предназначен для определения имени и местонахождения файла данных, отображаемых фреймом.
<frameset> – с помощью данного тега создается набор фреймов. Он может использоваться с перечисленными ниже атрибутами.
• border – позволяет регулировать толщину линий рамок фреймов;
• bordercolor – позволяет изменять цвет линий рамок фреймов;
• cols – предназначен для формирования столбцов рамок фреймов;
• frameborder – предназначен для скрытия рамок фреймов;
• framespacing – устанавливает заданную толщину линий рамок фреймов;
• rows – предназначен для создания строк фреймов.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> – с помощью данных тегов создаются заголовки разных уровней (соответственно от первого до шестого). Например, на созданной нами веб-странице (см. рис. 2.13) заголовок Информация о странице создан с помощью тега <h1>, то есть это заголовок первого уровня. Отметим, что все теги, предназначенные для создания заголовков, являются парными. Поэтому если вы, например, формируете заголовок первого уровня, то он должен находиться между тегами <h1> </h1> (см. рис. 2.14). Теги заголовков могут использоваться с атрибутом align, который позволяет определить признак выравнивания заголовка.
<head> – этот парный тег определяет раздел заголовка на веб-странице. Кроме этого, он предназначен для хранения прочих элементов, задача которых – помочь Интернет-обозревателю в работе с данными. Также между тегами <head> </head> могут располагаться метатеги, применяемые для хранения сведений, которые предназначены для Интернет-обозревателей и поисковых систем. Строго говоря, заголовок станицы Тестовая страница (см. рис. 2.13 и 2.14), который мы поместили между тегами <title> </title>, следовало бы еще поместить и между тегами <head> </head>. При этом программный код заголовка должен был выглядеть так:
