Базовая структура HTML страницы. Из чего состоит структура HTML-документа

Документ HTML состоит из основного текста и тегов . По сути, документ HTML представляет собой текстовый файл и для его создания можно использовать обычный текстовый редактор, например, Блокнот .

Документы HTML имеют строго заданную структуру, должны начинаться с тега и заканчиваться закрывающим тегом . Эта пара тегов сообщает браузеру, что перед ним действительно документ HTML.

Документ HTML состоит из раздела заголовков и тела документа. Раздел заголовков заключён между тегами и и содержит информацию о документе в целом. В частности, этот раздел должен содержать теги и , между которыми размещают заголовок документа. Браузеры используют этот заголовок, чтобы заполнить строку заголовка окна браузера.

Основной текст располагается в теле документа, которое задаётся тегами и . Для изменения фона документа используется атрибут BGCOLOR, а для задания цвета шрифта применяется атрибут TEXT. В качестве значений этих атрибутов используется символьная константа цвета или шестнадцатеричное число, формирующее цвет по схеме «красный-зелёный-синий».

Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются или их наличие подразумевается во всех документах HTML.

Фактически определить расположение основных структурных тегов можно и при их отсутствии. Поэтому, если теги , , и соответствующие им закрывающие теги опущены, то программа-браузер сама определит то место, где они должны находиться. Тег считается обязательным, но и его пропуск не вызовет катастрофических последствий. Однако при создании Web-страниц опускать эти теги не рекомендуется, так как неизвестно, как поведёт себя браузер, установленный на компьютере пользователя.

Парные теги влияют на часть документа между открывающим и закрывающим тегами. Такую часть документа рассматривают как элемент языка HTML. Например, элемент BODY включает в себя открывающий тег , основное содержание элемента и закрывающий тег . Элементы языка HTML делятся на блочные и текстовые . Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и более мелких частей текста. При создании документа HTML желательно придерживаться следующих правил вложения элементов :

элементы не должны пересекаться. Если открывающий тег находится внутри элемента, то и закрывающий тег должен располагаться внутри этого же элемента;

блочные элементы могут содержать вложенные блочные и текстовые элементы;

текстовые элементы могут содержать вложенные текстовые элементы;

текстовые элементы не могут содержать вложенные блочные элементы.

Заголовок документа

Язык HTML предназначен для описания функциональных разделов документа. Во многих обычных документах основными функциональными разделами являются заголовки и абзацы .

Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от и до и . На экране компьютера эти заголовки изображаются шрифтами разных размеров. В соответствии с идеологией языка HTML текст, который по сути является заголовком, надо пометить с помощью одного из этих тегов. Пользоваться тегами форматирования, которые изменяют размер и начертание шрифта, в данном случае не следует.

Для обозначения обычных абзацев используют тег

И соответственно закрывающий тег

Для улучшения читаемости текста между абзацами браузеры выводят пустую строку. Эффективным средством создания разделителей в тексте являются горизонтальные полоски (линейки), визуально разделяющие документ на части. Горизонтальная линейка создаётся тегом . Это одиночный тег, не имеющий парного.

При создании HTML документа следует учитывать, что кратные пробелы между словами и переходы на новую строку при воспроизведении документа браузером игнорируются.

Для перехода на новую строку без создания абзаца используется тег
.

Функциональные разделы документа

Главный заголовок

Подзаголовок

Эти строки отображаются слитно,

несмотря на то, что в документе

они отделены

друг от друга.

Закрывающий тег абзаца не обязателен.

Тег начала абзаца более важен, чем реальный переход на новую строку.

Текст после горизонтальной линейки
разбит на две строки

Http://www.webuchebnik.ru/samouchitel_html/fone_images.php

http://stafox.ru/category/html-2/lekcii/

Из чего состоит структура HTML-документа

СТРУКТУРА HTML-ДОКУМЕНТА:

Вот как выглядит код самой простой html-страницы:

Для того, чтобы создать свою html страницу, нужно вставить вышеуказанный код в блокнот, нажать Файл → Сохранить как… В поле «имя файла» указать ваше_название страницы.html , а в поле «тип файла» указать Все файлы . Нажать Сохранить .

Тег сообщает о том, что начинается структура html-документа, - что заканчивается.

Между тегами хранится в большей части информация для браузера и поисковых систем.

В тегах содержится заголовок нашей страницы.

Теперь немного поясню. Все теги (тэг - элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текстаhtml . Рассмотрим несколько самых простых «одиночных» тегов:

- тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.

- тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:

• align - Определяет выравнивание линии. Может принимать значение left, center, right.
• color - Задаёт цвет линии.
• noshade - Рисует линию без трехмерных эффектов.
• size - Задаёт толщину линии.
• width - Задаёт ширину линии.

Код с использованием тега :

Ещё один «одиночный» тег - это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:

Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:

Cуществуют и другие одиночные теги (, ,
, , , , , , , , , , , , , ), но с ними я познакомлю вас чуть позже.

Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.

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

Следующее, о чём я должен рассказать, это то как устанавливать ссылку. Ведь сайт это множество перелинкованных между собой страниц. Ссылка устанавливается с помощью «закрывающегося» тега , у которого есть 12 атрибутов:

- отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

- предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

- уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Тег уменьшает текст на одну условную единицу. Допускается применение вложенных тегов , при этом размер шрифта будет меньше на 1 с каждым вложенным уровнем, но не может быть меньше, чем 1.

- увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега увеличивает текст на одну условную единицу. Допускается применение вложенных тегов , при этом размер шрифта будет больше с каждым уровнем.

- используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

- определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег Позволяет обойти эту особенность и отображать текст как требуется разработчику.

Является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

.... - HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги ,…, относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align , который определяет выравнивание заголовка, может принимать значения left - выравнивание заголовка по левому краю, center - выравнивание по центру, right - выравнивание по правому краю, justify - выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

- представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color - устанавливает цвет текста, face - определяет гарнитуру шрифта, size - задает размер шрифта в условных единицах.

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

- указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.

По умолчанию, текст заключенный в контейнере подчеркивается пунктирной линией.

Ниже приведу код, в котором я использовал все эти теги:

HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about:

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup язык language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

А вот и визуальный результат.

Лекция подошла к концу, надеюсь приобретённые знания вам пригодятся! В следующей лекции я расскажу вам о том, что в себе хранит тег , научимся выполнять всевозможные манипуляции с изображениями, и познакомимся с таблицами.

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

HTML - это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.

Пользуясь HTML, разработчик может создать только внешний вид сайта. Важно понимать, что ни один сайт не существует без разметки. HTML является базой создания веб-страниц. Весь остальной функционал добавляется различными языками программирования.

Создать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.

Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

Структура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.

На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.

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

Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега - открывающий и закрывающий.

Выше было сказано, что страницы сайтов имеют расширение.html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.

На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что указывается только в разделе head. Если тег указать в разделе body или после него, то обработчик на него не обратит внимания.

Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов.

Структура html-документа позволяет подключать стили различными способами. Более того, их можно писать индивидуально в каждом элементе. Но данный способ не рекомендуется, поскольку код становится слишком большим и неудобным.

Подключается файл следующим образом.

В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.

Другим вариантом является определение стилей прямо в разделе head.

Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.

Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.

Скрипты подключаются следующим образом.

Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

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

Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками . Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.

Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием - фотография птицы.

Кроме этого, в можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

Рассмотрим другие основные теги, которые указываются в разделе body.

Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.

This is going to be real fun

HTML-код - разметка веб-страницы, выполненная с помощью языка HTML и включающая специальные символы (теги) , используемые браузером для конструирования дизайна на основе текстового кода. Данный язык отвечает за то, как именно будет отражаться гипертекст на страницах сайта.

HTML (HyperText Markup Language) - язык разметки (маркировки) гипертекста. Гипертекст своим развитием обязан интернету, хоть и создавался он совсем не для того. HTML дает возможность производить переход от одной части текста к другой, и, что замечательно, эти части могут храниться на совершенно разных компьютерах.

Html является именно языком разметки, а не программирования . В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение.html или.htm и образовываются браузерами-IE, Mozilla, Firefox, Google Chrome, Yandex Chrome, Opera и др.

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

1. Первое, что идет в документе HTML-указание версии(первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы.

3. затем идет область верхней части сайта (шапки). Для этого служит тег . В шапке мы указываем название нашей страницы, помещая заголовок страницы между тегами и / Далее указывается кодировка HTML документа (пятая строка). Это делается для правильного отражения кириллицы. Закрываем область шапки тегом

4. Мета-тег «description» - краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять.

5. Мета-тег «keywords»- ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется.

6. Тело страницы открывается тегом и закрывается, соответственно, тегом . В теле веб-страницы размещается, как правило, основной контент-текст, видео, аудио и другая информация.

Что такое CSS-файлы, и зачем они нужны? Как создается CSS-файл?

Cascading Style Sheets (а именно так расшифровывается аббревиатура CSS) или каскадные таблицы стилей – язык внешнего оформления веб-страниц, написанных на языке разметки HTML.

Зачем нужен CSS.

С целью облегчить жизнь веб-мастеру и улучшить дизайн сайтов появились CSS таблицы, отвечающие за оформление веб-страниц. Появление CSS позволило разделить содержание и оформление веб-документов. Это ускорило процесс создания сайтов благодаря наличию единых стилей оформления для большого количества страниц.

Кроме того, каскадные таблицы стилей дают возможность быстро изменять оформление веб-ресурса или вносить в него правки. Так что с помощью одного файла CSS теперь можно быстро управлять оформлением огромного количества веб-страниц.

Важное преимущество таблиц стилей – оформление веб-страницы для разных устройств. Стоит иметь ввиду, что для разных устройств существуют разные таблицы стилей. То есть сразу создается несколько дизайнов (для печати, просмотра на экране компьютера, мобильных устройствах). В зависимости от того, на каких устройствах планируется вывод сайта, CSS пишется для каждого устройства один раз при создании сайта.

Без CSS оформление пришлось бы прописывать для каждой отдельной веб-страницы. Теперь же каждая страница сайта просто ссылается на CSS файл. Чтобы изменить что-либо в оформлении нашего сайта, надо внести изменения в код файла CSS.

Таким образом, CSS обладает огромными возможностями в плане оформления веб-ресурсов. И если вы планируете освоить сайтостроение, без знаний CSS вам не обойтись. Синтаксис CSS таблиц несложный для освоения. Так что смело приступайте к его изучению, чтобы научиться делать не только содержательные, но и красивые сайты.

Как создается CSS-файл:

Файл стилей CSS- это обычный текстовый файл, точно такой же, какой мы можем создать в любом текстовом редакторе «Блокнот», «MS Word» и тд

Единственное, что отличает файл стилей от других текстовых документов - это его расширение, которое имеет вид *.css.

Таким образом, можно создать файл стилей CSS просто изменив расширение текстового файла:

Способ 1. Изменив просто расширение текстового файла.

открыть любой текстовый редактор, например «Блокнот». В главном меню выбираем файл –сохранить как и сохраняем текстовый файл с разрешением.txt. Теперь нужно поменять расширение этого файла с *.txt на *.css . Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css. После этого мы получаем файл стилей CSS.

Способ 2. создание файла стилей с помощью редактора кода Dreamweaver. В ней специальные функции для создания файлов стилей CSS. После открытия программы появится главное меню, в котором можно выбрать создание файла CSS. После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…» Аналогичный процесс создания файлов CSS есть и в других редакторов кода.