Полезный справочный материал
Таблица основных тегов HTML-документа. Теги форматирования шрифта и абзаца. Создание списков.
| Назначение | Вид тегов | Примечание |
| Общая структура документа HTML | ||
| Тип документа | <HTML></HTML> | Начало и конец документа |
| Имя документа | <HEAD></HEAD> | Не отображается броузером |
| Заголовок | <TITLE></TITLE> | Содержимое строки заголовка окна броузера |
| Тело документа | <BODY></BODY> | Содержимое WEB-страницы |
| Структура содержания документа | ||
| Внутренние заголовки различного уровня | <H№> текст </H№> | Где № – номер уровня заголовка (от 1 до 6). Например, <H1>…</H1> - заголовок 1-го уровня. |
| Заголовок с выравниванием | <H№ ALIGN=”LEFT| CENTER| RIGHT”> текст </H№> | LEFT - по левому краю, CENTER - по центру, RIGHT - по правому краю. |
| Форматирование абзацев | ||
| Создание абзаца (параграфа) | <P> текст </P> | Абзацы отделяются двойным межстрочным интервалом |
| Перевод строки внутри абзаца | <BR> | Одиночный тег |
| Выравнивание абзаца | <P ALIGN=”LEFT”>текст </P> <P ALIGN= ”CENTER”>текст </P> <P ALIGN=”RIGHT”> текст</P> <P ALIGN=”JUSTIFY”> текст </P> | LEFT - по левому краю CENTER - по центру RIGHT - по правому краю JUSTIFY – по ширине |
| Разделительная горизонтальная линия между абзацами | <HR SIZE=«?»> | Одиночный тег. «?» - толщина линии в пикселях. Толщину линии можно не указывать. |
| Форматирование шрифта | ||
| Жирный | <B> текст </B> | <B>Жирный</B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<S> |
| Курсив | <I> текст </I> | |
| Подчеркнутый | <U> текст </U> | |
| Перечеркнутый | <S> текст </S> | |
| Увеличенный размер | <BIG> текст </BIG > | |
| Уменьшенный размер | <SMALL> текст </SMALL> | |
| Верхний индекс | <SUP> текст </SUP> | |
| Нижний индекс | <SUB> текст </SUB> | |
| Размер шрифта | <FONT SIZE=«?»> текст </FONT> | ?- значения от 1 до 7 или относительное изменение (например, +2) |
| Базовый размер шрифта | <BASEFONT SIZE=«?»> | Одиночный тег ? – размер от 1 до 7; по умолчанию равен 3 и задается для всего документа в целом |
| Гарнитура шрифта | <FONT FASE=«название1, название2, …»> текст </FONT> | Текст оформляется первым, установленным на компьютере шрифтом из списка названий |
| Цвет шрифта | <FONT COLOR=”$$$$$$”> текст </FONT> | Цвет задается либо ключевым словом, либо шестнадцатеричным кодом с символом # RED –красный, #FF0000 – шестнадцатеричный код – красного цвета |
| Создание списков | ||
| Нумерованный | <OL>элементы списка</OL> | <OL> <LI>Элемент списка 1 </LI> <LI>Элемент списка 2</LI> <LI>Элемент списка 3</LI> </OL> |
| Маркированный | <UL> элементы списка </UL> | |
| Элемент списка | <LI> элементы списка </LI> |
Таблица основных цветов
| Цвет | Color's name | Шестнадцатеричный код цвета | ||
| Red | Green | Blue | ||
| Черный | black | |||
| Темно-синий | navy | |||
| Голубой | blue | FF | ||
| Зеленый | green | |||
| Темно-зеленый | teal | |||
| Салатовый | lime | FF | ||
| Бледно-голубой | aqua | FF | FF | |
| Вишневый | maroon | |||
| Фиолетовый | purple | |||
| Оливковый | olive | |||
| Серый | gray | |||
| Светло-серый | silver | C0 | C0 | C0 |
| Красный | red | FF | ||
| Лиловый | fushsia | FF | FF | |
| Желтый | yellow | FF | FF | |
| Белый | white | FF | FF | FF |
Основные теги вставки рисунков, закладок и гиперссылок
| Вставка изображений | ||
| Вставка графического файла | <IMG SRC=”файл” WIDTH=”ширина” HEIGHT=”высота” > | Пример: <IMG SRC=”grafica.gif” WIDTH=”550” HEIGHT=”240” ALIGN=” right” ALT=”Графический файл”> |
| Выравнивание картинки относительно текста | <IMG SRC=”файл” ALIGN=”left|right|top|bottom”> | |
| Вывод текста всплывающей подсказки при наведении курсора мыши на рисунок | <IMG SRC=”файл” ALT=”текст”> | |
| Вставка ссылок | ||
| Ссылки на другую страницу | <A HREF=” страница”> текст </A> | <A HREF=”str2.htm”> Ссылка1</A> |
| Ссылка на закладку в другом документе | <A HREF=” страница # имя закладки”> текст</A> | <A HREF=” index.htm #met1”> На главную страницу </A>” |
| Ссылка на закладку в том же документе | <A HREF=”#имя закладки ”> текст </A> | <A HREF=” #metka1”> Ссылка2</A> |
| Определить закладку | <A NAME=”имя закладки”>текст</A> | <A NAME=”metka1”></A> |
| Цвет фона, текста и ссылок | ||
| Фоновая картинка | <BODY BACKGROUND=”файл рисунка”> | <BODY BACKGROUND =”grafica.gif” TEXT=”black” (черный) LINK=”#FF0000” (красный) VLINK=”#FFFF00” (желтый) ALINK=”#FFFFFF” (белый) </BODY> |
| Цвет фона | <BODY BGCOLOR=”#$$$$$$”> | |
| Цвет текста | <BODY TEXT=”#$$$$$$”> | |
| Цвет ссылки | <BODY LINK=”#$$$$$$”> | |
| Цвет пройденной ссылки | <BODY VLINK=”#$$$$$$”> | |
| Цвет активной ссылки | <BODY ALINK=”#$$$$$$”> |
| 0000cc | 0000ff | ||||
| 3300cc | 3300ff | ||||
| 6600cc | 6600ff | ||||
| 9900cc | 9900ff | ||||
| cc0000 | cc0033 | cc0066 | cc0099 | cc00cc | cc00ff |
| ff0000 | ff0033 | ff0066 | ff0099 | ff00cc | ff00ff |
| 0033cc | 0033ff | ||||
| 3333cc | 3333ff | ||||
| 6633cc | 6633ff | ||||
| 9933cc | 9933ff | ||||
| cc3300 | cc3333 | cc3366 | cc3399 | cc33cc | cc33ff |
| ff3300 | ff3333 | ff3366 | ff3399 | ff33cc | ff33ff |
| 0066cc | 0066ff | ||||
| 3366cc | 3366ff | ||||
| 6666cc | 6666ff | ||||
| 9966cc | 9966ff | ||||
| cc6600 | cc6633 | cc6666 | cc6699 | cc66cc | cc66ff |
| ff6600 | ff6633 | ff6666 | ff6699 | ff66cc | ff66ff |
| 0099cc | 0099ff | ||||
| 3399cc | 3399ff | ||||
| 6699cc | 6699ff | ||||
| 9999cc | 9999ff | ||||
| cc9900 | cc9933 | cc9966 | cc9999 | cc99cc | cc99ff |
| ff9900 | ff9933 | ff9966 | ff9999 | ff99cc | ff99ff |
| 00cc00 | 00cc33 | 00cc66 | 00cc99 | 00cccc | 00ccff |
| 33cc00 | 33cc33 | 33cc66 | 33cc99 | 33cccc | 33ccff |
| 66cc00 | 66cc33 | 66cc66 | 66cc99 | 66cccc | 66ccff |
| 99cc00 | 99cc33 | 99cc66 | 99cc99 | 99cccc | 99ccff |
| cccc00 | cccc33 | cccc66 | cccc99 | cccccc | ccccff |
| ffcc00 | ffcc33 | ffcc66 | ffcc99 | ffcccc | ffccff |
| 00ff00 | 00ff33 | 00ff66 | 00ff99 | 00ffcc | 00ffff |
| 33ff00 | 33ff33 | 33ff66 | 33ff99 | 33ffcc | 33ffff |
| 66ff00 | 66ff33 | 66ff66 | 66ff99 | 66ffcc | 66ffff |
| 99ff00 | 99ff33 | 99ff66 | 99ff99 | 99ffcc | 99ffff |
| ccff00 | ccff33 | ccff66 | ccff99 | ccffcc | ccffff |
| ffff00 | ffff33 | ffff66 | ffff99 | ffffcc | ffffff |
| Красный и Зеленый – добавляем Синий | |||||
| 00cc00 | 00ff00 | ||||
| 33cc00 | 33ff00 | ||||
| 66cc00 | 66ff00 | ||||
| 99cc00 | 99ff00 | ||||
| cc0000 | cc3300 | cc6600 | cc9900 | Cccc00 | ccff00 |
| ff0000 | ff3300 | ff6600 | ff9900 | ffcc00 | ffff00 |
| 00cc33 | 00ff33 | ||||
| 33cc33 | 33ff33 | ||||
| 66cc33 | 66ff33 | ||||
| 99cc33 | 99ff33 | ||||
| cc0033 | cc3333 | cc6633 | cc9933 | Cccc33 | ccff33 |
| ff0033 | ff3333 | ff6633 | ff9933 | ffcc33 | ffff33 |
| 00cc66 | 00ff66 | ||||
| 33cc66 | 33ff66 | ||||
| 66cc66 | 66ff66 | ||||
| 99cc66 | 99ff66 | ||||
| cc0066 | cc3366 | cc6666 | cc9966 | Cccc66 | ccff66 |
| ff0066 | ff3366 | ff6666 | ff9966 | ffcc66 | ffff66 |
| 00cc99 | 00ff99 | ||||
| 33cc99 | 33ff99 | ||||
| 66cc99 | 66ff99 | ||||
| 99cc99 | 99ff99 | ||||
| cc0099 | cc3399 | cc6699 | cc9999 | Cccc99 | ccff99 |
| ff0099 | ff3399 | ff6699 | ff9999 | ffcc99 | ffff99 |
| 0000cc | 0033cc | 0066cc | 0099cc | 00cccc | 00ffcc |
| 3300cc | 3333cc | 3366cc | 3399cc | 33cccc | 33ffcc |
| 6600cc | 6633cc | 6666cc | 6699cc | 66cccc | 66ffcc |
| 9900cc | 9933cc | 9966cc | 9999cc | 99cccc | 99ffcc |
| cc00cc | cc33cc | cc66cc | cc99cc | cccccc | ccffcc |
| ff00cc | ff33cc | ff66cc | ff99cc | ffcccc | ffffcc |
| 0000ff | 0033ff | 0066ff | 0099ff | 00ccff | 00ffff |
| 3300ff | 3333ff | 3366ff | 3399ff | 33ccff | 33ffff |
| 6600ff | 6633ff | 6666ff | 6699ff | 66ccff | 66ffff |
| 9900ff | 9933ff | 9966ff | 9999ff | 99ccff | 99ffff |
| cc00ff | cc33ff | cc66ff | cc99ff | ccccff | ccffff |
| ff00ff | ff33ff | ff66ff | ff99ff | ffccff | ffffff |
| 0000cc | 0000ff | ||||
| 0033cc | 0033ff | ||||
| 0066cc | 0066ff | ||||
| 0099cc | 0099ff | ||||
| 00cc00 | 00cc33 | 00cc66 | 00cc99 | 00cccc | 00ccff |
| 00ff00 | 00ff33 | 00ff66 | 00ff99 | 00ffcc | 00ffff |
| 3300cc | 3300ff | ||||
| 3333cc | 3333ff | ||||
| 3366cc | 3366ff | ||||
| 3399cc | 3399ff | ||||
| 33cc00 | 33cc33 | 33cc66 | 33cc99 | 33cccc | 33ccff |
| 33ff00 | 33ff33 | 33ff66 | 33ff99 | 33ffcc | 33ffff |
| 6600cc | 6600ff | ||||
| 6633cc | 6633ff | ||||
| 6666cc | 6666ff | ||||
| 6699cc | 6699ff | ||||
| 66cc00 | 66cc33 | 66cc66 | 66cc99 | 66cccc | 66ccff |
| 66ff00 | 66ff33 | 66ff66 | 66ff99 | 66ffcc | 66ffff |
| 9900cc | 9900ff | ||||
| 9933cc | 9933ff | ||||
| 9966cc | 9966ff | ||||
| 9999cc | 9999ff | ||||
| 99cc00 | 99cc33 | 99cc66 | 99cc99 | 99cccc | 99ccff |
| 99ff00 | 99ff33 | 99ff66 | 99ff99 | 99ffcc | 99ffff |
| cc0000 | cc0033 | cc0066 | cc0099 | cc00cc | cc00ff |
| cc3300 | cc3333 | cc3366 | cc3399 | cc33cc | cc33ff |
| cc6600 | cc6633 | cc6666 | cc6699 | cc66cc | cc66ff |
| cc9900 | cc9933 | cc9966 | cc9999 | cc99cc | cc99ff |
| cccc00 | cccc33 | cccc66 | cccc99 | cccccc | ccccff |
| ccff00 | ccff33 | ccff66 | ccff99 | ccffcc | ccffff |
| ff0000 | ff0033 | ff0066 | ff0099 | ff00cc | ff00ff |
| ff3300 | ff3333 | ff3366 | ff3399 | ff33cc | ff33ff |
| ff6600 | ff6633 | ff6666 | ff6699 | ff66cc | ff66ff |
| ff9900 | ff9933 | ff9966 | ff9999 | ff99cc | ff99ff |
| ffcc00 | ffcc33 | ffcc66 | ffcc99 | ffcccc | ffccff |
| ffff00 | ffff33 | ffff66 | ffff99 | ffffcc | ffffff |
Теги оформления таблиц
| Определить таблицу | <TABLE></TABLE> | Пример
<TABLE border=”1” align =«CENTER» width=«50%» >
<TR>
<TH >Товар</TH>
<TH>Цена</TH>
</TR>
<TR>
<TD>Радиотелефон</TD>
<TD>2000 </TD>
</TR>
</TABLE>
| ||||
| Окантовка таблицы | <TABLE BORDER =”?” </TABLE> | |||||
| Строка таблицы | <TR> </TR> | |||||
| Выравнивание | <TR ALIGN=left | right | center | middle | bottom > | |||||
| Ячейка таблицы | <TD></TD> | |||||
| Выравнивание по горизонтали | <TD ALIGN=LEFT | RIGHT | CENTER> | |||||
| Выравнивание по вертикали | <TD VALIGN = TOP|MIDDLE| BOTTOM> | |||||
| Установка ширины ячейки (в пикселях или %) | <TD WIDTH=«?»> | |||||
| Заливка цветом ячейки | <TD BGCOLOR = «# цвет»> </TD> | <TD BGCOLOR = «#FF0000»> </TD> красный цвет | ||||
| Заголовок столбца или строки | <TH>текст </TH> | Текст в ячейке выравнивается по центру, устанавливается жирный шрифт |
Лабораторная работа.
Задания и ход выполнения:
1. На жестком диске создать папку с именем HTML.
2. Открыть текстовый редактор "Блокнот".
3. В окне блокнота создать документ, в нем слово « Информатика ».
4. Сохранить документ под именем index.html, обязательно с расширением html в папке HTML. Увидеть расширение файла можно, изменив настройку меню Вид Проводника
5. Открыть index.html с помощью любого из браузеров, установленный в системе, например, Internet Explorer, с помощью контекстного меню (правая кнопка мыши).
6. Перейти в окно редактора Блокнот и добавить предложение «Информатика (фр. Informatique; англ. Computer science) — наука о методах и процессах сбора, хранения, обработки, передачи, анализа и оценки информации с применением компьютерных технологий, обеспечивающих возможность её использования для принятия решений».
7. Сохраните изменения.
8. Перейти в окно браузера. Сейчас, что бы просмотреть внесенные изменения, необходимо нажать кнопку "Обновить". 
9. В папке с именем HTML создать папку с именем css. В ней создать файл main.css аналогично тому, как создавали index.html с текстом:
h1 {
color: coral;
}
.green {
color: darkgreen;
text-decoration: underline;
}
.blue {
color: navy;
text-decoration: underline;
}
10. Перейти в папку HTML и далее работать в ней.
11. Разместите в папке HTML файлы М-1.jpg и фон РГСУ.jpg
12. Перейти в окно редактора Блокнот Изменить содержимое файла на следующее:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Про информатику</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<h1>Информатика</h1>
<h2 class="green">Определение</h2>
<p>Информатика (фр. Informatique; англ. Computer science) — наука о методах и процессах сбора, хранения, обработки,<br> передачи, анализа и оценки информации с применением компьютерных технологий,<br> обеспечивающих возможность её использования для принятия решений</p>
<h2 class="blue">Основные разделы Информатики</h2>
<ul type=”disc”>
<li> Теоретическая информатика</li>
<li> Прикладная информатика</li>
<li> Естественная информатика</li>
</ul>
<h2 class="blue">Исторический факт</h2>
<p> 4 декабря отмечается День российской информатики, так как в этот день в 1948 году <br> Государственный комитет Совета министров СССР по внедрению передовой техники в народное хозяйство зарегистрировал за номером 10 475 изобретение <br> И. С. Брука и Б. И. Рамеева — цифровую электронную вычислительную машину M-1 </p>
<img src="./М-1.jpg" width="100">
</body>
</html>
.
13. Установить цвет фона документа на свой вкус.
14. Добавьте раздел с таблицей, посмотрите на результат. Обратите внимание, как вставить гиперссылку:
<h2 class="blue">Рейтинг языков программирования в 2020 году</h2>
<p>Институт инженеров электротехники и электроники (IEEE) разместил на своем сайте <br>
<a href="https://services10.ieee.org/as/authorization.oauth2?response_type=code&client_id=PF_AS_FOR_PA&redirect_uri=https%3A%2F%2Fspectrum.ieee.org%2Fpa%2Foidc%2Fcb&state=eyJ6aXAiOiJERUYiLCJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2Iiwia2lkIjoiZnMiLCJzdWZmaXgiOiJ1MXBmSFQuMTYwNTk1NDQ2MiJ9..R4tOVARXH6npQJODGP0PzA.gUKU2SVk-LSBlxRk9Zk90RrND9KIxOBa0NEi8c6l_vX14oLNCHTO8_H3t207C6q5LvCcuC9hhzuZOMdNfWcl-YLT_7I9V1_ubCV7G4cYfVGJ3Lnx8UW2udct88CyLMDwE9UXGpi7WuTzRooU7Y6k9OTsQ1gI5lfCCpoQlgv0MNzu38op5DheKEvANVR1ve88.Iciy475R1iDI3zJujwuy9g&nonce=Y9awi865EOAqEp8gxaoUuByB9Aw3dP6KPDW4p0czHvs&acr_values=spe%20sts%20stm%20prf%20crt%20msp%20col%20otk%20cmp%20cmc&scope=openid%20profile%20address%20email%20phone&vnd_pi_requested_resource=https%3A%2F%2Fspectrum.ieee.org%2Fuser%2Flogin%3FredirectUrl%3D%2Fstatic%2Finteractive-the-top-programming-languages-2020%26referrer%3D%252F&vnd_pi_application_name=SPECTRUM_2019"> рейтинг языков программирования </a>
за 2020 год. <br>Тройка лидеров не изменилась: это Python, Java и C.</p>
<br>
<table border=”1” width=400 cellspacing="0" cellpadding="0" align="left">
<caption align="center">
<strong>Рейтинг языков программирования </strong>
</caption>
<tr>
<th width=300> Название</th>
<td width=300> Рейтинг</td>
</tr>
<tr>
<th width=300> Python</th>
<td width=300> 100</td>
</tr>
<tr>
<th width=300> Java</th>
<td width=300> 95.3</td>
</tr>
<tr>
<th width=300> C</th>
<td width=300> 94.4</td>
</tr>
<tr>
<th width=300> C++</th>
<td width=300> 87.0</td>
</tr>
</table>
15. Добавить строчку с языком программирования JavaScript, htqnbyu rjnjhjuj 79.5
16. Изменить цвет текста заголовков на свой вкус, отредактировав файл.
17. Изменить цвет фона страницы
18. Сохранить результаты, сделать Практическое задание 4.