Академический Документы
Профессиональный Документы
Культура Документы
«Создание сайта с
помощью языка
разметки HTML»
БПОУ «ЧУОР»
ПРЕДИСЛОВИЕ
В последние десятилетия Интернет прочно
вошел в нашу жизнь. В наше время он
охватывает все сферы жизни: культура,
искусство, бизнес. Наряду с обычными
музеями, библиотеками, магазинами все
большую популярность во всем мире завоевали
аналогичные Интернет-ресурсы. Даже бизнес
становится виртуальным: создаются Web-
представительства фирм, электронные магазины
и торговые площадки, электронные банки,
которые дают возможность осуществлять
типичные для этих сфер операции с большей
скоростью. В связи с этим профессия Web-
дизайнера и Web-программиста стала
востребованной и у нас в России.
Наш практикум содержит в себе все основные
разделы, необходимые для создания Web-
страниц. В каждом разделе есть примеры
использования тегов, показан результат
действия этих тегов, а также представлены
лабораторные работы. Практикум можно
использовать для самостоятельного изучения
технологии создания статических Web-страниц
студентам любых специальностей или тем, кто
хочет самостоятельно изучить основы языка
HTML.
2
БПОУ «ЧУОР»
ВВЕДЕНИЕ
Основы языка HTML
Что такое HTML?
HTML (HyperText Markup Language) - язык
гипертекстовой разметки документов.
Назначение HTML в том, чтобы сделать
документы пригодными для чтения с экрана
монитора.
HTML-документ представляет собой
обычный текстовый документ с управляющими
конструкциями языка HTML – тегами, которые
и производят действия «форматирования» над
текстовыми блоками и осуществляют вставку
различных объектов в документ.
4
БПОУ «ЧУОР»
Лабораторная работа №1
Тема: «Создание простейшего HTML-
документа.
Форматирование текста».
Цель работы: познакомиться со структурой
html-документа и на основе создать свою
страницу; изучить основные тэги
форматирования текста и использовать их при
создании страницы.
Теоретический материал:
Структура html-документа:
начало и
Тип
<HTML></HTML> конец
документа
файла
Имя должно быть в
<TITLE></TITLE>
документа заголовке
описание
Заголовок <HEAD></HEAD>
документа
содержимое
Тело <BODY></BODY>
страницы
<H1></H1>
<H2></H2>….
номер
заголовки <H6></H6>
уровня
различного <H1>Пример
заголовка
уровня 1</H1>
(от 1 до 6)
<H2>Пример2</H2>
<H6>Пример3</H6>
Типы
выравниван
ия:
H? left–
ALIGN=”left”></H?> по левому
краю,
<H2 center
Заголовок с
align="center">Этот – по
выравни-
заголовок будет
ванием центру,
выровнен по
right–
центру</H2>
по
правому
краю,
justify
– по
ширине
Форматирование абзацев
Создание <P> </P>
абзаца <P>Этот параграф
(параграфа) выровнен по
умолчанию</P>
6
БПОУ «ЧУОР»
Типы
<P
выравниван
Выравнивание ALIGN=”left”></P> ия:
абзаца
<P align="right">А
left, right,
этот по правому
center и
краю</P>
justify
Перевод
строки внутри Одиночный
<BR>
абзаца тэг
Начертание шрифта
Тег Начертание Пример
<B>Полужирное</B>
B Полужирное
<I>Курсив</I>
I Курсив
<S>Зачёркнутый</S>
S Зачёркнутый
<U>Подчёркнутый</U>
U Подчёркнутый
<FONT SIZE=?
Цвет шрифта
></FONT>
<FONT COLOR="#$$$$$
Размет шрифта
$"</FONT>
7
БПОУ «ЧУОР»
Задание№1.
Создание и сохранение html-документа.
Для того чтобы написать код простейшей web-
страницы вам необходимо знать язык разметки
гипертекста HTML. Мы будем знакомиться с
ним по ходу создания наших страниц. Сразу
хочу сказать, что все команды HTML
записываются в специальных символах < > и
называются тегами.
8
БПОУ «ЧУОР»
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<h1>Моя первая страница</h1>
</body>
</html>
9. Сохраните ваш код для этого нажмите ctrl + s
10. Обновите документ (щелкните по зеленому
значку на панели браузера)
11. Измените документ. Установите цвет фона и
шрифта. Для этого внесите следующие
изменения в код:
<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor = #edf3ff>
<h1><font color = red>Моя первая
страница</font></h1>
</body>
</html>
9
БПОУ «ЧУОР»
Стих
Автор неизвестен
Однажды в студеную зимнюю пору
Сижу за решеткой в темнице сырой
Гляжу поднимается медленно в гору
10
БПОУ «ЧУОР»
Задание №1.2
Создание линий. Форматирование шрифта.
Элемент HR
Атрибу
Описание Значение Пример
т
Задаёт
выравнивани
е линии left|center|
align align="right"
(по right
умолчанию
по центру)
Задаёт цвет color="black
color цвет
линии "
Задаёт
от 1 до
толщину
size бесконечност size="1"
линии в
и
пикселях
noshade Логический нет noshade
(булев)
11
БПОУ «ЧУОР»
атрибут,
если он
установлен,
то линия не
будет
объёмной
Задаёт длину
линии в
пикселях или Число или width="80%
width
процентах от проценты "
ширины
экрана
Пример
12
БПОУ «ЧУОР»
13
БПОУ «ЧУОР»
<p><b>Полужирный щрифт</b><br>
<i>Текст отображается курсивом</i><br>
<tt>Текст имитирует пишущую
машинку</tt><br>
<u>Подчеркнутый текст</u>
</p>
</body>
</html>
Лабораторная работа №1.2
Название стихотворения
1 строчка
2 строчка
3 строчка
4 строчка
1 строчка
2 строчка
3 строчка
4 строчка
Лабораторная работа №2
Тема: «Вставка изображений в html-
документ»
14
БПОУ «ЧУОР»
Теоретический материал:
Для того, что бы вставить картинку, нужно
использовать очень простой тег, не требующий
закрытия: <img src="...">
Вместо трёх точек в кавычках ("..."), Вам
необходимо подставить путь к картинке.
Расширения картинки можете использовать
любые ( *.gif, *.png, *.jpg)
Без атрибутов - текст по
<img src=" pc.jpg"> умолчанию находится снизу
картинки
<img src=" pc.jpg" align="right" - картинка справа,
align="right"> текст слева
<img src=" pc.jpg" align="left" - картинка слева,
align="left"> текст обтекает справа
<img src="pc.jpg" align="bottom" - как и по
align="bottom"> умолчанию, текст внизу картинки
<img src="pc.jpg" align="middle" - текст посередине
align="middle"> картинки
<img src=" pc.jpg" align="top" - текст вверху
align="top"> картинки
<img src="pc.jpg" vspace - задаёт расстояние между
vspace="10"> текстом и рисунком (по
вертикали). В примере
15
БПОУ «ЧУОР»
16
БПОУ «ЧУОР»
пикселях. Если же Вы не
поставите этот атрибут, то
height="150"> картинка будет иметь реальный
размер по высоте. (Рекомендую
всегда задавать размеры!!!)
border - задаёт рамку вокруг
картинки. По умолчанию рамка
<img src="pc.jpg"
всегда есть. Если вы хотите
border="0">
убрать рамку, то задайте
border=0.
<p></p> - размещает саму
картинку туда, куда нам
<p необходимо. Размещение зависит
align="center"><img от атрибута align. Есть, например:
src="pc.jpg"> </p> align="left" - слева
align="center" - в центре
align="right" - справа
background="Ваш_фон.jpg"- Ваша
картинка будет фоном HTML
странички. В атрибуте
<body background="Ваш_фон.jpg"
bgcolor="#000000" нужно прописывать путь к Вашей
background= картинке так же, как и в
"pc.jpg"></body> размещении обычной картинки.
Я рекомендую оставлять bgcolor
для того случая, если не
загрузится Ваша картинка.
17
БПОУ «ЧУОР»
Задание №2
Вставить картинку.
Порядок выполнения работы:
Для того чтобы вставить картинку в html –
документ воспользуйтесь тегом
< img src=”1.jpg” width = “250” height =
“200” >
18
БПОУ «ЧУОР»
</body>
</html>
! Вы должны помнить, что вставляемая
картинка должна находиться в той же
папке, что и ваш создаваемый
документ!!!!!
Лабораторная работа №2.
Ноутбук
Выполнил студент
Задание №2.1 Фамилия Имя
Размещение текста и картинки.
Попробуйте изменить задание №3, добавив
немного текста. Для этого откройте блокнот и
сохраните документ по именем 4.html в вашу
папку.
Запишите программный код:
<html>
<head>
</head>
19
БПОУ «ЧУОР»
<body bgcolor=#edf3ff>
<h1 align=center><font color=red>Название
картинки</font></h1>
<img src="1.jpg" width="300" heigh="250">
<p> Однажды в студеную зимнюю
пору<br>Сижу за решеткой в темнице
сырой<br>Гляжу поднимается медленно в
гору<br>Вскормленный в неволе орел
молодой</p>
<p><font color=blue>Это картинку вставил
студента 1-го курса Фамилия Имя</font></p>
</body>
</html>
20
БПОУ «ЧУОР»
Лабораторная работа №3
Тема: «Создание списков в HTML»
Теоретический материал:
1. пункт 1
2. пункт 2
3. пункт 3
21
БПОУ «ЧУОР»
пункт 1
пункт 2
пункт 3
Вложенные <ul>
списки <li>Глава1
<ul><li>Раздел1
<li>Раздел2</ul>
<li>Глава2
<ul><li>Раздел1
<li>Разде2</ul>
</ul>
Глава 1
o Раздел
1
o Раздел
2
Глава 2
o Раздел
1
o Раздел
2
Задание №3.
22
БПОУ «ЧУОР»
23
БПОУ «ЧУОР»
<html>
<head>
</head>
<body bgcolor=#edf3ff>
<ol>
<li>Иван;
<li>Данила;
<li>Белая кобыла;
</ol>
</body>
</html>
<html>
<head>
</head>
<body bgcolor=#edf3ff>
24
БПОУ «ЧУОР»
<DL>
<DT>HTML
<DD>Термин HTML означает ‘язык маркировки
гипертекстов’. Первую версию HTML разработал
сотрудник Европейской лаборатории физики
элементарных частиц Тим Бернерс-Ли.
<DT>HTML-документ
<DD>Текстовый файл с расширением *.html
</DL>
</body>
</html>
HTML
Термин HTML означает ‘язык маркировки
гипертекстов’.
Первую версию HTML разработал
сотрудник Европейской
лаборатории физики элементарных частиц
Тим Бернерс-Ли.
HTML-документ
Текстовый файл с расширением *.html
Задание №3.1.
Вложенные списки.
Ненумерованные списки
26
БПОУ «ЧУОР»
Элемент 1
Элемент 2
Элемент 3
Нумерованные списки
Элементы нумерованного списка выделяются
отступом слева,а также нумерацией:
1. Элемент 1
2. Элемент 2
3. Элемент 3
Списки определений
Этот вид списков чуть сложнее, чем два
предыдущих, но и выглядит более эффектно.
<html>
<head>
<title>Вложенные списки</title>
</head>
<body>
27
БПОУ «ЧУОР»
28
БПОУ «ЧУОР»
29
БПОУ «ЧУОР»
6. Скрещивающиеся прямые
7. Угол с сонаправленными сторонами
8. Угол между прямыми
3)Параллельность плоскостей
9. Параллельные плоскости
10. Свойства параллельных плоскостей
11. Вопросы и задачи
4)Тетраэдр и параллелепипед
Лабораторная работа №4
Тема: «Оформление html-документа.
Таблицы».
Теоретический материал:
Определить
<TABLE></TABLE>
таблицу
30
БПОУ «ЧУОР»
Окантовка
<(abie bordei=?></TABLE>
таблицы
Строка
<TR></TR>
таблицы
Выравнивание <TR ALIGH=LEFT|RIGHT>
1. Таблица начинается с метки <table> и
заканчивается </table>
2. Align устанавливает расположение
таблицы по отношению к полям документа.
Допустимые значения: ALIGN=LEFT
(выравнивание влево),
ALIGN=RIGHT (выравнивание вправо).
3. WIDTH-ширина таблицы. Её можно
задавать в пикселях ( width=400) или в
процентах (width=80%)
4. BORDER устанавливает ширину внешней
рамки таблицы и ячеек в пикселях (border=4).
Если атрибут не установлен, таблица
показывается без рамки.
5. CELLSPACING устанавливает
расстояние между рамками ячеек таблицы в
пикселях(CELLSPACING=2)
6. CELLPADDING устанавливает
расстояние меду рамкой ячейки и текстом в
пикселях(CELLPADDING=10)
7. Таблица может иметь заголовок
(<CAPTION>…..</CAPTION>), хотя
заголовок не является обязательным.
31
БПОУ «ЧУОР»
32
БПОУ «ЧУОР»
33
БПОУ «ЧУОР»
Таблицы.
До настоящего времени мы имели дело с
документами, в которых существовал только
один «поток» текста. На практике иногда
необходимо расположить текст в несколько
колонок. Таблица в этом может помочь. Кроме
того, таблица, состоящая из одной ячейки,
может очень эффектно выделить фрагмент
текста.
Рассмотрим пример простейшей таблицы:
34
БПОУ «ЧУОР»
html>
<head>
</head>
<body bgcolor=#ded3dd>
<table border=1>
<caption>У таблицы есть заголовок</caption>
<tr>
<td>Первая строка, первая колонка</td>
<td>Вторая строка, вторая колонка</td>
</tr>
<tr>
<td>Вторая строка, первая колонка</td>
<td>Вторая строка, вторая колонка</td>
</tr>
</table>
</body>
</html>
Лабораторная работа №5
Тема: Гиперссылки в HTML
Цель работы: научиться создавать гиперссылки
в html-документе.
Теоретический материал:
35
БПОУ «ЧУОР»
“mailto:vasia@mail.ru”>
Задание №5.
Создание гиперссылок.
Выше мы сказали, что HTML – это язык
разметки гипертекста. Но что такое гипертекст?
В отличие от обыкновенного текста, который
можно читать только от начала к концу,
гипертекст позволяет осуществлять мгновенный
переход от одного фрагмента текста к другому.
В HTML переход от одного фрагмента текста к
другому задается с помощью метки вида:
36
БПОУ «ЧУОР»
Создайте гиперссылку.
Для этого откройте блокнот и сохраните ваш
документ под именем 10.html.
Запишите следующий программный код:
<html>
<head>
<title>Создание гиперссылки</title>
</head>
<body>
<h1>Учебник Геометрия - 10</h1>
<a href="9.html">Просмотреть
оглавление</a>
</body>
</html>
37
БПОУ «ЧУОР»
<html>
<head>
<style type="text/css">
img{float:right}
</style>
</head>
<body bgcolor=#edf3ff>
<h1 align=center><font color=red>Лабораторная
работа по HTML</font></h1>
<img src="1.jpg" width="300" heigh="250">
<ul>
<li>Лабораторная работа №1
<a href="Л р.№1.html">Лабораторная
работа №1</a>
Лабораторная работа №6
Тема: Формы в HTML
Цель работы: научиться создавать формы в
html-документе.
38
БПОУ «ЧУОР»
Теоретический материал:
Формы.
Форма – это инструмент, с помощью
которого HTML-документ может послать
некоторую информацию в некоторую заранее
определенную точку внешнего мира, где
информация будет некоторым образом
обработана.
Как устроена форма?
Форма открывается меткой <form> и
заканчивается меткой </form>.
HTML- документ может содержать в себе
несколько форм, однако формы не должны
находиться одна в другой. HTML- текст,
включая метки, может размещаться внутри
форм без ограничений. Метка <form> может
содержать три атрибута, один из которых
обязательный.
ACTION – обязательный атрибут.
Определяет, где находится обработчик формы.
METHOD – определяет, каким образом
(иначе говоря, с помощью какого метода
протокола передачи гипертекстов) данные из
формы будут переданы обработчику.
39
БПОУ «ЧУОР»
40
БПОУ «ЧУОР»
<h1>Простейшая форма</h1>
<form action="9.html">
<input type=submit value="Назад к заданию
№9">
</form>
</body>
</html>
41
БПОУ «ЧУОР»
42
БПОУ «ЧУОР»
43
БПОУ «ЧУОР»
44
БПОУ «ЧУОР»
45
БПОУ «ЧУОР»
<html>
<head>
</head>
<body bgcolor=#edf3ff>
<form action="#">
<textarea name=addres ROWS=5 cols=50>
А здесь - Ваш адрес
46
БПОУ «ЧУОР»
</textarea>
</form>
</body>
</html>
Имя:
Фамилия:
Возраст: лет
47
Запустить обработчик
БПОУ «ЧУОР»
Основные цвета
48
БПОУ «ЧУОР»
Используемая литература:
1. Алленова Н. «Учебник HTML для
начинающих"
2. Энциклопедия создания сайтов для
начинающих
3. Краткое руководство по HTML
4. Чувахин Н. «Практическое руководство
по HTML»
5. М.Хольцшлаг «Языки HTML и CSS для
создания сайтов».
6. Рева О.Н «HTML. Просто как дважды
два».
7. Гончаров «Самоучитель по HTML»
8. Хейз Д «Освой самостоятельно HTML»
49
БПОУ «ЧУОР»
СОДЕРЖАНИЕ
Предисловие 2
Ведение 3
Лабораторная работа №1
Тема: «Создание простейшего HTML- 5
документа. Форматирование текста».
Лабораторная работа №2
Тема: «Вставка изображений в html- 14
документ»
Лабораторная работа №3
21
Тема: «Создание списков в HTML»
Лабораторная работа №4
Тема: «Оформление HTML документа. 30
Таблицы».
Лабораторная работа №5
35
Тема: «Гиперссылки в HTML»
Лабораторная работа №6
38
Тема: «Гиперссылки в HTML»
Основные цвета 48
Используемая литература 49
Для заметок 51
50
БПОУ «ЧУОР»
ДЛЯ ЗАМЕТОК
51