Искусство создания Интернет-сайтов является на сегодняшний день важной темой школьного профильного курса информатики, не менее важной, чем программирование, алгоритмизация, офисные технологии. Сегодня телекоммуникационные технологии практически проникли во все сферы науки и техники, они все больше входят в личную и общественную жизнь людей во всех странах и сеть Интернет, очень быстро развиваясь, превращается в огромное хранилище информации и прекрасное средство общения между людьми. Поскольку информационное наполнение Интернета составляют разнообразные по оформлению и содержанию сайты, их разработка и администрирование превращается в одну из наиболее многообещающих и востребованных профессий. Кроме того, сеть Интернет можно рассматривать как огромнейшее по “тиражу” средство массовой информации, поэтому создание собственного сайта становится публикацией в мировой прессе.
В курсе основ HTML рассматриваются следующие темы:
- Язык гипертекстовой разметки документа HTML и его назначение.
- Структура Web-страницы и Web-сайта, цвет и фон.
- Размещение и форматирование текста.
- Вставка и работа с изображениями.
- Маркированные и нумерованные списки.
- Создание и использование таблиц на Web-странице.
- Гиперссылки
- Интерактивные формы на Web-страницах.
- Звук и цифровой видеофайл на web-странице (в сеть Интернет не выгружается).
- Метатэги.
- Многооконная структура (фреймы).
- Слои и стили.
- Выполнение и защита проекта.
Предлагаю вашему вниманию общую идею изучения основ HTML в 11 классе информационно-технологического профиля и разработку темы “Размещение и форматирование текста”.
Общая идея изучения основ HTML в 11 классе информационно-технологического профиля состоит в том, что учащиеся, изучая последовательно перечисленные ранее темы и выполняя упражнения по каждой из них, (причем создание HTML кода производится вручную, в Блокноте, без использования каких бы то ни было HTML редакторов), накапливают большое количество знаний и умений для создания проекта-сайта по любому учебному предмету. Темы проектов выбираются учащимися самостоятельно, консультации по информационному наполнению сайтов проводят учителя-предметники. Завершенный проект используется учителем-предметником на уроках, а учащиеся представляют свои сайты на школьной научно-практической конференции “Интеллектуалы XXI века”.
Тема: Размещение и форматирование текста
Цель:
- научить учащихся красиво и рационально размещать текст на странице, учитывая правила единого орфографического режима и особенности восприятия текста;
- научить использовать тэги HTML для форматирования текста.
Программное обеспечение и подготовительная работа
- HTML код записывается в стандартном приложении Windows Блокнот, просмотр Web-страниц осуществляется в приложении Internet Explorer 6.
- Ученики уже имеют начальные понятия о языке гипертекстовой разметки документа HTML и его назначении, знакомы со структурой Web-страницы, умеют использовать цвета для задания цвета фона Web-страницы и графические файлы формата JPEG и GIF для создания фона-картинки.
Теоретический материал Для рационального размещения и удобства чтения текст на Web-странице помещается в контейнер тэгов абзаца.
<p>Текст абзаца</p>
Абзацы на web-странице отделяются пустой строкой, что способствует улучшению восприятия при чтении текста.
Для выравнивания текста абзаца в тэг <p> можно добавить параметры выравнивания
<p align=…>Текст абзаца</p>,
где значением атрибута align могут быть
center - выравнивание по центру,
left - выравнивание по левому краю, (задается по умолчанию),
right - выравнивание по правому краю,
justify - выравнивание по ширине.
Пример:
<html>
<head><title>Абзац</title></head>
<body>
<p align=center>Примеры форматирования абзаца<br>
<p align=left>Выравнивание текста по левому краю<br>
<p align=right>Выравнивание текста по правому краю<br>
<p align=justify>Данный текст, если он будет достаточно длинным, покажет нам как можно выровнять текст по ширине страницы, т.е. будет выровнен по левому и правому краю. Если текст короткий, то он просто выравнивается по левому краю.<br>
</body>
</html>
Для размещения на Web-странице заголовков и подзаголовков используется тэг
<h…> Текст заголовка </h…>,
где вместо многоточия ставится номер уровня заголовка в порядке убывания от 1 до 6. Выравнивание заголовков производится с помощью уже известного атрибута align.
Пример:
<html>
<head><title>Форматирование текста</title></head>
<body>
<h1 align=center>Работа с текстом</h1>
<h2 align=center>Примеры форматирования заголовков</h2>
</body>
</html>
Для задания параметров текста используется тэг <font>, имеющий несколько атрибутов:
<font face=… size=… color=…> Текст </font>
Параметры атрибутов:
face - задает шрифт, которым будет напечатан текст, рекомендуется использовать стандартные шрифты, т.к. других может просто не быть в компьютере, на котором пользователь будет просматривать данную Web-страницу, например,
<font face=”Arial”>…</font> или <font face=”Monotype Corsiva”>…</font>
size - значение от 7 до 1 в порядке убывания, размер шрифта, по умолчанию размер шрифта равен 4, например,
<font size=7>…</font> или <font size=-2>…</font>
Размер шрифта +2 (-2) означает, что размер шрифта требуется увеличить (уменьшить) на 2 условных единицы относительно текущего размера. Этот способ удобно применять, когда необходимо выделить небольшой фрагмент текста и вернуться к исходному размеру шрифта.
color - выделение текста некоторым цветом.
Цвет текста можно задать двумя способами:
А) написать английское название цвета, например,
<font color =”red”>…</font> или <font color =”yellow”>…</font>,
Б) задать шестнадцатеричный код цвета в формате “#FF0000” - красный или “#505050”, например,
<font color =#C0C0C0>…</font>
Более полный список цветов можно посмотреть в Приложении 1.
Пример:
<html>
<head><title>Пример форматирования текста</title></head>
<body>
<font face=”Monotype Corsiva” size=5 color=”blue”>Текст напечатан крупно, красивым шрифтом и только <font size=7>одно слово </font> выделено <font color=#FF0000> красным</font></font>
</body>
</html>
Средства выделения текста (жирность, курсив, подчеркивание и их комбинации).
<b>…</b> - жирный (bold);
<i>…</i> - курсив (italic);
<u>…</u> - подчеркивание (underline).
Комбинация: <b><i><u>Жирный курсив с подчеркиванием</u></i></b>
Практическая часть
Задание
Создать Web-страницу, на которой разместить текст английского народного стихотворения “Дом, который построил Джек”, отформатированный соответственно заданию (см. таблицу). Текст стихотворения находится в Приложении 2.
Текст |
Действие |
Теги HTML |
Заголовок |
Заголовок I уровня( по центру) |
<H1 align=…>…</H1> |
Подзаголовок(автор) |
Заголовок II уровня( по пр.краю) |
<H2 align=…>…</H2> |
1 абзац |
Шрифт Impact |
<FONT FACE=”…”></FONT> |
2 абзац |
Шрифт Monotype Corsiva |
<FONT FACE=”…”></FONT> |
3 абзац |
Шрифт Arial |
<FONT FACE=”…”></FONT> |
4 абзац (по две строки) |
Начертание “Полужирный” Начертание “Курсив” Начертание “Подчеркнутый” |
<B>…</B> <I>…</I> <U>…</U> |
5 абзац |
Каждая строка разного размера от 1 до 7 |
<FONT SIZE=”…”></FONT> |
6 абзац |
Каждая строка разного цвета |
<FONT COLOR=”…”></FONT> |
7 абзац, кроме последней строки |
По две строки попеременно выравнивание по левому и по правому краю. |
<p ALIGN=LEFT>…</p> <p ALIGN=RIGHT>…</p> <p ALIGN=CENTER>…</p> |
Последняя строка |
Выровнять по центру, напечатать красным цветом, курсивом, размером шрифта 5. |
См. ранее |
Выполненное задание можно посмотреть на сайте www.itclass.rbcmail.ru