Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Html документ как создать

Как создать html документ

Инструкция

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

При использовании редактора кода в главном меню программы выберите пункт File («Файл») - Save As... («Сохранить как...»). В открывшемся диалоговом окне вам понадобится указать директорию для сохранения файла, а также имя и расширение. Можно сконвертировать текстовый документ в HTML-страницу, дописав в конце имени расширение html.

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

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

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

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

Между тегами и заключено тело сайта - информация, которая выводится на экран пользователя. Это могут быть заголовки, подзаголовки, параграфы и строки текста, изображения, видео или другие объекты мультимедиа. Дескриптор является обязательным. Кроме того, внутри него могут быть использованы другие элементы , или . Они не влияют на отображаемый результат, но создают структуру HTML-кода, что считается хорошим тоном в кругах web-разработчиков или верстальщиков.

Полезный совет

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

Создание HTML документа | Руководство по HTML5

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

Браузеры и пользовательские агенты

В этой главе (и в большей части данной книги), я рассматриваю браузер в качестве цели для HTML документа, который мы создаем. Это неплохой и наиболее распространенный способ видения HTML, но в этом не вся правда. Собирательное название для программных компонентов и компонентов, которые могут потреблять HTML, - пользовательские агенты. Хотя браузеры являются наиболее распространенным видом пользовательских агентов, они не являются единственными.

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

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

HTML vs. XHTML

Хотя эта книга про HTML, было бы непростительно, если бы я не упомянуть и XHTML (HTML, которому предшествует X). Синтаксис HTML позволяет вам делать вещи, которые незаконны для XML-документов. Это означает, что могут возникнуть сложности при обработке HTML-документа с помощью стандартных XML-парсеров.

Чтобы решить эту проблему, вы можете использовать XHTML, который является XML сериализацией HTML (то есть, вы выражаете содержание и элементы и атрибуты HTML таким образом, как это делается для действительного XML, и они могут быть легко обработаны парсером XML). Вы также можете создать документы полиглоты, которые являются действительными HTML и XML документами, хотя это требует использования подмножества синтаксиса HTML. Я не покрывают в этой книге XHTML, но вы можете получить больше информации про XHTML вот тут: http://wiki.whatwg.org/wiki/HTML_vs._XHTML.

Внешняя структура

Есть два элемента, которые обеспечивают внешнюю структуру HTML документа – элементы DOCTYPE и html, как показано в листинге 3-11.

Листинг 3-11: Внешняя структура HTML документа

Элемент DOCTYPE говорит браузеру, он имеет дело с HTML документом. Это выражается через HTML булев атрибут:

За элементом DOCTYPE сразу следует открывающий тег элемента html. Это говорит браузеру, что содержимое элемента должно рассматриваться как HTML от начала и до конца, пока не встретится закрывающий тег html. Может показаться странным, что вы используете элемент DOCTYPE, а затем сразу же и элемент html. Но когда HTML превратился в стандарт, были другие равнозначные языки разметки, и ожидалось, что документы будут содержать смесь разных типов разметки.

В наши дни HTML является основным языком разметки, и большинство браузеров будет предполагать, что они имеют дело с HTML, даже если вы опустите элементы DOCTYPE и html. Это не обозначает, что вы должны их выбрасывать. Эти элементы служат важной цели, и опираться на браузерное поведение по умолчанию – это как доверять незнакомцам: большую часть времени все будет отлично, но все же может случиться нечто, что все испортит и поломает. В главе 7 изложена более подробная информация про элементы DOCTYPE и html.

Метаданные

Область метаданных в документе HTML позволяет предоставить браузеру информацию о документе. Метаданные содержатся внутри элемента head, как показано в листинге 3-12.

Листинг 3-12: Добавление элемента head в HTML документ Example

В листинге я предоставил минимальное количество метаданных, а именно элемент title. Считается, что все HTML документы должны содержать элемент title, хотя браузеры обычно игнорируют любые упущения. Большинство браузеров отображают содержимое элемента title в строке меню в окне браузера или в верхней части вкладки, открытой на странице. Элементы head и title полностью описаны в главе 7, наряду со всеми другими элементами метаданных, которые могут быть размещены в элементе head.

Совет

В листинге показано, как создать комментарии в HTML документе. Вы начинаете с тега . Браузер будет игнорировать все, что вы напишете внутри этих тегов.

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

Содержание

Третьей и заключительной частью HTML документа является содержание, которое находится внутри элемента body, как показано в листинге 3-13.

Листинг 3-13: Добавление элемента body в HTML документ Example I like apples and oranges.

Создание документа HTML в текстовом редакторе Блокнот

Лабораторная работа №1

«Создание простейшего HTML-документа. Форматирование текста»

Цель работы

Изучить структуру html-документа, основные тэги форматирования текста и использовать их при создании веб-страницы.

Основы создания Web-страниц средствами

Языка разметки гипертекста HTML

Создание простого документа

Основой разработки веб-страниц является язык HTML (HyperText Markup Language – язык разметки гипертекстов).

Основной структурной единицей языка HTML является тег (от англ. Tag - дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид:

Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий и закрывающий .

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

Атрибуты тега задают значения свойств данного объекта или объектов помещенных в контейнер.

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

Таким образом, структура простого HTML документа выглядит примерно так:

{начало страницы}

{описание страницы, заголовка}

название {имя страницы}

{закрытый тэг описания заголовка}

{содержание страницы}

текст

{закрытый тэг описания страницы}

{конец страницы}

Форматирование текста

- тег, определяющий границы тела документа.

Атрибуты:

BGCOLOR – определяет цвет фона документа. По умолчанию «White» (#FFFFFF).

TEXT – задает цвет текста для всей страницы. Цвет указывается в формате RGB или константами red, green, blue и т.п. По умолчанию «black» (#000000).

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

Таблица 1

Название	Код	Название	Код
Aqua	#00FFFF	navy	#000080
Black	#000000	olive	#808000
Blue	#0000FF	purple	#800080
Fuchsia	#FF00FF	red	#FF0000
Gray	#808080	silver	#C0C0C0
Green	#008000	teal	#008080
Lime	#00FF00	white	#FFFFFF
Maroon	#800000	yellow	#FFFF00