Библиотека▪Публикации▪Статьи▪Презентации

Материал опубликовала

Получила диплом ЯГПУ в 2009г. Работала два года в гимназии №3 г.Ярославля по специальности. После декрета стала работать в МОУ Бурмакинской СОШ№2 учителем математики и информатики. После второго декрета вернулась в свою любимую школу МОУ БСОШ№2

Россия, Ярославская обл., Некрасовский район, с. Бурмакино

#8 класс #9 класс #10 класс #11 класс #Информатика и ИКТ #Учебно-методические материалы #Презентация #Учитель-предметник #Школьное образование

Презентация «Язык разметки гипертекста»

HTML (Hyper Text Markup Language ) – язык разметки гипертекста

Web-сайты и Web-страницы Публикации во Всемирной паутине реализуются в форме Web–сайтов. Web–сайт по своей структуре напоминает журнал и состоит из web-страниц.

Создание Web-сайтов Создание реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web–страницу — файл с расширением .htm или .html.

Форматирование текста Вид Web–страницы задается тегами, которые заключаются в угловые скобки. Теги могут быть парными, обязательно наличие открывающего и закрывающего тэгов (контейнер). Закрывающий содержит прямой слэш (/) перед обозначением.

Основные теги HTML HTML-код страницы помещается внутрь контейнера <HTML></HTML>. Web–страница разделяется на две логические части: заголовок и содержание. Заголовок заключается в контейнер <HEAD></HEAD> и содержит справочную информацию о странице, название документа.

Основные теги HTML <HEAD> <TITLE>9 класс</TITLE> </HEAD> Название Web–страницы содержится в контейнере <TITLE></ TITLE> и отображается в строке заголовка браузера.

Основные теги HTML Основное содержание страницы помещается в контейнер <BODY></BODY> и может содержать текст, графические изображения, таблицы, звуковые файлы… <BODY> Давайте знакомиться </BODY>

Шаблон <html> <head> <title>Моя страничка</title> </head> <body> Содержание страницы </body> </html>

Форматирование текста С помощью HTML-тэгов можно задать различные параметры форматирования текста. Размер шрифта заголовка задается тэгами от <H1> (самый крупный) до <H6> (самый мелкий). Заголовок принято размещать по центру страницы(в данном случае – окна браузера). Сделать позволяет атрибут ALIGN тэга заголовка: <H1 ALIGN = center> - по центру <H1 ALIGN = right> - по правой границе <H1 ALIGN = left> - по левой границе

Меняет цвет тэг задающего шрифт с атрибутом цвета: Меняет цвет тэг задающего шрифт с атрибутом цвета: <FONT COLOR = “blue”> <FONT COLOR = “#FF0000”> Заголовок от остального содержания страницы отделяется горизонтальной линией с помощью тэга <HR> Пример 2

Атрибут SIZE тэга <FONT> задает размер шрифта, ему присваивается значение от 1 до 7. С помощью знаков «+» или «-» можно управлять изменением шрифта Атрибут SIZE тэга <FONT> задает размер шрифта, ему присваивается значение от 1 до 7. С помощью знаков «+» или «-» можно управлять изменением шрифта Для задания типа шрифта используют атрибут FACE=. Следует сказать, что в основном применяют Times New Roman и Arial.

Атрибуты тэга <BODY> Атрибуты тэга <BODY> Фоновое изображение задается с помощью атрибута BACKGROUND <BODY BACKGROUND=“ИМЯ ФАЙЛА” > Цвет фона Web-страницы задается атрибутом BGCOLOR <BODY BGCOLOR=“RED”> Цвет текста задает атрибут TEXT <BODY TEXT=“BLUE ”>

Шаблон 2 <html> <head> <title>9 класс</title> </head> <body> <h1 align = center> <font color = “blue”> Давайте знакомиться </font> </h1> <hr> </body> </html> <html> <head> <title>9 класс</title> </head> <body> Давайте знакомиться </body> </html>

Стили Тэг Пример BOLD <B> полужирный ITALIC <I> курсив UNDERLINE <U> подчеркнутый TYPEWRTER <TT> пишущая машинка STRIKETHROUGH <S> вычеркнутый DECREASE FONT SIZE <SMALL> маленький INCREASE FONT SIZE <BIG> большой BLINK <BLINK> мерцающий

Размещение графики Первая или титульная страница является «визитной карточкой» сайта. Страница может содержать не только текст, но и графическую информацию (разнообразные рисунки, схемы и т.д.), а также звуковую информацию.

В Web-сайтах могут использоваться три графических формата В Web-сайтах могут использоваться три графических формата GIF JPG PNG Для вставки изображения используется тэг <IMG> с атрибутом SRC = “имя файла”

Тэг <IMG> имеет ещё один атрибут ALT, значением которого является текст. Тэг <IMG> имеет ещё один атрибут ALT, значением которого является текст. Расположить текст различным образом относительно рисунка позволяет атрибут ALIGN тэга <IMG>. TOP (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева), RIGHT(справа) <IMG SRC=“Имя файла” ALT=“текст” ALIGN= “right”> Пример 3

