Boroday

Бородай Валерия Александровна
преподаватель информатики
ГАПОУ РО «РКРСТ «Сократ»
г. Ростов-на-Дону
МЕТОДИЧЕСКАЯ РАЗРАБОТКА ПРАКТИЧЕСКОГО ЗАНЯТИЯ
по дисциплине «Информатика»
1 курс
очная форма обучения
специальность 43.02.10 Туризм
ТЕМА: «ОСНОВЫ ЯЗЫКА РАЗМЕТКИ HTML»
Цель работы: Освоить основные приемы создания html-документов, познакомиться со
структурой документа, с элементами разметки и атрибутами.
План работы:
1.
2.
3.
4.
5.
HTML как язык разметки.
Основы языка разметки.
Создание html-файла с помощью простейших средств разметки и управления отображением.
Форматирование html-документа, добавление графики.
Контрольные вопросы.
Теоретическая часть
1.
HTML как язык разметки
При обработке текстовых документов обычно требуется выделять в них отдельные
структурные элементы. Например, это нужно для составления оглавления. Без помощи
человека компьютеры — это делать не могут. Поэтому документ должен быть специальным
образом подготовлен — в текст документа добавляются специальные конструкции,
предназначенные компьютерным программам. С их помощью обрабатывающие программы
получают информацию о свойства фрагментов текста. Процесс добавление в текст такой
служебной информации, называется разметкой документа.
С помощью разметки фрагментам документа приписывается информация об их роли в
структуре документа (заголовок, абзац) или смысловом содержании (таблица данных, список).
Такая разметка называется структурной или структурно-семантической (семантика — это
смысловое значение).
HTML — это язык разметки, разработанный для подготовки документов,
обрабатываемых веб-браузерами. Чтобы показать документ на экране, графическому браузеру
нужно знать, как отображать отдельные элемента документа (цвет фона, семейство, размер и
начертание шрифта, способ выравнивания текста и т.п.).
В первых версиях языка HTML разметка стала также и средством задания графических
свойств элементов документа. Разметка, применяемая для описания свойств отображения
документа, называется презентационной.
Презентационная разметка крайне нежелательна и её нужно избегать. Однако
современные браузеры для обратной совместимости по-прежнему поддерживают её элементы.
1
2.
Основы языка разметки
Теги и элементы
При подготовке документа разметочные коды, как и остальной текст, вводятся с
клавиатуры, поэтому они текстовые. Поэтому html-документ — это чисто текстовый
документ (plain text), включающий разметку.
Чтобы отличить служебную информацию от основного текста, для разметки
применяется конструкции в специальном формате, называемом тегами (tag означает "ярлык").
Все теги состоят из левой угловой скобки (знак "меньше") и заканчиваются правой
угловой скобкой (знак "больше"). Между угловыми скобками записывается ключевое слово —
имя тега. В именах тегов регистры букв не учитываются, т.е. строчные и заглавные буквы
эквивалентны. В настоящее время принято записывать имена тегов строчными буквами.
Теги часто используются для выделения фрагментов документа. Для указания начала и
конца фрагмента используются открывающие и закрывающие теги.
Закрывающий тег имеет то же имя, что и открывающий тег, но отличается тем, что перед
именем ставится прямой слэш (косая черта "/"). Например, для выделения в тексте абзаца и
цитаты используются конструкции:
<p> … </p>
<blockquote> … </blockquote>
Открывающий и закрывающий тег, вместе с находящимся между ними текстом (тело
тега), образуют элемент html-документа.
<center>Этот текст выравнивается по центру </center>
Имя тега является также именем элемента.
Замечание
Некоторые разметочные теги по своему смыслу не связаны с каким-то фрагментом текста. Например, теги,
используемые для добавления в документ картинок (img от image) или для указания переводов строки (br от
break). Во всех версиях HTML, исключая XHTML, такие элементы не требуют закрывающего тега. В XHTML все
теги должны быть парными, но для элементов с пустым телом можно применять сокращенный синтаксис.
Например, для перевода строки вместо <br></br> можно писать <br/>.
Элементы в документе могут либо следовать один за другим, либо быть вложены один в
другой.
Вложение должно быть правильным: закрывающий тег вложенного элемента должен
появиться раньше закрывающего тега охватывающего элемента. Свойства охватывающего
элемента распространяются на вложенный.
Например,
<b>Текст полужирным шрифтом и <i>курсивом</i></b>
Здесь тег <b> (от bold — жирный) означает, что текст должен быть выведен
полужирным шрифтом, а тег <i> (от italic —курсивный) — курсивом. Будет выведено:
Текст полужирным шрифтом и курсивом
Замечание
При неправильном вложении браузеры не отказываются отображать элементы. Они пытаются представить
их так, как это им кажется наиболее подходящим. Но это может не соответствовать намерениям автора разметки.
Атрибуты элементов
Спецификация языка разметки определяет набор тегов и приписываемый каждому
смысл. Однако есть возможность уточнять свойства элементов — открывающий тег элемента
может содержать атрибуты.
Атрибуты в общем случае задаются парой "ключ-значение" в формате:
имя_атрибута = "значение_атрибута".
2
Хотя в HTML для простых значений атрибутов кавычки не являются обязательными,
рекомендуется кавычки все-таки использовать. В будущем это позволит избежать ошибок в тех
случаях, когда кавычки нужны обязательно.
Есть атрибуты, для которых значение не указывается (checked, selected), а важен
сам факт их присутствия. Если атрибут указан, то элемент обладает определенным свойством,
например, "является отмеченным" для элементов списка или флажка.
В XHTML все атрибуты должны иметь значение (checked="checked") и эти значения
должны быть взяты в кавычки.
Если атрибутов несколько, то они отделяются друг от друга пробелами, причем порядок
записи атрибутов не имеет значения.
Например,
<table border="0" width="300">... </table>
Некоторые атрибуты являются обязательными, некоторые имеют значения по
умолчанию и появляются только тогда, когда нужно изменить это значение.
Каждый атрибут должен встречаться один в раз. Все повторные появления атрибута
браузер будет игнорировать.
Пример.
Для текста ABCDEFG с помощью атрибута size трижды задан размер шрифта:
<font size="1" size="4" size="6">ABCDEFG</font>
Браузер будет использовать значение 1, а значения 4 и 6 не рассматриваются.
Версии HTML
За более чем 20 лет язык HTML несколько раз уточнялся и дополнялся, поэтому в сети
накопились документы, созданные с использованием разных спецификаций (основные: HTML
3.2, 4.01, 5, XHTML 1.0). Браузеры универсальны в том смысле, что они могут учитывать
особенности разметки каждой спецификации. Но для этого в документе нужно определить,
какая версия HTML была использована при его создании.
В версии HTML 4.01 в язык разметки была добавлена специальная конструкция —
объявление типа документа, с которой должен начинаться html-документ. Она имеет вид
<!DOCTYPE ... > или <!doctype ... >.
Хотя декларация doctype похожа на тег, к разметке она не имеет отношения. Это
инструкция браузеру, по каким правилам интерпретировать весь документ, а не его элементы.
В спецификации HTML 4.01 было определено три варианта объявления типа документа
с разными ограничениями и степенью строгости правил. Чаще всего используется объявление
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Так как эта конструкция громоздкая и сложная для понимания, то в HTML 5 объявление
было упрощено до минимума:
<!DOCTYPE html>.
Если в html-файле отсутствует объявление <!doctype>, браузер обрабатывает вебстраницу в специальном режиме (quirk mode), имитирующем работу старых браузеров
(появившихся до выхода HTML 4.01).
Замечание
При изучении основ языка HTML и его базовых тегов во многих случаях объявление типа документа
можно опускать. Это не будет мешать правильному отображению документа. Но, если в документе используются
конструкции HTML 5, то объявление должно присутствовать обязательно. Без этого новые элементы будут
проигнорированы.
Структура документа
Размеченные с помощью HTML документы помещаются в файлы с расширениями .htm
или .html. Эти расширения, как правило, ассоциированы с программой браузера,
3
используемого по умолчанию. Поэтому для открытия html-файлов в браузере из Проводника
достаточно щелчков на именах этих файлов.
Для создания html-файлов нужно использовать редактор, не форматирующий текст (типа
Блокнот).
Всякий html-документ формируется как один большой элемент с именем html, в
который вложены два элемента, называемых:
 заголовком документа (head) и
 телом документа (body).
