Презентация "Основные теги HTML" разработана для уроков информатики в 9 классе или для дополнительных занятий по созданию Web-страниц. Содержит краткую информацию по основным тегам HTML, структуру web-страницы.

Язык HTML

— HTML не является языком программирования, он предназначен для разметки текстовых документов. HTML состоит из тегов.

— Основным назначением HTML тегов является указание области действия тех или иных правил разметки документов. Большая часть HTML тегов состоит из двух частей:

открывающий тег <...> и закрывающий тег

</...>.

Структура HTML-документа

<html>

<head>

<title>Моя первая HTML-страница</title>

</head>

<body>

<H1>Первая страница</H1>

<p>Здравствуйте!</p>

<IMG SRC=“foto.jpg” ALT=“Фото”>

</body>

</html>

Теги и атрибуты

Тег – код языка HTML , с помощью которого выполнятся разметка исходного текста. Тег записывается в угловых скобках.

Имя атрибута

Имя тега Значение атрибута

<H3 ALIGN = CENTER> Страница должна иметь заголовок </H3>

Атрибут Содержимое элемента Закрывающий

тег

Теги не отображаются сами, а влияют на способ отображения документа. Атрибуты – свойства тегов.

Теги структуры

<HTML> Первый тег, сообщает веб-браузеру, что документ написан на языке HTML.

<HEAD> Этот тег указывает на начало области заголовка Web-страницы. <TITLE> Структура Web-страницы</title> Обязательный контейнер, содержащий текст заголовка Web-страницы, отображается в заголовке окна браузера.

</head> Конец области заголовка Web-страницы.

<BODY > Тело Web-страницы.

</ BODY >

</ HTML > Конец HTML-документа.

Уровни заголовков

Заголовки позволяют структурно разделить текст на разделы.

<H1> Заголовок первого уровня </ H1>

<H2> Заголовок второго уровня </ H3>

………..

<H6> Самый маленький заголовок</ H6>

Атрибут ALIGN – выравнивание управляет горизонтальным выравниванием, принимает значения:

LEFT - влево,

CENTER – по центру,

RIGHT – вправо,

JUSTIFY – по ширине.

<H1 ALIGN = CENTER > Заголовок первого уровня </ H1>

Форматирование текста

— <P> Текст </p> - абзац, атрибут ALIGN

— <br> - переход на новую строку

— <B> Текст </b> - выделение текста полужирным шрифтом

— <I>Текст </i> - выделение текста курсивом

— <Pre> Текст </pre> - предварительное форматирование текста.

— <Center> </Center> - выравнивание по центру

Форматирование текста

— <font>...</font> - с помощью данного тега осуществляется изменение внешнего вида текста. Имеет атрибуты:

— color - цвет

— face - шрифт

— size — размер

— Изменения вносятся после тега <body> перед основным текстом.

— Размер шрифта может принимать значения от 1 до 7, при этом 1 — самый маленький, 7 — самый большой.

<Font face= «Arial» size=3 color= «blue»> Это шрифт arial размером 3, цвет синий </font>

Списки

— Маркированный список:

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI> Третий пункт списка

</ul>

— Атрибут TYPE определяет внешний вид маркера:

— disc – закрашенные круглые маркеры (по умолчанию); — circle – не закрашенные круглые маркеры; — square – квадратные маркеры.

Списки

— Нумерованный список

<OL>

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI> Третий пункт списка

</ol>

— Атрибут TYPE определяет вид символа списка:

— А – прописные латинские буквы (A, B, C …);

— a – строчные латинские буквы (a, b, c …);

— I – большие римские цифры (I, II, III …);

— i – маленькие римские цифры (I, II, III …); — 1 – арабские цифры (1, 2, 3 …) – по умолчанию.

— START=n – начальное значение списка.

Гиперссылки

Гипертекстовая ссылка – основной элемент всех гипертекстовых систем, которые указывают на другой документ или на другую часть того же документа.

Задается тегами <A> </a>, обязательно наличие одного из атрибутов HREF и NAME.

Ссылка за пределы данного документа:

<A HREF="адрес ссылки">Текст для щелчка </a>

Атрибут NAME позволяет перейти к отмеченному якорем месту этого же документа:

<A NAME="#имя_якоря">Текст для щелчка </a>

Рисунки на WEB-страничке

— <IMG> - элемент для создания ссылки на графический файл (image). Он не содержит конечного тега - вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, решать задачи дизайна и т.д.

Необходимым атрибутом является src - указатель на файл графики:

— src="Ссылка на файл".

— Например:

<IMG src="bos2.gif"> - обычный рисунок

Рисунки на WEB-страничке

— Атрибуты тега <IMG>

— HEIGTH - длина

— WIDTH - ширина