<html> <html> <head> <title>Моя страничка</title> </head> <body> <h1 align = center> <font color = “blue”> Лена </font> </h1> <hr> <img src=“.gif” alt=“” align= “top”> <font color = “blue”> </body> </html>

Гиперссылки на Web-страницах Титульная страница содержит следующий HTML-код: <html> <head> <title>Моя страничка</title> </head> <body> <h1 align=center> <font color=‘blue’>Лена <p><h2>Моя первая страничка </font></h1> <hr> <ul type=disk> <h3 align=left> <li>Обо мне. <li>Мой город. <li>Моя школа. <li>Мои друзья</ul> </body> </html>

Гиперссылка на Web–странице существует в форме выделенного объекта, щелчок по которому обеспечивает переход на другую Web-страницу. Гиперссылка на Web–странице существует в форме выделенного объекта, щелчок по которому обеспечивает переход на другую Web-страницу. Панель навигации – размещение гиперссылок. Она может представлять собой абзац, выровненный по центру. Абзацы помещаются в контейнер <P></P> &nbsp - пробел

Для каждой гиперссылки адрес перехода определяет контейнер <A></A> с атрибутом HREF(значение URL-адрес). Для каждой гиперссылки адрес перехода определяет контейнер <A></A> с атрибутом HREF(значение URL-адрес). Контейнер должен также содержать текст гиперссылки: <A HREF=“URL”>Текст гиперссылки </A> Например: <li><A HREF=“A1.htm”>Обо мне.</A>

<html> <head> <title>Моя страничка</title> </head> <body> <h1 align=center> <font color=‘blue’>Лена <p><h2>Моя первая страничка </font></h1> <hr> <ul type=disk> <h3 align=left> <li>Обо мне. <li>Мой город. <li>Моя школа. <li>Мои друзья</ul> </body> </html> <li><A HREF=“A1.htm”>Обо мне.</A> <li><A HREF=“A2.htm”>Мой город.</A> <li><A HREF=“A3.htm”>Моя школа.</A> <li><A HREF=“A4.htm”>Мои друзья.</A></ul> <body bgcolor=green> <body background=“1.jpg”>

<html> <html> <head> <title>Обо мне</title> </head> <body> <h1 align=center> <font color=‘blue’>Лена <p><h2>Обо мне </font></h1> <hr>Рассказ о себе </body> </html> <img src=“1.jpg”> </body> </html> <img src=“1.jpg” alt=“текст”>

Ссылка на адрес электронной почты Необходимо атрибуту HREF присвоить URL-адрес электронной почты и добавить контейнер <ADRESS></ADRESS> <ADRESS> <A HREF=“адрес”> Текст</A> </ADRESS> Пример 6

Списки на Web-страницах Ненумерованный список Список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: “disc”, “square”, “circle”

Нумерованный список Список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры, римские цифры, буквы

Список определений Для списка определений используется контейнер <DL></DL>. Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DT> и определения, которое следует за тэгом <DD>.

Создание таблиц Для создания таблицы используется <table></table> Атрибуты: Align – расположение таблицы Width – ширина таблицы Border – ширина внешней рамки Заголовок таблицы <caption></ caption >

Строка таблицы задается <TR></TR> Строка таблицы задается <TR></TR> Атрибуты: align – выравнивание текста в ячейках строки valign – вертикальное выравнивание (top (верхний край), middle (центр), bottom (нижний край))

Для разделения строк на колонки используется <TD></TD> Для разделения строк на колонки используется <TD></TD> Атрибуты: nowrap – текст в одну строку colspan – размах ячейки по горизонтали rowspan – размах по вертикали valign - вертикальное выравнивание width – ширина ячеек height – высота ячеек

<BODY> <BODY> <TABLE BORDER=1> <CAPTION> У таблицы может быть заголовок </CAPTION> <TR> <TD> Первая строка, первая колонка </TD> <TD> Первая строка, вторая колонка </TD> </TR> </TABLE> </BODY>

Дополнительные атрибуты Background - Фоновый рисунок Bgcolor – Цвет фона таблицы Bordercolor – Цвет рамки

Карты-изображения Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок.

Чтобы преобразовать изображение в карту , в тэг <IMG> добавляется параметр USEMAP, значением которого является ссылка на имя карты. Например: <IMG src="friends.jpg" alt="Это мои друзья" usemap="#friends" > Для описания областей карты изображения используется тэг <MAP>, единственным параметром которого является NAME. <MAP name="friends"> </MAP>

Внутри контейнера <MAP> </MAP> помещаются тэги <AREA> с описанием областей изображения. Атрибуты <AREA> SHAPE – форма области (RECT, CIRCLE) COORDS – координаты области HREF – гиперссылка ALT – альтернативный текст <area shape="rect" coords="0,30,50,120" alt="Сергей">

Титульная страница

Страница Обо мне

Страница Мои друзья