Учебное пособие "Язык гипертекстовой разметки HTML"

Вы не зарегистрированы

Авторизация

Ресурсы сайта

Предметный каталог

Учебное пособие "Язык гипертекстовой разметки HTML"

Submitted by Светлана Владимировна Сунгурова on Sat, 13/04/2013 - 08:35

Данные об авторе

Автор(ы):

Сунгурова Светлана Владимировна

Место работы, должность:

ГБОУ СПО "Чусовской индустриальный техникум", преподаваетль "Информатики и ИКТ"

Регион:

Пермский край

Характеристики ресурса

Уровни образования:

начальное профессиональное образование

Класс(ы):

10 класс

Класс(ы):

11 класс

Предмет(ы):

Информатика и ИКТ

Целевая аудитория:

Учащийся (студент)

Целевая аудитория:

Учитель (преподаватель)

Тип ресурса:

методическая разработка

Краткое описание ресурса:

В предлагаемом учебном пособии рассмотрены основы сайтостроительства на языке гипертекстовой разметки HTML. Пособие содержит как теоретический материал, так и практические задания для закрепления рассмотренного материала на практике. Предусмотрен текущий контроль по темам и итоговый. Теоретический материал снабжен мультимедийными презентациями.

Агентство по управлению государственными учреждениями
Пермского края Чусовской индустриальный техникум

Язык гипертекстовой разметки HTML

Учебное пособие

Выполнила преподаватель
информатики и ИТ
Сунгурова С.В.

Чусовой, 2010

Согласовано на заседании ЦМК

«____» _________2010г. _______
Введение

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

В предлагаемом учебном пособии рассмотрены основы сайтостроительства на языке гипертекстовой разметки HTML. Пособие содержит как теоретический материал, так и практические задания для закрепления рассмотренного материала на практике. Предусмотрен текущий контроль по темам и итоговый. Теоретический материал снабжен мультимедийными презентациями.

Учебное пособие предназначено для студентов начального и среднего профессионального образования дневной формы обучения всех специальностей.

Содержание

Тема 1. Язык разметки гипертекста HTML..................................... 5

Тема 2. Теги форматирования текста............................................. 7

Практическая работа №1................................................................ 9

Самостоятельная работа №1.......................................................... 14

Тест по теме «Основные теги языка HTML»................................... 15

Дополнительные задания к темам 1, 2......................................... 17

Самостоятельная работа №2.......................................................... 18

Тема 3............................................................................................. 19

Практическая работа №2................................................................ 21

Самостоятельная работа №3.......................................................... 23

Тема 4............................................................................................. 24

Практическая работа №3................................................................ 26

Самостоятельная работа №4.......................................................... 30

Тема 5............................................................................................. 31

Практическая работа №4................................................................ 32

Итоговый контроль........................................................................ 34

Список проектных работ................................................................ 37

Заключение.................................................................................... 38

Список литературы........................................................................ 39

Приложение 1. Таблица тегов........................................................ 40

Приложение2. Таблица кодов цветов............................................ 43

Тема 1

Язык разметки гипертекста HTML

Язык HTMLбыл разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах.

HTML–это язык разметки гипертекста. Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи (гиперссылки) между различными ее фрагментами.

Документ, выполненный в форме HTMLназывается:

HTML – документом;
Web – документом;
Web– страницей.

Документ HTML можно создавать практически в любом текстовом редакторе. Самый простой редактор предназначенный для создания такого документа Блокнот (стандартная программа операционной системы Windows). Расширение таких документов .htmlили .htm. Для просмотра Web-документов предназначены браузеры. Например, InternetExplorer, Opera, MozillaFirefox и другие.

Структура HTML документа

Любой HTML-документ состоит из тегов (команд) заключенных в угловые скобки <тег> и разделяется на две части заголовок сайта и тело программы (сайта) – собственно гипертекст.

<HTML>

<HEAD>

описание Web-страницы заголовок

</HEAD>

<BODY>

содержание Web-страницы гипертекст (тело документа)

</BODY>

</HTML>

Любой HTML-документ начинается с тега <HTML> и заканчивается тегом </HTML>.

Тег – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. Теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением «/».

Метки можно вводить как заглавными, так и строчными буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.

Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию.

Основные теги

<HTML> </HTML> - обозначение документа на языке HTML.
<HEAD> </HEAD> - область заголовка Web-страницы.
<TITLE></TITLE> - отражает название вашего сайта.
<BODY> </BODY> - заключает в себе гипертекст, который определяет web-страницу.

Пример документа HTML

<html>

<head>

<title> Пример 1</title>

</head>

<body>

<H1>Привет!</H1>

Это приер HTML-документа

</body>

</html>

Тема 2

Теги форматирования текста

Форматирование абзацев

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

