Какие теги относятся к физическому форматированию?

«Спец. символы. Заголовки.»

· Использование спец. символов

Тег переноса строки <br> (соответствует Enter при работе в Word).

Если вам надо писать большой текст:

«Да, будут ясны дни твои!

Как милый взор твой ныне ясен.

Средь лучших жребиев судьбы,

Да, будет жребий твой прекрасен!»

Здесь надо использовать тег абзаца, тег форматирования, тег спец. символов «»и тег перевода строки по окончанию каждой фразы, чтобы текст выглядел как стихотворение, иначе он растянется в длинное предложение, т.к. Enter в html – коде не воспринимается, как перевод строки.

Пример:

<div align="left">

<font face="sans-serif" size=3 color="green">

<i>Да, будут ясны дни твои!<Br>

Как милый взор твой ныне ясен.<Br>

Средь лучших жребиев судьбы,<Br>

Да, будет жребий твой прекрасен!<Br>

</i></font></div>

Вставьте этот фрагмент в html код вашей рабочей страницы, после закрытия первого абзаца (<div align="left"><font face="sans-serif" size=3 color="green"><i>Мы изучаем программирование на языке HTML</i></font></div>). Сохраните изменения и посмотрите на вашу html – страницу.

· Заголовки (парные теги, т.е. требуют закрытия)

<h1> - самый большой заголовок

<h2> - поменьше

<h3> и т.д. до <h6> - самый маленький

Раньше мы уже использовали этот тег, но у него есть параметр:

align="left" (right, center, justify) – выравнивание

Изменим заголовок в рабочем документе:

<h1 align="center">Привет Всем!</h1>  

Сохраните изменения и посмотрите на вашу html – страницу.

Занятие

Повторение предыдущего материала:

1. Какие спец. символы вам известны и для чего они используются?

2. Как можно создать заголовок и отцентрировать его?

«Списки. Линии.»

· Различают пронумерованные и непронумерованные списки.

1. Пронумерованные списки

Пронумерованные списки начинаются стартовым тегом (парный)

<ol>

Каждый элемент списка начинается с непарного (не требует закрытия) тега:                               <li>

Параметры тега <ol>:

type=A (a,I,1)

A – большие латинские буквы (A,B,C ….)

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

1 – обычные цифры (1,2,3…)

start=n - число с которого начинается нумерация списка.

Пример:

<ol type=1 start=5>

<li>Программирование

<li>Алгоритмизация

<li>Проектирование

</ol>

Вставьте этот фрагмент в html код вашей рабочей страницы, после закрытия последнего абзаца (после последнего </div>). Сохраните изменение рабочего документа.

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

Пронумерованные списки начинаются стартовым тегом (парный)

<ul>

Каждый элемент списка начинается с непарного (не требует закрытия) тега:                               <li>

Параметры тега <ul>:

type=disc (circle, square)

Пример:

<ul type= square >

<li>Программирование

<li>Алгоритмизация

<li>Проектирование

</ul>

Вставьте этот фрагмент в html код вашей рабочей страницы, после предыдущего списка. Сохраните изменение рабочего документа.

· Линии

<hr>- не парный тег.

Параметры:

· align="left" (right, center) – выравнивание линии по горизонтали.

· color="red"(м.б. использован код цвета) – цвет линии.

· noshade– без тени

· size="5" - толщина линии в pic.

· width="…%"– длина линии, обычно указывается в %.

Пример:

<hr align="center" size="8" color="red">

Вставьте этот тег в HTML рабочего документа, после списков. Сохраните изменения.

Занятие

«Вставка картинок. Ссылки.»

1. <img> - тег вставки картинки (непарный тег).

Предварительно создать картинки с расширением jpg или gif и положить их в папку с рабочим документом.

Параметры тега:

· align="left" (right, top, middle) - управление обтеканием текста.

· alt="alternative text" - альтернативный текст, т.е. пояснительный текст, который появляется при наведении мышки на картинку.

