Структура HTML
Изучение стандартизированного языка разметки документов во Всемирной паутине. Текстовые документы, содержащие разметку на языке HTML. Структура HTML-документа. Веб-обозреватели и браузеры, которые интерпретируют текст для отображения на экране монитора.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лабораторная работа |
| Язык | русский |
| Дата добавления | 30.03.2017 |
| Размер файла | 21,7 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Лабораторная работа №1
язык документ браузер текст
HTML (от англ. HyperText Markup Language -- «язык гипертекстовой разметки») -- стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.
Веб-обозреватели, браузеры. Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer.
Сайт -- совокупность логически связанных между собой веб-страниц. Сайт, как система электронных документов (файлов данных и кода) может принадлежать частному лицу или организации и быть доступным в компьютерной сети под общим доменным именем и IP-адресом или локально на одном компьютере. Все сайты в совокупности составляют Всемирную паутину.
Веб-сервер -- сервер, принимающий HTTP-запросы от клиентов, обычно веб-браузеров, и выдающий им HTTP-ответы, как правило, вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными. Веб-сервером называют как программное обеспечение, выполняющее функции веб-сервера, так и непосредственно компьютер, на котором это программное обеспечение работает.
Веб-страница (англ. Web page) -- документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера. Типичная веб-страница представляет собой текстовый файл в формате HTML, который может содержать ссылки на файлы в других форматах (текст, графические изображения, видео, аудио, мультимедиа, апплеты, прикладные программы, базы данных, веб-службы и прочее), а также гиперссылки для быстрого перехода на другие веб-страницы или доступа к ссылочным файлам.
Структура HTML-документа.
С чего начинается HTML
Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так:
<!DOCTYPE html>
Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 5.0. Как видно из примера, самый короткий html-документ состоит буквально из одной строки.
Пример самого короткого HTML-документа:
<!DOCTYPE html>
С чего начинается работа
На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера < html >. Необходимо отметить, что любой HTML-документ открывается тегом <html> и им же закрывается.
Затем, между тегами <html> и </html> следует разместить заголовок и тело документа. Вот и все! Начало положено - вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:
<!DOCTYPE html> <html> <head>
<meta charset=«utf-8»> <title>Заголовок документа</title> </head> <body> Текст документа </body> </html>
Если приведенный выше пример пояснить схематически, получится следующее:
Из схемы видно, что документ состоит из двух основных блоков - "заголовка" и "тела документа". Заголовок определяется с помощью элемента head, а тело - элементом body.
Заголовок содержит "техническую" информацию о документе (см. элемент title).
Тело документа - святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы, видео. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами <body> и </body>
<!-- -->
Используется для создания комментариев в любой части документа. Все, что находится внутри <!-- -->, будь то элемент или текст - будет проигнорировано браузером (не будет обрабатываться и выводиться на экран).
Пример:
<HTML> ... <!-- Начинаем чуткую работу с телом документа --> <BODY> <!-- Всталяем табличку с прайс-листом --> ... </BODY> <!-- Все. Готово --> </HTML>
Примечания:
· Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег <!-- --> внутри TITLE не действует.
· Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя.
Заголовок
Создается с помощью элемента head, между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается до тела документа.
Элементы, относящиеся к заголовку документа
HEAD
Определяет начало и конец заголовка документа
TITLE
Определяет имя всего документа, которое отображается в заголовке окна браузера
STYLE
Используется для вставки в документ таблицы стилей CSS
LINK
Описывает взаимосвязь документа с другими объектами
META
Используется для вставки метаданных
HEAD
Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE,BASE,STYLE,LINK,META).
Пример:
<HTML> <!-- Начинаем заголовок... --> <HEAD> <title>Справочник по HTML</title> </HEAD> <!-- ...кончили. Дальше пошло тело документа --> <BODY> Текст документа </BODY> </HTML>
TITLE
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
Пример:
... <HEAD> <TITLE>Руководство по эксплуатации</TITLE> </HEAD> ...
Примечания:
· Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег <!-- --> внутри TITLE не действует.
STYLE
Используется для вставки в документ <![CDATA[<noindex>]]>таблицы стилей<![CDATA[</noindex>]]> (CSS - Cascade Style Sheet).
Атрибуты
TYPE - обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css".
Пример:
<HEAD> <TITLE>Пример использования таблицы стилей</TITLE> <!-- Втыкаем табличку стилей --> <STYLE TYPE="text/css"> <!-- A {text-decoration : none;} P {color : blue; font-size : 12pt; font-family : Arial;} H1 {color : red; font-size : 18pt;} --></font> </STYLE> <!-- ... кончили втыкать --> </HEAD>
LINK
Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK.
Атрибуты
HREF - определяет URL объекта.
REL - определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF.
значениt:
· stylesheet - указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу
TYPE - определяет MIME-тип для объекта, указанного в атрибуте HREF.
Пример ^
<HEAD> <TITLE>Полдневье</TITLE> <LINK REL="stylesheet" TYPE="text/css" href="deco1.css"> </HEAD>
Примечание
Элемент LINK используется web-мастерами чаще всего только для внедрения CSS из отдельного файла.
META
(HTML 5.0) - Meta
Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега.
Атрибуты
charset - определяет кодировку документа
Пример:
<HEAD> ... <META charset="utf-8"> ... </HEAD>
Тело документа
Создается с помощью элемента BODY. Именно в теле документа содержится все то, что мы видим на странице. А на странице мы обычно видим:
· Текст, блоки текста (причем текста форматированного)
· Гиперссылки
· Разнообразные списки
· Таблицы
· Всяческие объекты, картинки, видео
· Заполняемые формы
Примечания
BODY
Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки пишутся между открывающим тегом <BODY> и закрывающим тегом </BODY>. Элемент BODY должен встречаться в документе не более одного раза.
Пример:
<HTML> <BODY> ... Текст документа. ... </BODY> </HTML>
Размещено на Allbest.ru
...Подобные документы
Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.
презентация [4,3 M], добавлен 15.02.2014Основы языка программирования Web-страниц – HTML. Виды информации, которую может содержать Web-страница: текст, графика, звук, анимация и видео. Инструментарий для создания Web-страниц. Основные HTML-редакторы, которые используются для Web-дизайна.
реферат [374,0 K], добавлен 19.01.2011Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010Концептуальное проектирование сайта по онлайн-продаже кофе, его древовидная логическая структура страниц. Описание языка гипертекстовой разметки сайта HTML, особенности отображения HTML-тегов в браузерах. Создание формы заказа для онлайн-торговли.
курсовая работа [2,2 M], добавлен 16.04.2017История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005История развития Интернета и принципы его работы. Сквозные протоколы и шлюзы. Логическая и физическая структура сайта. Основы HTML и форматирование текста. Списки, таблицы, гиперссылки. Мультимедиа на web–странице. Формат задания фреймовой структуры.
курсовая работа [1,2 M], добавлен 27.03.2009Термин HTML (HiperText Markup Language) и его реализация. Программы просмотра страниц написанных на зыке манипулирования гипертекстами. Характеристика специальных программ – браузеров: Google Chrome, Opera, Mozilla Firefox. Структура HTML-страницы.
контрольная работа [118,8 K], добавлен 05.04.2015Изучение алгоритма рекурсивного спуска и системы построения грамматики с помощью лексического анализатора Lex. Написание программы интерпретатора языка разметки HTML. Проверка входной последовательности на корректность входа как общая функция программы.
контрольная работа [226,7 K], добавлен 25.12.2012Цели, задачи и компоненты информационной технологии управления. Разработка структуры сайта и программный код работы в HTML–редакторе: создание титульной страницы, документа с фреймами, связь информационных документов с помощью гипертекстовых ссылок.
курсовая работа [34,3 K], добавлен 11.08.2011Вступ в мову HTML. Структура HTML-документа. Встановлення кольору фону та тексту, створення заголовка. Графіка і посилання на WEB-сторінці, вставка малюнків. Оформлення таблиць та форматування комірок. Комплексна лабораторна робота "Створення HTML-файла".
методичка [147,3 K], добавлен 15.06.2009Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Создание web-сайта "Мастер по обработке цифровой информации" на языке программирования HTML. Структура и тэги тела документа. Исследование программ, с помощью которых можно написать web-страницы. Особенности работы с файлами разных форматов и расширений.
курсовая работа [144,2 K], добавлен 31.10.2013Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014