Тег перевода строки   отделяет строку от последующего текста.
Тег абзаца  тоже отделяет строку, но еще добавляет пустую строку перед ним.

Оба тега являются одноэлементными (не требуют закрывающего тега).

Тег <P> текст абазаца </P> устанавливает границу абзаца. Пустые строки добавляются перед абзацем и после него.

Теги форматирования шрифта

— для выделения полужирным шрифтом,
— для выделения курсивом,
— для выделения подчеркиванием.

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

использование стилей заголовка;
задание размера текущего шрифта.

<H1> </H1> - тег стиля. Выделяет текст как заголовок. Существует семь размеров шрифта от 1 до 7. <H1>- самый крупный размер шрифта.
Тег текст позволяет изменять размер, начертание и цвет текста, добавляются атрибуты.
- текст - размер шрифта (7- самый крупный размер)
- текст - шрифт
- -цветшрифта. Вместо Х надо подставить либо название цвета), либо его шестнадцатеричное значение (Приложение 1).

Пример: текст

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

ALIGN=CENTER — Выравнивание по центру
ALIGN=RIGHT — Выравнивание по правому краю
ALIGN=LEFT — Выравнивание по левому краю

Пример: <PALIGN=CENTER> текст - этот текст выровнен по центру.

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

Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>.
Атрибут BGCOLOR=X - задает цвет фона страницы.
TEXT=X - определяет цвет текста для всей страницы

Пример: <BODY BGCOLOR=00ffff TEXT=330066>

Практическая работа №1

Тема работы:Создание HTML-документа.

Цель работы:Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.

Создайте в папке Мои документы, папкуСоздание сайта, в ней папку с названием вышей фамилии и номером группы, внутри нее создайте папку ЛР №1.

Создание простейших файлов HTML

Запустите стандартную программу Блокнот и наберите следующий текст с элементами форматирования:

<HTML>

<HEAD>

<TITLE> Пример </TITLE>

</HEAD>

<BODY>

Моя первая страница сайта

</BODY>

</HTML>

2. Сохраните файл(Файл, Сохранить как..) под именем Пример 1.htmlв созданной вами папке.

3. Просмотрите созданную Web-страницу в браузере MicrosoftInternetExplorer или другом, который установлен на вашем компьютере.

Управление расположением текста на экране.

Внесите изменения в текст, расположив слова «Моя первая», «страница», «сайта» на разных строках:

<HTML>

<HEAD>

<TITLE> Пример </TITLE>

</HEAD>

<BODY>

Моя первая

страница

сайта

</BODY>

</HTML>

2. Сохраните изменения в файл (Файл, Сохранить как…) под именем Пример2.html

3. Просмотрите с помощью браузера новую полученную Web- страницу. Обратите внимание, изменилось ли расположение текста на странице. Почему?

Управление расположением текста на экране (переход на
новую строку).

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

<HTML>

<HEAD>

<TITLE> Пример </TITLE>

</HEAD>

<BODY>

Моя первая страница сайта

</BODY>

</HTML>

Сохраните файл под именем Пример 3.htmlв созданной вами папке. Просмотрите с помощью браузера обновленную страницу.

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

Внесите изменения в текст файла Пример 3.html.

<HTML>

<HEAD>

<TITLE> Пример</TITLE>

</HEAD>

<BODY>

Моя первая страница сайта

</BODY>

</HTML>

Сохраните файл под именем Пример 4.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

Изменение размера текста

использование стилей заголовка

Внесите изменения в текст файла Пример 4.html.

<HTML>

<HEAD>

<TITLE> Пример</TITLE>

</HEAD>

<BODY>

<H1>Моя первая</H1> страница сайта

</BODY>

</HTML>

Сохраните файл под именем Пример 5.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

задание размера текущего шрифта

Внесите изменения в текст файла Пример 5.html.

<HTML>

<HEAD>

<TITLE> Пример</TITLE>

</HEAD>

<BODY>

Моя первая страница сайта

</BODY>

</HTML>

4. Сохраните файл под именем Пример 6.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

Гарнитура и цвет шрифта

Внесите изменения в текст файла Пример 6.html.

<HTML>

<HEAD>

<TITLE> Пример</TITLE>

</HEAD>

<BODY>

Мояпервая страницасайта

</BODY>

</HTML>

Сохраните файл под именем Пример 7.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.
Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа. Сохраните изменения (Файл, Сохранить). Посмотрите новую полученную Web-страницу.

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

Внесите изменения в текст файла Пример 7.html.

<HTML>

<HEAD>

<TITLE> Пример</TITLE>

</HEAD>

<BODY>

Мояпервая

страницасайта

</BODY>

</HTML>

Сохраните файл под именем Пример 8.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

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

Внесите изменения в текст файла Пример 8.html.

