Ученики на Учителя.com


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

Скачать материал
Подписи к слайдам:
Язык гипертекстовой разметки HTML Подготовил учитель информатике Пажитнев Максим Викторович Основные понятия
  • Тег (языки разметки) — элемент языка разметки гипертекста (например, XML, HTML).
  • HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки
  • Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). 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>

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