Заголовок документа ограничивается тегами <head>…</head> и используется в
основном для вспомогательных целей. Здесь описывается мета информация (используемая
таблица кодировки и другие общие свойства документа), выполняется подключение внешних
файлов с программным кодом на JavaScript или с описанием стилевых свойств отображения
элементов.
В аккуратно подготовленном заголовке html-документа всегда должен присутствовать,
по крайней мере, элемент <title>, с помощью которого задается заголовок окна браузера,
выводимый операционной системы.
Тело документа — это часть документа, заключенная в теги <body>…</body>. Это
содержание документа.
Таким образом, общая структура html-документа имеет вид:
<!doctype html>
<html>
<head>
<title> Мой первый документ </title>
...
</head>
<body>
...
</body>
</html>
Замечание
Это не единственный вариант структуры, так как html-документ может определять страницу, на которую
выводится содержание сразу нескольких html-файлов. Для каждого файла выделяется часть экран — фрейм. В
этом случае тело составного документа образуется элементом <frameset>…</frameset>, а не <body>. В
HTML 5 фреймы этого типа не поддерживаются.
В html-документе могут быть добавлены комментарии, которые ограничиваются
специальными последовательностями символов:
<!-- Это текст комментария -->
Ход выполнения работы
ЗАДАНИЕ 1 (Простейшие средства разметки и управления отображением)
1. Создать html-файл с заголовком окна "Задание 1" и текстом "Практическая
работа", который выводится шесть раз подряд с помощью заголовков разного уровня <h1> –
<h6> (от header). Проверить как выглядит страница в браузере. Каковы особенности вывода
текста с помощью тегов <h…>?
2. Отформатировать строки текста следующим образом.
4
а) Вывести текст в первой и второй строке подчёркнутым и курсивом. Для
подчеркивания использовать тег <u> (от underline). Проверить как выглядит страница в
браузере.
б) Выровнять по центру окна третью и четвертую строку (с помощью тега <center>).
Проверить как выглядит страница в браузере.
в) Поменять цвет шрифта в пятой и шестой строках (атрибут color, для задания цвета
выбрать одно из значений red, green, blue, black, yellow, cyan или magenta ).
Проверить как выглядит страница в браузере.
Замечание
Чтобы после изменений разметки не загружать html-файл заново, можно воспользоваться либо функцией
обновления страницы (F5), либо поставить курсор в конец адресной строки и нажать Enter.
ЗАДАНИЕ 2 (Форматирование текста, добавление графики)
1. Задан текст:
Команды языка HTML, с помощью которых выполняется разметка исходного текста,
называются тегами. Теги состоят из ключевого слова (имени тега), заключённого в угловые
скобки.
Как правило, один тег HTML воздействует только на часть документа. Чтобы её
выделить, используются парные теги: открывающий и закрывающий. Открывающий
создаёт эффект, а закрывающий — прекращает его действие.
Атрибуты — дополнительные ключевые слова, которым может задаваться значение. От
имени тега и друг от друга атрибуты отделяются пробелами. Некоторые атрибуты являются
обязательными.
а) Создать структуру пустого html-документа.
Скопировать текст в тело документа. Длинное тире в тексте документа задать
специальным служебным обозначением — (что подразумевает "широкая, как буква m,
черта").
Проверить, как будет выглядеть текст в окне браузера. Сохранилось ли в окне браузера
разбиение на абзацы, которое присутствовало в исходном документе?
Замечание
Для задание тире использована специальная конструкция, называемая сущностью. Это типовая
конструкция, которая используется для программирования вывода различных специальных символов. Например,
символы < и >, которые в HTML имеют служебный смысл, можно добавить в обычный текст с помощью
сущностей < (lesser than) и > (greater than).
б) Между первым и вторым абзацем вставить тег для перехода на новую строку <br>.
Между вторым и третьим вставить тег нового абзаца <p>.
Проверить, как будет выглядеть текст в окне браузера. Что изменилось?
в) Откорректировать разметку, заключив каждый абзац в свой элемент абзаца <p>.
Определить для каждого абзаца индивидуальные свойства.
Первый абзац выровнять по ширине (атрибут align со значением justify). Второй —
по центру (значение center), третий — по правому краю (значение right).
Проверить как выглядит страница в браузере.
2. Поменять цвет фона на странице (атрибут bgcolor тега body).
Проверить как выглядит страница в браузере.
3. Для вывода изображений используется тег <img>. Файл картинки задается атрибутом
src (от source) этого тега.
5
Добавить на страницу изображение, находящееся в файле Приложение image1.jpg,
с контуром вокруг него (border="1"). Отцентрировать положение картинки (использовать
тег <center>).
Контрольные вопросы
1. Что понимается под разметкой документа и для чего она нужна? В чем различие
структурной и презентационной разметки?
2. Для чего нужны теги и какой они имеют формат? Что в языке разметки понимается
под элементом? Какую структуру имеют элементы? Всегда ли требуются закрывающие элемент
теги? От чего это зависит? Что подразумевает правильное вложение элементов?
3. Какую роль играют атрибуты? Где они записываются и какой имеют формат? Важен
ли порядок записи атрибутов? Как браузер реагирует на повторное задание значения атрибута?
4. Для чего в html-документах используется объявления типа документа doctype?
Какой формат имеет определение типа документа? Как будет интерпретироваться htmlдокумент, если в нем нет объявления типа документа? Как указать, что документ должен
интерпретироваться по правилам HTML 5?
5. Какую базовую структуру имеют html-документы? Какое назначение имеют разделы
head и body? Где задается заголовок окна браузера?
6. Для чего используются символьные сущности? Приведите примеры таких сущностей.
7. Назовите теги и атрибуты, которые в лабораторной работе были использованы для
форматирования текста.
6