Материал: Web-технологии. HTML, CSS. Справочный материал
Справочный материал
к теме «Основы языка HTML»
Основные тэги HTML
1.<html> </html> - начало и конец HTML-документа.
2.<head> </head> - заголовок HTML-документа.
3.<title> </title> - текст, выводимый в заголовке окна браузера
4.<meta http-equiv=”Content-Type” content=”text/html; charset=Windows-1251”> -
указание кодировки символов (вариант для русского текста в Windows)
5.<body bgcolor=”color” background=”filename” text=”textcolor”> </body> - определитель границ и основных параметров тела документа. bgcolor – цвет фона документа, background – URL-адрес графического файла, используемого в качестве фона документа, text – цвет текста. Цвета выбираются из таблицы цветов
6.<p align=”a”> </p> - определитель абзаца. align – выравнивание текста в абзаце(left, right, center, justify)
7.<pre> </pre> - предварительно отформатированный текст; пробелы, отступы в начале строк сохраняются
8.<h1></h1> .. <h6></h6> - заголовки
9.<blockquote> </blockquote> - отделяет фрагмент текста пустыми строками и увеличивает отступы слева
10.<br> - перенос текста на следующую строку
11.<nobr> </nobr> - текст, размещаемый в одной строке
12.<strike> </strike> - перечёркнутый шрифт
13.<hr align=”a” size=”s” width=”w” color=”c” noshade> - горизонтальная линия; align –
выравнивание линии, size – высота линии в пикселях, width – ширина линии в пикселях или в процентах от ширины окна браузера, color – цвет линии по таблице цветов, noshade – отменяет рельефность линии
14.<img src=”s” width=”w” height=”h” border=”b” hspace=”hs” vspace=”vs” alt=”alt” align=”a”> - задаёт изображение; src – URL-адрес файла, хранящего изображение (обязательный параметр), width и height – ширина и высота изображения в пикселях, border – толщина рамки вокруг картинки, hspace и vspace – минимальное расстояние по горизонтали и вертикали между картинкой и находящимися рядом объектами, alt – текст, выводящийся на экран до полной загрузки картинки, align – выравнивание картинки относительно текста (top, texttop, middle, absmiddle, bottom, asbbottom, left, right)
15.<a href=”h”> </a> - определяет текстовый указатель ссылки, href – URL-адрес документа, на который указывает ссылка
16.<ul> </ul> - задаёт маркированный список
17.<ol> </ol> - задаёт нумерованный список
18.<li> - определяет элемент списка
19.<table border=”b” cellspacing=”cs” cellpadding=”cp” width=”w” height=”h” align=”a”> </table> - определяет начало, конец таблицы и её параметры, border – толщина рамки вокруг всей таблицы, cellspacing – промежуток между ячейками в пикселях, cellpadding – промежуток между содержимым ячейки и границей, width и height – высота и ширина таблицы, задаётся в пикселях или в процентах к размеру окна браузера, align – выравнивание таблицы в окне (left, right)
20.<caption> </caption> - заголовок таблицы, размещается внутри тэга table
21.<tr align=”a” valign=”v”> </tr> - задаёт начало и конец строки в таблице, align и valign
– горизонтальное (left, right, center) и вертикальное (top, middle, bottom, baseline)
выравнивание текста
22.<td align=”a” valign=”v” colspan=”c” rowspan=”r”> </td> - задаёт границы ячейки с данными в таблице, align и valign – горизонтальное (left, right, center) и вертикальное
1
(top, middle, bottom, baseline) выравнивание текста, colspan и rowspan – количество объединяемых ячеек по горизонтали и по вертикали
23.<th align=”a” valign=”v” colspan=”c” rowspan=”r”> </th> - задаёт границы ячейки с заголовками в таблице, align и valign – горизонтальное (left, right, center) и
вертикальное (top, middle, bottom, baseline) выравнивание текста, colspan и rowspan –
количество объединяемых ячеек по горизонтали и по вертикали
Тэги физического форматирования текста
1.<b> </b> - жирный шрифт
2.<i> </i> - курсив
3.<u> </u> - подчёркнутый шрифт
4.<tt> </tt> - шрифт с символами одинаковой ширины
5.<strike> </strike> - перечёркнутый шрифт
6.<sub> </sub> - нижний индекс
7.<sup> </sup> - верхний индекс
8.<font size=”s” color=”c” face=”f”> </font> - определитель формата символов. size –
размер символов, задаётся в абсолютных (1..7) или относительных (-2, -1, +1, +2) единицах, color – цвет текста в абзаце, задаётся по таблице цветов, face – название шрифта (Times New Roman, Arial и т.д.)
Тэги логического форматирования текста
1.<acronym title=”t”> </acronym> - используется для отметки аббревиатур, title – текст, поясняющий аббревиатуру
2.<cite> </cite> - цитата, также может использоваться для выделения названий книг, статей; обычно такой текст выводится на экран курсивом
3.<code> </code> - используется для отметки небольшого фрагмента программного кода, обычно этому тэгу соответствует шрифт с символами одинаковой ширины, пробелы в начале строки игнорируются
4.<del> </del> - помечает так называемый “удалённый” текст, который отображается перечёркнутыми символами
5.<dfn> </dfn> - помечет фрагмент как определение (DeFinitioN), текст отображается курсивом
6.<em> </em> - используется для выделения важных фрагментов текста (EMphasis – выделение, подчёркивание), обычно курсив
7.<kbd> </kbd> - отмечает текст как вводимый с клавиатуры, отображение текста осуществляется шрифтом с символами одинаковой ширины
8.<q> </q> - помечает короткие цитаты, размещаемые в одной строке, обычно отображается курсивом
9.<samp> </samp> - помечает текст как образец, отображается шрифтом с символами одинаковой ширины
10.<strong> </strong> - помечает наиболее важный текст, текст отображается полужирным шрифтом
11.<var> </var> - отмечает имена переменных, обычно использует курсив
12.<adress> </adress> - применяется для идентификации автора документа и для указания адреса автора
2
Специальные символы HTML
Запись специального символа |
Назначение |
< |
Знак “меньше” |
> |
Знак “больше” |
  |
