Основные понятия HTML
Управляющие конструкции языка HTML (Hyper Text Markup Language) называются тегами (дескрипторами) и вставляются непосредственно в текст документа. Все теги заключаются в угловые скобки <…>. Сразу после открывающей скобки помещается ключевое слово, определяющее тег, например
Teги HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в том месте, где они вставлены. При использовании парных тегов в документ добавляются открывающий и закрывающий теги, которые воздействуют на часть документа, заключенную между ними. Закрывающий тег отличается от открывающего наличием символа "/" перед ключевым словом (
Текст
К открывающему тегу может быть добавлен атрибут, представляющий собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа ">". Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом "=" и заключается в кавычки.
<Н1 ALIGN="LEFT">
При отображении документа HTML сами теги не отображаются, но влияют на способ отображения документа HTML.
Существует два способа формирования документов HTML.
Первый способ состоит в разметке существующего или создаваемого документа вручную. Эта работа выполняется в текстовом редакторе или редакторе HTML.
Второй способ заключается в формировании документа непосредственно на экране и автоматической его разметке. В этом способе необязательно знание языка HTML. Разметка выполняется специальным редактором, работающим по принципу WYSIWYG, например, FrontPage Express.
Во втором способе используются средства форматирования вместо средств описания, что может приводить к нежелательным последствиям.
Воспроизведение документа HTML выполняется программами - броузерами, например Internet Explorer.
Простейший правильный документ HTML, содержащий все теги, определяющие структуру, выглядит следующим образом:
Текст документа
Здесь использованы ключевые слова:
- HTML - начало и конец документа HTML;
- HEAD - начало и конец раздела заголовка;
- TITLE - начало и конец общего заголовка документа;
- BODY - начало и конец тела документа.
Большинство элементов языка HTML описывает части содержания документа и помещаются между тегами
и (структурный элемент BODY).Основными функциональными элементами документа HTML являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заголовков, которые задаются при помощи тегов от
до . В Web-документе они отображаются шрифтом разного размера.
Обычные абзацы задаются с помощью парного тега
В HTML нет средств для задания абзацного отступа. Абзацы отделяются пустой строкой. Закрывающий тег
рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает очередной абзац. Если в тексте присутствует символ конца строки, при воспроизведении в броузере он рассматривается как простой пробел. Для перехода на другую строку используется непарный тег. В качестве ограничителя абзацев может использоваться горизонтальная линейка, задаваемая тегом
, например:
Этот тег задает горизонтальную линейку высотой в 10 пикселов, занимающую половину ширины окна и расположенную справа.
Как только в Web-страницу будет встроена гиперсвязь , документ можно назвать гипертекстом. Гиперссылка может указывать:
- на позицию в своем документе (внутренние гиперссылки),
- на другой документ на своем сервере,
- на произвольный объект по любому адресу Internet.
Гиперссылки могут быть оформлены как абсолютные или относительные . Для создания гиперссылки необходим адрес документа, на который устанавливается ссылка. Этот адрес называется URL - Uniform Resource Locator.
Абсолютный URL
- это полный Internet-адрес со всей информацией, требуемой клиенту для того, чтобы отыскать сервер и успешно установить с ним связь.
Относительный URL
используется для адресации в пределах документа или совокупности документов на одном сервере.
Полный Internet-адрес можно получить лишь тогда, когда к относительному адресу добавляется базовый. Web-броузер при необходимости в большинстве случаев сам добавляет необходимый базовый адрес, чтобы получить полный адрес в Internet.
Относительные URL используются обычно внутри HTML-документа, например, для того, чтобы организовать переход из оглавления к конкретной главе. Базовый адрес можно определить с помощью дескриптора
Абсолютные URL следует использовать во всех тех случаях, когда вы ссылаетесь на документы другого сервера в Internet.
Гипертекстовая ссылка задается парным тегом , который содержит обязательный атрибут HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети, например:
Здесь задан адрес в абсолютной форме. Обычно в такой форме задается ссылка на внешний документ. При использовании относительного адреса ссылка рассматривается как внутреняя, например:
Достоинство внутренней ссылки в том, что она сохраняет свою работоспособность при изменении адреса Web-узла.
Дескриптор гиперсвязи иногда называется «якорь» (само наименование дескриптора представляет собой аббревиатуру от английского слова anchor - якорь).
Значение этого атрибута - произвольная последовательность латинских букв и цифр, рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа "#":
Между дескрипторами и могут находиться только текст, графика и заголовки. Текст, располагающийся между и дескрипторами, обычно изображается броузерами в цвете (для этих целей по умолчанию используется голубой цвет), некоторые программы подчеркивают его. Посредством атрибутов в дескрипторе
цвет текста гиперсвязи можно изменить.При включении в Web-страницу гиперссылок учитывайте следующие рекомендации.
- Выразительно оформляйте текст гиперсвязи. По тексту гиперсвязи должно быть четко и ясно понятно, куда ведет эта связь. Текст гиперссылки не был слишком длинным: кратко и сжато выражайте цель ссылки.
- Не перегружайте документ гиперссылками. Вставляйте в текст Web-страницы только действительно необходимые ссылки. В противном случае, пытаясь ознакомиться со всеми адресуемыми объектами, пользователь очень быстро потеряет нить ваших рассуждений.
- Никогда не размещайте два <а>-дескриптора по соседству друг с другом в тексте документа, не вставив между ними никакого разделителя. При отображении такого документа тексты этих гиперсвязей просто сольются.
- Создав свою Web-страницу, попытайтесь взглянуть на нее глазами пользователя. Все ли гиперссылки выдержаны в одном стиле?
Основные дескрипторы для организации ссылок и форматирования текста показаны в таблице.
Введение в HTML
В этой главе:
Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML .
Как браузер получает веб-страницы?
Для общего понимания давайте рассмотрим небольшую теорию о том, как браузер получает веб-страницы и что такое веб-сервер. Чтобы получить веб-страницу, нужно создать файл, написанный на языке HTML, и поместить его на веб-сервер. После того как вы поместили созданный файл на веб-сервер, любой браузер сможет через интернет отыскать вашу веб-страницу. Веб-сервер - это обычный компьютер с доступом в интернет, который непрерывно работает и ожидает запросов от браузеров. Любой сервер хранит веб-страницы, картинки, аудиофайлы и файлы других типов. Когда сервер получает запрос от браузера на какой-нибудь ресурс (изображения, веб-страницы и др.), он находит этот ресурс (если может определить местоположение ресурса) и отправляет его браузеру.
Вы уже знаете, как работает браузер: вы бродите по различным сайтам в интернете, кликая по ссылкам для перехода на различные страницы. Такой клик служит поводом для того, чтобы ваш браузер сделал запрос на HTML-страницу веб-серверу, получил ответ на свой запрос и отобразил эту страницу в своем окне.
Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.
Примечание: Браузер (от англ. Web browser - Веб-обозреватель) - программное обеспечение, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся: Internet Explorer , Mozilla Firefox , Google Chrome , Safari , Opera .
Обратите внимание: во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.
Перед тем как продолжить, давайте рассмотрим, для чего нужен HTML-редактор, что из себя представляет HTML-документ и как его создавать.
Зачем нужен HTML-редактор?
Редактировать HTML-документы можно и в обычном текстовом документе, но удобнее это делать, конечно же, в специальных HTML-редакторах. HTML-редактор - это один из основных инструментов для создания и редактирования веб-страниц и сайта в целом. Основное преимущество редакторов перед обычным блокнотом состоит в том, что они осуществляют подсветку кода, что в свою очередь позволяет проще и быстрее редактировать необходимый код.
Существует множество платных и бесплатных HTML-редакторов, к наиболее часто используемым платным относятся Dreamweaver , Visual Studio и PHPStorm . В качестве бесплатных редакторов можно использовать notepad++ и geany .
Что из себя представляет HTML-документ?
HTML-документ - это обычный текстовой файл c расширением .html , который содержит HTML-код. Далее будет описана информация для тех, кто не знает, как сохранять файлы с нужным расширением.
Windows:
Для того, чтобы сделать из текстового файла HTML-документ, вам надо всего-навсего сохранить файл под другим расширением, сделать это можно двумя способами:
- В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмем сохранить . Всё, HTML-документ создан.
- Кликаем правой кнопкой мыши (ПКМ ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html . Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: нажимаем Пуск → открываем Панель управления → выбираем Параметры папок → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов .
Открыть файл, сохраненный с расширением.html, для просмотра в браузере можно двумя способами:
- Кликнуть по нему два раза левой кнопкой мыши, в этом случае веб-страница откроется в том браузере, который выбран по умолчанию.
- Кликнуть по нему ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам браузер.
При получении HTML-документа браузер будет отображать его в виде веб-страницы (веб-страницей является то, что отображается в окне браузера), при этом вы не увидите в окне своего браузера отображения написанных вами тегов, потому что они будут интерпретированы для отображения содержимого страницы в нужном вам виде.
Мой первый заголовок
Мой первый абзац
Результат данного кода в окне браузера:
Чтобы отредактировать код HTML-документа, нажмите на него ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам редактор, если в списке нет нужного редактора, жмем Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++ ) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).
Что такое HTML?
HTML - это язык для описания структуры веб-страниц. Cтраницы, созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.
- Аббревиатура HTML расшифровывается как H yper T ext M arkup L anguage (язык разметки гипертекста).
- Запомните, он не является языком программирования, это язык разметки.
- HTML использует теги разметки, чтобы описать структуру веб-страницы.
Что такое теги?
HTML теги - это ключевые слова или символы, заключенные в угловые скобки, например
,,
и т.д. Теги бывают двух видов: парные
и одиночные
(их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: . Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например:
. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами:
Означает то же самое, что и
По стандарту HTML5 теги могут быть написаны в любом регистре.
С помощью тегов браузер распознает структуру и значение вашего текста, например, они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что нужно подчеркнуть и где расположить изображение (картинку). Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов. Без использования тегов браузер выведет просто сплошной поток текста, без отступов, заголовков, абзацев и т.д. Чтобы стало понятнее, рассмотрим это подробнее на примерах ниже.
Так выглядит страница, в которой используются теги для разметки:
Напитки в нашем кафе
Мультифрукт - 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.
Молочный коктель - 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.
То же самое, но без использования тегов:
Напитки в нашем кафе
Мультифрукт - 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.
Молочный коктель - 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.
HTML - расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.
- Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
- Как следует из названия, HTML - это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.
Первоначально HTML был разработан с целью определения структуры документов, таких как заголовки, списки, абзацы и так далее, чтобы облегчить обмен научной информацией между исследователями.
Теперь HTML широко используется для форматирования веб-страниц с помощью различных тегов, доступных на языке HTML.
HTML-документ
В следующем примере показан HTML-документ в простейшей форме:
Заголовок
Здесь содержание документа...
Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:
Теги для создания HTML-документа
Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег имеет закрывающий тег и тег имеет тег закрытия и другие.
В приведенном выше примере используются следующие теги для создания HTML-документа:
Тег | Описание |
Этот тег определяет тип документа и версию HTML. | |
Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами ... и телом документа, которое представлено тегами ... . | |
Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как |
|
Тег |
|
Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как , И другие. |
|
Этот тег представляет заголовок. | |
| Этот тег представляет абзац. |
Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).
Чтобы изучить HTML, Вам нужно знать различные теги и понимать, как они ведут себя при форматировании текстового документа. Учить HTML легко, так как пользователям нужно только выучить использование разных тегов, чтобы отформатировать текст или изображения, тем самым сделать красивую веб-страницу.
Структура HTML-документа
Структура типичного HTML-документа будет иметь следующий вид:
Тег декларации документа
Мы изучим все теги заголовка и тела в последующих уроках, теперь давайте посмотрим, что такое тег декларации документа.
Декларация
Тег декларация используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML - 5, и она использует следующее объявление:
Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега вместе с другими тегами HTML.
Общая структура HTML документа.
Основы HTML (Hypertext Markup Language)
Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы - в данном случае, html-документа. Такая структура описывает очередность следования ряда обязательных блоков, которые содержат непосредственно программный код.
Директивы HTML называются «теги» (от англ, tag - отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег> . Все объекты, не заключенные в угловые скобки , интерпретатор воспринимает как текстовые элементы , отображая их на экране компьютера «как есть».
Структура документа HTML выглядит следующим образом:
Документ HTML
Заголовок
У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, - парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:
<тег> обрабатываемое значение тег>
Данное свойство HTML позволяет использовать принцип вложения одного тега в другой, когда обрабатываемым значением одной команды может служить другая команда. Вот простой пример вложения двух тегов друг в друга:
<тег1> <тег2> обрабатываемое значение тег2>тег1>
При роботе с кодом HTML необходимо запомнить одно простое правило:
если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера.
Основной, глобальной конструкцией внутреннего кода Web-страницы является «Документ HTML», для определения которой существует специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда называется «тег верхнего уровня» и записывается как:
<НТМL> Содержимое НТМL>
Тег верхнего уровня парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Открывающий тег записывается самой первой строкой html-документа, а закрывающий - самой последней.
Следующим элементом является «Заголовок документа» . Заголовок Web-страницы содержит исчерпывающую информацию о самом документе, а иногда также специальные директивы транслятора, подсказывающие встроенному в броузер интерпретатору HTML правила, по которым следует обрабатывать составляющий страницу код. Cодержимое заголовка не отображается в броузере и не влияет на внешний вид документа. Это служебная информация, которая необходима для корректной работы броузера. Синтаксис тега заголовка в общем виде выглядит так:
Содержимое
Раздел HEAD следует в html-документе непосредственно за тегом и является второй обязательной командой, которую необходимо включать в код Web-страницы.
«Внешний заголовок» является вложенной командой тега . Мнемоника внешнего заголовка записывается следующим образом:
<ТITLE> Внешний заголовок
Внешний заголовок отображается в верхнем поле броузера в качестве названия страницы при ее открытии
. Значение тега
Последняя структурна составляющая кода web-страницы - «Тело документа» . Тело документа, описываемое тегами , включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.
Таким образом, обязательные элементы кода документа HTML выглядят так:
<ТITLE> Название страницы
Теги и атрибуты.
Как отмечалось выше, тег - это некая команда HTML, указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение.
Тег может иметь атрибут
(или не иметь его). Например, тег верхнего уровня не имеет атрибутов, а в строке создания новой таблицы В общем виде синтаксис записи тега HTML в совокупности с его атрибутами выглядит следующим образом: <ТЕГ ИМЯ _ АТРИБУТА-1 = "ЗНАЧЕНИЕ" ИМЯ _ АТРИБУТА-2 = "ЗНАЧЕНИЕ" ...ИМЯ _ АТРИБУТА-n = "ЗНАЧЕНИЕ">
В данном примере первый атрибут тега <ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ-1; "ЗНАЧЕНИЕ-2"; ЗНАЧЕНИЕ-3">
Спецификация языка HTML позволяет опускать кавычки
для следующих видов атрибутов: Атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например, цифр. Атрибуты, состоящие только из цифр от 0 до 9. Атрибуты, обозначающие промежутки времени. Например, запись атрибутов BORDER="1" или ALIGN="CENTER" допустимо представить как BORDER=1 и ALIGN=CENTER. Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах. Что такое тег в
HTML?
Тег это базовый элемент языка HTML. То есть HTML состоит именно из тегов и для того чтобы учить HTML, достаточно изучить основные теги, которые чаще всего используются. Если сравнивать с примером из реальной жизни, то тег
в HTML это как кирпич
для дома. Кирпич это основной элемент, который используется для строительства дома. То же самое и в HTML, тег это базовый элемент для создания html страницы. С помощью тега мы указываем браузеру, как правильно отобразить содержание html страницы. Существует два типа тегов это парные теги
и одинарные теги
: У html страницы есть базовая структура
. Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью . Если не укажем этот элемент то браузер отобразит страницу некорректно. Вот как выглядит базовый каркас
html страницы:
Сейчас если откроем данную страницу в браузере, то она будет пуста.
Теперь добавим пару строк кода внутри тега body
, и откроем еще раз эту страницу в браузере.
Моя первая html страница Вот как выглядит страница в браузере после того как изменили ее код: Анализируем данный пример
В начале страницы, перед тегом html всегда указываем
DOCTYPE
, то есть тип документа. Каждая html страница начинается с тега <
html>
и заканчивается тегом
html>
и состоит из заголовка <
head>
head>
и тела <
body>
body>
. Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это: Внутри тега <
body>
body>
пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере. Имена тегов можно писать в любом регистре, то есть если напишем <
BODY>, <
bOdY>,<
Body>
или <
body>
, то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре,
то есть <
body>
. Пожалуй, на этом все. Из этой маленькой, но очень важной статьи вы узнали, как выглядит базовая структура
html страницы.
выражение «BORDER="1" WIDTH="100"»
является атрибутом тега
.
- это параметр "BORDER"
, второй атрибут - параметр "WIDTH"
, а их значения составляют соответственно "1" и "100". Значения атрибутов заключаются в прямые кавычки, записываемые символом «"»
. Если внутри атрибута какого-либо тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве «внутренних» кавычек рекомендуется использовать одинарные, записываемые символом «"»
. В общем случае такое выражение выглядит следующим образом:
.