— ALIGN - позиционирование на экране (top, middle, bottom, left, right)

—

BORDER - толщина обрамления

— VSPACE - размер пустого пространства над и под изображением

— HSPACE - размер пустого пространства слева и справа от изображения

<IMG SRC=“URL” ALT=“Текст” HEIGTH =“длина”>

Горизонтальная линия

— <HR> - горизонтальная линия (по умолчанию объемная с тенью) позволяет разделить длинный формально неограниченный текст на отдельные разделы.

— Атрибуты:

— SIZE – толщина линии в пикселях;

— WIDTH – ширина линии в пикселях или в процентах от ширины окна браузера;

— ALIGN – положение на экране (слева, справа, по центру);

— NOSHADE – линия представляется простой однотонной темной полосой.

Бегущая строка

<MARQUEE WIDTH=200 BGCOLOR =#99ccff>Внимание!!!</MARQUEE>

<MARQUEE ><IMG src=“Велосипедист.gif”></MARQUEE>

— Атрибуты:

— ALIGN – позволяет разместить текст в верхней TOP, средней MIDDLE, нижней BOTTON области бегущей строки;

— BEHAVIOR – управление бегущей строки на экране:

—

SCROLL – текст пересекает экран (по умолчанию);

— SLIDE – текст выдвигается на экран и останавливается;

— ALTERNATE – текст выдвигается, затем перемещается взад-вперед.

— BGCOLOR –цвет фона;

— DIRECTION – направление движения текста (LEFT, RIGHT);

— HEIGHT – высота в пикселях или в %;

— WIDTH – ширина в пикселях или в %;

— LOOP – количество проходов бегущей строки;

— SCROLLAMOUNT – скорость перемещения текста (1 – min, 2000-max); — SCROLLDELAY – время в млс для перерисовки текста.

Фон

— Атрибуты тега <BODY> — bgcolor - цвет

<Body bgcolor=“green” >

<Body bgcolor=“#00FF00”>

Фон

— Атрибуты тега <BODY>

— BACKGROUND – задает графическое изображение, которое, как кафельная плитка, заполнит фон документа.

<Body BACKGROUND =“путь_имя_файла.jpeg” >

— TOPMARGIN – верхняя граница в пикселях;

— BOTTOMMARGIN – нижняя граница в пикселях;

— LEFTMARGIN – левая граница в пикселях; — RIGHTMARGIN – правая граница в пикселях.

— LINK - цвет гиперссылки;

— ALINK – цвет активной гиперссылки.

Таблицы

— Таблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи:

выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением.

— При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элементы для описания каждой ячейки в с строке TD.

— <TABLE> </table> - внешний элемент таблицы

— <CAPTION> Подпись таблицы</CAPTION>

— <TR> </tr> - элемент, задающий строку таблицы

— <TD> </td> - элемент, задающий ячейку таблицы — <COL> - столбец таблицы Например:

Таблица из 2 строк, в первой строке - 2 ячейки, во втрой – 3.

<TABLE>

Таблицы

— ALIGN – выравнивание (LEFT, RIGHT, CENTER);

— BORDER – толщина границы (BORDER=3);

— BACKGROUND – фоновое изображение для всей таблицы;

— BGCOLOR – фоновый цвет;

— BORDERCOLOR – цвет рамки;

— CELLPADDING – расстояние от границ ячейки до ее содержимого;

— CELLSPACING – расстояние между ячейками в пикселах;

— HSPACE – свободное пространство от таблицы слева и справа;

— SPACE - свободное пространство от таблицы снизу и сверху;

— COLSPEC – столбцы фиксированной ширины в символах или в процентах;

— WIDTH – ширина таблицы в пикселах или в процентах от текущей ширины окна браузера (WIDTH=256, WIDTH=100%).

Таблицы

— ALIGN – выравнивание (LEFT, RIGHT, CENTER);

— BORDER – толщина границы (BORDER=3);

— BACKGROUND – фоновое изображение для всей таблицы;

— BGCOLOR – фоновый цвет;

— BORDERCOLOR – цвет рамки;

— CELLPADDING – расстояние от границ ячейки до ее содержимого;

— CELLSPACING – расстояние между ячейками в пикселах;

— HSPACE – свободное пространство от таблицы слева и справа;

— SPACE - свободное пространство от таблицы снизу и сверху;

— COLSPEC – столбцы фиксированной ширины в символах или в процентах;

— WIDTH – ширина таблицы в пикселах или в процентах от текущей ширины окна браузера (WIDTH=256, WIDTH=100%).

Трохачева А.В., МБУ "Школа №86", г. Тольятти 2018

Выполните все задания по ссылке http://mif.vspu.ru/books/html123/

Презентация "Основные теги HTML", информатика 9 класс

Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

16.11.2019