<HTML>

<HEAD>

<TITLE> Пример</TITLE>

</HEAD>

Мояпервая

страницасайта

</BODY>

</HTML>

2.Сохраните файл под именем Пример 9.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

Самостоятельная работа №1

Открыть через Блокнот файл Первая самю работа.html, расположенный на рабочем столе.
Используя теги форматирования привести текст согласно заданию в файле.
Сохранить измененный файл в папке с вашей фамилией (Мои документы, Создания сайта).
Просмотреть измененный файл в браузере.

<HTML>

<HEAD>

<TITLE> Первая самостоятельная работа </TITLE>

</HEAD>

<BODY>

Этот абзац должен быть выравнен по центру.

Этот абзац должен быть выравнен по левому краю.

Этот текст должен быть напечатан в две строки.

Этот текст оформить курсивом с новой строки (с добавлением перед текстом пустой строки).

Этот текст выделить полужирным шрифтом с подчеркиванием, с новой строки.

</BODY>

</HTML>

Тест по теме «Основные теги языка HTML»

1.Какие из тегов используются в любой программе на языке HTML?
<HTML></HTML>
<HEAD></HEAD>
<BODY></BODY>

Какой тег означает курсивное написание текста?
-

какой тег определяет границы абзаца?

Какие теги используют для печати текста с новой строки?

Какой тег используют для печати названия сайта?
<HTML></HTML>
<HEAD></HEAD>
<BODY></BODY>
<TITLE></TITLE>

В каком теге заключается гипертекст?
<HTML></HTML>
<HEAD></HEAD>
<BODY></BODY>
<TITLE></TITLE>

После какого тега текст переносится на новую строку внутри одного абзаца с добавление пустой строки?

Действие тега (начального и конечного) распространяется:
на текст стоящий перед ним
на текст находящийся внутри тега
на текст находящийся после тега
на весь текст в программе

Описание сайта заключается в теге:
<HTML></HTML>
<HEAD></HEAD>
<BODY></BODY>
- <TITLE></TITLE>

Выберите верные утверждения:
Теги можно вводить только заглавными буквами
Теги определяют границы действия элементов
Все теги парные, т.е. на каждый открывающийся тег должен быть закрывающийся
Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию
HTML-документ состоит из тегов

Дополнительные задания к темам 1, 2

№1. В файл Пример 4.html внести изменения. Текст должен отображаться в следующем виде:

Моя перваястраница сайта

Сохранить изменения в папке ЛР №1 с именем Задание1.html

№2. В файл Пример 6.html внести изменения (изменяя размер шрифта и используя переход на новую строку). Текст должен отображаться в следующем виде:

Моя первая

страница

сайта

Сохранить изменения в папке ЛР №1 с именем Задание2.html

№3. В файл Пример 7.html внести изменения. Текст должен отображаться в следующем виде: все слова должны быть разного цвета. Сохранить изменения в папке ЛР №1 с именем Задание3.html

№4. В файл Пример 6.html внести изменения (использовать различное выравнивание текста, разный размер и написание шрифта). Текст должен отображаться в следующем виде:

Расписание

занятий

на вторник

Сохранить изменения в папке ЛР №1 с именем Задание4.html

№5. В файл Пример 5.html внести изменения: добавить цвет шрифта и фон страницы, используя в теге <BODY> атрибуты BGCOLOR=»#FFFFCC» TEXT=»#330066», коды цветов взять другие.Сохранить изменения в папке ЛР №1 с именем Задание5.html

Самостоятельная работа №2

Разработать HTML-документ первой страницы сайта о техникуме. Использовать образец. Сохранить созданный документ в папке с вашей фамилией под именемПервая страница.html

Тема 3

Размещение графики на web-странице

Создание списокв

<IMG SRC=»URL»> - тег добавления графического изображения

Этот тег не закрывается.
URL – указывает браузеру где находится рисунок (указывается название диска, папки, вложенных папок, название файла с расширением). Желательно размещать файлы с необходимыми графическими изображениями в той же папке, где сохраняется HTML-документ. В этом случае в URL указывается только названий файла.

Атрибуты

Таблица 1

Атрибут	Формат	Описание
1.ALT	<IMG SRC=”schedule.jpg” ALT=”картина”>	Надпись «картинка» выводится на экран при подведении указателя мыши к изображению.
2.BORDER	<IMG SRC=”schedule.jpg” BORDER=”5”>	Задает рамку вокруг изображения толщиной 5 пикселей.
3.ALIGN	<IMG SRC=”schedule.jpg” ALIGN=TOP”>	Выравнивает изображение относительно текста по верхней границе текста.
4.HEIGHT	<IMG SRC=”schedule.jpg” HEIGHT=55>	Вертикальный размер изображения принудительно устанавливается в 55 пикселей.
5.WIDTH	<IMG SRC=”schedule.jpg” WIDTH=200>	Горизонтальный размер изображения принудительно устанавливается в 200 пикселей.
6.VSPACE	<IMG SRC=”schedule.jpg” VSPACE=”6”>	Атрибут добавляет верхнее и нижнее пустые поля высотой 6 пикселей.
7.HSPACE	<IMG SRC=”schedule.jpg” HSPACE=”6”>	Добавляет левое и правое пустые поля шириной 6 пикселей.

