Основы языка HTML в 11-м классе информационно-технологического профиля

Искусство создания Интернет-сайтов является на
сегодняшний день важной темой школьного
профильного курса информатики, не менее важной,
чем программирование, алгоритмизация, офисные
технологии. Сегодня телекоммуникационные
технологии практически проникли во все сферы
науки и техники, они все больше входят в личную и
общественную жизнь людей во всех странах и сеть
Интернет, очень быстро развиваясь, превращается
в огромное хранилище информации и прекрасное
средство общения между людьми. Поскольку
информационное наполнение Интернета составляют
разнообразные по оформлению и содержанию сайты,
их разработка и администрирование превращается
в одну из наиболее многообещающих и
востребованных профессий. Кроме того, сеть
Интернет можно рассматривать как огромнейшее по
“тиражу” средство массовой информации, поэтому
создание собственного сайта становится
публикацией в мировой прессе.

В курсе основ HTML рассматриваются следующие
темы:

  1. Язык гипертекстовой разметки документа HTML и его
    назначение.
  2. Структура Web-страницы и Web-сайта, цвет и фон.
  3. Размещение и форматирование текста.
  4. Вставка и работа с изображениями.
  5. Маркированные и нумерованные списки.
  6. Создание и использование таблиц на Web-странице.
  7. Гиперссылки
  8. Интерактивные формы на Web-страницах.
  9. Звук и цифровой видеофайл на web-странице (в сеть
    Интернет не выгружается).
  10. Метатэги.
  11. Многооконная структура (фреймы).
  12. Слои и стили.
  13. Выполнение и защита проекта.

Предлагаю вашему вниманию общую идею изучения
основ HTML в 11 классе
информационно-технологического профиля и
разработку темы “Размещение и форматирование
текста”.

Общая идея изучения основ HTML в 11 классе
информационно-технологического профиля состоит
в том, что учащиеся, изучая последовательно
перечисленные ранее темы и выполняя упражнения
по каждой из них, (причем создание HTML кода
производится вручную, в Блокноте, без
использования каких бы то ни было HTML редакторов),
накапливают большое количество знаний и умений
для создания проекта-сайта по любому учебному
предмету. Темы проектов выбираются учащимися
самостоятельно, консультации по информационному
наполнению сайтов проводят учителя-предметники.
Завершенный проект используется
учителем-предметником на уроках, а учащиеся
представляют свои сайты на школьной
научно-практической конференции “Интеллектуалы
XXI века”.

Тема: Размещение и форматирование текста


Цель:

  • научить учащихся красиво и рационально
    размещать текст на странице, учитывая правила
    единого орфографического режима и особенности
    восприятия текста;
  • научить использовать тэги HTML для
    форматирования текста.

Программное обеспечение и подготовительная
работа

  • HTML код записывается в стандартном приложении
    Windows Блокнот, просмотр Web-страниц осуществляется
    в приложении Internet Explorer 6.
  • Ученики уже имеют начальные понятия о языке
    гипертекстовой разметки документа HTML и его
    назначении, знакомы со структурой Web-страницы,
    умеют использовать цвета для задания цвета фона
    Web-страницы и графические файлы формата JPEG и GIF
    для создания фона-картинки.
  • Теоретический материал

    Для рационального
    размещения и удобства чтения текст на Web-странице
    помещается в контейнер тэгов абзаца.

    Текст абзаца

    Абзацы на web-странице отделяются пустой
    строкой, что способствует улучшению восприятия
    при чтении текста.

    Для выравнивания текста абзаца в тэг

    можно добавить параметры выравнивания

    Текст абзаца

    ,

    где значением атрибута align могут быть

    center — выравнивание по центру,
    left — выравнивание по левому краю, (задается по
    умолчанию),
    right — выравнивание по правому краю,
    justify — выравнивание по ширине.

    Пример:




    Примеры форматирования абзаца

    Выравнивание текста по левому
    краю

    Выравнивание текста по правому
    краю

    Данный текст, если он будет
    достаточно длинным, покажет нам как можно
    выровнять текст по ширине страницы, т.е. будет
    выровнен по левому и правому краю. Если текст
    короткий, то он просто выравнивается по левому
    краю.


    Для размещения на Web-странице заголовков и
    подзаголовков
    используется тэг

    Текст заголовка ,

    где вместо многоточия ставится номер уровня
    заголовка в порядке убывания от 1 до 6.
    Выравнивание заголовков производится с помощью
    уже известного атрибута align.

    Пример:



    Форматирование<br /> текста

    Работа с текстом

    Примеры форматирования
    заголовков


    Для задания параметров текста используется тэг
    , имеющий несколько атрибутов:

    Текст

    Параметры атрибутов:

    face — задает шрифт, которым будет напечатан
    текст, рекомендуется использовать стандартные
    шрифты, т.к. других может просто не быть в
    компьютере, на котором пользователь будет
    просматривать данную Web-страницу, например,

    или

    size — значение от 7 до 1 в порядке убывания, размер
    шрифта, по умолчанию размер шрифта равен 4,
    например,

    или

    Размер шрифта +2 (-2) означает, что размер шрифта
    требуется увеличить (уменьшить) на 2 условных
    единицы относительно текущего размера. Этот
    способ удобно применять, когда необходимо
    выделить небольшой фрагмент текста и вернуться к
    исходному размеру шрифта.

    color — выделение текста некоторым цветом.

    Цвет текста можно задать двумя способами:

    А) написать английское название цвета,
    например,

    или ,

    Б) задать шестнадцатеричный код цвета в формате
    “#FF0000” — красный или “#505050”, например,

    Более полный список цветов можно посмотреть в Приложении 1.

    Пример:



    Пример форматирования<br /> текста

    Текст
    напечатан крупно, красивым шрифтом и только
    одно слово выделено
    красным


    Средства выделения текста (жирность, курсив,
    подчеркивание и их комбинации).

    — жирный (bold);

    — курсив (italic);

    — подчеркивание (underline).

    Комбинация: Жирный курсив с
    подчеркиванием

    Практическая часть

    Задание

    Создать Web-страницу, на которой разместить
    текст английского народного стихотворения “Дом,
    который построил Джек”, отформатированный
    соответственно заданию (см. таблицу). Текст
    стихотворения находится в Приложении
    2.

    Текст

    Действие

    Теги HTML

    Заголовок

    Заголовок I уровня( по
    центру)

    Подзаголовок(автор)

    Заголовок II уровня( по
    пр.краю)

    1 абзац

    Шрифт Impact

    2 абзац

    Шрифт Monotype Corsiva

    3 абзац

    Шрифт Arial

    4 абзац (по две строки)

    Начертание
    “Полужирный”

    Начертание “Курсив”

    Начертание “Подчеркнутый”

    5 абзац

    Каждая строка разного
    размера от 1 до 7

    6 абзац

    Каждая строка разного
    цвета

    7 абзац, кроме
    последней строки

    По две строки
    попеременно выравнивание по левому и по правому
    краю.

    Последняя строка

    Выровнять по центру,
    напечатать красным цветом, курсивом, размером
    шрифта 5.

    См. ранее

    Выполненное задание можно посмотреть на сайте www.itclass.rbcmail.ru





    Внимание, только СЕГОДНЯ!

    Следующий: