Документ на языке HTML представляет собой обычный текстовый файл, содержащий как сам текст, так и специальные флаги форматирования документа и ссылки на файлы, содержащие графическую и звуковую информацию. Флаги форматирования предназначены для программ просмотра. Эквивалентным названием флага является тег. В соответствии с ними программа просмотра формирует содержимое документа для вывода его на экран.
Для HTML-документов приняты следующие расширения файлов:
.htm – для операционных систем, поддерживающих не более трех символов для расширения файлов (MS DOS, Windows 3.X)
.html – для операционных систем, поддерживающих более трех символов для расширения файлов (UNIX, Windows 95 и выше).
В текст документа не могут включаться символы , и заканчивается символом >. Практически все флаги языка HTML являются парными, за редким исключением. Все флаги, атрибуты и буквенные параметры используют латинские символы, которые могут быть как строчными, так и прописными. В случае парных флагов, закрывающий флаг отличается от открывающего наличием символа / после открывающей угловой скобки.
#2 Знакомство с HTML, базовая структура, мета-теги [Курс по Верстке от AROKEN]
Например:
…
— парный флаг описания параграфов. Действие парного флага распространяется на весь текст, расположенный между флагами. Язык HTML предусматривает использование вложенных флагов. Ситуация, когда открывающий флаг находится между одними парными флагами, а закрывающий флаг находится вне этих парных флагов , является недопустимой. Пример вложенных флагов ….
В некоторых случаях к флагам добавляются атрибуты. Атрибуты – это ключевые слова .Они отделяются от флага и других атрибутов пробелами. Значение атрибута следует за символом = и помещается в кавычки. Например: . В парных флагах атрибуты добавляются только к открывающему флагу.
Создание HTML-документа может выполняться вручную, либо при помощи Front Page Express. Первый способ позволяет создавать более качественные и универсальные документы.
Значения параметров, как правило, помещаются в кавычки, но могут быть и без кавычек. Например, size=”10” . Здесь атрибут size имеет значение 10.
1.1.1 Структура html-документа
HTML-документ начинается в флага и заканчивается флагом . Между флагами располагается текст документа. Например:
Остальные элементы документа разбиваются на два раздела: раздел головной части документа и раздел самого тела документа.
На экране флаги не отображаются, как не отображаются элементы головной части. Отображается только текст.
Источник: studfile.net
Структура html-документа
Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. — «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).
HTML5 #1 Базовая структура HTML документа (Base HTML Document Structure)
doctype
Каждый HTML документ, отвечающий спецификации HTML какой-либо версии (мы будем указывать последнюю версию), обязан начинаться со строки декларации версии HTML, делается это с помощью объявления следующим образом:
Эта строка поможет браузеру определить, как правильно интерпретировать код полученной веб-страницы. В данном случае мы говорим браузеру, что HTML соответствует последнему стандарту спецификации.
Хотя слово doctype размещается в угловых скобках (< и >), оно не является тегом, это инструкция, предназначенная специально для браузеров, и восклицательный знак (!) в начале отличает ее от остального кода в HTML-документе.
Элемент html
После объявления версии и типа документа необходимо обозначить его начало и конец, делается это с помощью элемента :
Это элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: и .
Элемент head
Элемент является контейнером для других элементов, которые предоставляют информацию о документе, известную как метаданные. Эти метаданные сообщают браузеру о местонахождении внешних скриптов и таблиц стилей, устанавливая отношение между текущим документом и другими ресурсами, и могут предоставлять дополнительные данные, предназначенные для браузеров. Помимо обязательного элемента , рассматриваемого далее в этой главе, браузеры не отображают никакие метаданные, находящиеся внутри элемента .
Элемент должен быть первым дочерним элементом , никакое содержимое или элементы не должны располагаться перед ним:
Элемент title
Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент , который должен располагаться внутри элемента :
Браузеры отображают содержимое элемента как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:
Элемент body
Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:
С этой темой смотрят:
Источник: puzzleweb.ru
Урок №6. Структура HTML приложения
Прежде чем создавать сайт, нужно продумать его структуру.
Существует несколько типов сайтов в зависимости от гиперсвязи между страницами.
была реклама
Прежде чем создавать сайт, нужно продумать его структуру.
Лендинг
Самый простой сайт состоит всего из одной страницы. Такой сайт называется лендинг (сокращение от “лендинг пейдж”, что в переводе с английского (Landing Page) значит “целевая страница”).
Цепочка
Это тоже простая структура.Сайт состоит из нескольких страниц. Странички просматриваются последовательно. На каждой страничке предусмотрены ссылки на следующую страницу и на предыдущую страницу.
Задание 1.
Создайте папку Цепочка. Скопируйте в неё две картинки со стрелками вправо и влево.
Создайте три HTML документа, отличающихся цветом фона.
Сохраните их под именами start.html, middle.html и finish.html соответственно.
Создайте гиперссылки с первого документа на второй, со второго — на первый и третий, с третьего — на второй.
Код для страниц.
Синий цвет
Станичка СТАРТ
Зеленый цвет
Станичка СЕРЕДИНКА
Фиолетовый цвет
Станичка ФИНИШ
Гиперссылки добавьте самостоятельно.
Простое меню
В этой структуре на главной странице расположены гиперссылки на дополнительные страницы. С каждой из них можно перейти только
на главную страницу.
Задание 2.
Создайте гипертекстовый документ по предложенной выше схеме. Для этого создайте новую папку «Школьное кафе», в которую скопируйте рисунки для оформления страничек.
Создайте следующие документы:
- Меню на сегодня,
- Супы,
- Горячие блюда,
- Булочки,
- Сладости.
и свяжите их гипертекстовой связью
Образцы страничек:
Остальные HTMLдокументы оформите самостоятельно.
Иерархия.
Это зависимость по подчинению или включению одних объектов в другие.
Задание 3.
Создайте небольшой HTML справочник по предложенной структуре.
Уважаемые читатели!
Все материалы с сайта можно скачивать абсолютно бесплатно. Все материалы проверены антивирусом и не содержат скрытых скриптов.
Материалы в архиве не помечены водяными знаками!
Если материал нарушает чьи-то авторские права, просьба написать нам по обратной связи, указав авторство материала. Мы обязуемся либо убрать материал, либо указать прямую ссылку на автора.
Сайт пополняется материалами на основе бесплатной работы авторов. Eсли вы хотите отблагодарить их за работу и поддержать наш проект, вы можете перевести любую, не обременительную для вас сумму на счет сайта.
Заранее Вам спасибо.
Источник: ja-uchenik.ru