Любой html-документ (страница) заключается между тегами <html> и </html>, т.е. тег <html> открывает документ, а тег </html> закрывает его
Между этими двумя основными распологается головная часть документа и его тело
В головной части документа (между тегами <head> и </head>) описываются общие правила отображения документа в браузере и содержится вспомогательная информация о документе. В головной части документа всегда между парой тегов <title> и </title> располагается имя документа, которое показывается в заголовке окна браузера
Между тегами <body> и </body> (в теле документа) распологаются команды, следуя которым в окне браузера выводится текст, картинки, таблицы и т. д.
Например, могут использоваться команды:
<h1>...</h1> — заголовок
<hr> — горизонтальная линия
<p>...</p> — абзац
Таблица основных тегов языка HTML
ТЭГИ | НАЗНАЧЕНИЕ |
<html></html> | Указывает программе просмотра страниц, что это HTML документ. Данные тэги обрамляют документ |
<head></head> | Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин |
<title></title> | Помещает название документа в оглавление программы просмотра страниц |
<body></body> | Определяет видимую часть документа |
Для создания своей первой страницы недостаточно знать основные тэги. Необходимо научиться форматировать текст соответствующим образом. Для этого используются тэги для форматирования текста. Они представлены в следующей таблице:
Таблица тэгов для форматирования текста
ТЭГИ | НАЗНАЧЕНИЕ | |
<hl></hl> <h6x/h6> | Задает размер заголовка | |
<pre></pre> | Обрамляет предварительно отформатированный текст | |
<b></b> | Жирное начертание шрифта | |
<i></i> | Начертание Курсив | |
<tt></tt> | Имитация стиля печатной машинки | |
<cite></cite> | Используется для цитат, обычно наклонный текст | |
<strong></strong> | Используется для выделения наиболее важных частей текста (наклонный или жирный текст) | |
<p> | Начало нового абзаца | |
<p align=...> | Выравнивает абзац относительно одной из сторон документа, значения: left, right, или center | |
<br> | Вставляет перевод строки | |
<blockquote> </blockquote> | Создает отступы с обеих сторон текста. | |
<ol></ol> | Создает нумерованный список | |
<li> | Определяет каждый элемент списка и присваивает номер | |
<ul></ul> | Создает ненумерованный список | |
<a href="URL"></a> | Создает гиперссылку на другие документы или часть текущего документа | |
<font size=...></font> | Устанавливает размер текста в пределах от 1 до 7 | |
<font color=.. ></font> | Устанавливает цвет текста, используя значение цвета в виде RRGGBB |
Тэги состоят из ключевых слов и могут быть дополнены атрибутами, разделенными пробелами. Описание атрибутов без использования ключевых слов не допускается.
Атрибуты таблицы
АТРИБУТ | НАЗНАЧЕНИЕ |
Align | Выравнивание таблицы по горизонтали (left, center, right^ |
Bgcolor | Задает фон внутри таблицы (можно задавать различный фон в каждой ячейке отдельно) |
Border | Определяет ширину бордюра |
Bordercolor | Задает цвет бордюра |
width | Задает ширину таблицы (либо в процентном соотношении, либо в пикселях) |
<body bgcolor=...> | Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0OOO - красный цвет |
<bodytext=...> | Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет |
<body link=...> | Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: OOFFOO - зеленый цвет |
<body vlink=...> | Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет |
<body alink=...> | Устанавливает цвет гиперссылок при нажатии |
Определение цвета, размера и гарнитуры текста.
Для этой цели используется тэг <font>. Для того, чтобы этот тэг работал, в него надо добавить атрибуты: size, color, face.
Атрибут size. Выбор размера шрифта браузером в значительной степени произволен. Значениями атрибута size могут быть целые числа от 1 до 7. Стандартный размер по умолчанию – 3. Пример применения атрибута size: <p><font size =5>управление размерами шрифтов </font></p>. В тэге <font> можно задавать относительные размеры шрифтов. Для этого перед значением размера добавляется знак «+» или «-», говорящие о том, что браузер должен увеличить или уменьшить размер шрифта по умолчанию на соответствующую величину.
Атрибут color. В браузерах используется 16 предопределенных цветов. Есть 2 способа представления цвета текста:
С помощью шестнадцатеричных чисел
С помощью имени цвета, определенного в спецификации языка.
Если шестнадцатеричные числа записываются как значения атрибута, то пред ними должен быть помещен символ «#».
Цвет | шестнадцатеричное представление |
black | |
silver | C0C0C0 |
gray | |
white | FFFFFF |
maroon | |
red | FF0000 |
purple | |
fuchsia | FF00FF |
green | |
lime | 00FF00 |
olive | |
yellow | FFFF00 |
navy | |
blue | 0000FF |
teal | |
aqua | 00FFFF |
Атрибут face. Изменить гарнитуру шрифта можно с помощью атрибута, значениями которого являются предопределенные имена гарнитур. Шрифт с объявленной гарнитурой должен быть установлен на компьютере посетителя узла, иначе он не увидит его. В атрибуте face автор может определить несколько значений, разделив их запятыми. Браузер сначала ищет первый шрифт, затем, если не находит его, пытается найти второй и т.д.
Тэг basefont. Используется как средство задания размера, цвета и гарнитуры шрифта по умолчанию. Например
<body> <basefont face= “ARIAL” size= “3” color= “000000”> </body>.
Тэг <body<bgcolor=…..> устанавливает цвет фона документа, используя значения цветов по аналогии с выбором цвета текста.
Вставка изображений в документ
На WEB-страницах могут размещаться графические файлы форматов GIF JPG. Преобразование может выполняться с помощью графических редакторов Editor и Photoshop. На титульном листе целесообразно помещать картинку посвященную теме сайта.
Тег <img scr-“computer.gif”> - файл размещен на локальном компьютере в том же каталоге.
Тег <img scr-“C:\computer\computer.gif”> - в другом каталоге локального компьютера
Тег <img scr-“https://www.server.ru/computer.gif”> - на удаленном сервере в интернете.