Описание HTML-кода

Описание HTML-кода

Для удобного изучения мы код изобразили цветным. Первые 2 строки зелёного цвета - это служебная информация по международной стандартизации. Красным цветом обозначены теги. Тег (tag - указатель, метка) - это код, идентифицирующий определённый элемент документа, например: заголовок, ссылку, таблицу. Теги заключаются в угловые скобки <>. Большинство тегов являются парными, то есть для каждого начального тега <Имя> есть конечный тег </Имя>, в котором к имени тега добавляется косая черта "/" (слеш). Самый первый тег в нашем коде <HTML>, а самый последний </HTML>. Они обозначают границы HTML-документа. Следующий тег <HEAD>, и на 11 строчке </HEAD>. Элемент HEAD обозначает заголовочную часть, и предоставляет браузеру общую информацию о HTML-файле. В контейнер HEAD вложен элемент TITLE (5 строка) - название WEB-страницы. Сюда ещё вложен элемент META. Он предназначен для поисковых роботов. Когда поисковый робот обнаружит ваш новый сайт в Интернете, он просмотрит содержимое тегов <META> и включит указанные вами ключевые слова (чёрного цвета) в свою базу данных. После заголовочной части идёт тег <BODY>, и второй снизу конечный тег </BODY>. Всё, что находится между этими тегами, является телом документа. Тег <BODY> дополнен атрибутами (синего цвета): bgcolor (цвет фона всего документа), text (цвет текста всего документа). Атрибут пишется после названия тега через пробел, и заканчивается перед закрывающей угловой скобкой. Если атрибутов несколько, то они между собой отделяются пробелами. Атрибутам мы задали соответствующее значение (чёрного цвета). Цвет можно задавать двумя способами: цифрами или английскими словами. В цифровом варианте надо использовать 6 знаков: все цифры от 0 до 9 и буквы A, B, C, D, E, F. Вот некоторые цвета: 000000 (чёрный), FFFFFF (белый), FF0000 (красный), 00FF00 (зелёный), 0000FF (синий). Кстати, отсюда пошёл термин "цифровая фотография" - Там каждый пиксель на снимке задан такими вот числами. Пиксель - это минимальный адресуемый элемент экранного изображения. Следующий видим тег <BR> (разрыв или перевод строки), то же самое, что клавиша Enter при печати. Этот тег одиночный, конечный тег со слешем ему не требуется. Если хотим сделать отступ на несколько строк, пишем например <BR> <BR>. Ниже идёт тег <H1> (заголовок первого уровня). Всего бывает 6 уровней: H1 -самый крупный и H6 -самый мелкий. Внутри H1 ещё находится элемент center (выравнивание по центру окна). Также бывают left (выравнивание по левой стороне) и right (выравнивание по правой стороне). И уже внутри элемента мы видим сам текст заголовка (чёрного цвета). Чем вам не матрёшка? Ну а ниже идёт самая громоздкая конструкция - TABLE (таблица) с атрибутами bgcolor (цвет фона таблицы), border (толщина внешней рамки), width (ширина таблицы в пикселях), align (выравнивание по горизонтали). Чтобы не запутаться, код пишем не последовательно - слева направо, а сначала создаём каркас. А потом наполняем его содержанием. Вот так мы создавали таблицу. - Написали теги самой таблицы: <TABLE> </TABLE>. - В ней создали 3 строки: <TR> </TR> <TR> </TR> <TR> </TR>. - В первой строке создали 3 ячейки: <TD> </TD> <TD> </TD> <TD> </TD>. Во второй - тоже 3, в третьей - 2 ячейки. Всё делаем на своё усмотрение. <TABLE> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> </TABLE> Теперь теги дополняем атрибутами. Здесь появятся новые атрибуты: <TR width (ширина ячеек данной строки), height (высота)>; colspan=2 (объединение двух соседних ячеек); valign (выравнивание содержимого по вертикали), top (выравнивание по верхнему краю), bottom (по нижнему), middle (центрирование). <TABLE bgcolor=white border=2 align=center> <TR height=120> <TD align=left> </TD> <TD align=center> </TD> <TD align=right> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR height=120> <TD colspan=2 align=center> </TD> <TD align=right </TD> </TR> </TABLE> И уже потом заполняем каждую ячейку: вписываем код между тегами <TD> и </TD>. Работает принцип: от простого - к сложному. Со структурой таблицы разобрались. Теперь вернёмся к нашему цветному коду. После тега <TABLE> со своими атрибутами идет тег первой строки <TR>. Ниже - тег первой ячейки <TD> с атрибутом выравнивания по левому краю. А в качестве содержимого этой ячейки выступает обычный текст. Переходим в следующую, вторую ячейку. Здесь познакомимся со ссылкой. Схема ссылки выглядит так: <A href="адрес перехода"> Текст ссылки </A> В нашем случае "Переход на вторую страницу моего сайта" - это текст ссылки, а "doc/2.html" - адрес перехода. Когда пользователь наводит курсор мыши на текст ссылки - курсор принимает вид руки. А если щёлкнуть левой кнопкой мыши по тексту ссылки, то срабатывает адрес перехода. То есть перед нами открывается страница, которая записана в адресе перехода. В нашем случае будет doc/2.html. (doc - название папки, 2.html - имя файла). Теперь поясню, для чего нужна была эта ссылка? Сайт очень редко состоит из одной страницы, их всегда несколько, и пользователь должен иметь возможность переходить от одной страницы к другой. А мы переходим к изучению 3 ячейки 1 строки нашей таблицы. Здесь тоже ссылка. Но посмотрите на адрес перехода: http://mail.ru. Это адрес всем известного почтового сервиса. А каким боком он связан с нашим сайтом? Он - никаким, а мы его через ссылку к себе привязали! Пошли дальше: 2 строка, 1 ячейка. Элемент IMG (вставка изображения) с атрибутами width (ширина) и height (высота). Схема выглядит так: <IMG src="Источник изображения"> В нашем примере источником является графический файл 2.JPG, который находится в папке doc. Если вы заметили - у нас все документы лежат в папке doc. Можно всё разложить по разным папкам. Главное, чтобы адрес в написании кода не расходился с действительностью. 2 ячейка. Здесь опять встречается ссылка. Только вместо текста ссылки стоит изображение 3.JPG. А в качестве адреса перехода - тоже изображение 4.JPG. 4.JPG - это фотография, а 3.JPG - её уменьшенная копия (Мы её создали заблаговременно с помощью программы Microsoft Office PowerPoint). Такой способ применяется в фотогалереях. 3 ячейка. Графическая ссылка на URL-адрес (адрес какого-либо сайта, размещённого в Интернете). 3 строка, 1 ячейка. Атрибут colspan=2 (объединение двух ячеек). Ссылка на музыкальный файл 6.MP3. Кроме того, здесь текст ссылки заключён в элемент FONT (свойства шрифта). Для него предусмотрены атрибуты: size (размер шрифта от 1 до 7), color (цвет шрифта), face (гарнитура шрифта, face=Arial). И последняя ячейка. Ссылка на адрес электронной почты. Удобно тем, что при нажатии пользователем на эту ссылку на его компьютере автоматически запускается почтовая программа, и в поле "Кому" вводится нужный адрес сам.

⇐ Предыдущая 1 234 Следующая ⇒