- •Базовые тэги html. Создание простейшего сайта
- •Между этими строками внесите теги:
- •2. Самостоятельная работа
- •Лабораторная работа № 2 Форматирование текста: физическое и логическое
- •2. Самостоятельная работа
- •Лабораторная работа № 3 Использование объектов
- •2. Самостоятельная работа
- •Лабораторная работа № 4 Работа с графикой
- •Лабораторная работа № 5 Работа с таблицами
- •2. Самостоятельная работа
- •Лабораторная работа № 6 Фреймы и формы
- •2. Самостоятельная работа
- •2. Самостоятельная работа
- •Лабораторная работа № 7 Каскадные таблицы стилей
- •Параметры линии:
- •Способы подключения стилей к web-странице
- •2. Самостоятельная работа и содержание отчета
- •Лабораторная работа № 8 Свойства элементов
- •Изучаем Html
- •Лабораторная работа № 9 Навигационные карты. Map. Как сделать часть картинки ссылкой Цель: Изучить тэг Map, тэг Area,
- •Лабораторная работа № 11 Ссылка внутри документа, якоря, anchor. Цель: изучить атрибуты name, id.
Лабораторная работа № 1
Базовые тэги html. Создание простейшего сайта
Цель: освоить базовые теги html, синтаксис языка
Результат обучения: Студент должен уметь создавать простейшие сайты
Ход работы
HTML-документ, по сути, представляет собой обычный текстовый файл. Для создания такого документа можно использовать любой текстовый редактор. Например, откройте Блокнот.
Внесите следующие строки (соблюдая все абзацы):
<html>
</html>
- эти строки указывают на то, что создаваемый документ является Web-страницей. Каждая Web-страница должна начинаться тегом <html> и заканчиваться закрывающим тегом </html>.
Обратите внимание на разницу в начинающем и закрывающем тегах!
Между этими строками внесите теги:
<head>
</head>
- эти строки указывают на заголовок Web-страницы, в котором помещается различная служебная информация.
После закрывающего тега </head> внесите строки
<body>
</body>
- это тело Web-страницы, в котором помещается все содержимое данной страницы.
Далее, в заголовок страницы, между тегами <head> и </head> поместите запись
<title>Первый сайт</title>
- эта строка формирует надпись на строке заголовка сайта (в броузере). Также эти теги являются именем HTML-документа. По названию документа броузеры могут найти информацию, поэтому место для названия всегда определено – оно находится отдельно от всего содержимого HTML-документа: вверху.
Теперь, поместим обычный текст в нашу страницу. Для этого, между строками <body> и </body> внесите текст:
Это самая простая Web-страница. Первая. Написанная на языке HTML вручную.
Сохраните документ под именем first.html - расширение html обязательно. В результате, Вы должны получить следующий текстовый документ.
<html>
<head>
<title>Первый сайт</title>
</head>
<body>
Это самая простая Web-страница. Первая. Написанная на языке HTML вручную.
</body>
</html>
Сверните блокнот. Откройте папку, в которой Вы сохранили свою Web-страницу. Запустите файл first.html. Обратите внимание на заголовок Вашей страницы «Первый сайт».
Атрибуты тега <body>
Почти все теги HTML имеют некоторые параметры, которые принято называть атрибутами. Они предназначены для модифицирования параметров документа, а значение атрибута принято заключать в кавычки. Атрибуты пишутся внутри тега, например:
<body bgcolor="maroon">
Атрибуты тега <body>:
Bdcolor=”..”-определяет цвет фона документа.
Background=”..”-указывает броузеру местоположение файла (*.gif или *.jpg), который нужно использовать в качестве фонового рисунка.
Text=”..”-устанавливает цвет текста.
Alink=”..”- определяет цвет активной ссылки.
Link=”..”- определяет цвет не просмотренной ссылки.
Vlink=”..”- определяет цвет просмотренной ссылки.
Topmargin=”..”- устанавливает в пикселах границу верхнего поля текста по отношению к верхней границе окна сайта
Leftmargin=”..”- устанавливает в пикселах границу левого поля текста по отношению к левой границе окна сайта
Bdproperties=”fixed”- в случае установки данного параметра фоновое изображение не будет прокручиваться вместе с текстом.
Onload=”..”- определяет действия броузера после загрузки документа.
Цвета:
Black, Maroon, Green, Olivе, Navy, Purple, Teal, Gray, Silver, Red, Lime, Yellow, Blue, Fuchsia, Aqva, White.
Комментарий
Очень часто исходные коды программ сопровождаются комментариями. Они предназначены для сопровождения исходного кода программы пояснениями, которые в свою очередь, облегчают понимание кода как самим разработчикам при его модификации, так и при чтении кода другими людьми.
В спецификации HTML для комментариев определён специальный тег, который начинается символами <!-- и заканчивается символами -->. Текст, заключённый в теге комментария, не отображается в броузере.