ПРАВИЛА НАПИСАНИЯ ТЕГОВ

1
ПРАВИЛА НАПИСАНИЯ ТЕГОВ.
Теперь, когда Вы уже знаете несколько тегов, самое время поговорить о правилах
написания кода.
При написании HTML - кода , для его корректного отображения необходимо
придерживаться некоторых правил, а именно:
Парные теги, называемые по-другому контейнеры, состоят из двух частей —
открывающий и закрывающий тег. Открывающий тег обозначается, как и одиночный —
<тег>, а в закрывающем, используется слэш — </тег>. Допускается вкладывать в
контейнер другие теги, однако следует соблюдать их порядок. Так, на рис. 6.1
демонстрируется, как можно добавлять один контейнер внутрь другого.
Рисунок 6.1.
Здесь действие курсивного начертания (тега) <em> </em> распостраняется на весь
обзац ограниченный тегами <p> </p> , а действие жирного тега <strong> </strong>
распостраняется, только на слова Форматируемый текст.
Рисунок 6.2.
На рисунке 6.2 показано, как нельзя располагать теги в коде страницы (или как то
иначе).
Если связать открывающий и закрывающий тег между собой скобкой, как показано
на рис. 6.1, то несколько скобок обозначающих разные контейнеры, не должны
пересекаться между собой (рис. 6.2). Любое пересечение условных скобок (рис. 6.2)
говорит о том, что правильная последовательность тегов нарушена.
Замечание. Не все контейнеры требуют обязательно закрывающего тега, иногда
его можно и опустить. Тем не менее, закрывайте все требуемые теги, так вы
приучитесь сводить к нулю возможные ошибки.
Эти же правила вложенности распространяются и на теги содержащие атрибуты и
значения, любой контейнер должен открыться, а затем закрыться, не зависимо вложен в
него другой контейнер или же нет.
Параметры тегов и кавычки
Согласно спецификации HTML все значения параметров тегов следует указывать в
двойных ("пример") или одинарных кавычках ('пример'). Отсутствие кавычек не приведет
2
к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без
кавычек, и все же всегда приучайтесь указывать параметры тегов в кавычках.
Неизвестные теги и параметры
Если какой-либо тег или его параметр был написан неверно, то браузер
проигнорирует подобный тег и будет отображать текст так, словно тега и не было.
Следует избегать неизвестных тегов.
Порядок тегов
Существует определенная иерархия вложенности тегов. Например, тег должен
находиться внутри контейнера и нигде иначе. Чтобы не возникло ошибки, следите за тем,
чтобы теги располагались в коде правильно.
Если теги между собой равноценны в иерархии связи, то их последовательность не
имеет значения. Так, можно поменять местами теги <title> и <meta>, на конечный
результат это никак не скажется.
Закрывайте все теги
Существует три состояния закрывающего тега: обязателен, не требуется или не
обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это
приведет к ошибке при отображении документа. Для некоторых тегов вроде <br>
закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что
разработчик может его, как добавить, так и опустить, к ошибке это не приведет. Однако
рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует,
создает более стройный и строгий код, который легко модифицировать.
ЦВЕТ ТЕКСТА И ФОНА В HTML.
По умолчанию цвет текста на HTML - страницах всегда черный (#000000) , но мы
можем задать любой цвет.
Цвет текста
В HTML цвет текста, шрифта, фона и т.д. задается двумя способами:
1. Названием цвета, который прописывается как атрибут <color> заключенный в
парные теги < font > </font > . Например, цвет заголовка на нашей странице можно задать
таким способом:
<font color="red">Красный</font>
Не забываете про правило вложенности тегов, полный код заголовка будет
выглядеть так:
<h2><font color="red"> Обзор автомобилей 2008 года. </font></h2>
А сам заголовок на странице будет выглядеть так:
Обзор автомобилей 2008 года.
2. Второй способ задания цвета - это прописать цвет его шестнадцатеричным
значением в палитре RGB в виде #RRBBGG, где RR - красный цвет (red), BB - синий
(blue) и GG - зеленый (green). Чем выше значение одной из компонент, тем она более
интенсивна. Оттенки серого получаются при задании одинаковых значений для всех трех
3
компонент. Каждая компонента может варьироваться от 0 до FF (255), т.е. всего можно
получить 256х256х256=16777216 цветов. При указании цвета в шестнадцатеричным
значением обязательно ставится знак # . Полностью код выглядит так:
<p><font color="#FF0000"> Текст красного цвета </font></p>
Записи вида:
<p><font color="red"> Текст красного цвета </font></p>
<p><font color="#FF0000"> Текст красного цвета </font></p>
равнозначны и отображаться браузером будут одинаково.
Цвет фона страницы
Так же как и цвет текста, мы можем изменить и цвет фона нашей страницы.
По умолчанию фон страницы всегда задается белый цветом (white или #FFFFFF), но
даже если Вы хотите оставить фон страницы белым, это рекомендуется прописать.
Делается это через атрибут bgcolor. Можно задать цвет фона на странице прописав его
внутри тега body , т.е запись будет выглядеть так:
< body bgcolor="#FFDEAD">
В результате наша страница может принять такой вид, как на рисунке 7.1.
Исходный код для этой страницы будет выглядеть следующим образом:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=windows1251">
<title>Автомобили со всего мира</title>
<meta
name="keywords"
content="автомобили,
легковые,
гараж,
автопутешествия, гараж ">
<meta name="description" content="все что вы хотите знать про современные
автомобили">
</head>
4
<body bgcolor="#FFDEAD">
<h2
align="center"><font
года.</font></h2>
color="red">Обзор
автомобилей
2008
<p align="justify"><font color="#000080">Наш сайт посвящен автомобилям и
все что с ними связано. Здесь Вы найдете
много полезной и интересной информации.</font></p>
<p align="justify"><font color="#000080">Нынешний год - пора обновления
модельного ряда. Оно продолжится по
меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый
компактный SUV. Первая жертва: из
прайс-листов вычеркнута - модель Sportcoupe 2000 года рождения, с весны
его заменит прямой наследник CLC.</font></p>
<p align="justify"><font color="#000080">Компактный «спорткар» помимо
нового имени получил обновленную
внешность и усовершенствованную механику. Он, как и Sportcoupe, создан на
базе седана С-класса прошлого
поколения. Производиться CLC будет на том же бразильском заводе, и цена,
как у предшественника, будет
довольно привлекательной - порядка 28 000 евро.</font></p>
<p align="justify"><font color="#000080">Переходя от Sportcoupe к CLC,
мерседесовские инженеры
усовершенствовали и заменили более 1100 элементов. Из значимых изменений,
которыми может похвастать
CLC, отметим более «короткий» руль, значительно облегчающий управление,
современную информационную систему,
спутниковый навигатор с картами на DVD и на жестком диске. Внешне CLC
можно узнать по новому дизайну
передней части, который роднит новинку с новым С-классом. Сзади изменился
дизайн крышки багажника,
обновилась форма фонарей.</font></p>
<p align="justify"><font color="#000080">Из двигателей CLC предлагает
четыре четырехцилиндровых (три
бензиновых и дизель) мощностью от 122 до 184 л.с. и две V-образных
бензиновых «шестерки» -204 и 272 л.с.
Сильнее других изменился 1,8-литровый мотор, который устанавливается на
версию CLC 200 Kompressor:
его мощность поднялась на 20 сил (до 184 л.с), а расход на 100 км по
сравнению с предыдущей
модификацией
сократился
почти
на
1
л.
Серийно
все
двигатели
агрегатируются с шестиступенчатой «механикой»,
но на версиях с четырехцилиндровым двигателем можно заказать и
пятидиапазонный «автомат». Семидиапазонный
7G-Tronic будет доступен с моторами V6. Оборудование салона достойно
великой марки, причем все - от
навигатора до систем безопасности - основано исключительно на проверенных
решениях. В салонах российских
дилеров автомобиль появится во втором полугодии.</font></p>
</body>
</html>
5
ИЗОБРАЖЕНИЯ В HTML.
Добавление изображения происходит в два этапа: вначале готовится графический
файл желаемого размера и формата (об этом мы поговорим позже), затем он добавляется
на страницу через тег <img>. Сам HTML документ предназначен только для того, чтобы
отобразить требуемую картинку, при этом никак ее не меняя.
При подготовке изображений следует учесть несколько моментов.
1. Поскольку веб-страница загружается по сети, существенным фактором выступает
объем графического файла, встроенного в документ. Чем он меньше, тем быстрее
отобразится изображение.
2. Размер картинки необходимо ограничить по ширине, например, установить не
более 800 пикселов. Иначе изображение целиком не поместится в окне браузера, и
появятся полосы прокрутки.
Широкое распространение для веб-графики получили два формата — GIF и JPEG.
Их многофункциональность, универсальность, небольшой объем исходных файлов при
достаточном для сайта качестве, сослужили им хорошую службу, фактически определив
их как стандарт веб-изображений. Есть еще формат PNG, который также поддерживается
браузерами при добавлении изображений и существует в двух ипостасях — PNG-8 и PNG24. Однако популярность PNG сильно уступает признанию форматам GIF и JPEG.
Обычно для изображений (картинок) делают отдельную папку в корневом каталоге и
в неё складывают все изображения. Иногда таких папок несколько (если того требует
структура сайта или Вам так проще ориентироваться). Эту папку называют img или images
(изображения) и в коде прописывают путь до файла где лежит изображение и имя файла
(картинки), который Вы хотите вставить.
Для вставки изображений в HTML документ используется следующая конструкция,
которая вставляется в нужное место (туда, где Вы хотите видеть картинку) HTML
страницы листинге 8.1.:
На нашей странице посвященной автомобилям, подготовлено и вставлено два
изображения. Код вставки первого изображения Вы видите ниже:
Листинг 8.1.
<img src="img/mers1.jpg" border="0" width="400" height="209" hspace="20"
align="left" alt="Вид машины спереди">
Прокоментируем листинг 8.1.: Само изображение вставляется с помощью тега img
src="img/mers1.jpg" где "img/mers1.jpg" – указывает, что наша картинка лежит в папке
img а имя файла mers1.jpg. В принципе этого достаточно что бы вставить изображение,
остальные параметры не обязательные, но все, же их, следует прописывать иначе наша
картинка, может подвергнуться искажениям.
border="0" – указывает что рамки вокруг рисунка нет, попробуйте поменять 0 на
другое число, например 1 - соответствует толщине рамки вокруг рисунка в 1 пиксель, 2 –
в два пикселя и т.д.
width="400" – указывает, что ширина рисунка 400 пикселей (ставьте реальную
цифру ширины Вашего рисунка).
height="209" - указывает, что высота рисунка 209 пикселей (ставьте реальную
цифру высоты Вашего рисунка).
6
Если не указать параметры width и height то картинка может исказиться.
hspace="20" – указывает на отступ текста от картинки в 20 пикселей.
align="left" – это уже знакомый Вам тег, это выравнивание картинки по левому
краю (т.е. картинка прижимается к левому краю, а текст обтекает картинку справа), так же
может принимать, например значение right - по правому краю.
alt="Вид машины спереди" – здесь прописывается альтернативный текст который
высвечивается при наведении мыши на картинку.
ССЫЛКИ
Переходить с одного сайта на другой (или по разным страницам одного сайта)
можно с легкостью, просто нажав на ссылку. Текст ссылки, как правило, выделяется
цветом (обычно ярко синего цвета) или оформляется подчеркиванием (но не всегда).
Ссылки в HTML позволяют связать текст или картинку с другими гипертекстовыми
документами и позволяют переходить с одной веб-страницы на другую.
Особенность ссылок состоит в том, что сама ссылка может вести не только на
HTML-файлы, но и на файл любого типа, например на картинки, на музыкальные файлы,
на видеофайлы и т.д. Причем этот файл может размещаться совсем в другой стране на
другом сайте.
Иными словами, если путь к файлу можно указать в адресной строке браузера, и
файл при этом будет открыт, то на него можно сделать ссылку.
Общий синтаксис создания ссылок Вы видите в Листинге 9.1 (одинаков для создания
ссылок на любые файлы) следующий:
Листинг 9.1.
<a href="URL">текст ссылки</a>
Где:
URL – это адрес сайта или имя файла и путь до этого файла, если файл лежит на
этом же сервере. Тег <a href> говорит браузеру что это ссылка. Этот тег парный поэтому
его необходимо закрыть </a>. Теги <a href="URL"> и </a> посетитель страницы не видит,
ему видна только надпись текст ссылки эта надпись называется якорь ссылки естественно
каждая ссылка имеет свой якорь.
Абсолютные и относительные ссылки
Различают два вида ссылок
Абсолютные ссылки – это те, которые лежат на другом сервере. Такие ссылки
должны начинаться с указания протокола (обычно http://) и содержать полное имя сайта и
страницы, на который следует перейти. Например, ссылка вида:
7
Листинг 9.2.
<a
href="http://www.russnews.info">Мониторинг
произошло в мире за 24 часа.</a>
новостей.
Все
-
что
А вот что видит посетитель сайта:
Мониторинг новостей. Все - что произошло в мире за 24 часа.
Такая ссылка называется абсолютной – и приведет пользователя на новостной
ресурс, расположенный совсем на другом сервере, при этом пользователь попадет на
индексную (главную страницу сайта index.html – которая открывается по умолчанию).
А при нажатии, например на эту ссылку:
Листинг 9.3.
<a
href="http://www.russit.info/processors/news_2008-07-14-09-33-03784.html”>AMD Puma: новая мобильная платформа AMD с Ultra-процессором</a>
Пользователь попадет на сайт RussIT.info посвященный компьютерным технологиям
в раздел Процессоры и увидит статью про процессоры фирмы AMD.
2. Второй вид ссылок – это относительные ссылки. Эти ссылки ведут на файлы,
которые расположены на Вашем же сервере. Относительные ссылки ведут отсчет от корня
сайта или текущего документа. Например, Ваш файл index.html, лежит в какой-либо папке
на сервере. В этой же папке лежит другой файл с именем tex_opis.html. Что бы перейти на
этот файл относительная ссылка будет иметь вот такой синтаксис:
Листинг 9.4.
<a href="tex_opis.html”>Технические характеристики автомобиля</a>
Можно добавить в ссылку некоторые необязательные атрибуты, например:
target="blank" загружает гиперссылку в новом окне Обозревателя
title="Технические характеристики автомобиля" - текст подсказки, который
будет появляться при наведении мышки на гиперссылку.
И окончательный синтаксис ссылки будет иметь вид:
Листинг 9.5.
<a href="tex_opis.html” target="blank" title="Технические характеристики
автомобиля">Технические характеристики автомобиля</a>
Естественно для того что бы страница на которую ведет ссылка открылась, она
должна существовать, поэтому давайте создадим еще одну страничку (механизм точно
такой же и при создании страницы index.html) и назовем этот файл tex_opis.html . Пускай
в этом файле будут действительно технические характеристики автомобиля.
8
Если у Вас есть вопросы по созданию этого файла, просмотрите предыдущие уроки.
Ссылка на другую страницу (о которой мы с Вами говорили выше) добавлена в
самом конце страницы. Ссылка рабочая ведет на страницу tex_opis.html . Эта страница
полностью не оформлена, добавлен только заголовок и ссылка на главную страницу т.е.
назад на index.html.