Что представляет собой документ написанный на языке html

Справочное руководство по HyperText Markup Language (HTML)

Оно отражает современное состояние языка HTML (стандарт языка [90] версии HTML 2, зафиксированный в документе RFC1866, и стандарт представления таблиц, изложенный в RFC1942). Описание конструкций языка проиллюстрировано одним или несколькими примерами. Каждый пример показывает некоторый фрагмент на языке HTML и визуальное представление данного фрагмента на дисплее при использовании графических программ просмотра, таких как Microsoft Internet Explorer 3.0 или Netscape Navigator 3.0. Кроме того, разобраны наиболее распространенные ошибки при использовании тех или иных элементов HTML.

Авторы сочли целесообразным включить в данное руководство некоторые расширения языка, уже поддерживаемые большинством программ просмотра, но отсутствующие в стандарте языка HTML 2. Эти конструкции языка приведены в документе HTML 3.2, также известном под именем "Wilbur".[91] При описании конструкций языка всегда оговаривается, если та или иная конструкция выходит за рамки стандарта и является потенциально несовместимой с некоторыми из программ просмотра.

Сведения о некоторых более сложных средствах представления информации в WWW, таких как рамки (frames), заполняемые формы, язык Java и некоторых других, заинтересованный читатель найдет в следующей главе (стр. 137).

Общая характеристика и назначение языка

HyperText Markup Language (HTML) — переводится как Язык Разметки Гипертекста. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Документ на языке HTML может включать следующие компоненты:

• стилизованный и форматированный текст,
• команды включения графических и звуковых файлов,
• гиперсвязи с различными ресурсами Internet.

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

Перед тем, как приступить к описанию языка HTML, мы хотели бы отметить одну важную особенность этого языка. Подобно известному некоторым читателям языку T _E X, язык HTML является подмножеством мощного языка SGML (Standard Generalized Markup Language), широко используемого в издательской деятельности (на нем, например, готовятся и печатаются журналы Physical Review и Physical Review Letters). Основная задача SGML — определить, как автору следует разметить текст и указать положение рисунков, чтобы издатель, не перенабирая текст, а изменив лишь несколько строк в стилевых файлах, мог изменять формат текста (например, переходить к набору в две колонки) и получать при этом полиграфически совершенный результат. Основной выигрыш от использования этих языков состоит в переносимости текста между разными издательскими системами. Эта же особенность — приоритет читателя над автором — в значительной степени сохраняется и в HTML. Так, читая документ, пользователи могут устанавливать способы выделения текста, гарнитуру и размер шрифтов по своему вкусу; они могут отменить просмотр рисунков. Компьютеры пользователей могут иметь экраны разных размеров с разным разрешением (от 640х480 до 1600х1280 пикселов), в результате чего максимальное количество символов, выводимых в строке, будет различным, и т. д. Всю эту адаптацию к условиям пользователя и выполняет программа просмотра. При этом, если текст HTML был написан неправильно, вид документа в окне программы просмотра может исказиться до неузнаваемости. Ясное понимание этой особенности языка HTML и следование формальным правилам разметки текста, о которых пойдет речь в этом разделе книги, позволит вам создавать документы, хорошо выглядящие во всех программах просмотра на разных типах компьютеров. Если вам не нравится эта специфика HTML и вы, как автор, хотите сохранить абсолютно неизменным созданный вами шедевр, вам следует закодировать его в форматах PostScript (ps) или Portable Document Format (pdf) . Программы просмотра, встретив файл в одном из этих форматов, вызовут соответствующую внешнюю программу, способную прочитать такой файл, — Ghostscript или Adobe Acrobat — на компьютере пользователя, если они, конечно, там установлены (см. также стр. 23 и 170).

Составляющие HTML-документа

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

• собственно текст,
• специальные последовательности символов,
• флаги разметки.

Графическая и звуковая информация, включаемая в HTML-документ при помощи специальных команд, хранится в отдельных файлах. Программы просмотра HTML-документов, такие как, например, Netscape Navigator, интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, принято расширение .htm (на серверах с операционной системой DOS) или суффикс .html (на серверах с операционными системами UNIX, Windows 95/NT и др.).

Текст

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл:

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

Пример текста с пробелами и пустыми строками

