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

Задание. Структура документа




HTML

HTML — это язык, на котором описывается как и что должно располагаться на веб-странице. Самым важным элементом HTML-программы (HTML-документа) является гиперссылка. Гиперссылка позволяет передавать управление из одного HTML-документа в другой. Документы с гиперссылками, которые передают управление другим документам, называются гипертекстами. Аббревиатура HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста). Примером гипертекста служат веб-страницы — документы HTML. Несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками и обычно находящихся на одном веб-сервере, образуют веб-сайт.

Приложение-интерпретатор, которое позволяет, выполняя HTML-программу, отображать гипертекстовый документ на экране компьютера называется браузер. Браузер (от англ. browse — пролистывать) — программное обеспечение для просмотра веб-сайтов. Практически все популярные браузеры распространяются бесплатно или «в комплекте» с другими приложениями:

  1. Internet Explorer (совместно с Microsoft Windows),
  2. Mozilla Firefox (бесплатно, свободное ПО),
  3. Safari (совместно с Mac OS или бесплатно для Windows),
  4. Opera (бесплатно, начиная с версии 8. 50),
  5. Google Chrome (бесплатно, свободное ПО).

HTML-документ можно создавать в любом текстовом редакторе, например, Блокноте, но удобнее использовать текстовый редактор, обеспечивающий подсветку синтаксиса, позволяющий работать с вкладками, например Notepad++ notepad-plus-plus. org.

Задание

Создайте простейшую веб-страницу, для этого:

  • Запустите Блокнот и наберите (элементы языка HTML записываются в любом регистре) или скопируйте следующий код:
<! DOCTYPE html> < HTML> < HEAD> < META charset=" utf-8" > < TITLE> Пример< /TITLE> < /HEAD> < BODY> < H1> Язык HTML< /H1> < P> Hyper Text Markup Language — язык разметки гипертекста < /BODY> < /HTML>
  • Сохраните документ (Файл — Сохранить как... ), при этом в диалоговом окне сохранения укажите тип файла: Все файлы и расширение файла: . htm.
  • Запустите документ через браузер.
  • Просмотрите код документа через программу Notepad++ (с помощью команды контекстного меню Edit with Notepad++). Вы убедитесь, что за счет подсветки служебных слов код читается лучше.

Специальные символы, которые управляют отображением текста и при этом сами не отображаются на экране, называются теги (tag-ярлык, признак). Общий синтаксис написания тегов следующий:

< тег атрибут1=" значение" атрибут2=" значение" >... < тег атрибут1=" значение" атрибут2=" значение" >... < /тег>
  • Теги бывают двух типов — одиночные и парные (контейнеры). Большинство тегов языка HTML являются парными, т. е. открывающему тегу соответствует закрывающий тег. По правилам HTML закрывающий тег выглядит так же как открывающий, но с символом / перед именем тега. Для некоторых парных тегов завершающие теги можно опускать. Подробная информация по каждому тегу в справочнике HTML на сайте WebReference.
  • Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок.
< BODY> < H1> < I> Язык HTML< /I> < /H1> Hyper Text Markup Language – язык разметки гипертекста< /BODY>
  • После имени тега могут следовать в произвольном порядке атрибуты. Значения атрибутов записываются в кавычках.
  • Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было.

 

Структура документа

Рассмотрим простой HTML-документ:

<! DOCTYPE html> < HTML> < HEAD> < META charset=" utf-8" > < TITLE> Пример< /TITLE> < /HEAD> < BODY> < H1> Язык HTML< /H1> < P> Hyper Text Markup Language — язык разметки гипертекста < /BODY> < /HTML>

Описание документа начинается открывающим тегом (меткой) < HTML> и заканчивается закрывающим тегом < /HTML> Содержимое документа обычно состоит из двух частей: раздела заголовка, представляющего собой контейнер < HEAD> и раздела содержательной части документа (тело документа) — контейнера < BODY>. Контейнер < HEAD> содержит внутри себя контейнер заголовка < TITLE> и метатеги.

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

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

DOCTYPE Описание
HTML 4. 01 <! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4. 01//EN" " http: //www. w3. org/TR/html4/strict. dtd" > В HTML4 синтаксис проще, закрывать надо не все теги, имена тегов и атрибутов можно писать в любом регистре, кавычки не обязательны.
HTML 5 <! DOCTYPE html> HTML5 ещё либеральнее, в этой версии соблюдаются правила HTML4, но учтено и некоторое влияние XHTML. Так, одиночные теги можно как закрывать, так и оставлять незакрытыми, убраны обязательные атрибуты вроде type=" text/css".
XHTML 1. 0 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1. 0 Strict//EN" " http: //www. w3. org/TR/xhtml1/DTD/xhtml1-strict. dtd" > В XHTML строгий синтаксис: все теги, включая одиночные, требуется закрывать, атрибуты и теги писать только в нижнем регистре, все значения заключать в кавычки.

< META> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Поисковая система обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...