Фоновые рисунки

<BODYBACKGROUND=»picture.gif»> - фон сайта становится изображение расположенное в указанном файле. В случае если изображение небольшого размера, то они дублируется на экране.

Создание маркированных списков

<ul>

<li> текст

<li>

…

<li> текст

</ul>
Пример:

<ul>

<li> химия

<li> физика

<li> ОБЖ

<li> история

</ul>

Создание нумерованных списков

<ol>

<li> текст

<li>

…

<li> текст

</ol>

Графические маркеры в списке

Практическая работа №2

Создайте в вашей папке папку ЛР №2.
Скопируйте все файлы из папки Графика для ЛР №2 (Мои документы, Создание сайта) в ту же папку, которая будет использована для хранения создаваемой Web-страницы (в вашей папке – папка ЛР №2).
Откройте файл Пример 9.html и внесите в него следующие изменения.

<HTML> <HEAD> <TITLE> Пример</TITLE> </HEAD> <BODY BGCOLOR=”#FFFFFF” TEXT=”#330066”> Мояпервая страницасайта <IMG SRC=”schedule.jpg”> </BODY> </HTML>

Сохраните его в папке ЛР №2 под именем Рисунок 1.html
Добавите в файл Рисунок 1.html из таблицы 1 атрибуты 2, 7 и сохраните изменения в файле Рисунок 2.html
Добавите в файл Рисунок 1.html из таблицы 1 атрибуты 1, 4, 6 и сохраните изменения в файле Рисунок 3.html

Фоновое отображение графики на Web-странице

Внесите изменения в файл Рисунок 1.html

<HTML> <HEAD> <TITLE> Пример</TITLE> </HEAD> <BODY BACKGROUND=”back.jpg” TEXT=”#330066”> Мояпервая страницасайта </BODY> </HTML>

Сохраните его в папке ЛР №2 под именем Рисунок 4.html

Линейки (графические разделители) и буквицы

Разместите в Вашем документе Рисунок 1.html разделитель anim_hr.gif так, чтобы он находился под текстом.
Задайте этому изображению высоту (вертикальный размер), равную 40 пикселям.
В слове Моя замените букву М изображением, взять его Вы можете в файле m.gif.
Сохраните измененный файл в папке ЛР №2 под именем Рисунок 5.html

Создание списков

Откройте файл Рисунок 5.html и добавьте в него маркированный список уроков:

<ul> <li>математика <li>математика <li>ОБЖ <li>ОБЖ <li>обед <li>физика <li>физика </ul>

Список должен быть расположен по левому краю страницы.

Увеличьте размер шрифта для всего списка.

Сохраните измененный файл в папке ЛР №2 под именем Маркированный список1.html

Графические маркеры

Откройте файл Маркированный список1.html
Теперь введем в тег <UL> атрибут STYLE:

<UL STYLE=”list-style-image: url(‘marker.gif’);”>

Сохраните измененный файл в папке ЛР №2 под именем Маркированный список2.html

Самостоятельная работа №3

Скопировать папку Сам. Работа №3 с рабочего стола в папку с вашей фамилией.
Открыть файл Сам. Работа №3.html(находится в скопированной вами папке).
Внести следующие изменения:
добавить цвет фона и цвет текста;
увеличить размер заголовка «Знаки зодиака» до 7;
размер основного текста – 5;
основной текст оформить как маркированный список
добавить графический маркер (файл marker1.gif);
добавить картинку в конец документа из файла znaki.bmp
Сохранить изменения в файле в папке с вашей фамилией, Сам работа №3 через команду Файл, Сохранить.

Тема 4

Создание таблиц в HTML-документе

Теги создания таблицы

Тег	Форма записи	Примечание
Table	<TABLE>текст</TABLE>	Объявление таблицы
TR	<TR>текст</TR>	Объявление строки
TD	<TD>текст</TD>	Объявление ячейки

Атрибуты тега <TABLE>

Атрибут	Форма записи	Примечание
BORDER	<TABLE BORDER=X>	Задает рамку вокруг таблицы.
WIDTH	<TABLE WIDTH=XX%>	Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселов.
BGCOLOR	<TABLE BGCOLOR=»#RRGGBB»>	Задает цвет фона таблицы.

