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

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

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

А также:


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


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

Инструкция

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

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

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

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

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

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

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

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

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

www.kakprosto.ru

Создание 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.

smarly.net

Создание документа 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

- абзац

Атрибуты:

ALIGN – выравнивание. Возможные значения: RIGHT-выравнивание текста по правому краю; CENTER - по центру; LEFT - по левому краю; JUSTIFY – по ширине.

… - заголовки разного уровня (от первого до шестого).

Пример:

Заголовок второго уровня с выравниванием по центру.

- горизонтальная линия

Атрибуты:

ALIGN – выравнивание.

WIDTH – длина линии в процентах от окна браузера или пикселях

SIZE – ширина линии в процентах от окна браузера или пикселях

COLOR – цвет линии.

Пример:

Дополнительные возможности по форматированию:

- полужирный текст;

- курсивный текст;

- эффект подчёркивания;

- эффект зачеркивания.

- используется для указания начертания шрифта в документе.

Атрибуты:

SIZE – размер шрифта.

COLOR – цвет шрифта.

FACE – гарнитура шрифта.

Пример:

Красная строка набрана шрифтом ARIAL 4 размера

Создание списков

В HTML-документе существует четыре основных вида списков:

  • нумерованный
  • маркированный
  • вложенные списки
  • список определений

Фрагмент текста, представляющий список, заключается в тэги:

    ….
упорядоченный список (ordered list);

    ….
неупорядоченный список (unordered list);

< LI>…. вложенные списки;

…. список определений.

Список определений служит для создание списков типа «термин» - «описание». Каждый термин начинается тэгом , а описание - тэгом .

Каждый элемент списка заключается в тэги

  • ….
  • (от английского list item). При выводе на экран элементы списка имеют отступ и начинаются с новой строки.

    Тэг

      может иметь параметры:

        TYPE= определяет вид нумерации, START= задаёт начальное значение первого элемента списка (независимо от типа указывается цифрой).

        TYPE=A – маркеры в виде прописных латинских букв;

        TYPE=a – маркеры в виде строчных латинских букв;

        TYPE=I – маркеры в виде больших римских цифр;

        TYPE=i – маркеры в виде маленьких римских цифр;

        TYPE=1 – маркеры в виде арабских цифр (по умолчанию).

        Тэг

          может иметь параметр:

            Тип тэга

              определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).

              Тэг

            • может иметь параметры:

                или

                  TYPE Вид маркера (см.

                    ) или счетчика (см.OL)

                    VALUE=n Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.

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

                    Для того чтобы создать документ HTML в текстовом редакторе Блокнот необходимо выполнить следующие действия:

                    1. Запустить текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

                    2. Создать типовую структуру HTML - документа и ввести текст.

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

                    3. Сохранить этот документ. При сохранении в качестве типа файла укажите «все файлы», в качестве имени файла first.html.

                    4. Закрыть блокнот. Найти файл first.html и открыть его с помощью интернет-браузера.

                    Рис. 2. Иллюстрация документа в интернет-браузере.

                    megaobuchalka.ru

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

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

                    Инструкция
                  • HTML-файл является обычным текстовым документом, в котором с помощью специальных дескрипторов задается расположение элементов контента относительно друг друга или окна браузера. Просмотреть работу файла можно через интернет-обозреватель. Чтобы отредактировать код HTML, можно воспользоваться текстовым редактором или подобрать специальные программы, имеющие такие функции, как автоматический ввод и подсветка синтаксиса. Примером приложения, хорошо подходящего для удобной работы с подобными документами, является Sublime Text 2.
                  • При использовании редактора кода в главном меню программы выберите пункт File («Файл») - Save As... («Сохранить как...»). В открывшемся диалоговом окне вам понадобится указать директорию для сохранения файла, а также имя и расширение. Можно сконвертировать текстовый документ в HTML-страницу, дописав в конце имени расширение html.
                  • Существует ряд ситуаций, когда даже правильно созданный файл с верным расширением не открывается в браузере. Причиной тому является неправильное оформление структуры кода HTML. Существует ряд обязательных правил, без соблюдения которых интернет-страница отображается некорректно, либо вовсе не открывается.
                  • Тег хоть и не является обязательным, но его наличие помогает браузеру правильно интерпретировать код и распознать структуру документа. Иногда причиной некорректного отображения веб-страницы является именно отсутствие или неправильное написание этого тега.
                  • Парный является дескриптором, в который заключается все содержимое веб-страницы. Элементы кода, которые находятся за пределами этого тега, отображаются как обычный текст или блокируются браузером, за исключением . Дескриптор является обязательным и не может быть использован на странице более одного раза.
                  • При помощи указывается основная информация о документе. Между этими тегами с помощью дескрипторов задается заголовок веб-страницы, а посредством подключаются файлы CSS или JavaScript. Таким же образом внутри парного тега указываются стили, кодировка, тип документа, версии оформления для разных браузеров или устройств и некоторые другие параметры. Содержимое тега не отображается в окне браузера, однако дескриптор является обязательным.
                  • Между тегами и заключено тело сайта - информация, которая выводится на экран пользователя. Это могут быть заголовки, подзаголовки, параграфы и строки текста, изображения, видео или другие объекты мультимедиа. Дескриптор является обязательным. Кроме того, внутри него могут быть использованы другие элементы , или . Они не влияют на отображаемый результат, но создают структуру HTML-кода, что считается хорошим тоном в кругах web-разработчиков или верстальщиков.
                  • Оцените статью!

                    imguru.ru


                    Смотрите также



    Компьютерные курсы по направлениям:

    Для начинающих


    A

    Компьютер для начинающих: Word, Excel, Access и другие программы!

    Графические пакеты


    B

    Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

    WEB + анимация


    C

    Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

    Бухгалтерия + делопроизводство

    Сетевые технологии


    E

    Курсы сборки ПК, системных администраторов и защиты информации!