Неразрывный пробел |
© |
Знак copyright |
& |
Амперсанд |
" |
Кавычки |
Названия и коды цветов для HTML
№ |
Название |
Шестнадцатерич |
Десятичные значения |
|||
цвета |
ное значение |
Красный |
Зелёный |
Синий |
||
|
||||||
1 |
aqua (cyan) |
#00FFFF |
0 |
255 |
255 |
|
2 |
black |
#000000 |
0 |
0 |
0 |
|
3 |
blue |
#0000FF |
0 |
0 |
255 |
|
4 |
brown |
#A52A2A |
165 |
42 |
42 |
|
5 |
coral |
#FF7F50 |
255 |
127 |
80 |
|
6 |
gold |
#FFD700 |
255 |
215 |
0 |
|
7 |
gray |
#808080 |
128 |
128 |
128 |
|
8 |
green |
#008000 |
0 |
128 |
0 |
|
9 |
magenta |
#FF00FF |
255 |
0 |
255 |
|
10 |
orange |
#FFA500 |
255 |
165 |
0 |
|
11 |
red |
#FF0000 |
255 |
0 |
0 |
|
12 |
yellow |
#FFFF00 |
255 |
255 |
0 |
|
13 |
white |
#FFFFFF |
255 |
255 |
255 |
|
14 |
lightgrey |
#D3D3D3 |
211 |
211 |
211 |
|
15 |
lightskyblue |
#87CEFA |
135 |
206 |
250 |
|
Создание гиперссылок
Для создания гиперссылок используется тэг A. Параметры тэга <A>:
href = “адрес_документа”
Адрес документа записывается в соответствии с существующими стандартами Интернет-адресации и представляет собой URL-адрес (Uniform Resource Locator) или URIадрес (Universal Resource Identifier), что в сущности одно и то же. Структура URI:
Протокол://Домен/Путь/Файл#Метка
Пример: <A href = http://www.abc.com/mypage.htm#second_page> Текст ссылки</A> http – протокол, используемый в сети Интернет для передачи html-документов. www.abc.com - имя домена,
mypage.htm - имя файла,
second_page – метка в файле mypage.htm.
Для локальных адресов указываются только путь, файл и, при необходимости , метка внутри файла.
name – параметр, применяемый для определения меток в документе: <A name = second_page></A>
Метка никак не отображается на экране. Переход внутри файла на метку:
<A href = #second_page>Переход на вторую страницу</A> Переход в начало файла:
<A href = #top>В начало</A> Используемая здесь метка top – стандартная, определять её не надо.
3
Создание фреймовой структуры
1. <FRAMESET> </FRAMESET> - делит экран на области для вывода информации (фреймы).
<FRAMESET rows = "*,2*"> - делит экран на две области по вертикали в пропорции 1:2 по высоте.
<FRAMESET cols = "*,2*"> - делит экран на две области по горизонтали в пропорции 1:2 по ширине.
<FRAMESET cols = "20,*,30> - делит экран на три области по вертикали, первая область высотой 20 пикселей, третья – 30 пикселей, вторая занимает весь остальной экран.
<FRAMESET rows = "25%,50%,25%"> - делит экран на три области по горизонтали, ширина каждой области задаётся в процентах от высоты экрана.
2.<FRAME> </FRAME> - определяет свойства фрейма Параметры тэга <FRAME>:
src – название HTML-документа, отображаемого в данном фрейме (URI-адрес),
name – имя фрейма (name="A", где "A" – имя фрейма, данное пользователем; также существуют стандартные имена фреймов:
name="_blank" – отображает документ в новом окне,
name="_self" - отображает документ в том же окне, в котором находится текущий документ,
name="_parent" – отображает документ в родительском окне, при этом речь идёт о структуре с вложенными фреймами, т.е. о иерархической структуре фреймов, name="_top" – отображение документа в наивысшем в иерархии окне фрейма, если такого нет, то в текущем окне фрейма,
frameborder – показ или сокрытие границ фрейма (frameborder=1 – отображает границу, frameborder=0 – прячет границу),
noresize – запрет на изменение размеров фрейма пользователем с помощью мыши, по умолчанию изменять размеры мышью можно,
scrolling – показ полос прокрутки (scrolling=yes – полосы прокрутки показываются всегда, scrolling=no – полосы прокрутки никогда не включаются, scrolling=auto полосы прокрутки включаются, когда информация не умещается в окне фрейма),
marginheight – расстояние между содержимым фрейма и верхней (нижней) границей (marginheight=n, где n – расстояние в пикселях),
marginwidth – расстояние между содержимым фрейма и левым (правым) краем (marginwidth=n, где n – расстояние в пикселях).
3.<NOFRAMES> </NOFRAMES> - тэг содержит описание информации, отображаемой браузером, если он не поддерживает фреймы. Этот текст игнорируется браузерами, способными работать с фреймами.
Каскадные таблицы стилей CSS
CSS (Cascading Style Sheets) – эффективное средство автоматизации стилевого оформления HTML-документов (цвет, шрифт, отступы, интервалы, размеры элементов и т.д.). Стиль – это набор значений атрибутов, определяющих оформление электронного документа, его представление на экране. Применение стилей для оформления Webстраниц позволяет осуществить единообразное оформление однотипных элементов текста, упрощает изменение внешнего вида документа в целом и отдельных его элементов.
Определение стиля может быть:
Собственным для каждого элемента документа, например, абзаца, заголовка; Локальным для всего документа; Глобальным (внешним) для нескольких документов.
Стиль задаётся с помощью таблицы стилей. Любая таблица стилей состоит из набора правил. Правило состоит из двух частей: селектора и определения:
4
p { color:red } ,
где p – селектор, а текст в скобках { } – определение.
Способы определения стилей
Собственный стиль для конкретного элемента документа определяется атрибутом style этого элемента и называется встраивание таблицы стилей:
<p style="font-size:12pt; color:black">Текст абзаца</p>
Локальное определение стиля задаётся тэгом style, который помещается в тэг head, и действует в пределах этого документа. В тэг style помещаются правила таблицы стилей. Такое определение стиля называется внедрение таблицы стилей:
<head>
........
<style type="text/css">
/ * Здесь можно вставлять такой комментарий! Вложенные комментарии не допускаются. * /
body{ |
background-color:grey; |
|
|
|
font-size:14pt } |
/* Первое правило*/ |
|
h1{ |
background-color:white; |
|
|
|
color:blue |
} |
/* Второе правило*/ |
</style>
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>
</body>
</html>
Локальное определение стиля также можно выполнить с помощью команды @import, которая позволяет импортировать элементы стиля из внешнего файла *.css (импорт таблицы стилей), команда помещается в тэг style раньше других правил таблицы стилей. Внешний файл *.css содержит набор правил таблицы стилей:
my.css :
body{ |
background-color:grey; font-size:14pt |
} |
|
p{ |
font-size:11pt; font-face:Arial |
} |
|
my.htm:
<head> |
|
........ |
|
<style type="text/css"> |
|
@import url(my.css) ; |
/* импорт таблицы стилей */ |
h1{background-color:white; color:blue} |
/* внедрённое правило */ |
</style> |
|
Можно импортировать несколько таблиц в одном документе. |
|
Глобальное (внешнее) определение стиля помещается в отдельный файл *.css, который
содержит набор правил таблицы стилей и подключается тэгом link в тэге head нескольких документов, которые должны иметь общие правила оформления, такой способ задания стиля называется связывание:
<head>
......
<link rel="stylesheet" type="text/css" href="my.css"> </head>
5