Презентация "Язык гипертекстовой разметки HTML" 9 класс скачать бесплатно

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


Подписи к слайдам:
Презентация PowerPoint

Язык гипертекстовой разметки HTML

Подготовил учитель информатике Пажитнев Максим Викторович

Основные понятия

  • Тег (языки разметки) — элемент языка разметки гипертекста (например, XML, HTML).
  • HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки
  • Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 19861991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки  документов во Всемирной паутине. 

Основные разделы документа HTML.

  • <HTML> - начало страницы
  • <HEAD> -оформление заголовка страницы
  • <META name=‘…’,> заголовок, автор
  • <TITLE>…</TITLE>
  • </HEAD>
  • <BODY> - текст и основная часть страницы
  • </BODY>
  • </HTML>

Работа с текстом

  • <FONT SIZE = ‘1-7’ – установка размера шрифта
  • <H1-6> ваш заголовок </H1-6>
  • <P> ваш текст </P> - создание абзаца
  • ALIGN=“left” – выравнивание текста по левой стороне

    ALIGN=“right” – выравнивание текста по правой стороне

    ALIGN=“center” – выравнивание текста по центру

    ALIGN=“justify” - выравнивание текста по ширине

  • <nobr> …</nobr> - не позволяет разрывать текст на строке
  • <BR> - прерывание текста, перенос на следующую строку
  • <B> ..</B> - жирный
  • <I> ..</I> - курсив
  • <U> ..</U> - подчеркивание
  • <strike> ..</strike> - перечеркивание

Изменение шрифта и цвета шрифта

  • <FONT COLOR = ‘red’> цвет шрифта </FONT>
  • FACE="Times New Roman“ изменение шрифта
  • SIZE=“1” – размер шрифта от 1 до 7
  • <font color="green" FACE="Arial" size="3"><b>Мороз и солнце; день

    чудесный!

    <br> Еще ты дремлешь, друг прелестный –

    <br> Пора, красавица, проснись;

    <br> Открой сомкнуты негой взоры</b></font>

Изменение цвета шрифта <FONT COLOR=“green”> … <FONT>

  • aqua ##00FFFF
  • black ##000000
  • blue ##0000FF
  • fuchsia ##FF00FF
  • gray ##808080
  • green ##008000
  • lime ##00FF00
  • maroon ##800000
  • navy ##000080
  • olive ##808000
  • purple ##800080
  • red ##FF0000
  • silver ##C0C0C0
  • teal ##008080
  • white ##FFFFFF
  • yellow ##FFFF00

Изменение цвета страницы

  • <BODY Bgcolor="gray">
  • ………………………………………..

  • </BODY>

Тег и атрибут вставки изображений на Web-странице

  • <img srс="xxx.jpg"> , где xxx.jpg название файла изображения.
  • Если картинка находится в папке picture html код будет такой:
  • <img srс="picture/xxx.jpg">

Теги и атрибуты гиперссылки на Web-странице

  • <A HREF=“Адрес”>Указатель</A> тег с атрибутом для создания гиперссылки
  • <ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты

Теги и атрибуты для создания списков на Web-странице

  • <OL>…</OL> контейнер для создания нумерованных списков
  • <LI> тег элемента списка

  • <UL>…</UL> контейнер для создания маркированного списка
  • <LI> тег элемента списка

  • <DL>…</DL> контейнер для создания списка терминов
  • <DT> тег для создания термина
  • <DD> тег для создания определения

Алгоритм вставки таблиц:

1. описание таблицы; 2. описание строки; 3. описание ячейки; 4. ввод текста ячейки.

Создание и форматирование таблиц

Вставка таблицы - парный тэг <table> </table>

По умолчанию текст выравнивается по левому краю, ширина столбца - по наиболее длинному элементу.

Атрибуты к тэгу <table>

BORDER “ “ – толщина границы таблицы в пикселях

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

<table border=1 width=80%>

</table>

Строка таблицы

Вставка строки таблицы - парный тэг <tr> </tr>

Атрибуты:

Align = (left, center, richt) – горизонтальное выравнивание

Valign = bottom, middle, top) – вертикальное выравнивание

<tr align=center>

</tr>

Ячейка таблицы

Вставка ячейки таблицы - парный тэг <td> </td>

Атрибуты:

Align = (left, center, richt) – горизонтальное выравнивание

Valign = (bottom, middle, top) – вертикальное выравнивание

<td> Тема доклада </td>

Ширина и высота таблицы

  •  WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тега <TABLE>.
  • Форма записи: WIDTH=num или WIDTH=num%, где num — численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна. Заметим, что допустимо задавать значения, большие 100%, хотя трудно представить себе случай, где это необходимо. Пример:
  • <TABLE WIDTH=200 HEIGHT =200>.

ПРИМЕР:

<table border=1 width=80%>

<tr align=center>

<td> № пп</td>

<td> ФИО</td>

<td> Тема доклада</td>

</tr>

</table>

Таблица содержит 1 строку,

3 столбца

Объединение ячеек

  • <TD ROWSPAN=2>Ячейка, захватывающая две строки</TD>
  • <TD COLSPAN=2>Ячейка, захватывающая два столбца</TD>