Информатика и ИКТ
Школьный интернет-учебник М.А. и М.В. Выграненко

Тема 11: Коммуникационные технологии (8 часов)

Урок № 7(90):  Язык HTML

Практические, проверочные и домашние работы

Практическая работа 42:
"HTML. Форматирование текста"
.
pdf

Папка для выполнения заданий по теме "Язык HTML"

Практическая работа 43:
"HTML. Таблицы, рисунки"
.
pdf

 

Описание языка HTML

HTML-документ – это обычный текстовой файл.
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными. Пара тэгов, состоящая из открывающего и закрывающего называется контейнером. Закрывающий тэг отличается от открывающего наличием прямого слэша (/) перед обозначением.
Весь HTML-код страницы помещается в контейнер <HTML> </HTML>. Без этих тэгов броузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание. Заголовок Web-страницы заключается в контейнер <HEAD> </HEAD> и содержит название документа и справочную или служебную информацию о странице. Например, обычно в заголовок включаются метатэги, содержащие информацию для поисковых машин:
<META name = “description” = “описание содержания”> и
<META name = “Keywords” content = “ключевые слова”>,
а также кодировки (charset) Ваших HTML-документов, например
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=KOI8-R>.
Название Web-страницы заключается в контейнер <TITLE> </TITLE> и отображается при ее просмотре в верхнем поле броузера в качестве названия страницы при ее открытии. Максимальная длина названия – 40 символов.
Основное содержание Web-страницы помещается в контейнер <body> </body> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы.

Форматирование текста
<p> </p> – «параграф» – контейнер, содержащий один абзац текста. Для абзаца можно задать выравнивание: <p align=”center”>.
<br> – обрыв строки (без перехода на новый абзац).
Характеристики шрифта (цвет и размер) задаются в контейнере <font> </font>:
<font color=”red” size=4 >. По умолчанию - color=”black”, size=3.
<hr> - горизонтальная линия:
<hr size=8 width=50% align=center color=#ff0000>
Выделение курсивом и жирным шрифтом осуществляется при помощи тегов <i> </i> и <b> </b> соответственно.
Значение атрибута Face (начертание) тега Font лучше опускать, позволив броузеру интерпретировать его самостоятельно, т.к. Вы не знаете, какие шрифты будут установлены на компьютере пользователя, просматривающего Ваш сайт.

Заголовки и подзаголовки
Язык HTML позволяет вам работать с шестью уровнями заголовков. Первый заголовок – самый главный. На него обращается особое внимание. Остальные заголовки могут быть оформлены, например, жирным шрифтом или прописными буквами.
В HTML первый заголовок обозначается как <H1>:
<Hn>Текст</Hn>
Под n понимается уровень заголовка, то есть числа 1, 2, 3, 4, 5 или 6.
В HTML первый заголовок может совпадать с названием документа.
Встроенные изображения
Вы можете встраивать в ваш документ картинки. Синтаксис встроенной картинки следующий:
<img border="0" src="images/pic.jpg" width="160" height="200">.

Списки
Списки подразделяются на ненумерованные:
<ul>
<li> Элемент списка
<li> Элемент списка
</ul>
и нумерованные:
<ol>
<li> Элемент списка
<li> Элемент списка
</ol>

Ссылки
HTML позволяет вам связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием.
Для этого используется тэг <A>. Помните, что после буквы A должен стоять пробел.
Один из вариантов гипертекстовой ссылки может выглядеть так:
<A HREF="BobAnapa.html">Bob</A>
Здесь слово Bob ссылается на документ BobAnapa.html, образуя гипертекстовую ссылку.
Если документ, формирующий ссылку, находится в другой директории, то подобная ссылка называется относительной.

Вставка таблиц
Для того, чтобы текст и графика на Вашей Web-странице располагались при просмотре именно там, где Вы хотели (не зависимо от размера монитора пользователя), желательно вставлять их в таблицу. Контейнер для таблицы – <table> </table>. В него вкладываются контейнеры для строк – <tr> </tr> и столбцов – <td> </td>. Ширина таблицы указывается в пикселях или в процентах от ширины страницы. Ширина столбцов – в пикселях или в процентах от ширины таблицы. Высота таблицы и строк обычно не указывается и определяется их содержимым. Если Вы не хотите, чтобы таблица была видимой, можно выбрать толщину границы нулевой. Для всей таблицы или для отдельных ячеек можно определить цвет фона или фоновый рисунок.


<table border="0" width="100%" bgcolor="blue">
<tr>
<td width="30%"> </td>
<td width="70%"> </td>
</tr>
<tr>
<td width="30%"> </td>
<td width="70%" background="images/bg.gif"> </td>
</tr>
</table>

Специальные символы
Символы, которые не могут быть введены в текст документа непосредственно через клавиатуру называются специальными символами. Для таких символов существуют так называемые escape-последовательности:
< &lt
> &gt
“ &quot
& &amp
ã &copy
неразрывный пробел &nbsp

Звуковоспроизведение
Для того, чтобы вставить в вашу страничку звуковой файл, например, midi-файл, используйте следующую конструкцию:
<EMBED SRC="bob1.mid" WIDTH="140" HEIGHT="50" ALIGN="MIDDLE" BORDER="0" AUTOSTART=TRUE>
Это одна строка.
В этом тэге были использованы следующие параметры:
WIDTH – параметр, определяющий ширину midi-плеера.
HEIGHT – параметр, определяющий высоту midi-плеера.
BORDER – ширина рамки midi-плеера.
AUTOSTART – запустить midi-плеер сразу после того, как загрузится документ HTML.

Указание учителю. Практические работы возможно выполнять, используя HTML-редактор HEFS Константина Полякова.

Приложения

Н.Д. Угринович 3.7 [5]

 

Презентация "Язык HTML" (М.В. Выграненко)
pdf

Учебник HTML для чайников

Начало \ Программа 8-9 \ Тема 11 \ Урок 7(90)

При использовании материалов сайта просьба соблюдать приличия
© М.А. и М.В. Выграненко, 2009-2017

Рейтинг@Mail.ru