Тема: Разработка сайта Лабораторная работа №7.
Разработка главной страницы сайта
1. В каталоге \lab7 создайте папку с именем фамилия_студента-site . Фамилия студента пишется маленькими латинскими буквами.
В папке сайта откройте блокнот, сохраните пустой файл как index.html (тип файлов должен быть ВСЕ ФАЙЛЫ). Закройте блокнот. Убедитесь, что этот файл является html-страницей.
Этот файл является главным начальным файлом сайта.
2. Откройте файл index.html в блокноте. Введите структуру страницы. В заголовке укажите метатэги, как указано в п.1,2. В теле страницы укажите тэги таблицы, строк и ячеек так, чтобы получилась ниже указанная таблица. Здесь используется объединение ячеек.
Здесь будет фото |
«Молодой юрист» (учебный сайт) |
|
Главное меню |
||
Здесь будут гиперссылки |
Здесь будет информация о нашем сайте |
Здесь будут последние заданные вопросы |
Далее введите соответствующий текст для создания таблицы вида, содержащую видимые границы с отступами от края окна браузера, цвет границ выберите сами.
Сохраните файл на личном носителе информации для дальнейшей работы.
СПРАВОЧНАЯ ИНФОРМАЦИЯ. Часть 1.
1. Имена файлов и каталогов
Очень часто web-серверы работают на unix’овых машинах, а в unix файлы index.html, Index.html и inDEx.html (например) – это разные файлы, а в Windows – это один файл. Кроме того, unix может не понять русские буквы, кодировки могут оказаться разными. На какой машине ваш web-сервер? А завтра на какой будет?
Вывод: всегда пишите имена файлов и каталогов только маленькими латинскими буквами. Можно ещё использовать цифры, тире и знак подчёркивания. Пробелы и другие спецсимволы использовать нельзя.
HTML-документ — это просто текстовый файл с расширением *.htm или *.html.
2. Структура web-страницы
<html>
<head>
. . . блок заголовка
</head>
<body>
. . . блок тела
</body>
</html>
3. Правильное оформление блока заголовка head.
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Имя страницы </title>
<meta name="author" content="Данные об авторе">
<meta name="description" content="Краткое описание страницы (аннотация)">
<meta name="keywords" content="Ключевые слова">
<meta name="owner" content="электронный почтовый адрес владельца">
<style>
. . . .правила стилей
</style>
</head>
Кодировка. Не забывайте правильно оформлять тег
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
Он очень важен для правильного отображения текста страницы браузером, поскольку определяет кодировку страницы.
Имя страницы – это то, что отобразится в заголовке браузера.
Ключевые слова – слова, чаще всего встречающиеся на странице, их может быть много; теги keywords, description и title проверяются на согласованность поисковыми машинами, их содержание должно соответствовать (т.е. можно также использовать синонимы) содержанию самой страницы
Стиль. Стиль это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. Суть таблиц стилей заключается в отдельном предварительном задании стиля для любого из тегов документа. Например, назначив один раз, приведенный в примере стиль для тега <p>, ничего не надо больше предпринимать, т.е. везде в документе, где встретится тег <p>, он будет представлен в заданном виде. То есть содержание документа отделяется от его оформления.
Рассмотрим синтаксис на следующем примере:
Таблица стилей помещается в элемент style (между тегами <style> и </style>) в заголовочной части между тегами <head> и </head> (или в отдельный файл).
Каждая строчка называется правилом. Каждое правило состоит из селектора (здесь теги h2 и p) и определений. Определения заключены в фигурные скобки. Если определений несколько, то они указываются через точку с запятой.
Каждое определение состоит из свойства (background-color, color, font-size, text-align) и значения (black, yellow, red, 36pt, center). Значения указываются через двоеточие.
Свойства и их возможные значения зависят от селектора и перечисляются в специальных таблицах.
Синтаксис стилевого правила:
