Л. р. №23 Применение средств создания и сопровождения сайта.
 Основы Html

Средство для выполнения лабораторной работы на ПК

Средства для выполнения лабораторной работы на телефоне 

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

Файлы html имеют расширение .htm или .html.

Содержат один тип управляющих конструкций – теги (tags) – дескрипторы. Все теги  заключены в угловые скобки < >.

Обычно теги парные: начальный и конечный теги. Начальный – <>, конечный </>, например <h1> и </h1>. Парный тег называют еще контейнерный.

Некоторые теги не имеют обязательного парного тега, такой тег называют одиночный. Закрывается такой тег написанием правого слеша перед закрывающей угловой скобкой, например <br />

Структура html-документа выглядит следующим образом

В первой строке конструкция DOCTYPE означает один из стандартов верстки web-страницы.

Далее весь HTML-документ заключен между парным тегом <html> и </html>. Это обязательный тег.

Между тегами <head> и </head> содержится заголовочная часть. В нее входит конструкция <title> и </title>. Это название при загрузке документа появляется в строке заголовка браузера

Запись  <meta content="charset=windows-1251" /> означает кодировку кириллицы, чтобы буквы корректно отображались в браузере. 

Если кодировку не прописывать, шрифты иногда могут отображаться следующим образом

Та же страничка после вставки кодировки 

Примечание: в Notepad++ необходимо до верстки и сохранения html-файла выбрать из верхнего меню Кодировки – Кодировать в UTF-8 

Задание 1.1 Создание шаблона

Откройте Notepad++. Убедитесь, что установлена кодировка UTF-8 , для этого в меню в пункте Кодировки, установите позицию Кодировать в UTF-8 .  

Наберите в Notepad++ следующий код 

Конструкцию DOCTYPE можно просто скопировать (запоминать и заучивать ее не надо). 

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

Тег <meta/>

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

Созданный документ можно сохранить, как шаблон, чтобы в будущем не прописывать всю конструкцию снова.

Сохраните файл (Файл - Сохранить как) под именем shablon.html, при этом в поле Тип файла установите All types , иначе web-страница потом не откроется в браузере. 

После сохранения запустите shablon.html двойным щелчком. В результате файл должен открыться в браузере. Если не получился результат, как на рисунке, значит, в коде скорей всего есть ошибка. Достаточно одного неверного символа и web-страница не будет отображаться корректно. 

Задание 1.2 Создание простого файла страницы

Создайте копию документа shablon.html и назовите index1.html и откройте в программе NotePad++ (правой клавишей мыши по файлу и выберите пункт "Редактировать с помощью NotePad" или "Edit with NotePad"). Если пункт меню с редактированием с помощью NotePad, то просто откройте программу NotePad++ и перетащите этот документ в окно программы.

В названии документа укажите "Учебный файл HTML"  (тег <title> </title>) (представлено на рисунке ниже)