Атрибуты тегов <TD> и <TR>

Атрибут	Форма записи	Примечание
ALIGN	<TD ALIGN=X>	Устанавливает выравнивание по горизонтали (Right, Left, Center)
VALIGN	<TD VALIGN=X>	Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline)
BGCOLOR	<TD BGCOLOR= «#RRGGBB»>	Задает цвет фона ячейки.
Colspan	<td colspan=Х>	Растягивает ячейку по ширине общего числа ячеек в строке
rowspan	<td rowspan=Х>	Растягивает ячейку по высоте общего числа ячеек в столбце

Практическая работа № 3

Тема работы:Создание таблиц в HTML-документе.

Цель работы:Научиться создавать и редактировать таблицы в терминах языка HTML.

Ход работы:

Создание простой таблицы.

В вашей папке создайте папку ЛР №3.
Запустите стандартную программу Блокнот и наберите следующий текст с элементами форматирования:

Сохраните в вашей папке в папкеЛР №3 под именем Таблица.html
Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.
Вставьте в тег <table> следующие атрибуты: width=50% align=”center” bgcolor=”yellow” bordercolor=”blue”. Просмотрите обновленный документ в браузере.
Добавьте в тег <table> атрибут: cellspacing=5. Просмотрите обновленный документ в браузере.
Измените значение атрибута cellspacing на 10, 30 и посмотрите что произойдет с таблицей.
Добавьте между второй парой тегов <tr>:</tr> теги <td> дядя </td> <td>дедушка</td> Просмотрите полученный документ в окне браузера.
Добавьте между третьей парой тегов <tr>:</tr> теги <td> дочь </td> <td>внучка</td> Просмотрите обновленный документ в браузере.
Добавьте в первой паре тегов <tr>:</tr> в теге <td> атрибут colspan=3. Просмотрите полученный документ в окне браузера.
Добавьте в первой паре тегов <tr>:</tr> в теге <td> еще атрибут align=»center» Просмотрите полученный документ в окне браузера.
Добавьте во второй паре тегов <tr>:</tr> в первом теге <td> атрибут rowspan=2 Просмотрите полученный документ в окне браузера.
Удалите из второй пары тегов <tr>:</tr> тег <td>внучка</td> Просмотрите полученный документ в окне браузера.

Задание на самостоятельное выполнение.

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

<HTML> <HEAD> <TITLE> УчебныйфайлHTML </TITLE> </HEAD> <TITLE> РасписаниезанятийI курса</TITLE> </HEAD> <BODY BGCOLOR=”FFFFFF”> I курс Понедельник <TABLE BORDER=”1” WIDTH=100% BGCOLOR=”99CCCC”> <TR BGCOLOR=”CCCCFF” ALIGN=CENTER> <TD>Пара</TD> <TD>группа1</TD> <TD>группа2</TD> <TD>группа3</TD> </TR> <TR> <TD>1</TD> <TD>Математика</TD> <TD>Химия</TD> <TD>История</TD> </TR> <TR> <TD>2</TD> <TD>Физкультура</TD> <TD>Информатика</TD> <TD>Математика</TD> </TR> <TR> <TD>3</TD> <TD>История</TD> <TD>Математика</TD> <TD>Литература</TD> </TR> </TABLE> </BODY> </HTML>

Сохраните файл под именем Расписание на понедельник.html.
Используя различные варианты оформления таблиц, создайте файлы с именами Рас писание на вторник.html и Расписание на среду.html, содержащие расписание на вторник и среду, соответственно.
В файле Расписание на четверг.html создайте таблицу такого вида:

Для созданной таблицы установите следующие параметры: расположение на экране — центральное, ширина 550 пикселей. Цвет вертикальной общей ячейки — голубой. Цвет всей таблицы — зеленый. Расположение текста в ячейках — по центру.
В файле Расписание на субботу.html создайте таблицу такого вида:

Для созданной таблицы установите следующие параметры: расположение на экране — левостороннее, ширина 550 пикселей. Цвет общей горизонтальной ячейки — красный. Цвет всей таблицы — желтый.
В файле Расписание на воскресенье.html создайте таблицу такого вида:

Для созданной таблицы установите следующие параметры: расположение на экране — правостороннее, ширина 550 пикселей. Цвет общей ячейки — оранжевый. Цвет всей таблицы — серый.

Самостоятельная работа №4

Разработать HTML-программу содержащую следующие таблицы:

День	Месяц
Век	Год

ЕГЭ
Математика	История
Физика	Литература

Сварщик	Профессия
Маляр
Плотник

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

Тема 5

Создание гиперссылок в HTML-документе

В качестве ссылки можно использовать текст или графику.

Ссылки в пределах одного документатребуют наличия двух частей: метки и самой ссылки. Метка определяет точку, к которой происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен браузер.

