Untitled Document (стр. 3 из 6)

Посмотрите, как изменился шрифт.

· Физическое форматирование

Это парные теги и требуют закрытия. В рабочем документе перед русским текстом вставьте один из приведенных выше тегов, а после текста, закройте этот тег (вставьте этот фрагмент в рабочий документ, вместо

<div align="left">Мы изучаем программирование на языке HTML</div>).

Пример (Обратите внимание, что все теги закрываются в обратном порядке!!!):

<div align="left"><font face="sans-serif" size=3 color="green"><i>Мы изучаем программирование на языке HTML</i></font></div>

Посмотрите как изменился шрифт!

______________________________________________________

8 занятие

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

1. Тег абзаца?

2. Как задать стиль шрифта?

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

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

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

Тег переноса строки <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 – страницу.

9 занятие

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

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" width="100%" size="8" color="red">

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

10 занятие

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

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

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

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

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

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

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

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

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

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

Пример:

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

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

2. Ссылки.

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

<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 width=200 height=200>

</a>

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

11 занятие

«Таблицы»

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

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

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

<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 - объединение ячеек по вертикали

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