Создание WEB-страниц

HTML. Основные теги (Лекции...)

Подготовка.

  1. Создайте в своей личной папке подкаталог SITE.
    2. В личный каталог поместите нужные вам для оформления сюжетные изображения (например: 1, 2, 3) и фоновые рисунки (например: 1, 2).
    В личном каталоге должны быть все Ваши работы и прочие объекты (у нас - фоновые рисунки, изображения).

Задание 1. Структурные теги

  1. Откройте текстовый редактор Kate: Гл. меню - Утилиты - Редактор - Kate. В настройках закажите обычные отступы.
  2. Наберите в текстовом редакторе:

    <HTML>
          <HEAD>
                <TITLE>Страничка Брошкиной </TITLE>
          </HEAD>
          <BODY>
                Привет!    Это   моя   личная   домашняя   страничка!
          </BODY>
    </HTML>

  3. Сохраните этот текст под названием index.html в каталог SITE своей личной папки.
  4. Откройте сохраненный файл в браузере Firefox: Гл. меню - Интернет - Web Browser - Firefox.
  5. При неверном отображении текста уточните кодировку, например: Меню - Вид - Кодировка - UTF-8 (Юникод) .
  6. Вернитесь в текстовый редактор. Измените заголовок и основной текст (используйте свои разработки в семестре). Повторно сохраните (Ctrl+S).
  7. Вернитесь в  Firefox, перезагрузите страницу (Ctrl+R или F5).

Задание 2. Установка кодировки

  1. Вернитесь к редакторованию файла index.html
  2. Вставьте в нужное место тег с указанием кодировки (выделено):

    <HTML>
          <HEAD>
    …………………

               <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    …………………

          </HEAD>
          <BODY>
    …………………

          </BODY>
    </HTML>
    Замените, при необходимости, кодировку. Сохраните файл, обновите в  Firefox.


Кодировка, обои, картинки, бегущий текст

Задание 1. Теги форматирования

Примените теги форматирования:

Код

Вид

Шампунь для <b>жирных</b> котов

Шампунь для жирных котов

<i>Спагетти, пицца, капуччино </i>

Спагетти, пицца, капуччино

<u>Я подчеркиваю, что</u>

Я подчеркиваю, что

A<sub>i,j</sub>

Ai,j

A<sup>2</sup>

A2

<big>БОЛЬШОЙ</big> ТЕАТР

БОЛЬШОЙ ТЕАТР

<small>Маленький</small> Мук

Маленький Мук

<center>ЦЕНТР</center>

ЦЕНТР

перевод<br>строки

перевод
строки

Задание 2. Установка обоев

  1. Добавьте в тег <BODY> атрибут установки обоев (выделено):

    <HTML>
          <HEAD>
    …………………

          </HEAD>
          <BODY  background="[Имя файла изображения для фона страницы]">
    …………………

          </BODY>
          </HTML>

  2. Сохраните. Вернитесь в  Firefox, перезагрузите страницу.
  3. Для отступа фрагмента от края используйте тег  <blockquote >…</blockquote>

Задание 3. Вставка картинки

  1. Вернитесь в текстовый редактор. Вставьте тег <br> и добавьте тег вставки картинки <img> (выделено):

    …………………

    <BODY  … >
    …………………

          <img src="[Имя файла-картинки]" >
    …………………

    </BODY>

    Примените атрибуты тега <img>:

    src

    Источник (source) изображения, т.е. адрес графического файла.

    width, height

    Ширина и высота изображения. Эти атрибуты можно не указывать, тогда рисунок будет выглядеть "как есть", но лучше задавать их явно, чтобы браузер зарезервировал соответствующий объем памяти.

    alt

    Текст, появляющийся на экране вместо рисунка, если тот по какой-либо причине не может быть загружен. "Всплывает" при наведении мыши на рисунок.

    border

    Толщина рамки вокруг рисунка.

  2. Сохраните. Вернитесь в  Firefox, перезагрузите страницу.
  3. Вставьте другую картинку.

Задание 4. Вставка бегущей строки

  1. Вернитесь в текстовый редактор. Добавьте (выделено):

    …………………

    <BODY  … >
    …………………

    <MARQUEE behavior=alternate> Любой текст </MARQUEE>
    …………………

    </BODY>

  2. Сохраните. Вернитесь в  Firefox, перезагрузите страницу.