Лабораторная работа№1 Представление текстовых документов в формате HTML

Тема лабораторной работы: создание web-страниц с использованием HTML.

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

1. Изучить структуру web-документа

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <! DOCTYPE…>, которая обычно выглядит примерно так:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN"
" https://www.w3.org/TR/html4/loose.dtd" >

В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. и он будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer, Opera, Firefox).

Далее обозначается начало и конец документа тегами < html> и соответственно. Внутри этих тегов должны находиться теги головы (< head> < /head>) и тела документа(< body> < /body>).

Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п.

Основное содержимое: текст, таблицы, картинки, - находится в теле документа.

На этой картинке схематически изображена структура:

Как вы видите, голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот). Сначала закрываем голову документа < /HEAD>, и лишь затем открываем тело < BODY>. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.

Вставка комментария: <! -- --> - закомментированный текст при просмотре документа через браузер видно не будет. В начале комментарий нужно открыть тегом <! -- затем вписать текст, и закрыть тегом -->. Тег <! -- --> внутри элемента TITLE не действует.

2. Создать простейшую страничку.

ШАГ 1.
Создайте на своем компьютере папку с названием вашего будущего сайта, ну к примеру в данном случае актуально будет назвать папку obuchenie_html. Внутри папки создайте еще одну папку с названием www, а внутри нее еще одну для изображений с названием img (позже вставим туда картинки):

ШАГ 2:
Зайдите в созданную на предыдущем шаге папку www и создайте внутри нее текстовый документ. Для этого зайдите в нее, кликните правой кнопкой мыши в выпадающем меню выберите Создать - Текстовый документ.

ШАГ 3:
Напишите в Блокноте текст простейшей странички

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN"
" https://www.w3.org/TR/html4/loose.dtd" >

< html>
< head>

< title> Это моя первая страничка! < /title>

< /head>

< body>

<! --сейчас я напишу свою первую строчку текста! -->
Ура!!!! Я создал свою первую страницу на html!!!

< /body>

< /html>

ШАГ 4:
С охраните ваш документ как " index.htm" (".html" даст тот же результат). После сохранения можете удалить текстовый документ.

ШАГ 5:
З апустите получившийся файл index.htm

Для того, чтобы внести изменения в страничку, Вам нужно открыть данный файл через обычный блокнот. Либо же, можно менять прямо в браузере, но только в браузере Opera.

3. Изучить форматирование заголовков и абзацев

По умолчанию текст идет слитно, без разделений на абзацы, заголовки, т.е. форматирование отсутствует!

Основными элементами форматирования текста в html являются тэги:

Рассмотрим каждый тэг подробнее.