Основные теги вставки рисунков, закладок и гиперссылок

Полезный справочный материал

Таблица основных тегов 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> ~~Перечеркнутый~~</S> <SUP> ^{Верхний индекс} </SUP> <SUB> _{Нижний индекс} </SUB>
Курсив	<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 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>

<head>

<title>Про информатику</title>

</head>

<body>

<h1>Информатика</h1>

<h2 class="green">Определение</h2>

<p>Информатика (фр. Informatique; англ. Computer science) — наука о методах и процессах сбора, хранения, обработки,<br> передачи, анализа и оценки информации с применением компьютерных технологий,<br> обеспечивающих возможность её использования для принятия решений</p>

<h2 class="blue">Основные разделы Информатики</h2>

<li> Теоретическая информатика</li>

<li> Прикладная информатика</li>

<li> Естественная информатика</li>

</ul>

<h2 class="blue">Исторический факт</h2>

<p> 4 декабря отмечается День российской информатики, так как в этот день в 1948 году <br> Государственный комитет Совета министров СССР по внедрению передовой техники в народное хозяйство зарегистрировал за номером 10 475 изобретение <br> И. С. Брука и Б. И. Рамеева — цифровую электронную вычислительную машину M-1 </p>

</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>

<strong>Рейтинг языков программирования </strong>

</caption>

<tr>

<th width=300> Название</th>

<td width=300> Рейтинг</td>

</tr>

<tr>

<th width=300> Python</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

15. Добавить строчку с языком программирования JavaScript, htqnbyu rjnjhjuj 79.5

16. Изменить цвет текста заголовков на свой вкус, отредактировав файл.

17. Изменить цвет фона страницы

18. Сохранить результаты, сделать Практическое задание 4.

Основные теги вставки рисунков, закладок и гиперссылок

Поиск по сайту