Как выглядит на дисплее

Если вы желаете опубликовать что-либо в WWW, то вам следует придерживаться соглашений, принятых в HTML.

Специальные последовательности символов
( Escape Sequences)

Если необходимо включить в текст какой-либо из четырех зарезервированных символов < > & ", который, как было сказано выше, не может быть помещен в текст непосредственно, следует закодировать его специальной последовательностью символов. Каждая специальная последовательность начинается амперсендом ( & ) и заканчивается точкой с запятой ( ; ). Зарезервированные символы представляются следующими последовательностями: [92]

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

Как выглядит на дисплее

"Это предложение взято в кавычки." Символ & не может быть помещен в текст непосредственно.

Флаги
(Tags)

Флаги предназначены для форматирования и разметки документа. Любой флаг начинается символом < и заканчивается символом > . В названиях флагов строчные и прописные буквы считаются эквивалентными. Например, флаг <br> может быть записан как <BR>.

Существует два вида флагов: парные и непарные. Действие любого парного флага начинается с того места, где встретился открывающий флаг и заканчивается при встрече соответствующего закрывающего флага (признаком которого является символ /, следующий сразу после < ) или конца файла. Например, текст, следующий за флагом курсивного начертания <I> и продолжающийся до его закрывающего парного флага </I> выводится на экран курсивом.

Непарный флаг вызывает "единичное" действие в том месте, где он встречается. Например, флаг <BR> служит для перехода на новую строку при выводе текста.

Многие флаги могут включать дополнительные параметры, или атрибуты, модифицирующие эффект данного флага, например: <P> — флаг начала параграфа, <P ALIGN=CENTER> флаг начала параграфа, выровненного по центру окна.

Назначение различных флагов их атрибутов будет подробно рассмотрено в последующих разделах.

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

Типичный HTML-документ имеет головную часть и тело. Начало документа отмечается флагом <HTML>, а конец — флагом </HTML>.

Головная часть документа
(Head)

Головная часть документа является служебной. Она обычно включает в себя название документа (см. далее). Кроме того, в нее часто помещается <META>-информация — ключевые слова и описание документа, которые читаются некоторыми программами-роботами (см. подробнее на стр. 43 и 78).

Как выглядит на дисплее

(На дисплей вместе с остальной частью документа не выводится.)

Название документа
(Title)

Название документа помещается внутри его головной части. Оно выводится не вместе с самим документом, а в полосе заголовка окна [93] программы просмотра. Оно также используется и для других целей. Например, когда программа просмотра создает так называемую закладку (см. стр. 21), то есть запоминает местонахождение документа, к которому вы предполагаете в дальнейшем вернуться, этой закладке присваивается имя, которое берется из названия документа.

Поле title в документе является обязательным. Его не следует делать длиннее 64 символов. Название документа должно быть осмысленным, поскольку это поле читается программами-роботами и заносится в базы данных поисковых систем (см. стр. 43 и 78).

Как выглядит на дисплее

(Выводится отдельно от самого документа)

Тело
(Body)

Определяет "видимую" часть HTML-документа. В документе должно быть только одно тело.

Как выглядит на дисплее

Это крошечный HTML-документ.

Комментарий
(Comment)

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

Как выглядит на дисплее

(На дисплей не выводится.)

Замечание: в виде комментария в HTML-файл могут быть помещены различные инструкции для WWW-сервера и других служебных программ. Например, при сответствующей настройке WWW-сервера комментарий <!--#exec cgi="/cgi-bin/counter"-->, включенный в HTML-файл, будет вызывать запуск программы counter каждый раз, когда кто-нибудь "берет" этот файл с сервера.

Флаги форматирования текста

Параграф
(Paragraph)

Флаг параграфа может использоваться и как парный, и как непарный [96] флаг. Он служит признаком начала нового параграфа (т.е., абзаца). Программа просмотра выводит перед началом параграфа пустую строку и начинает параграф с новой строки.

В сложившейся практике использования языка HTML (согласно документу "Wilbur", см. стр. 80) в качестве атрибута флага начала параграфа <P> можно задать параметр ALIGN, устанавливающий выравнивание (выключку) параграфа по левому полю, центру или правому полю. Если этот параметр не задавать, выравнивание производится по левому полю.

