Рейтинг: 4.6/5.0 (1861 проголосовавших)Категория: Windows: Программирование
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll ). Вот самый простой HTML-документ:
Если хотите, можно посмотреть этот пример прямо сейчас.
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html> ) называется меткой (по-английски — tag, читается "тэг").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>. <BODY> и <Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные метки <html>. </html>Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head>. </head>Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
Все, что находится между метками <title> и </title>. толкуется браузером как название документа. Netscape Navigator. например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
<H1>. </H1> — <H6>. </H6>Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P>. </P>Такая пара меток описывает абзац. Все, что заключено между <P> и </P>. воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
Подытожим все, что мы знаем, с помощью примера 2 :
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
Существует два типа тегов HTML - контейнерные и одиночные, которые всегда заключаются в угловые скобки <. >.
Контейнерные теги состоят из пары - открывающий и закрывающий тег <. >. </. >. Перед именем закрывающего тега необходимо ставить косую черту (слэш) "/". В закрывающем теге не нужно писать атрибуты присутствующие в открывающем теге!
Одиночные теги менее распространены и состоят лишь из открывающего тега. Пример: <br>.
Тег может иметь атрибуты и значения атрибутов. Пример: <тег имя_атрибута_1="значение" имя_атрибута_2="значение">. </тег>. Атрибуты добавляют в тег для расширения или модификации его действий.
Теги и атрибутыУказывает программе просмотра страниц что это HTML документ. В нём содержатся обязательные теги <head>. <body> .
Определяет место, где помещается различная информация не отображаемая в теле документа. В нём распологаются теги: <title>. <meta>. <link>. <style>. <base> .
Определяет видимую часть документа. Атрибуты:
<body alink=". "> Устанавливает цвет гиперссылок при нажатии.
<body vlink=". "> Устанавливает цвет гиперссылок, на которых вы уже побывали.
top-margin — отступ сверху. От 0 до.
right-margin — отступ справа. От 0 до.
bottom-margin — отступ снизу. От 0 до.
left-margin" — отступ слева. От 0 до.
Помещает название документа в оглавление программы просмотра страниц.
<base target=". "> Указание браузеру от какого базового окна открываются все ссылки (кроме ссылок с отдельным указанием данного параметра). Значения атрибута target=
"_blank" — откроет документ в новом окне.
"_parent" — откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне.
"_top" — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, откроет в текущем окне.
"_self" — откроет в текущем окне (по умолчанию для ссылок).
Метаинформация. Служит в основном для поисковых роботов. Атрибуты и значения:
<meta name="description" content=". "> Описание документа.
<meta name="keywords" content=". "> Ключевые слова.
<meta name="robots" content=". "> Управление процессом индексации. Возможные варианты:
"index" — возможность индексирования данного документа. Наоборот - "noindex"
"follow" — возможность индексировать все документы, на которые есть ссылки в данном HTML-файле. Наоборот - "nofollow"
"all" — одновременное условие 2-ух вышеперечисленных.
"none" — одновременное условие 2-ух первоперечисленных. Наоборот.
<meta http-equiv="content-type" content="text/html; charset=windows-1251"> Кодировка документа.
<meta http-equiv="refresh" content="30"> Указывает, что документ следует перезагружать через 30 с.
Указывает на таблицу стилей (CSS). Записывается в теге <head>. Есть 3 способа применения:
2] <style>
</style> — Таблица глобальных стилей. Пишется в теге <head>.
3] <i style="color:red; font-family:arial"> пример </i> — Таблица внутренних стилей. Прописывается в теге.
пример простейшей таблицы
Параметру BORDER может присваиваться числовое значение, которое определяет толщину рамки в пикселях.
Но, все по порядку. С тегом <TABLE> пока все ясно. Он говорит браузеру, что необходимо строить таблицу и имеет кучу параметров, о которых - попозже.
Тег-контейнер <TR>. </TR> определяет построение строк и употребляется только внутри тега <TABLE></TABLE>. В любом другом месте браузеры будут в лучшем случае игнорировать этот тег, а в худшем - интерпретировать его неправильно, что может испортить вид Вашей прекрасной, с таким трудом построенной страницы. Внутри тега <TABLE> может быть сколько угодно тегов-строк. Сколько вставите тегов, столько строк в таблице сделает браузер. Внутри тега <TR>. </TR> обязательно должен быть хотя бы один тег <TD>. </TD>. который определяет построение столбцов. Тег <TD> также не распознается браузерами, если он стоит вне тега <TR>.
Зная все вышеизложенное, мы уже можем строить довольно приличные таблицы. Для примера построим таблицу с двумя строками по два столбца в каждой строке. Вот ее код:
<TABLE>
<TR><TD>ячейка 1.1</TD><TD>ячейка 1.2</TD></TR>
<TR><TD>ячейка 2.1</TD><TD>ячейка 2.2</TD></TR>
</TABLE>,
а вот так она будет выглядеть на странице без рамки:
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Далее разберем отдельные строки нашего кода.
Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE> .
Существует несколько видов <!DOCTYPE>. они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
Табл. 4.1. Допустимые DTD
Таблица состоит из строк и столбцов, которые могут содержать текст и рисунки. С помощью таблиц удобно верстать макеты страниц, расположив фрагменты текста и изображений нужным образом. Для добавления таблицы на веб-страницу используется тег TABLE .
Любая таблица состоит из строк и столбцов, которые задаются с помощью тегов TR и TD соответственно. Таблица должна содержать хотя бы один столбец.
Вместо тега TD допускается использовать тег TH. Текст в такой ячейке обычно отображается браузером жирным шрифтом и выравнивается по центру. Пример:
<html>
<head>
<title>Таблицы</title>
</tr>
</table>
</body>
</html>
К тэгу TABLE могут применяться параметры:
Width - Задает ширину таблицы.
Height - Устанавливает высоту таблицы.
Border - Устанавливает толщину рамки в пикселах.
Bgcolor - Устанавливает цвет фона таблицы.
</tr>
<tr>
<td width="50%" bgcolor="white">Ячейка 3</td>
<td width="50%" bgcolor="white">Ячейка 4</td>
</tr>
</table>
</body>
</html>
Как вы поняли, каждая ячейка таблицы, задаваемая через тег TD. тоже имеет свои параметры, часть из которых совпадает с параметрами тега TABLE .
Как правило, при верстке сайта применяются фиксированные по размеру таблицы. Это значит, что вместо процентов в качестве ширины и высоты таблицы указываются конкретные значения в пикселях:
<table border="1" width="500" height="200">
В примере я указал, что ширина таблицы должна быть равна 500 пикселям, а высота – 200 пикселей.
По умолчанию, таблица всегда выравнивается по левому краю окна браузера. Чтобы это изменить, можно использовать параметр ALIGN. который имеет три значения: left. right и center .
<html>
<head>
<title>Таблицы</title>
</head>
<body>
<table border="1" width="500" height="200" align="center">
<td width="376" colspan="2"> < /td>
</tr>
<tr>
<td width="192"> </td>
<td width="192"> </td>
</tr>
</table>
Для выравнивания текста внутри ячейки используются параметры:
- ALIGN. Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left, center, right .
- VALIGN. Устанавливает вертикальное выравнивание содержимого ячейки. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание посередине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии.
<table border="1" bordercolor="blue" width="400" cellpadding="10" cellspacing="0">
<tr>
<td width="192" align="center" valign="middle">Ячейка1</td>
<td width="192" align="right" valign="bottom">Ячейка2</td>
</tr>
</table>
Таблицы очень удобно использовать для оформления вэб-страницы. В частности для создания стоящего фонового рисунка. Все дело в том, что для каждой ячейки можно выбрать свой фоновый рисунок. А ячеек в таблице можно создать сколько угодно. Единственная проблема заключается в том, что размер ячейки должен точно совпадать с размером рисунка в пикселях. Если размер рисунка окажется больше, чем размер ячейки, то изображение будет обрезано. Если же ячейка по размеру окажется больше рисунка, то изображение будет размножено по горизонтали и вертикали:
<table border="1" width="411" height="119">
<tr>
<td width=113 height=113 background="image1.jpg">ФОН 1</td>
<td width=282 height=113 background="image2.jpg">ФОН 2</td>
В примере использованы изображения 113*113 пикселей. На рисунке видно, как разнится результат в зависимости от размера ячейки.
Более лучшего способа для верстки веб-страницы чем таблицы еще не придумали. Конечно, писать постоянно HTML код очень неудобно и трудоемко. Но если воспользоваться Namo WebEditor 8, то никаких сложностей не будет.
Далее мы разберем html ссылки .
Таблицы - самый универсальный элемент при написании сайтов. Долгое время использовались таблицы с невидимыми границами для расположения блоков на странице сайта, а также для полной верстки страниц, а так как применение таблиц используется и в данное время, просто пока что более универсального способа еще нет, то изучить правила создания таблиц нужно обязательно!
Конечно сейчас можно полностью написать сайт используя блочный тег <div>. тогда сайт получиться более легкий, так как практически все параметры стилей описываются в одельном файле, который подключается ко всем страницам, но даже в таком варианте очень часто прибегают к использованию таблиц при разработке шаблона. Так что знание и того и другого не только не помешает, но и сделает более универсальными возможности верстальщика.
Для более глубокого изучения нужно практиковаться, а чтобы создать более универсальный сайт - нужно больше учиться, а основные моменты будут представлены ниже, основной акцент ставиться на примеры в написании таблиц. Лучше на примерах практиковаться, чем только читать теорию.
Описание тега <table>.Посмотрим простой пример таблицы и разберем по пунктам:
Верстка это процесс создания WEB-страниц. Создавать страницы Вы будете самостоятельно, т.к. то, что сделано собственными руками, лучше чем купленное или ворованное. Не зря же говорят - "Нет подарков лучше, чем подарки, сделанные своими руками".
Для создания страниц могут использоваться редакторы двух типов: WYSIWYG и текстовые .
Если Вы еще совсем не дружите с HTML, то использовать текстовый редактор рано. Можно создавать страницы редакторами WYSIWYG. в которых пользователю необходимо только разместить, желаемым образом, объекты на странице. В качестве такого редактора можно использовать Microsoft Word. входящий в состав пакет Microsoft Office.
Основные теги- логический блок, используется при блочной верстке. - вставляет изображение. ссылка - добавляет ссылку на страницу, вместо решетки указывается ссылка.
Любая страница имеет расширение html. Поэтому мы должны видеть какое расширение имеет тот или иной файл, для этого откройте "Мой компьютер" выберите в меню "Сервис" - "Свойства папки", в открывшемся окне перейти во вкладку "Вид" и снять галочку напротив "Скрывать расширения для зарегистрированных типов файлов".
- обязательная часть, можно не менять - начало страницы, написанной на языке html - начало информационной части описания Название страницы - конец тега head
Только что Вы увидели пример простой страницы. Нужно отметить, что в блоке head, кроме заголовка, может находиться и другая информация, например ключевые слова, описание страницы, авторство, кодировка, ссылки на подключаемые файлы или описание используемых стилей.
В теге body располагается код страницы отвечающий исключительно за видимый контент. Для примера можете скопировать нижеуказанный код и открыть получившийся файл в браузере.
Чтобы операционная система знала, что какой либо текстовый документ является html документом, необходимо присвоить файлу расширение htm (html).
Не пугайтесь нижеприведенной таблицы тегов языка html. используя визуальный редактор FrontPage. первое время можно вообще не вникать в теги, затем, постепенно изучить пару десятков основных тегов, а дальше Вы сами решите для себя, надо ли Вам их знать. Мне самому приходилось неоднократно рыться в справочниках, чтобы найти внезапно понадобившийся тег, поэтому можете поместить данную страницу в закладки и подобный справочник будет всегда под рукой.
Что же касается примеров использования тегов, то нет ничего лучше, чем рассматривать уже готовый html код готовых интернет сайтов, для этого в браузере нужно найти вкладку "отобразить исходный код страницы". обычно она есть в каждом браузере. (Браузер - программа с помощью которой Вы просматриваете страницы в интернете).
Теги могут быть как одиночные, так и парные. Парные теги открываются < код тега > и закрываются </ код тега >. все что расположено между открывающим и закрывающим тегами, попадет под его влияние. Теги могут иметь различные атрибуты, которые указываются с помощью специальных параметров. Теги могут быть вложенными один в другой и т.д.
Внутри html документа необходимо использовать так называемые теги. Тег - это определенный условный код, обычно заключенный в скобки типа <>. Этот код дает понять браузеру, какой тип данных размещен между тегами, как нужно отображать эти данные, например такую информацию предоставляют теги форматирования текста. Тегов существует довольно много и начинающему вебмастеру тяжело в них ориентироваться, поэтому рассмотрим основные теги, которые могут Вам пригодиться уже при составлении первого сайта. Ниже в таблице тегов приведены не все теги, но основные выделены жирным шрифтом.
Основные теги
