Главная | Обратная связь | Поможем написать вашу работу!

Заголовок документа - тег HEAD и его элементы

HTML

Цель работы.
Получение начальных сведений об HTML

Продолжительность работы: 4 часа

Последовательность выполнения работы.
1. Создать в вашей папке папку для данной лабораторной работы. Все файлы сохранять в эту папку.
2. Самостоятельно последовательно выполнить все пункты задания. Теоретический материал с основными сведениями находится в приложении, а также в папке с литературой по HTML.
3. Защитить работу у преподавателя (с демонстрацией ваших файлов, относящихся к заданиям и устных ответов на вопросы).

Задание.
1. Что такое HTML, основные понятия
2. Структура html
3. Форматирование текста
4. HTML-теги для форматирования текста
5. Специальные символы
6. Ссылки
7. Списки
8. Работа с изображениями - тег img
9. Создание домашней страницы

Примечание 1. В данной лабораторной работе создание и редактирование html - документов выполняется с помощью текстового редактора. Расширение html - документов: *.htm.

Примечание 2. Цвета WEB-страницы (цвет фона, текста и т.д.) можно выбрать с помощью следующей таблицы.

Отчет. В электронной форме со стандартным оформлением. Срок - последний день выполнения данной лабораторной работы.

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

СОДЕРЖАНИЕ ОТЧЕТА:

1. Цель работы.
2. Структура документа HTML.
3. Таблицы тегов, изученных в лабораторной работе. По разделам.
4. Домашняя страница.
5. Заключение.

1. Что такое HTML, основные понятия

HTML (HyperText Markup Language) - язык разметки гипертекста.

Отнести HTML к языкам программирования можно лишь с большой натяжкой, это все-таки язык РАЗМЕТКИ. Из названия становится понятным его предназначение - указывать браузеру, как разместить элементы на странице при ее отображении на экране монитора.

Что такое элемент? Да все, что мы размещаем: текст, рисунки, анимации и т.д. С помощью HTML мы можем указать браузеру где именно их разместить; какой текст сделать большим и жирным, а какой - маленьким курсивом; где начать новую строку, а где сделать переход на другую страницу. И многое другое.

Например,

<b>Этот текст будет отображаться жирным</b> <i>А этот - курсивом</i>

В данном случае, символы <b> </b> - делают текст жирным, а символы <i> </i> - курсивом. Такие символы называются ТЕГАМИ.

Между < и > находится имя тега и его параметры (если они есть).

В основном все теги парные, т.е. один открывающий <>, а другой - закрывающий </>. Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера. Действия тегов распространяются только на их содержимое.

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

Теги могут иметь параметры (или атрибуты), например,

<body bgcolor="red">Здесь содержимое</body>

В данном случае тег <body> имеет параметр bgcolor, значение которого равно "red". Переводя на человеческий язык - сделать фон документа красного цвета.

По сути, HTML - это набор тегов и их параметров.

ЗАДАНИЕ. В различных браузере открыть исходный код данной страницы. Сохранить его в текстовый файл имя_браузера.txt.

Структура html

Структура html-документа состоит из трех пар тегов:

Теги <html> </html> являются контейнером для всех остальных, т.е в них помещаются все остальные. Таким образом, ваш документ должен начинаться с тега <html>, а заканчиваться тегом </html>.

Сам документ условно разделен на две части - заголовок документа (теги <head> </head>) и тело документа (теги <body> </body>).

Заголовок документа - тег HEAD и его элементы

Заголовок документа содержит служебную информацию и не влияет на внешний вид документа. Его задачей является предоставление браузеру пользователя или серверу информации о том, как отобразить ваш документ.

Title

Единственным обязательным элементом заголовка документа являются теги <title> </title>. Они

В окне браузера он будет выглядеть так:

Теоретически название документа может иметь неограниченную длину, на практике рекомендуется ограничиться 60 символами.

Не давайте своим документам безликие названия, типа "Первая страница", во-первых название документа должно характеризовать его содержимое, а во-вторых, содержимое тегов <title> </title> играет не последнюю роль при оптимизации и раскрутке сайта.

Link
Одиночный тег <link> необходим для подключения внешних файлов. Например, если вы будете использовать каскадную таблицу стилей, то ее удобнее хранить в отдельном файле и подключать этот файл ко всем страницам сайта.

У тега <link> несколько атрибутов:

href - указывает URL-адрес подключаемого файла.

rel - указывает на тип отношения данного документа к внешнему (например: rel="stylesheet" указывает, что внешний файл определяет стиль текущего документа).

type - указывает тип и параметры присоединенной таблицы стилей.

Пример кода:

Meta

Информация в этом теге не имеет никакого отношения к HTML, однако ее использование очень удобно для решения ряда задач:

- указание кодировки страницы, например, для русского текста в кодировке Windows:

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">

- указание ключевых слов страницы (используется при оптимизации страниц):
<meta http-equiv="KEYWORDS" content="тег, структура html, заголовок страницы">

- указание краткого описания страницы:

<meta http-equiv="DESCRIPTION" content="Описание структура html и элементов заголовка">

Возможны и другие варианты. Рассмотрим параметры тега <meta>:

http-equiv - определяет свойство тега (тип контента, ключевые слова, описание и т.д.)

name - используется для дополнительного описания тега, если отсутствует, то считаеся эквивалентным параметру http-equiv.

content - значение параметра http-equiv.

Примeр кода:

Script

Теги <script></script> используются для подключения внешних файлов скриптов. Это позволяет оптимизировать код страниц. Например, если вы используете функции java script для большинства своих страниц, то поместив эти функции на отдельную страницу - function.js, с помощью тега <script> можно указать путь к этой страницы.

Это повышает читабельность кода и ускоряет загрузку страниц. У этого тега несколько параметров:

language - указывает язык написания скрипта, в спецификации HTML 4.0 данный параметр не рекомендуется к употреблению. Вместо него следует указывать параметр type.

type - указывает тип MIME для языка.

src - указывает путь к внешнему файлу со скриптами.

Примeр кода с относительным адресом скрипта:

12 3 4 5 6 7 8 Следующая ⇒