• Как непарный флаг: <P>
• Как парный флаг: <P>. </P>
• С указанием выравнивания:
  • по левому полю: <P ALIGN=LEFT>
  • по центру: <P ALIGN=CENTER>
  • по правому полю (поддерживается не всеми программами просмотра): <P ALIGN=RIGHT>

  Как выглядит на дисплее

  Это первый параграф.

  Этот параграф выровнен по центру.

  Замечание: прием, когда для увеличения расстояния между параграфами вводят несколько последовательных флагов <P><P><P>, не является правильным с точки зрения языка HTML и не будет поддерживаться в будущем. Поэтому авторы не рекомендуют использовать его при форматировании документа. "Правильная" программа просмотра "сожмет" несколько повторяющихся флагов <P> в один.

  Разрыв строки (жесткий возврат каретки)
  (Line Break)

  Текст, следующий за этим флагом, начинается с новой строки (в отличие от флага параграфа, пустая строка при этом в текст не вставляется).

  В версии HTML "Wilbur" (см. стр. 80) для управления взаимным расположением текста и рисунков флаг BR можно использовать с атрибутом CLEAR. Использование этого параметра является достаточно специальным вопросом и мы не будем его здесь рассматривать.

  Как выглядит на дисплее

  МГУ
  Химический факультет
  Кафедра электрохимии

  Замечание: как и для флага <P>, последовательность флагов <BR><BR><BR> не следует использовать для увеличения расстояния между строками текста.

  Горизонтальная линия
  (Horizontal Rule)

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

  В сложившейся практике использования языка HTML ("Wilbur") флаг <HR> часто используется с несколькими параметрами, определяющими длину линии по горизонтали в пикселах или процентных долях ширины экрана (WIDTH), ее ширину в пикселах (SIZE), положение на экране (ALIGN) — слева, по центру, справа, — а также вид (атрибут NOSHADE выводит линию черного цвета).

  Как выглядит на дисплее

  Первая логическая часть.

  Заголовки
  (Headings)

  Используются для вывода заголовков и подзаголовков. Всего доступно шесть уровней, от 1 до 6, в порядке убывания их значимости. Рекомендуется, чтобы каждый документ содержал заголовок первого уровня (обычно это название документа, которое может и не совпадать с названием, помещенным в поле title). Стандарт языка не рекомендует "перепрыгивать" через уровни, то есть, например, использовать заголовок третьего уровня после заголовка первого уровня. Это может "сбить с толку" некоторые программы просмотра и послужить причиной неправильного форматирования документа. Также, этого "не любят" программы-конвертеры из формата HTML в другие форматы.

  В документе "Wilbur" (см. стр. 80) указывается, что при помощи необязательного параметра ALIGN заголовок может быть выровнен ("выключен") по левому полю, центру или правому полю.

  Флаг заголовка, в отличие от флага параграфа, должен использоваться только как парный флаг.

  (для остальных пяти уровней аналогично)

  Замечание: для центрирования заголовка во многих документах в Internet часто можно встретить флаги <CENTER> </CENTER>, предложенные разработчиками фирмы Netscape Corporation как расширение HTML 2 и предназначенные для центрирования больших объемов текста. Поскольку эти флаги не поддерживаются многими программами просмотра, то для центрирования заголовка лучше использовать описанную выше конструкцию

  Замечание: имейте ввиду, что некоторые программы просмотра сами выбирают стиль представления заголовков каждого уровня, например курсивный шрифт и небольшой отступ от левого поля для заголовка <H3></H3>. Даже одна и та же версия программы Netscape под Windows и под UNIX будет показывать вашу страницу по-разному (в UNIX размеры букв обычно меньше). Помните, что как автор, вы не можете полностью контролировать средствами HTML вид вашего документа в окне программы просмотра.

  Пронумерованный список
  (Ordered List)

  Служит для представления информации в виде пронумерованного списка. Каждый элемент списка (List Item) выводится программой просмотра с новой строки, в начале которой автоматически проставляется порядковый номер данного элемента в списке.

  В документе "Wilbur" указаны некоторые полезные атрибуты флага <OL>, которые по-видимому будут включены в следующий стандарт языка, например TYPE, который позволяет выбирать для нумерации буквы, арабские, или римские цифры.

  Как выглядит на дисплее

  В черный порох входят три компонента:

  1. калийная селитра,
  2. сера,
  3. древесный уголь.

  Ненумерованный список
  (Unordered List, Unnumbered List)

  Используется для представления информации в виде простого списка. Каждому элементу списка на экране обычно предшествует символ, иногда называемый "пуля" (bullet).

  "Wilbur" (см. стр. 80): В новых версиях ряда программ просмотра формой "пули" можно управлять с помощью атрибута TYPE.

  Как выглядит на дисплее

  • Это — первый элемент списка.
  • Второй элемент.
  • Третий элемент.

  Замечание: часто для представления списка без "пуль" используется неправильная конструкция <UL>. </UL> с записями, в которых исключен флаг <LI>. Для этой цели правильнее использовать флаг <DL> (см. ниже).

  Список-меню
  (Menu List)

  Используется для представления информации в виде списка-меню, в котором каждая запись занимает одну строку. Это позволяет сделать список более компактным по сравнению с конструкцией <UL>. </UL>. Формат такого списка зависит от используемой программы просмотра HTML-документа, однако многие программы просмотра используют <MENU> как "синоним" <UL>. Каждому элементу списка на экране обычно предшествует символ "пуля".

  Как выглядит на дисплее

  Список-указатель (список-индекс)
  (Directory List)

  Используется для представления коротких записей (обычно менее 20 символов) в виде списка-индекса. Позволяет формировать список в несколько колонок (обычно с шагом в 24 символа). Формат такого списка зависит от используемой программы просмотра HTML-документа. Обычно каждому элементу списка на экране предшествует символ "пуля".

  Как выглядит на дисплее

  Глоссарий
  (Definition List)

  Как следует из названия, этот формат используется для оформления глоссариев. Термины (terms) помещаются в строки, начинающиеся флагом <DT>, а определения (definitions) — в строки, начинающиеся <DD>. Вся конструкция окружается флагами <DL> и </DL>. Программа просмотра выводит термины и определения по-разному, например, термины без отступа, а следующие за каждым из них определения — с отступом от левого поля. Если в <DL> задан атрибут COMPACT, некоторые программы просмотра выводят определения терминов на одной строке с самими терминами.

  Как выглядит на дисплее

  Верховье Часть реки, близкая к ее истокам. Вестибюль Большое помещение, отделяющее вход от внутренних частей здания.

  Замечание: не следует использовать флаг <DD> для создания отступа. Например, программа просмотра Arena выделяет содержимое поля <DT> жирным шрифтом, за которым сразу же (без перевода строки) следует содержимое поля <DD>.

  Вложенные списки
  (Nested Lists) [99]

  Списки одного или различных типов могут быть вложены один в другой. Необходимо быть особенно внимательным при расположении флагов начала и конца каждого списка! Чтобы не ошибиться, удобно записывать элементы вложенной конструкции с небольшим отступом, как показано в следующем примере. [100]

  Как выглядит на дисплее

  1. Это первый элемент пронумерованного списка. Он содержит вложенный список.
     • Первый элемент вложенного списка.
     • Второй.
     • Третий.
  2. Второй элемент пронумерованного списка.

  Флаги, задающие физические стили текста

  Жирный шрифт
  (Boldface)

  Как выглядит на дисплее

  Нажмите клавишу Enter, когда вы готовы.

  Курсив
  (Italics)

  Как выглядит на дисплее

  Есть сведения, что de facto он является руководителем этой организации.

  Текст с подчеркиванием
  (Underline)

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

  Как выглядит на дисплее

  Есть сведения, что de facto он является руководителем этой организации.

  Текст печатной машинки
  (Typewriter Text)

  Текст выводится моноширинным шрифтом типа Курьер с сохранением всех принципов форматирования, принятых в HTML. Если вам надо сохранить неизменным формат представленной информации, вам следует использовать флаг <PRE>, описываемый ниже.

  Как выглядит на дисплее

  . и он начал печатать:
  Заявление
  Прошу принять меня на работу.

  Предварительно отформатированный текст
  (Preformatted Text)

  Текст выводится моноширинным шрифтом типа Курьер (Courier) с сохранением оригинального формата, включая пробелы, возврат каретки и табуляцию. Может быть использован для вывода таблиц, листингов компьютерных программ и т. п. Единственное, что вам все же надо сделать — убрать все символы & < " и > из текста, заменив их при необходимости специальными последовательностями (см. стр. 83). Внутри предварительно отформатированного текста можно применять некоторые флаги форматирования, например, <B> и <I>.

  Примечание: для оформления таблиц рекомендуется использовать не <PRE>, а специальные конструкции языка HTML, описание которых приведено ниже (см. стр. 128).

  Как выглядит на дисплее

  Подстрочные и надстрочные индексы
  (Subscripts and Superscripts)

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

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

  Как выглядит на дисплее

  Размер и цвет шрифта
  (Font Size and Color)

  В стандарте языка HTML 2 средства управления размером и цветом шрифта отсутствуют, так что описанный в этом разделе флаг <FONT> является нестандартным расширением HTML.

  Размер шрифта выражается в некоторых условных единицах, изменяющихся от 1 до 7, и задается с помощью атрибута SIZE флага FONT. Можно задать либо абсолютный размер, либо его изменение относительно размера, установленного в программе просмотра по умолчанию (такому размеру приписывают значение 3). Цвет участка текста задается с помощью атрибута COLOR.

  где nn — размер шрифта в произвольных единицах (от 1 до 7).

  где nn — число пунктов, на которые шрифт будет увеличен (уменьшен) относительно шрифта, принимаемого по умолчанию.

  где RR, GG и BB характеризуют доли, соответственно, красного, зеленого и синего компонент в цвете, которым будет выделена часть текста, заключенная между открывающим и закрывающим флагами. Значения RR, GG и BB выражаются в шестнадцатеричной системе счисления (подробнее об RGB-представлении цвета см. стр. 132).

  Как выглядит на дисплее

  Привет! Привет!! Привет.

  Замечание: флаг FONT следует применять с большой осторожностью. Во-первых, он не поддерживается многими программами просмотра. Кроме того, программы-роботы не умеют правильно работать с выделенным текстом и не понимают заголовки, созданные с помощью <FONT>, а не <H1>. Наконец, выделенный цветом текст может оказаться невидимым, если на компьютере пользователя установлена "неудачная" палитра.

  HTML Введение

  HTML — это стандартный язык разметки для создания веб-страниц.

  • HTML стенды для Hyper текст разметки языка
  • HTML Описывает структуру веб-страниц с помощью разметки
  • HTML элементы — это строительные блоки HTML-страниц
  • HTML элементы представлены тегами
  • HTML Метки: фрагменты содержимого, такие как "heading", "paragraph", "table", и так далее
  • Обозреватели не отображают HTML-теги, но используют их для визуализации содержимого страницы

  Простой HTML-документ

  Пример

  Пример объяснено

  • Декларация <!DOCTYPE html> определяет этот документ как HTML5
  • Элемент <html> является корневым элементом HTML-страницы
  • Элемент <head> содержит мета-информацию о документе
  • Элемент <title> задает заголовок документа
  • Элемент <body> содержит видимое содержимое страницы
  • Элемент <h1> определяет большой заголовок
  • Элемент <p> определяет абзац

  Теги HTML

  HTML-теги — это имена элементов, окруженные угловыми скобками:

  <tagname>содержание идет здесь. </tagname>

  • HTML теги обычно приходят в парах <p> , как и </p>
  • Первый тег в паре — это начальный тег, второй тег — конечный тег
  • Конечный тег записывается как начальный тег, но с косой черт ой, вставленной перед именем тега

  Совет: Начальный тег также называется открывающим тегом, а конечный тег — закрывающим тегом.

  Веб-браузеры

  Целью веб-браузера (Chrome, IE, Firefox, Safari) является чтение HTML-документов и их отображение.

  Обозреватель не отображает HTML-теги, но использует их для определения способа отображения документа:

  

  Структура страницы HTML

  Ниже приведена визуализация структуры HTML-страницы:

  Примечание: В браузере отображается только содержимое внутри раздела <BODY> (белая область вверху).

  Декларации <!DOCTYPE>

  Объявление <!DOCTYPE> представляет тип документа и помогает обозревателям корректно отображать веб-страницы.

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

  Что значит html и как создать html файл?

  Слышали про html? Или, может быть, слышали об html страницах в Интернете? На самом деле, все просто. HTML — это, упрощенно говоря, один из языков программирования, и не самый сложный из них.

  p, blockquote 1,0,0,0,0 —>

  p, blockquote 2,0,0,0,0 —>

  Используется HTML для того, чтобы страницы в Интернете выглядели именно такими, какими Вы их все знаете:

  • красиво оформленные тексты,
  • выделенные жирно или курсивом,
  • просто черного цвета или разноцветные,
  • с активными ссылками на другие страница сайта или блога,
  • с картинками, видео, аудио и еще многими другими любопытными фишечками.

  По сути, html — это изнанка страниц многих сайтов. Часто их красивое оформление создается с помощью языка разметки html. Иначе это еще называют создание страниц с помощью html верстки.

  p, blockquote 4,0,0,0,0 —>

  Сайты могут создаваться и на других языках программирования, например, на языке php.

  p, blockquote 5,0,0,0,0 —>

  Ученый из Британии Тим Бернерс Ли разработал язык html в 1986-1991 годах в Швейцарии. По сути html позволяет создавать простые, но при этом красивые документы. Уже позже в html были добавлены мультимедийные возможности (видео и т.п.) и поддержка работы с гипертекстом (для создания гиперссылок).

  p, blockquote 6,0,0,0,0 —>

  Для работы с html были созданы всем известные программы-браузеры, они же интернет-обозреватели, такие как:

  • Mozilla Firefox (Мозилла Фаерфокс),
  • Internet Explorer (Интернет Эксплорер),
  • Google Chrome (Гугл Хром),
  • Opera (Опера),
  • Яндекс (Yandex) браузер,
  • Safari (Сафари) и
  • другие.

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

  p, blockquote 8,0,0,0,0 —>

  Что такое html страница

  Документы, файлы, страницы, созданные на языке html, имеют расширение вида .html или .htm. Например, html-страница (или html-файл, или html-документ) может иметь название вида:

  • тест.html,
  • html,
  • html или
  • название.html.

  Строго говоря, тест.html – это имя файла (или имя страницы), где

  • тест — имя файла, а
  • .html – расширение имени файла (или расширение имени страницы), которое обычно просто называют «расширение».

  Сейчас более распространенным вариантом вместо слова «расширение» стало слово «формат». Поэтому выражение «формат html» означает, что файл (или страница) написан на языке html и имя такого файла имеет расширение html. Значит,

  p, blockquote 11,0,0,0,0 —>

  файл c именем тест.html имеет формат html.

  Операционная система Windows по умолчанию скрывает расширения файлов (то есть, форматы файлов). Программисты сделали это «не со зла», а для того, чтобы уберечь пользователя от бездумного изменения расширений файлов. Можно сделать так, чтобы по умолчанию расширения файлов были открыты. В Windows 7 для этого:

  • кликаем по кнопке Пуск,
  • открываем Панель управления,
  • находим Параметры папок,
  • открываем вкладку Вид, прокручиваем в самый низ и
  • убираем галочку напротив опции «Скрывать расширения для зарегистрированных типов файлов»,
  • жмем «ОК».

  Если сейчас Вы поднимите глаза вверх и посмотрите в адресную строку своего браузера, то увидите там имя той страницы, которую сейчас читаете, а в конце имени стоит .html. Это пример html страницы блога, которая размещена в Интернете. Обычно у блога (у сайта) много html страниц. Например, каждая статья на этом блоге является отдельной html страницей.

  p, blockquote 14,0,0,0,0 —>

  В Интернете также встречаются сайты-одностранички, состоящие всего из одной html страницы. Например, это может быть

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

  Язык HTML постоянно развивается и на сегодняшний день существует несколько его версий, начиная от HTML 2.0 от 22 сентября 1995 года и заканчивая последней версией языка HTML 5 от 28 октября 2014 года. В сентябре 2016 года планируется выпуск HTML 5.1.

  p, blockquote 16,0,0,0,0 —>

  Что такое HTML теги

  HTML – это язык разметки документов с помощью тегов. Теги заключаются в треугольные скобки «< >». Теги могут быть парными и непарными.

  • Например, тег «b», заключенный в треугольные скобки, делает текст жирным

  <b>текст, выделенный жирным</b>

  p, blockquote 18,0,0,0,0 —>

  В результате получится так: текст, выделенный жирным

  • А тег «i» делает текст курсивным.

  <i>текст, выделенный курсивом</i>

  p, blockquote 20,1,0,0,0 —>

  В результате получим: текст, выделенный курсивом

  • Есть еще тег для перевода строки «br».
  • С помощью тега «a href» выделяют гиперссылку.
  • Тег для заголовка документа – <head>. Это тег, открывающий документ. Он является парным в том смысле, что для него обязательно нужен закрывающий тег со слешем </head>.
  • После заголовка идет основная часть, которая находится между открывающим тегом <body> и закрывающим тегом </body>. Этот тег так же, как тег head, является парным: его нужно открыть и не забыть закрыть.

  В парных тегах закрывающий тег со слешем необходим по той причине, что он отменяет (точнее, корректно завершает) действие открывающего тега.

  p, blockquote 22,0,0,0,0 —>

  Тегов HTML существует много, в Интернете можно без труда найти учебники HTML.

  p, blockquote 23,0,0,0,0 —>

  Как создать html файл

  Создать самостоятельно html страницу (или html файл) на своем компьютере и запустить свое творение в браузере очень просто.

  p, blockquote 24,0,0,0,0 —>

  1) Открываем Блокнот (простой текстовый редактор, который входит в состав Windows). Его можно найти на своем компьютере, введя в строку Поиск запрос: Блокнот.

  p, blockquote 25,0,0,0,0 —>

  2) Копируем и вставляем в Блокнот следующий текст:

  p, blockquote 26,0,0,0,0 —>

  3) Важный момент, без которого html файл не будет работать: в Блокноте сохраняем файл строго(!) в формате html, как показано на скриншоте. Файл можно для простоты сохранить на Рабочем столе на своем компьютере.

  

  p, blockquote 28,0,0,0,0 —> Рис. 2. Обращаем внимание на Тип файла и сохраняем файл в формате html

  1 на рис. 2 – Кликаем «Рабочий стол», чтобы там сохранить html файл.
  2 на рис. 3 – Открываем выпадающее меню напротив «Тип файла».
  3 – В этом меню выбираем «Все файлы».
  4 – вводим любое имя (у меня 001) и после точки обязательно(!) вводим html.
  5 на рис. 2 – жмем «Сохранить».

  p, blockquote 29,0,0,0,0 —>

  4) На Рабочем столе находим файл 001.html:

  p, blockquote 30,0,0,1,0 —> Рис. 3. Html файл на Рабочем столе

  У меня браузером по умолчанию является Google Chrome, поэтому значок у файла имеет вид значка этого браузера. Если будет другой браузер по умолчанию, то у файла 001.html будет другой значок.

  p, blockquote 31,0,0,0,0 —>

  Кликаем по файлу (рис. 3) 2 раза мышкой и в итоге видим в браузере свою первую страницу на html:

  

  p, blockquote 32,0,0,0,0 —> Рис. 4. Проверка, как выглядит html страница в браузере

  Таким образом, у нас получилась локальная страница html в том смысле, что она доступна только с вашего, локального компьютера. Чтобы страница была доступна другим, надо ее загрузить в Интернет. Точнее, разместить на хостинге, который доступен всегда: 24/7/365 (24 часа в сутки, 7 дней в неделю, весь год). Тогда такую страницу сможет увидеть каждый пользователь Интернета.

  p, blockquote 33,0,0,0,0 —>

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

  p, blockquote 34,0,0,0,0 —>

  Видео: Что такое html и как создать html файл

  p, blockquote 35,0,0,0,0 —>

  p, blockquote 36,0,0,0,0 —>

  p, blockquote 37,0,0,0,0 —>

  p, blockquote 38,0,0,0,0 —>

  p, blockquote 39,0,0,0,0 —> p, blockquote 40,0,0,0,1 —>

  Статья опубликована 23 июля 2016 года.
  Последнее обновление 10 июня 2022 г.

  Язык разметки HTML

  В основе Интернета лежит язык разметки HTML. В этой статье мы рассмотрим основы HTML.

  1. Что такое HTML?

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

  Например, тег параграфа выглядит так:

  В данном примере мы разметили текст тегом p. В начале стоит открывающий тег <p>, а в конце — закрывающий тег </p>.

  
  Каждый тег обозначается некоторым кодом. Обычно тег начинается знаком «<код параметры>» и заканчивается знаком «</код>». Существуют теги без закрывающего знака.

  В тегах можно указывать параметры. Например, текст, выровненный влево, выглядит так:

  Пробелы в HTML сокращаются до одного пробела. Переводы строк игнорируются.

  Чаще всего используются следующие теги:

  <b> — полужирный текст
  <i> — курсив
  <br> — перевод строки
  <hr> — горизонтальная линия

  <a> — ссылка
  <pre> — форматированный текст

  <ins> — добавленный текст
  <del> — удаленный текст

  Существует шесть уровней заголовков: с <h1> по <h6>.

  Результат будет выглядеть так:

  

  2. Минимальная веб-страница

  Создание веб-страницы на HTML называется версткой. А человек, который верстает страницы называется верстальщиком. Верстка имеет свои правила и сейчас мы начнем с ней знакомиться.

  Чтобы создать минимальную веб-страницу достаточно в любом текстовом редакторе написать следующий текст:

  Этот текст нужно сохранить с именем index.html.

  Рекомендую использовать для этого редактор Geany. В этом редакторе есть шаблон для HTML5.

  

  После этого веб-страницу можно открыть в любом браузере.

  Строки минимальной веб-страницы означают следующее:

  <!DOCTYPE html> — стандарт HTML5

  <html lang=»ru»> — язык страницы русский

  <head></head> — техническая информация о веб-странице

  <meta charset=»utf-8″ > — кодировка UTF-8

  <title>без имени</title> — Заголовок веб-страницы

  </html> — завершение веб-страницы

  3. Структура веб-страницы

  Для указания на структуру используются теги:

  • <header> — шапка документа
  • <nav> — навигация по сайту
  • <article> — статья
  • <aside> — боковая панель
  • <footer> — подвал

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

  

  4. Таблицы

  Таблица задается тегами:

  • <table> — общий контейнер
  • <tr> — строка
  • <td> — ячейка
  • <th> — заголовок столбца
  • <caption> — название таблицы

  

  Простая таблица выглядит так:

  <table> — начало таблицы

  <tr> — начало первой строки

  </tr> — конец первой строки

  <tr> — начало второй строки

  </tr> — конец второй строки

  </table> — конец таблицы

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

  Сама таблица будет выглядеть так:

  

  5. Блоки, аудио и видео

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

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

  • <div> — блочный элемент
  • <span> — строчный элемент.

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

  Таблицы используются только для вывода табличных данных.

  Ролик на YouTube

  6. Цвета

  В HTML цвет можно указать как значение RGB, используя следующую формулу:

  RGB (красный, зеленый, синий)

  Каждый параметр определяет интенсивность цвета от 0 до 255.

  • rgb (255, 0, 0) — красный.
  • rgb (0, 0, 0) — черный.

  Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.

  

  7. Формы

  Формы используются для получения данных от пользователя. Тег form является контейнером для управляющих элементов.

  Пример простой формы:

  

  Для получения данных используется тег <input>:

  • флажки <input type=»checkbox»>
  • радиокнопки — <input type=»radio»>
  • ввод текста — <input type=»text»>
  • пароль — <input type=»password»>
  • отправить форму — <input type=»submit»>

  и многое другое.

  Полный список здесь:

  Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.

  Обязательные для заполнения поля обозначаются атрибутом required. В полях выбора можно сразу установить выбор атрибутом checked.

  Для создания больших текстовых полей применяется элемент <textarea>. Размеры поля устанавливаются с помощью атрибутов cols и rows. В поле можно использовать замещающий текст placeholder, который исчезает, как только пользователь начинает ввод текста.

  Похожие публикации:

  1. Htm и html в чем разница
  2. Html как сделать текст курсивом
  3. Rowspan в html что это
  4. Вместо картинки значок что делать на сайте html