· src="n1.jpg" - указание имени картинки, которая будут вставлена (если картинка лежит во вложенной папке, где хранятся все картинки, то нужно прописывать полный путь к картинке, пример: src="papka/n1.jpg").

· border=0 - толщина рамки вокруг картинки.

· - ширина картинки (выставляется в pic.).

· height=200 – высота картинки (выставляется в pic.).

Пример:

<img src="pic/1.jpg" align="left" alt="логотип" border=1 height=200>

Вставьте этот фрагмент после линии в рабочий HTML документ. Сохраните изменения. (Можно попробовать различные варианты обтекания текстом, различную толщину рамки, вставить другие картинки).

Ссылки.

Главный тег - парный 

      <a>

Параметры тега:

· href="index.htm"

· В виде URL: href="http://www.yandex.ru"

Пример:

1.Ссылкой является текст

<a href="index.htm">На главную</a>

2. Ссылкой является картинка

<a href=" http://www.yandex.ru "><img src="pic/2.jpg" align="left" alt="логотип" border=1 height=200>

</a>

Вставьте этот фрагмент после картинки в рабочий HTML документ. Сохраните изменения. (Можно попробовать сделать ссылку на другой сайт). Ссылками может являться текст и картинки.

Занятие

«Таблицы»

Таблицы – единственное средство скомпоновать страницу в полном соответствии с замыслом разработчика.

Таблица организована как набор строк и столбцов. Ячейки таблицы могут содержать любые элементы, такие, как заголовки, списки, графику, абзацы.

Таблица описывается следующими тегами:

<table> - начало таблицы (парный тег).

<tr> -строка таблицы (парный тег).

<td> -столбец таблицы (парный тег).

1. Параметры тега <table>:

· width=600 (м.б. в %)– ширина таблицы

· height=600 (м.б. в %) – высота таблицы

· align="center" (left, right)- размещение таблицы на экране

· background="f1.jpg"– фоновый узор заливки (всей таблицы или ячейки)

· bgcolor="white" (#000000) – цвет фона (всей таблицы или ячейки)

· border=3 – толщина рамки таблицы

· bordercolor="gray" (#000000) – цвет рамки

· cellpadding=5– втяжка внутрь ячейки (зазор между краем ячейки и внутренним содержимым)

· sellspacing=10 - расстояние между ячейками одной и той же таблицы

1. Параметры тега <tr>:

· align="center" (left, right)- выравнивание содержимого ячеек строки

· valign="top" (bottom, middle) – вертикальное выравнивание ячеек строки

· bgcolor="gray" (#000000) – цвет фона ячейки

2.Параметры тега <td> :

· width=150 (м.б. в %)–ширина ячейки

· height=180 (м.б. в %) – высота ячейки

· align="center" (left, right) - выравнивание содержимого ячеек

· valign="bottom" (middle, top) – вертикальное выравнивание содержимого ячеек

· background="f1.jpg" – фоновый узор

· bgcolor="gray" (#000000) – цвет фона

· border=3 – толщина рамки

· bordercolor="gray" (#000000) – цвет рамки

· colspan=2 – объединение ячеек по горизонтали

· rowspan=3 - объединение ячеек по вертикали

Попробуем вставить в новый документ (на чистую страницу блокнота):

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<body bgcolor="#FFCCCC">

<table border="0">

<tr align="left">

<td colspan="2"><img src="pic/zastavka2 .jpg" height="100"></td>

</tr>

<tr>

<td align="left"

 <div align="left">

<font face="sans-serif" size=3 color="green">

<i>Да, будут ясны дни твои!<Br>

Как милый взор твой ныне ясен.<Br>

Средь лучших жребиев судьбы,<Br>

Да, будет жребий твой прекрасен!<Br>

</i></font></div>

</td>

<td align="right" src="pic/3.jpg" height="200"></td>

</tr>

</table>

</body>

</html>