<A HREF=»#ПН»>Понедельник</A>

Перед именем метки ПН, указывающей куда производится ссылка, ставится символ #. Между тегами располагается текст Понедельник, на котором производится щелчок для перехода по ссылке.

Метка должна выглядеть примерно так:
<A NAME=»ПН»>Понедельник</A> .

Ссылка должна выглядеть примерно так:
<A HREF=»example.html»>Пример</A>

После имени файла, указывается между тегами текст, по которому производится щелчок для перехода к этому файлу.

<AHREF=»yoga.html»><IMGSRC=»yoga.gif»></A> -графическая ссылка.

Практическая работа №4

Тема работы:Создание гиперссылок в HTML-документе.

Цель работы:Научиться формировать гиперссылки на смежные документы Internetи на метки в текущем документе.

Ход работы:

Создание ссылок на другой HTML-документ.

Создайте с помощью текстового редактора «Блокнот» файл Техникум.html и поместите в начало страницы следующий код:

<TABLE WIDTH=100%> <TR> <TD>Понедельник</TD> <TD>Вторник</TD> <TD>Среда</TD> <TD>Четверг</TD> <TD>Пятница</TD> <TD>Суббота</TD> </TR> </TABLE>

Сохраните созданный файл в папку ЛР №3.
Определите для слова Понедельник ссылку на внешний документ:

<>4.Сохраните файл.

Создание графической ссылки.

<CENTER> <A HREF=”yoga.html”><IMG SRC=”yoga.gif”></A> </CENTER>

Самостоятельная работа

Открыть папку ЛР №2 (в ней находятся 8 файлов: Пример1, Пример3, и др.)

Откройте файл Пример1.html через Блокнот и в конец документа (перед тегом <BODY>) добавьте текст Следующий пример.

Определите для текста «Следующий пример» ссылку для перехода на файл Пример 3.html:

<AHREF=»Пример3.html»>Следующий пример</A>

Аналогичные действия выполните для всех последующих файлов.

Итоговый контроль

(тест)

Вариант1

Инструкция: выбрать единственно верный ответ.

Инструкция: дополнить предложение.

Вариант 2

Инструкция: выбрать единственно верный ответ.

Инструкция: дополнить предложение.

Список проектных работ

Разработать сайт по теме:

Заключение

Разработанное учебное пособие по теме «Язык гипертекстовой разметки HTML» предполагается использовать в общеобразовательных учебных заведения, начальном и среднем профессиональном образовании. Проектный продукт можно применять на уроках при изучении рассматриваемой в пособии темы в учебных группах любой специальности.

Список литературы

Приложение 1. Таблица тегов

Основные теги
<HTML> </HTML>	обозначение документа на языке HTML.
<HEAD> </HEAD>	область заголовка Web-страницы.
<TITLE></TITLE>	отражает название сайта.
<BODY> </BODY>	заключает в себе гипертекст, который определяет web-страницу.
<BR>	отделяет строку от последующего текста
<P>	отделяет строку, но впереди добавляет пустую строку
<P></P>	устанавливает границу абзаца
Форматирование текста
<B> </B>	для выделения полужирным шрифтом
<I> </I>	для выделения курсивом
<U> </U>	для выделения подчеркиванием
<H1> </H1>	Тег стиля (увеличивает размер шрифта и отделяет заголовок). H1 – самый крупный шрифт
<FONT> </FONT> <FONT SIZE="7"> </FONT> <FONT FACE="Arial"> </FONT> <FONT COLOR="X"> </FONT>	размер шрифта написание шрифта цвет шрифта, х – код цвета
Выравнивание абзацев
<P ALIGN=CENTER> </P> <P ALIGN=RIGHT> </P> <P ALIGN=LEFT> </P>	- выравнивание по центру - выравнивание по правому краю - выравнивание по левому краю
Цвет фона и текста
<BODY> </BODY> <BODY BGCOLOR=”x”> </BODY> <BODY TEXT=”x”> </BODY>	цвет фона страницы цвет текста для всей страницы
Добавление графики
*<IMG SRC="имя.файла">* Атрибуты BORDER=3 HEIGHT=Х WIDTH=Х	- добавление рисунка на страницу - рамку вокруг рисунка толщиной 3 пикселя - высота рисунка в пикселях - ширина рисунка в пикселях
Создание списков
<ul> <li>элемент списка <li>элемент списка ... <li>элемент списка </ul>	- маркированный список
<ol> <li>элемент списка <li>элемент списка ... <li>элемент списка </ol>	- нумерованный список
<UL STYLE="list-style-image: url('marker.gif');">	- графический маркер в маркированном списке
Создание таблиц
<TABLE> </TABLE> Атрибуты <TABLE BORDER=5> <TABLE BGCOLOR=X> <TABLE WIDTH=XX%> <TABLE BORDERCOLOR=X>	- объявление таблицы - рамка вокруг таблицы - цвет фона ячеек - ширина таблицы в % или в пикселях - цвет рамки
<TR> </TR>	- объявление строки
<TD> </TD>	- объявление строки
Атрибуты тегов <TD> и <TR>
<TD ALIGN=CENTER>	- выравнивание текста в ячейке
<TR BGCOLOR=X>	- цвет фона ячеек в строке
<TDCOLSPAN=X>	- растягивает ячейку по ширине общего числа ячеек в строке
<TD ROWSPAN=X>	- растягивает ячейку по высоте общего числа ячеек в столбце

