HTML за 8 класс

Лабораторный практикум

Создание сайта с помощью языка разметки HTML

Введение

Основы языка HTML

Что такое HTML?

HTML (HyperText Markup Language) - язык гипертекстовой разметки документов. Назначение HTML в том, чтобы сделать документы пригодными для чтения с экрана монитора. HTML-документ представляет собой обычный текстовый документ с управляющими конструкциями языка HTML – тегами, которые и производят действия "форматирования" над текстовыми блоками и осуществляют вставку различных объектов в документ.

Как создать HTML?

Для создания HTML документов используют текстовые редакторы (например Блокнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Вы можете создать HTML документ в простом Блокноте. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на .html или .htm вы получите полноценную web страничку.

Структура HTML документа

Что такое теги в HTML?

Теги - это инструменты разметки текста. Теги могут прописываться как строчными, так и прописными буквами, разницы никакой нет. Теги бывают парными и не парными. В качестве примера парного тега можно привести тег <html></html>, этот тег начинает и заканчивает любой HTML документ. Вторая часть парного тега отличается от первой только наличием символа /, однако первая часть тега может содержать и дополнительные параметры. Например в теге <font size="4"></font>, атрибут size="4" определяет размер текста. Примером непарного тега является <hr> - тег вставки в HTML документ горизонтальной линии, такой как в конце этого абзаца

Лабораторная работа №1

«Создание простейшего HTML-документа. Форматирование текста»

Цель работы: познакомиться со структурой HTML-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.

Теоретический материал

Структура html-документа:

Назначение Вид тэгов Примечание
Тип документа <html></html> Начало и конец файла
Имя документа <title></title> Должно быть в заголовке
Заголовок <head></head> Описание документа
Тело страницы <body></body> Содержимое страницы
Назначение Вид тэгов Примечание
Внутренние заголовки различного уровня <h1>Пример</h1> Здесь 1 – номер уровня заголовка (от 1 до 6)
Заголовок с выравниванием <h2 align="center">Этот заголовок будет выровнен по центру</h2> Типы выравнивания: left – по левому; center – центр, right – по правому
Назначение Вид тэгов Примечание
Создание абзаца (параграфа) <p>Введите текст</p>
Выравнивание абзаца <p align="right">Этот заголовок будет выровнен по правому краю</p> Типы выравнивания: left, right, center и justify
Перевод строки внутри абзаца <br> Одиночный тэг
Тег Начертание Пример
<b> Полужирное <b>Полужирное</b>
<i> Курсив <i>Курсив</i>
<s> Зачёркнутый <s>Зачёркнутый</s>
<u> Подчёркнутый <u>Подчёркнутый</u>
<font color> Цвет шрифта <font color=red></font>
<font size> Размер шрифта <font size=64></font>

Также вы можете комбинировать font color и font size:

<font size="64" color="blue">Этот текст будет размером 64 и синего цвета</font>

Задание №1

Создание и сохранение html-документа

Для того чтобы написать код простейшей web-страницы вам необходимо знать язык разметки гипертекста HTML. Мы будем знакомиться с ним по ходу создания наших страниц. Сразу хочу сказать, что все команды HTML записываются в специальных символах <> и называются тегами.

Порядок выполнения работы

  1. На локальном диске С:/ в папке Мои документы/ создать папку под своей фамилией/

  2. Открыть Блокнот (Пуск-Все программы – Стандартные - Блокнот)

  3. Сохранить документ под именем 1.html в свою папку (файл - сохранить как – мои документы – ваша папка)

  4. Закройте документ

  5. Откройте вашу папку, если вы все сделали правильно, то в ней будет отображаться документ со значком Explorers, так отображаются все HTML - документы.

  6. Откройте ваш документ (двойной щелчок по значку)

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

  8. Запишите ваш первый программный код:

<html>
  <head>
    <title>Моя первая страница</title>
  </head>
  <body>
    <h1>Моя первая страница</h1>
  </body>
</html>

  1. Сохраните ваш код для этого нажмите CTRL + s

  2. Обновите документ (щелкните по зеленому значку на панели браузера)

  3. Измените документ. Установите цвет фона и шрифта. Для этого внесите следующие изменения в код:

<html>
  <head>
    <title>Моя первая страница</title>
  </head>
  <body bgcolor="#edf3ff">
    <h1>
      <font color="red">Моя первая страница</font>
    </h1>
  </body>
</html>

Атрибут bgcolor отвечает за цвет фона; Атрибут font устанавливает цвет и размер шрифта.

  1. Добавьте в ваш документ текст. Для этого воспользуйтесь тегом абзаца <p> и тегом переноса текста на новую строку <br>

  2. Измените расположение текста, применив тег <align>

  3. Внесите изменения в ваш код:

<html>
  <head>
    <title>Моя первая страница</title>
  </head>
  <body bgcolor="#edf3ff">
    <h1>
      <font color="red"> Моя первая страница </font>
    </h1>
    <p align="right">
      Первое практическое задание
      <br />
      Выполнил студент 1 курса
      <br />
      Фамилия Имя
    </p>
  </body>
</html>

Атрибут bg отвечает за цвет фона; Атрибут font устанавливает цвет и размер шрифта.

  1. Добавьте в ваш документ текст. Для этого воспользуйтесь тегом абзаца <p> и тегом переноса текста на новую строку <br>
  2. Измените расположение текста, применив тег <align>
  3. Внесите изменения в ваш код:
<html>
  <head>
    <title>Моя первая страница</title>
  </head>
  <body bgcolor="#edf3ff">
    <h1>
      <font color="red">Моя первая страница</font>
    </h1>
    <p align="right">
      Первое практическое задание
      <br />
      Выполнил студент 1 курса
      <br />
      Фамилия Имя
    </p>
  </body>
</html>

Лабораторная работа №1.2

Стих

Автор неизвестен

Однажды в студеную зимнюю пору

Сижу за решеткой в темнице сырой

Гляжу поднимается медленно в гору

Каждую строчку стихотворения выполнить разным цветом, для этого воспользоваться цветовой панелью.

Создание линий. Форматирование шрифта

Тэг <hr />

Элемент hr отображает горизонтальную линию. Этот элемент имеет следующие атрибуты:

Атрибут Описание Значение Пример
align Задаёт выравнивание линии (по умолчанию по центру) left|center|right align="right"
color Задаёт цвет линии цвет color="black"
size Задаёт толщину линии в пикселях от 1 до бесконечности size="1"
noshade Логический (булев) атрибут, если он установлен, то линия не будет объёмной noshade
width Задаёт длину линии в пикселях или процентах от ширины экрана Число или проценты width="80%"

Пример:

<hr align="center" size="3" width="350" noshade color="blue" />

Задание №1.2

Порядок выполнения работы

  1. Откройте блокнот и сохраните документ в вашу папку под именем 2.html.

  2. Изобразите несколько линий разной длины, толщины и цвета. Для того чтобы изобразить горизонтальную линию воспользуйтесь тегом <hr />. Чтобы задать толщину добавьте атрибут size="3", чтобы задать ширину добавьте атрибут width="100%"

  3. Запишите программный код

<html>
  <head>
    <title>Линии</title>
  </head>
  <body bgcolor="#edf3ff">
    <h1>Коллекция горизонтальных линий</h1>
    <hr size="2" width="100%" color="red" />
    <br />
    <hr size="4" width="50%" color="blue" align="left" />
    <br />
    <hr size="8" width="25%" color="green" align="right" />
    <br />
    <hr size="16" width="12%" color="black" />
  </body>
</html>

  1. Откройте блокнот и сохраните документ в вашу папку под именем 3.html

  2. Изобразите несколько фраз, напечатанных разным стилем (полужирно, подчеркнуто и тд)

  3. Воспользуйтесь тегами:

  • <b> - отображает полужирный шрифт

  • <u> - отображает подчеркнутый шрифт

  • <i> - отображает наклонный шрифт (курсив)

  • <tt> - имитирует шрифт печатной машинки

Запишите программный код:

<html>
  <head>
    <title>Форматирование шрифта</title>
  </head>
  <body>
    <p>
      <b>Полужирный щрифт</b>
      <br />
      <i>Текст отображается курсивом</i>
      <br />
      <tt>Текст имитирует пишущую машинку</tt>
      <br />
      <u>Подчеркнутый текст</u>
    </p>
  </body>
</html>

Лабораторная работа №1.2

Пороша

Еду. Тихо. Слышны звоны
Под копытом на снегу.
Только серые вороны
Расшумелись на лугу.

Еду. Тихо. Слышны звоны
Под копытом на снегу.
Только серые вороны

Лабораторная работа №2

Тема: "Вставка изображений в HTML-документ"

Цель работы: изучить основные тэги для вставки изображений в HTML-документ и для их преобразования.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал: Для того, что бы вставить картинку, нужно использовать очень простой тег, не требующий закрытия: <img src="..."> Вместо трёх точек в кавычках (...), Вам необходимо подставить путь к картинке. Расширения картинки можете использовать любые (*.gif, *.png, *.jpg)

Код Описание
<img src="pc.jpg"> Без атрибутов - текст по умолчанию находится снизу картинки
<img src="pc.jpg" align="right"> align="right" - картинка справа, текст слева
<img src="pc.jpg" align="left"> align="left" - картинка слева, текст обтекает справа
<img src="pc.jpg" align="bottom"> align="bottom" - как и по умолчанию, текст внизу
<img src="pc.jpg" align="middle"> align="middle" - текст посредине картинки
<img src="pc.jpg" align="top"> align="top" - текст вверху картинки
<img src="pc.jpg" vspace="10"> vspace - задаёт расстояние между текстом и рисунком (по вертикали). В примере расстояние равно 10 пикселям (точкам)
<img src="pc.jpg" hspace="20"> hspace - задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задается в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам)
<img src="pc.jpg" alt="Сайт для сайтостроителей"> alt - задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer — работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись "Сайт для сайтостроителей". Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой
<img src="pc.jpg" width="150"> width - задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры!!!)
<img src="pc.jpg" height="150"> height - задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры!!!)
<img src="pc.jpg" border="0"> border - задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0
<p align="center"><img src="pc.jpg"></p> <p></p> - размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например: align="left" - слева, align="center" - в центре, align="right" - справа
<body background="pc.jpg" bgcolor="#000000">...</body> background="Ваш_фон.jpg" - Ваша картинка будет фоном HTML странички. В атрибуте background="Ваш_фон.jpg" нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка.

Пример: <img src="pc.jpg" align="left" vspace="10" border="3" alt="Сайт для сайтостроителей uzeron.com">

Задание №2

Вставить картинку

Порядок выполнения работы

Для того чтобы вставить картинку в html – документ воспользуйтесь тегом

`<img src="1" width="250" height="200">`

Запишите программный код:

<html>
  <head>
    Название картинки
  </head>
  <body bgcolor="#edf3ff">
    <h1 align="center"><font color="red">Название картинки</font></h1>
    <img src="1.jpg" width="300" height="250" />
    <p>
      <font color="blue">
        Это картинку вставил студента 1-го курса Фамилия Имя
      </font>
    </p>
  </body>
</html>