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

Скачать материал

Подписи к слайдам:

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

Основные теги HTML

Язык HTML

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

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

</...>.

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

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

<html>

<head>

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

</head>

<body>

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

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

</body>

</html>

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

Теги и атрибуты Тег – код языка HTML , с помощью которого выполнятся разметка исходного текста. Тег записывается в угловых скобках. Имя атрибута Имя тега Значение атрибута <H3 ALIGN = CENTER> Страница должна иметь заголовок </H3>

Атрибут Содержимое элемента

Закрывающий

тег

Теги не отображаются сами, а влияют на способ отображения

документа. Атрибуты – свойства тегов.

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

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

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

<HEAD> Этот тег указывает на начало области заголовка Web-страницы.

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

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

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

</ BODY >

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

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

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

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

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

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

………..

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

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

LEFT - влево, CENTER – по центру, RIGHT – вправо,

JUSTIFY – по ширине.

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

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

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

<P> Текст </p> - абзац, атрибут ALIGN
<br> - переход на новую строку
<B> Текст </b> - выделение текста полужирным шрифтом
<I>Текст </i> - выделение текста курсивом
<Pre> Текст </pre> - предварительное форматирование текста.
<Center> </Center> - выравнивание по центру

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

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

<font>...</font> - с помощью данного тега

осуществляется изменение внешнего вида текста. Имеет атрибуты:

color - цвет
face - шрифт
size — размер
Изменения вносятся после тега <body> перед основным

текстом.

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

<Font face= «Arial» size=3 color= «blue»> Это шрифт arial

размером 3, цвет синий </font>

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

Списки

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

<ULTYPE=square >

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

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

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

</ul>

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

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

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

Списки

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

<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 – начальное значение списка.

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

Гиперссылки

Гипертекстовая ссылка – основной элемент всех

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

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

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

<A HREF="адрес ссылки">Текст для щелчка </a> Атрибут NAME позволяет перейти к отмеченному якорем

месту этого же документа:

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

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

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

<IMG> - элемент для создания ссылки на графический

файл (image). Он не содержит конечного тега - вся необходимая информация задается при помощи

атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в

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

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

файл графики:

src="Ссылка на файл".
Например:

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

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

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

Атрибуты тега <IMG>
HEIGTH - длина
WIDTH - ширина
ALIGN - позиционирование на экране (top, middle, bottom, left, right)
BORDER - толщина обрамления
VSPACE - размер пустого пространства над и под изображением
HSPACE - размер пустого пространства слева и справа от изображения

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

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

<HR> - горизонтальная линия (по умолчанию

объемная с тенью) позволяет разделить длинный формально неограниченный текст на отдельные разделы.

Атрибуты:

SIZE – толщина линии в пикселях;
WIDTH – ширина линии в пикселях или в процентах от ширины окна браузера;
ALIGN – положение на экране (слева, справа, по центру);
NOSHADE – линия представляется простой однотонной темной полосой.

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

Бегущая строка <MARQUEE WIDTH=200 BGCOLOR =#99ccff>Внимание!!!</MARQUEE>

Атрибуты:

ALIGN – позволяет разместить текст в верхней TOP, средней MIDDLE,

нижней BOTTON области бегущей строки;

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

SCROLL – текст пересекает экран (по умолчанию);
SLIDE – текст выдвигается на экран и останавливается;
ALTERNATE – текст выдвигается, затем перемещается взад-вперед.

BGCOLOR –цвет фона;
DIRECTION – направление движения текста (LEFT, RIGHT);
HEIGHT – высота в пикселях или в %;
WIDTH – ширина в пикселях или в %;
LOOP – количество проходов бегущей строки;
SCROLLAMOUNT – скорость перемещения текста (1 – min, 2000-max);
SCROLLDELAY – время в млс для перерисовки текста.

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

Фон

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

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

Фон

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

TOPMARGIN – верхняя граница в пикселях;
BOTTOMMARGIN – нижняя граница в пикселях;
LEFTMARGIN – левая граница в пикселях;
RIGHTMARGIN – правая граница в пикселях.
LINK - цвет гиперссылки;
ALINK – цвет активной гиперссылки.

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

Таблицы

Таблицы являются очень удобным средством форматирования данных на

Web-станице. Они позволяют решать чисто дизайнерские задачи:

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

При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элементы для описания каждой ячейки в с строке TD.
<TABLE> </table> - внешний элемент таблицы
<CAPTION> Подпись таблицы</CAPTION>
<TR> </tr> - элемент, задающий строку таблицы
<TD> </td> - элемент, задающий ячейку таблицы
<COL> - столбец таблицы Например:

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

<TABLE>

</table>

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

Таблицы

ALIGN – выравнивание (LEFT, RIGHT, CENTER);
BORDER – толщина границы (BORDER=3);
BACKGROUND – фоновое изображение для всей таблицы;
BGCOLOR – фоновый цвет;
BORDERCOLOR – цвет рамки;
CELLPADDING – расстояние от границ ячейки до ее содержимого;
CELLSPACING – расстояние между ячейками в пикселах;
HSPACE – свободное пространство от таблицы слева и справа;
SPACE - свободное пространство от таблицы снизу и сверху;
COLSPEC – столбцы фиксированной ширины в символах или в процентах;
WIDTH – ширина таблицы в пикселах или в процентах от текущей ширины окна браузера (WIDTH=256, WIDTH=100%).

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

Таблицы

ALIGN – выравнивание (LEFT, RIGHT, CENTER);
BORDER – толщина границы (BORDER=3);
BACKGROUND – фоновое изображение для всей таблицы;
BGCOLOR – фоновый цвет;
BORDERCOLOR – цвет рамки;
CELLPADDING – расстояние от границ ячейки до ее содержимого;
CELLSPACING – расстояние между ячейками в пикселах;
HSPACE – свободное пространство от таблицы слева и справа;
SPACE - свободное пространство от таблицы снизу и сверху;
COLSPEC – столбцы фиксированной ширины в символах или в процентах;
WIDTH – ширина таблицы в пикселах или в процентах от текущей ширины окна браузера (WIDTH=256, WIDTH=100%).

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

Вопросы и задания

Что понимается под публикацией Web-сайта?
Какие цели может преследовать автор Web-сайта?
Что такое HTML?
С помощью каких программных средств можно создавать Web-страницы?
Какова роль гиперссылок на Web-страницах?
Предложите ряд тем для Web-сайтов, которые бы, с вашей точки зрения, могли иметь общественный

интерес?

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

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

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

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

Подписи к слайдам:

Информатика - еще материалы к урокам:

Предметы

Похожие материалы