Приложение2. Таблица кодов цветов

000000	000020	000040	000060	000080	0000a0	0000c0	0000ff
002000	002020	002040	002060	002080	0020a0	0020c0	0020ff
004000	004020	004040	004060	004080	0040a0	0040c0	0040ff
006000	006020	006040	006060	006080	0060a0	0060c0	0060ff
008000	008020	008040	008060	008080	0080a0	0080c0	0080ff
00a000	00a020	00a040	00a060	00a080	00a0a0	00a0c0	00a0ff
00c000	00c020	00c040	00c060	00c080	00c0a0	00c0c0	00c0ff
00ff00	00ff20	00ff40	00ff60	00ff80	00ffa0	00ffc0	00ffff

200000	200020	200040	200060	200080	2000a0	2000c0	2000ff
202000	202020	202040	202060	202080	2020a0	2020c0	2020ff
204000	204020	204040	204060	204080	2040a0	2040c0	2040ff
206000	206020	206040	206060	206080	2060a0	2060c0	2060ff
208000	208020	208040	208060	208080	2080a0	2080c0	2080ff
20a000	20a020	20a040	20a060	20a080	20a0a0	20a0c0	20a0ff
20c000	20c020	20c040	20c060	20c080	20c0a0	20c0c0	20c0ff
20ff00	20ff20	20ff40	20ff60	20ff80	20ffa0	20ffc0	20ffff

400000	400020	400040	400060	400080	4000a0	4000c0	4000ff
402000	402020	402040	402060	402080	4020a0	4020c0	4020ff
404000	404020	404040	404060	404080	4040a0	4040c0	4040ff
406000	406020	406040	406060	406080	4060a0	4060c0	4060ff
408000	408020	408040	408060	408080	4080a0	4080c0	4080ff
40a000	40a020	40a040	40a060	40a080	40a0a0	40a0c0	40a0ff
40c000	40c020	40c040	40c060	40c080	40c0a0	40c0c0	40c0ff
40ff00	40ff20	40ff40	40ff60	40ff80	40ffa0	40ffc0	40ffff

600000	600020	600040	600060	600080	6000a0	6000c0	6000ff
602000	602020	602040	602060	602080	6020a0	6020c0	6020ff
604000	604020	604040	604060	604080	6040a0	6040c0	6040ff
606000	606020	606040	606060	606080	6060a0	6060c0	6060ff
608000	608020	608040	608060	608080	6080a0	6080c0	6080ff
60a000	60a020	60a040	60a060	60a080	60a0a0	60a0c0	60a0ff
60c000	60c020	60c040	60c060	60c080	60c0a0	60c0c0	60c0ff
60ff00	60ff20	60ff40	60ff60	60ff80	60ffa0	60ffc0	60ffff

800000	800020	800040	800060	800080	8000a0	8000c0	8000ff
802000	802020	802040	802060	802080	8020a0	8020c0	8020ff
804000	804020	804040	804060	804080	8040a0	8040c0	8040ff
806000	806020	806040	806060	806080	8060a0	8060c0	8060ff
808000	808020	808040	808060	808080	8080a0	8080c0	8080ff
80a000	80a020	80a040	80a060	80a080	80a0a0	80a0c0	80a0ff
80c000	80c020	80c040	80c060	80c080	80c0a0	80c0c0	80c0ff
80ff00	80ff20	80ff40	80ff60	80ff80	80ffa0	80ffc0	80ffff

c00000	c00020	c00040	c00060	c00080	c000a0	c000c0	c000ff
c02000	c02020	c02040	c02060	c02080	c020a0	c020c0	c020ff
c04000	c04020	c04040	c04060	c04080	c040a0	c040c0	c040ff
c06000	c06020	c06040	c06060	c06080	c060a0	c060c0	c060ff
c08000	c08020	c08040	c08060	c08080	c080a0	c080c0	c080ff
c0a000	c0a020	c0a040	c0a060	c0a080	c0a0a0	c0a0c0	c0a0ff
c0c000	c0c020	c0c040	c0c060	c0c080	c0c0a0	c0c0c0	c0c0ff
c0ff00	c0ff20	c0ff40	c0ff60	c0ff80	c0ffa0	c0ffc0	c0ffff

