Методические указания
к практическому занятию «Разработка web-сайта. Текст и списки в HTML»
Цель - изучение структуры HTML-страницы и основных тэгов, используемых при создании HTML-страниц.
ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
Структура HTML - страницы
HTML-страница - это обычный текстовый файл, который содержит набор инструкций для интерпретации внутри специально предназначенных программ - браузеров типа Internet Explorer, Netscape Navigator и др. После прочтения с сервера HTML - страницы браузер, установленный на компьютере пользователя, получает содержащиеся в инструкциях указания по форматированию текста, отображению графических элементов, элементов управления, других элементов, включенных в страницу, и приводит в соответствии с ними страницу к тому виду, который в конечном счете и отображается на экране монитора.
Тэги
Для того чтобы отличить инструкцию браузера от обычного текста, она заключается в угловые кавычки. Такая, заключенная в кавычки часть HTML – страницы, называется тэгом. Тэги обычно записываются попарно: первый тэг определяет начало текста, с которого должны действовать содержащиеся в нем инструкции, и затем второй тэг, который указывает на окончание действия соответствующих инструкций. Внутри каждого из парных тэгов записывается имя, по которому он отождествляется, и чтобы отличить конечный тэг от начального, в нем записывается знак «/»(слэш).
Например:
<Н1> Теги в HTML </Н1> - отобразить текст «Теги в HTML » как заголовок первого уровня.
Кроме того, начальный тэг может содержать атрибуты - описание дополнительных свойств, уточняющих действие инструкций. Если атрибутов несколько, то они отделяются друг от друга пробелом. Чтобы указать атрибут, сначала записывается его полное имя (иногда сокращенное), а затем после знака равно значение, которое оно должно принять. Тип значения является символьным и поэтому лучше указывать его двойных (") кавычках. Но не будет и ошибки, если при записи значения свойства, содержащего только символы английского алфавита, цифры или знак дефиса «-», кавычки будут опущены.
Например,
<FONT color= "blue" size=5>Списки<FONT> - отобразить слово «Списки» шрифтом синего цвета и размером 5.
Допускается одну пару тэгов заключать внутри другой пары. В этом случае инструкции внешней пары будут распространяться и на заключенную в нее внутреннюю пару.
Например, использование тегов <i> (выделение курсивом) и <b> (полужирное начертание) с тексте HTML-документа приведут к тому, что текст <b><i>Форматирование текста</i></b> отобразится курсивными и полужирными буквами Форматирование текста.
При написании тэгов строчные и прописные буквы не различаются, перенос строки распознается как пробел, а несколько подряд записанных пробелов воспринимаются как один.
Содержание страницы
Минимальная структура HTML - страницы включает следующие обязательные тэги (если они отсутствуют, то браузер подставляет их автоматически):
<HTML>
<HEAD>
<TITLE> Заголовок страницы </TITLE>
</HEAD>
<BODY>
Текст документа, отображаемый в окне браузера
</BODY>
</HTML>.
Если с помощью любого текстового редактора создать файл с записью перечисленных тэгов, вместо слов «Содержательная часть» привести, например, содержание текстовой части конспекта лекции и присвоить файлу расширение.htm или.html, то такой файл начнет распознаваться браузером как страница HTML, его можно разместить на любом сайте и он будет доступен всем участникам сети Интернет.
Как видно из приведенной схемы, обязательная структура страницы включает две части - заголовок (заключен между тэгами HEAD) и тело (внутри тэгов BODY).
В тэге <TITLE>, записанном внутри заголовка, задается имя страницы. Оно отображается в названии окна браузера, в котором выводится данная страница, и, кроме того, используется многими поисковыми системами Интернет для определения тематического содержания страницы при поиске нужной информации.
Кроме тэга <TITLE>, в заголовке могут присутствовать и другие тэги. Это тэги:
<BASE> - задает абсолютный адрес ссылок на URL;
МЕТА - включает специальную информацию о редакторе, в котором создавалась страница, о сроке ее действия и т.п.;
LINK - содержит информацию о связях страницы с другими страницами, а также и некоторые другие.
Часть документа, заключенная в тэг <BODY>, охватывает содержательную часть страницы. Здесь размещается та информация, которая должна быть отображена на HTML - странице. Текст, написанный здесь, будет отображаться в окне браузера с учетом тех инструкций, которые сформированы в тэгах. При написании текста следует учитывать, что несколько подряд написанных пробелов будут отображаться как один пробел. Чтобы задать пробел явно, следует использовать специальные инструкции. Например, записанный в тексте набор символов   будет воспроизводиться как пробел, а если записать их несколько, разделив знаками «;», то можно задать любой отступ. Кроме того, признак конца строки, который обычно формируется в текстовых редакторах при нажатии на клавиатуре клавиши «Enter», также будет восприниматься как пробел.
Классификация тэгов
Теги абзацев и заголовков. Предопределено шесть стилей заголовков от H1 до Н6, отличающихся по высоте шрифта (H1 - самый крупный).
Для выделения из сплошного текста отдельных строк и абзацев используются тэги <BR>, <P>, <HR>.
<BR> - разбиение строки без разделения на абзацы. Это непарный тэг. Для его применения достаточно в конце строки записать один тэг <BR> и продолжение текста начнется со следующей строки. При этом будет сохранен действующий в абзаце межстрочный интервал.
<Р> - выделение абзаца. Текст внутри тэгов <Р></Р> группируется в отдельный абзац и отделяется от другой части текста увеличенным межстрочным интервалом. Следует отметить, что тег можно рассматривать как непарный, поскольку открытие нового тега автоматически прекращает действие предыдущего.
<HR> - вставляет горизонтальную разделительную линию, проходящую через всю страницу. Также является непарным тэгом.
Форматирование текста
Тэг <FONT> наиболее часто используется для комплексного форматирования текста на HTML-странице благодаря тому, что обладает набором свойств, с помощью которых можно изменять вид (атрибут face), размер (атрибут size) и цвет (атрибут color) шрифта, которым отображается текст.
Кроме тэга <FONT>, для форматирования текста обычно используются тэги, которые устанавливают следующие варианты отображения текста:
<B> - полужирное написание;
<I>-курсивное написание;
<U> - текст подчеркнутый;
<S> - текст зачеркнутый;
<SUB> - нижний индекс;
<SUP> - верхний индекс;
<BIG> - увеличение шрифта текста на один размер;
<SMALL> - уменьшение шрифта текста на один размер;
<CENTER> - центрирование HTML -элементов относительно страницы;
<BLOCKQUOTE> - добавление отступа в тексте;
<OL>, <UL> - преобразует строки текста, помеченные тэгами <LI> - соответственно в нумерованный и маркированный списки.
ЗАДАНИЯ К ПРАКТИЧЕСКОМУ ЗАНЯТИЮ
1 Ознакомиться с содержанием теоретической части работы.
2 Запустить на исполнение текстовый редактор.
3 Создать HTML-страницу, включающую заголовок и тело. Используя тэг <TITLE>, указать в заголовке страницы название «Разработка WEB-сайта». В теле страницы набрать текст (с учетом форматирования и разделения на абзацы) согласно рисунку 1.
Рисунок 1
4 Сохранить страницу командой «Файл - Сохранить как». Указать тип файла «Все файлы» и название файла «index.html».
5 Создать файл text.html, в котором разместить записи А.С. Пушкина, приведенные в текстовом файле bank.html, и отформатировать согласно следующим предписаниям.
Рисунок 2
В первом абзаце все собственные имена выполнить полужирным шрифтом, а прямую речь – курсивом. Абзац должен быть отформатирован по правой границе окна.
Второй абзац выполнить моношрифтом, отформатировать по ширине окна, а слова «пустят ли тебя туда » выделить стандартным красным цветом и увеличенным на один размер шрифтом.
Третий абзац выровнять по левому краю, слова «гвоздь не прочен» и «картина может когда-нибудь сорваться и убить» выделить курсивом, а слова «сорваться» и «убить» выделить полужирным шрифтом. Слова господина Крылова выделить любым, отличным от основного, цветом, например, стальным.
Текст четвертого абзаца выполнить в виде цитаты и четверостишья.
6 Создать файл list.html, в котором выполнить формирование различных списков: неупорядоченных, упорядоченных, каскадных. Текст списков можно взять из файла bank.txt.
При формировании списков показать возможность использования всевозможных маркеров элементов списка. Например так, как показано на рисунке 3.
Рисунок 3
Замечание. На рисунке 3 списки размещены в простой таблице, состоящей из одной строки и трех столбцов. На данном этапе выполнения практической работы таблицы можно не использовать.