Поделиться
Л2-00024.docx
Практическая работа №28-29.
Средства создания и сопровождения сайта.
Работа с Конструктором сайтов.
Цель работы: ознакомиться с основными тегами языка HTML, научиться создавать простые web-страницы.
Оборудование: персональный компьютер, методические указания по работе (в электронном виде находятся в папке «Методические указания» на рабочем столе компьютера), карты-задания
Содержание и последовательность выполнения практической работы:
1. Инструктаж по технике безопасности
2. Выполнение практического задания
Теория.
Web-страницы – комплексные документы, которые могут содержать любые виды данных: текст, графику, звук, видео и анимацию.
Все Web-страницы имеют одну общую черту – они созданы с помощью средств языка HTML. Языком публикации, используемым во Всемирной паутине (World Wide Web), является HTML (HyperText Markup Language - язык разметки гипертекстов).
Язык HTML дает авторам средства для:
- публикации электронных документов с заголовками, текстом, таблицами, списками, фотографиями и т.д.
- загрузки электронной информации с помощью щелчка мыши на гипертекстовой ссылке.
- разработки форм для выполнения транзакций с удаленными службами, для использования в поиске информации, резервировании, заказе продуктов и т.д.
- включения электронных таблиц, видеоклипов, звуковых фрагментов и других приложений непосредственно в документы.
Любая Web-страница представляет собой HTML-файл. Язык HTML определяет правила, согласно которым обычный текст представляется в виде Web-страниц.
Гипертекст – текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы.
Под разметкой понимается вставка в текст этих кодов, определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой браузером.
Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются тегами. Тег – набор символов. Все теги начинаются с символа “<” и заканчиваются символом “>”. Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тег.
Текст документа не просто наполнен управляющими кодами. Теги задают его структуру: заголовок, тело. Теги чаще используются парами. Они, как скобки, обрамляют разделы и части текста. <Имя> - это открывающий тег, </Имя> - закрывающий тег.
При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.
Открывающие теги могут содержать атрибуты, влияющие на эффект, создаваемый тегом. Атрибуты – это дополнительные ключевые слова, отделенные от ключевого слова тега и друг друга пробелами.
Некоторые атрибуты требуют указания значения атрибута. Это значение отделяется от ключевого слова знаком “=”.
2. Структура Web-страницы
Документ HTML состоит из основного текста документа и тегов разметки. Таким образом, документ HTML – это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор. Например, Блокнот.
Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега <HTML> и заканчиваться соответствующим закрывающим тегом </HTML>.
Документ HTML состоит из раздела заголовков и тела документа. Раздел заголовков расположен между тегами <HEAD> и </HEAD> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <TITLE> и </TITLE>, между которыми размещается официальный заголовок документа. При просмотре он отображается в верхней строке окна браузера.
Также в раздел заголовков помещаются не отображаемые при просмотре мэта-теги, задающие кодировку страницы для ее правильного отображения в браузере, а также содержащие описание и ключевые слова страницы.
Сам текст документа располагается в теле документа. Тело документа располагается между тегами <BODY> и </BODY>.
3. Цветовая схема Web-страницы
Цвет на Web-странице задают либо его названием, либо числовым шестиразрядным шестнадцатеричным кодом.
Цвет |
Код |
Название |
Цвет |
Код |
Название |
|
черный |
#000000 |
black |
лиловый |
#FF00FF |
magenta |
|
белый |
#FFFFFF |
white |
бирюзовый |
#00FFFF |
cyan |
|
красный |
#FF0000 |
red |
бледно-голубой |
#E8FEFF |
azure |
|
зеленый |
#00822B |
green |
бледно-фиолетовый |
#FF90FF |
violet |
|
синий |
#0000FF |
blue |
оранжевый |
#FFA500 |
orange |
|
желтый |
#FFFF00 |
yellow |
коричневый |
#A82828 |
brown |
Основную цветовую схему Web-страницы можно задать в теге <BODY> с помощью атрибутов:
BGCOLOR= - цвет фона
TEXT= - цвет текста
LINK= - цвет текста гиперссылки
ALINK= - цвет текста активной гиперссылки
VLINK= - цвет текста просмотренной гиперссылки
Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон – темный текст, или темный фон – светлый текст. Нежелательны буквы белого цвета – они могут оказаться невидимыми при печати на принтере.
Пр. Создадим Web-страницу “Основные теги HTML”
1) В папке «Мои документы» создать свою папку.
2) Запустить текстовый редактор Блокнот
3) Ввести HTML-код страницы:
<HTML>
<HEAD>
<TITLE> Первое знакомство с тегами HTML </TITLE>
</HEAD>
<BODY bgcolor=blue text=yellow alink=white vlink=pink >
</BODY>
</HTML>
4) Сохранить файл под именем index.htm в своей папке.
5) Открыть папку «Мои документы», открыть свою папку, открыть свой файл. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тегами HTML.
В тексте Web-страницы могут быть заголовки различного уровня. Они записываются внутри тегов <H1> …</H1>, <H2> …</H2> … <H6>…</H6>. Заголовки можно располагать слева, справа и по центру. Для этого используется атрибут ALIGN=“значение”. Значение может быть LEFT, RIGHT, CENTER. Например, ALIGN=“LEFT”.
6) Запустить Блокнот. Открыть файл index.htm . Внести в текст страницы теги заголовков различных уровней.
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвертого уровня </H4>
<H5> Заголовок пятого уровня </H5>
<H6> Заголовок шестого уровня </H6>
<H1 ALIGN=“CENTER”> Заголовок первого уровня, выровненный по центру </H1>
На странице текст может быть набран разными шрифтами. Шрифты задаются следующими тегами:
<B>…</B> - жирный шрифт <I> …</I> - курсив
<U>…</U> - подчеркнутый
<S>…</S> - зачеркнутый
<SUB>…</SUB> - верхний индекс
<SUP>…</SUP> - нижний индекс
<TT>…</TT> - равноширинный (все буквы одинаковые по ширине
<EM>…</EM> - выделение
<STRONG>…</STRONG> - усиленное выделение
Для задания размера и цвета шрифта служит тег <FONT> и </FONT>. Тег <FONT> должен иметь хотя бы один из двух атрибутов:
SIZE= задает размер шрифта, от 1 до 7
COLOR= задает цвет шрифта (можно указывать код или название).
Менять вид шрифта можно с помощью атрибута FACE=название шрифта
Абзацы задаются следующими тегами: <P>…</P>. Также как и заголовки они могут быть выровнены с помощью атрибута ALIGN.
Перевод строки осуществляется с помощью тега <BR>.
Горизонтальный разделитель (горизонтальная линия) задается с помощью тега <HR>
7) Внести в текст страницы теги, определяющие начертание шрифта. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Строчки текста разделить с помощью перевода строки
<HR>
Обычный текст <BR>
<B>Жирный текст</B> <BR>
<I>Курсив</I> <BR>
<U>Подчеркнутый</U> <BR>
<B><I><U>Жирный подчеркнутый курсив</B></I></U> <BR>
<TT>Равноширинный</TT> <BR>
<EM>Выделение</EM> <BR>
<STRONG>Усиленное выделение</STRONG> <br>
<font size=5 color=white face="Arial"> шрифт размера 5, белого цвета, тип Arial </font>
<HR>
Списки бывают нумерованными и маркированными. Кроме того, комбинируя эти два типа, можно создавать вложенные многоуровневые списки.
Нумерованный список представляет собой набор элементов (абзацев) с порядковыми номерами и формируется при помощи контейнера <OL> … </OL>, а каждый элемент списка начинается с одиночного тега <LI>.
Вид и тип нумерации при этом зависят от атрибутов тега <OL>: возможна нумерация арабскими цифрами (TYPE=1), прописными и строчными латинскими буквами (TYPE=A или TYPE=a), а также прописными и строчными римскими цифрами (TYPE=I или TYPE=i). Можно задать с какой цифры (буквы) начать нумерацию, для этого используется атрибут START=значение.
Маркированный список представляет собой набор элементов, предваряемым тем или иным специально выбранным символом – маркером. Такой список создается при помощи контейнера <UL>…</UL>, а каждый его элемент предваряется одиночным тегом <LI>.
Маркеры в списках могут иметь один из трех возможных видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется атрибут TYPE тега <UL>. Он может принимать следующие значения: circle (окружность), square (квадрат), disc (круг).
Маркированный список автоматически отделяется от предыдущего и последующего текста дополнительными отступами сверху и снизу, а его строки смещаются вправо.
8) Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные.
Нумерованный список, нумерация арабскими цифрами начинается с 3:
<font size=4><b> нумерованный список, начиная с 3 </b></font>
<OL TYPE=1 START=3>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Третий элемент списка</LI>
</OL>
Маркированный список, маркер в виде квадрата:
<font size=4><b> маркированный список, маркер квадрат </b></font>
<UL TYPE=SQUARE>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Третий элемент списка</LI>
</UL>
Многоуровневый список может состоять из нескольких вложенных друг в друга списков, каждый из которых формируется при помощи собственного контейнера <OL>…</OL> или <UL>…</UL> и может иметь произвольную нумерацию. При этом для вложенных списков браузер автоматически увеличивает отступ слева для нумерованных (маркированных) строк.
9) Внести в текст страницы тэги, задающие многоуровневый список.
<font size=4> <b> вложенный список </b> </font>
<UL>
<LI> Глава 1.
<OL>
<LI> пункт 1.1.
<LI> пункт 1.2.
</OL>
<LI> Глава 2.
<OL>
<LI> пункт 2.1.
<LI> пункт 2.2.
</OL> </UL>
9. Списки определений
Список определений состоит из нескольких терминов и пояснений к ним. Список определений формируется при помощи собственного контейнера <DL>…</DL>. Каждый термин записывается в контейнере <DT>…</DT>. Пояснение к термину записывается в контейнере <DD>…</DD>.
10) Внести в текст страницы тэги, задающие список определений.
<font size=4> <b> список определений </b> </font>
<DL>
<DT>ТЕРМИН 1</DT>
<DD>Пояснение к термину 1</DD>
<DT>ТЕРМИН 2</DT>
<DD>Пояснение к термину 2</DD>
<DT>ТЕРМИН 3</DT>
<DD>Пояснение к термину 3</DD>
</DL>
Задание.
1. Зайдите в программу Блокнот.
2. Создайте Web-страницу следующего вида:
Ø Заголовок Web-страницы (“Моя Web-страница”)
Ø На Web-странице должна быть следующая информация:
- “Пробная Web-страница” (заголовок 1-го уровня по центру)
- “Форматирование шрифта” (заголовок 3-го уровня)
- горизонтальная линия
- 5 строк текста разными шрифтами.
- горизонтальная линия
- 3 абзаца по 2 строки в каждом.
- в первом абзаце сделать размер шрифта 6, во втором 4.
- первый абзац выровнять по центру, второй – по левому краю, третий по правому краю.
- абзацы отделить друг от друга горизонтальной линией.
3. Сохраните файл под именем «ПР28(ФИО).htm» в своей папке.
4. Откройте свою папку и запустите на выполнение свой файл.
1. Зайти в Блокнот.
2. Создайте Web-страницу следующего вида:
Ø Заголовок Web-страницы (“Моя Web-страница”)
Ø На Web-странице должна быть следующая информация:
a) “Пробная Web-страница” (заголовок 1-го уровня по центру)
b) “Списки” (заголовок 2-го уровня)
c) списки различного вида (перед каждым списком указать вид списка):
- маркированный список (маркер – круг, список из 4 элементов)
- маркированный список (маркер – окружность, список из 2 элементов)
- маркированный список (маркер – квадрат, список из 3 элементов)
- нумерованный список (нумерация арабскими цифрами, из 4 элементов)
- нумерованный список (нумерация арабскими цифрами, начиная с 5, из 3 элементов)
- нумерованный список (нумерация римскими цифрами, прописными, из 3 элементов)
- нумерованный список (нумерация римскими цифрами, строчными, начиная с 3, из 4 элементов)
- нумерованный список (нумерация латинскими буквами, прописными, из 3 элементов)
- нумерованный список (нумерация латинскими буквами, строчными, из 3 элементов)
- вложенный список, следующего вида:
I. Заголовок 1
a. Раздел 1.1
b. Раздел 1.2
c. Раздел 1.3
II. Заголовок 2
a. Раздел 2.1
b. Раздел 2.2
c. Раздел 2.3
III. Заголовок 3
a. Раздел 3.1
b. Раздел 3.2
c. Раздел 3.3.
- список определений следующего вида:
Процессор
Главная часть компьютера, предназначенная для обработки информации и управления работой всех устройств компьютера
Память
Устройство для хранения информации
d) списки отделить друг от друга горизонтальной линией.
e) названия списков набрать жирным курсивом.
3. Сохраните файл под именем «ПР29(ФИО).htm» в своей папке.
4. Откройте свою папку и запустите на выполнение свой файл.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