В теле укажите "Расписание занятий на вторник" (тег <body> </body> (представлено на рисунке ниже)

Сохраните получившийся файл (проверьте наличие расширения .html и нужной кодировки) и откройте с помощью браузера 

Код страницы

Результат

Задание 1.3 Команды форматирования текста 

Внесем изменения в созданную страницу. Расположите слова "Расписание", "занятий" и "на вторник" на разных строках. 

Сохраните текст с внесенными изменениями (меню Файл - Сохранить). Откройте документ в браузере. Если Web-страница уже была открыта, то достаточно переключиться на панели задач на программу браузера и обновить эту страницу. Внешний вид Web-страницы НЕ ДОЛЖЕН был измениться. 

Примечание. Каждый раз необходимо сохранять текст Web-страницы при ее корректировке в программе Блокнот/Notepad++ и обновлять страницу при ее просмотре в программе браузера. 

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

Тег перевода строки <br> отделяет строку от последующего текста или графики. 

Тег абзаца <p> </p> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. 

Оба тега являются одноэлементными, тег <p> – двойной, т.е. требуется закрывающий тег.

Часть кода страницы

Результат

Задание 1.4 Выделение фрагментов текста 

Внесите следующие изменения в код страницы и посмотрите полученную Web-страницу. 

Часть кода страницы

Результат

Тег <b> </b> - устанавливает жирное начертание шрифта. 

Тег <i> </i> - устанавливает курсивное начертание шрифта. 

Тег <u> </u>  - добавляет подчеркивание к тексту. 

Примечание. Возможно использование комбинированных выделений текста. 

<i> <b> Расписание </b> </i>   <i> <u> занятий </u> </i>   <u> на вторник </u> 

Но при этом необходимо помнить следующее правило использования комбинированных тегов: 

<Тег_1><Тег_2> ...</Тег_2></Тег_1>– правильная запись. 

<Тег_1><Тег_2> ....</Тег_1></Тег_2> – ошибочная запись. 

Обратите внимание на «вложенность» тегов, она напоминает «вложенность» скобок 

Задание 1.5 Задание размеров символов Web-страницы 

Существует два способа управления размером текста, отображаемого браузером:  

Используется шесть тегов заголовков: от <h1> до <h6> (тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера. 

1. Внесите изменения в файл index1.html

Часть кода страницы

Результат

2. Тег <font> шрифта позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7. 

Пример использования тега: <font size="3">  Тут должен быть текст  </font>

Для слова "занятий" измените размер на 5. Запустите получившийся вариант кода. Результат страницы должен быть следующим.

Задание 1.6 Установка гарнитуры и цвета шрифта 

Примечание: Тег <font> предоставляет возможности управления гарнитурой, цветом и размером текста. 

Изменение гарнитуры текста выполняется простым добавлением к тегу <font> атрибута FACE. Например, для отображения текста шрифтом Arial необходимо записать: <font FACE=”ARIAL”>

Для изменения цвета шрифта можно использовать в теге атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зеленую (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB. 

Примеры записи текста в формате RGB приведены в Таблице

Долее подробную информацию об использовании цветов можно посмотреть в Дополнительных материалах 

Пример использования тега с тремя атрибутами <Font COLOR="#FF0000" FACE="ARIAL" SIZE="7">

Внесите следующие изменения в код страницы

Результат

Задание 1.7 Выравнивание текста по горизонтали 

Атрибут align предназначен для горизонтального выравнивания содержимого 

Пример: <p align="center">.....</p> 

Варианты значений:

Измените строки следующим образом

 <p> <h1 align="center"> <font COLOR="#0000FF" FACE="ARIAL"> Расписание </font> </h1> </p>

 <p align="left"> <i> <font size="5" FACE="ARIAL">занятий</font> </i> <u> <font COLOR="#A0A0A0" FACE="ARIAL">на вторник</u> </p>

Выравнивание применяется сразу ко всему абзацу, поэтому необходимо было добавить тег <p> для строки с фразой "занятий на вторник"

Сохраните изменения и откройте файл в браузере. Результат должен быть следующим

Задание 1.8 Оформление расписания

Создайте копию документа index1.html и переименуйте файл index2.html

Измените текст следующим образом:

"Расписание

занятий на понедельник 

занятий на вторник

занятий на среду

занятий на четверг

занятий на пятницу

занятий на субботу 

занятий на воскресенье"

Измените форматирование так, чтобы получился следующий результат

Задание 2.1 Задание цвета фона и текста 

При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, – они заданы параметрами настройки браузера. Чтобы задать другие цвета необходимо сделать в начале файла HTML в теге <BODY> прописать атрибут bgcolor. 

Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета непросмотренных и просмотренных ссылок.

Скопируйте шаблон (файл shablon.html) и переименуйте его index3.html

В названии (тег <title>) укажите "Задание №2", а в теле (<body>) напишите следующую фразу заголовка первого уровня"1 Сентября!". Цвет установите "красный" и расположение "по центру". Сохраните и откройте в браузере. 

Должен получиться следующий результат страницы.

Добавьте новый абзац с фразой "Поздравляем с праздником!" оставьте форматирование без изменений.

Изменим цвет фона и всего текста в документе, для этого в теге <body> сделайте следующие изменения

<body BGCOLOR="#FFFFCC" TEXT="#FF00FF">

Получится следующий результат

Цвет текста изменится только у тех элементов, где не указан другой цвет (как, например, красный цвет у "1 Сентября!")

Вместо однотонного цвета фона можно установить фоновое изображением. Фоновое изображение – это графический файл с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размеров. Графика, используемая в качестве фоновой, задается в теге <BODY>

Например: <BODY BACKGROUND="FON.PNG">

Задание 2.2 Размещение графики на Web-странице  

Тег <img> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег  <img> является одиночным. 

Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.

Для выполнения следующего задания поместите файл с именем bell.png в рабочую папку (с документом index3.html).

Добавьте строку <IMG SRC="bell.png"> после "Поздравляем!"

Изображение будет слишком велико. Изображение, как и текст имеет атрибуты, с помощью которых его можно настроить. 

ALT <IMG SRC="picture.jpg" ALT="Картинка"> Задает текст, заменяющий изображение в том случае, если браузер не воспринимает изображение

BORDER <IMG SRC="picture.jpg" BORDER="3"> Задает толщину рамки вокруг изображения. Измеряется в пикселях

ALIGN <IMG SRC="picture.jpg" ALIGN="TOP"> Задает выравнивание изображения относительно текста:

HEIGHT <IMG SRC="picture.jpg" HEIGHT="111"> Задает вертикальный размер изображения внутри окна браузера

WIDTH <IMG SRC="picture.jpg" WIDTH="210"> Задает горизонтальный размер изображения внутри окна браузера

VSPACE <IMG SRC="picture.jpg" VSPACE="8"> Задает добавление верхнего и нижнего пустых полей

HSPACE <IMG SRC="picture.jpg" HSPACE="8"> Задает добавление левого и правого пустых полей

Для изображения колокольчика изменим размер и пропишем замещающий текст, для это используем следующие атрибуты

<IMG SRC="bell.png" HEIGHT="110" WIDTH="113" ALT="Звонок">

Результат должен быть следующим

Измените цвет фона и текста, расположите картинку по центру.

Итоговое задание

Нужно представить страницу с собственной анкетой или в формате резюме. Страница должна содержать следующую информацию:

Примеры в карусели: 

При отправки работы для проверки необходимо прислать все связанные документы (изображения), иначе нарушится целостность страницы (желательно в формате архива).