ff0000	ff0020	ff0040	ff0060	ff0080	ff00a0	ff00c0	ff00ff
ff2000	ff2020	ff2040	ff2060	ff2080	ff20a0	ff20c0	ff20ff
ff4000	ff4020	ff4040	ff4060	ff4080	ff40a0	ff40c0	ff40ff
ff6000	ff6020	ff6040	ff6060	ff6080	ff60a0	ff60c0	ff60ff
ff8000	ff8020	ff8040	ff8060	ff8080	ff80a0	ff80c0	ff80ff
ffa000	ffa020	ffa040	ffa060	ffa080	ffa0a0	ffa0c0	ffa0ff
ffc000	ffc020	ffc040	ffc060	ffc080	ffc0a0	ffc0c0	ffc0ff
ffff00	ffff20	ffff40	ffff60	ffff80	ffffa0	ffffc0	ffffff

Для просмотра Web-страницы используйте браузер Microsoft Internet Explorer.
Убедитесь, что после щелчка указателем мыши на ссылку Понедельник в окне браузера загружается страница Расписание на понедельник.html.
Определите ссылки для вторника.
1. Скопируйте файл yoga.gif и yoga.html (расположены в папке Мои документы, Создание сайта) в папку ЛР №3.
2. Внесите изменения в файл Техникум.html так, чтобы в конце страницы была ссылка на страницу yoga.html. В качестве ссылки используется графический файл yoga.gif:
1. Сохраните файл (Файл, Сохранить).
2. Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.
3. Продемонстрируйте полученный документ преподавателю.
1. Web-страница (документ HTML) представляет собой:
2. Текстовый файл с расширением txt или doc
3. Текстовый файл с расширением htm или html
4. Двоичный файл с расширением com или exe
5. Графический файл с расширением gif или jpg
1. Для просмотра Web-страниц в Интернете используются программы:
2. MicroSoft Word илиWord Pad
3. MicroSoft Access илиMicroSoft Works
4. Internet Explorer илиOpera
5. HTMLPad илиFront Page
1. Тег – это:
2. Начальный и конечный маркеры элемента
3. Текст, в котором используются спецсимволы
4. Указатель на другой файл или объект
5. Фрагмент программы, включённой в состав Web-страницы
1. Для вставки изображения в документ HTML используется команда:
2. <body background=”ris.jpg”>
3. <a href=”ris.jpg”>
4. <img src=”ris.jpg”>
5. <input=”ris.jpg”>
1. Гипертекст – это:
2. Текст очень большого размера
3. Текст, в котором используется шрифт большого размера
4. Структурированный текст, где возможны переходы по выделенным
5. Текст, в который вставлены объекты с большим объемом информации
1. Тег <TITLE></TITLE> используется для описания …
2. Для переноса текста на новую строку (без добавления пустой строки) применяют тег …
3. Язык HTMLиспользуют для создания …
4. Тег означает…
5. HTML-документ можно создать в программе …
1. Для переноса текста но новую строку используют тег:
2.  
3. <hp>
4. <h1>
5. 
1. Для задания цвета фона используются следующие параметры тега BODY
2. bgcolor=«Цвет»
3. text=«Цвет»
4. bordercolor=«Цвет»
5. bordercolorlight=«Цвет»
1. Для выравнивания абзацев текста используется следующий атрибут:
2. Align=middle
3. Align=center
4. Align=top
5. Align=bottom
1. Какой элемент заголовка должен сделать фразу наибольшего размера?
2. H0
3. H8
4. H6
5. H1
1. Браузер является …
2. сетевым вирусом
3. средством просмотра Web-страниц
4. языком разметки Web-страниц
5. транслятором языка программирования
1. Тег <imgsrc=»ris.jpg»> используется для …
2. WEB-документ сохраняется с расширением …
3. Тег (начальный и конечный) распространяет свое действие на текст расположенный …
4. Вся программа на языке HTMLзаключена в теге …
5. Тег <BODYTEXT=”Х”> означает …
1. Мои друзья.
2. Моя группа.
3. Мое учебное заведение.
4. Мой мастер.
5. Моя семья.
6. Моя профессия.
7. Операционная система Windows.
8. Программное обеспеченье.
9. Спорт.
10. Современная музыка.
11. Текстовые редакторы.
1. HTML. Просто как дважды два. О. Н. Рева. Издательство: Эксмо, 2006.
2. Самоучитель HTML. А. Гончаров. Издательство: Питер, 2002.
3. HTML. Самоучитель. Н.В. Комолова. Издательство:Питер, 2008.

» Tags for document:

Учебное пособие

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