Тема 11. Вёрстка макета веб-страниц

Цель: формирование у студентов знаний о структуре HTML-документа и навыков верстки веб-страниц.

План занятия:

1. Изучить теоретические сведения.

2. Выполнить практическое задание по лабораторной работе.

3. Оформить отчёт и ответить на контрольные вопросы.

Теоретические сведения

HTML (HyperText Markup Language, язык разметки гипертекста) – это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Ниже приведён пример HTML-документа.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Моя первая веб-страница</title>

</head>

<body>

<h1>Заголовок страницы</h1>

<p>Основной текст.</p>

</body>

</html>

Чтобы посмотреть результат примера в действии, проделайте следующие шаги.

1. В Windows откройте программу Блокнот (Пуск > Выполнить > набрать «notepad» или Пуск > Программы > Стандартные > Блокнот).

2. Наберите код в Блокноте (рисунок 11.1).

Рисунок 11.1 – Пример HTML-кода в блокноте

3. Сохраните готовый документ (Файл > Сохранить как...) под именем c:\www\example1.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы и кодировку UTF-8. Обратите внимание, что расширение у файла должно быть именно html (рисунок 11.2).

Рисунок 11.2 – Созранение HTML-документа

4. Запустите браузер Internet Explorer (Пуск > Выполнить > набрать «iexplore» или Пуск > Программы > Internet Explorer).

5. В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу.

6. Если все сделано правильно, то в браузере вы увидите результат (рисунок 11.3).

Рисунок 11.3 – Результат выполнения HTML-кода в браузере

Элемент <!DOCTYPE> предназначен для указания типа текущего документа – DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер смог интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы.

Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа, устанавливаемого через элемент <!DOCTYPE>. Закрывающий тег <html> должен всегда стоять в документе последним.

Тег <head> предназначен для хранения других элементов, цель которых – помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги <meta>, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег. Все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Тэг <title> определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.

Практическое задание:

<121314 15 16 17 18 >

Дата добавления: 2019-09-30; просмотров: 572;

Тема 11. Вёрстка макета веб-страниц

Публикации по технике и механике

Публикации по биологии

Публикации по информатике

Публикации по строительству

Публикации по физике

Публикации по химии

Публикации по электронике

Публикации по искусству

Публикации по истории

Публикации по медицине

Публикации по педагогике