Основы языка HTML. Синтаксис HTML Html синтаксис
HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста ):
- язык означает, что он может быть прочитан как человеком, так и компьютером;
- разметка означает, что написанный вами код помечается с помощью ключевых слов;
- гипертекст означает, что он использует HTTP как часть Интернета.
Как и любой язык, HTML поставляется с набором правил . Эти правила относительно простые и сводятся к определению границ , чтобы знать, где что-то начинается и где заканчивается.
Ниже приведён пример абзаца в HTML:
Сегодня я изучаю синтаксис HTML на сайте сайтТо, что вы видите в угловых скобках < и > называется тегами HTML. Они определяют, где что-то начинается и где оно заканчивается.
Я уже создавал запись со справочником по HTML, где находился полный список всех тегов и их значения. Ссылка на данную запись –
Каждый из тегов несёт определённый смысл . В нашем случае обозначает абзац текста.
Как правило, они идут парами:
- открывающий тег определяет начало абзаца;
- закрывающий тег определяет его конец.
Единственным различием между открывающим и закрывающим тегами является слэш /, который предшествует имени тега.
При объединении открывающего, закрывающего тегов и всего между ними, вы получите элемент HTML .
Если вы просмотрите этот пример в вашем браузере, то заметите, что теги HTML в браузере не отображаются . Они читаются только браузером, чтобы знать, какой тип контента вы написали.
Группы теговВсе теги делятся на 2 типа, строчные и блочные.
Блочные элементы, вроде:
- абзацы ;
- списки: неупорядоченные (с маркером)
-
или упорядоченные списки (с числами)
;
- заголовки: от первого уровня до шестого уровня ;
- статьи ;
- разделы ;
- длинные цитаты .
Строчные элементы, вроде:
- ссылки ;
- выделенные слова ;
- важные слова ;
- короткие цитаты ;
- аббревиатуры .
Блочные элементы предназначены для структурирования основных частей вашей страницы, путём разделения содержимого на логически связанные блоки.
Строчные элементы предназначены, чтобы разграничить часть текста и придать ему определённую функцию или смысл. Строчные элементы, как правило, содержат одно или несколько слов.
АтрибутыВ тегах также могут размещаться атрибуты – специальные команды, которые расширяют действие тега. Для некоторых тегов они являются обязательными для правильной работы. Например для того чтобы ссылка вела на указанный адрес, нужно добавить дополнительный атрибут. Ссылка будет выглядеть так:
Атрибуты размещаются внутри открывающего тега в таком формате: .
Кавычки могут быть любыми – одинарными или двойными, допустимо их вообще их не ставить, если значение атрибута состоит из одного слова (но это не желательно).
Где писать HTMLВы, вероятно, сталкивались c простыми текстовыми файлами, теми, которые имеют расширение.txt. Чтобы такой текстовый файл стал HTML-документом (вместо текстового), вам нужно использовать расширение.html.
В принципе, для работы с HTML вы можете использовать даже обычный текстовый документ, который является стандартным на каждом компьютере. Для этого вам нужно создать новый документ, прописать в него код и сохранить его в формате.html .
Для того чтобы работать с HTML файлами было удобно, вы можете использовать специальные редактор, которые предназначены для работы с данным типом файлов. Одним, из таких редакторов, является Sublime Text 3, я уже писал о нем с своих предыдущих записях. Вот ссылка на запись –
Что писать в файлеДля того чтобы наглядно просмотреть свой сайт в браузере, в файле сайта необходимо прописать следующий код.
Это базовый шаблон, который используется для написания web-страниц с использованием HTML. Давайте его подробно разберем.
- – это код который говорит браузеру о том что мы используем последнюю версию HTML – HTML5
- – внутри данного тега располагаются все теги которые отвечают за функциональность сайта. Здесь мы подключаем сторонние файлы, подключаем скрипты, указываем кодировки и многое другое
- body – внутри этого тега располагаются теги, которые будут выводиться и работы которых мы с вами сможем расмотреть наглядно.
Давайте попробуем наглядно просмотреть работу кода, выведем текст:
Мой первый сайт
Это мой первый сайт!
Как вы могли заменить каждый из этих тегов имеет закрывающийся тег, то о чем мы говорили ранее. Вся структура HTML кода напоминает “матрешку”. Один тег вкладывается во внутрь другого.
В данной системе есть специальная иерархия. В этой системе теги делятся на братские, родительские и теги предки. Здесь все относительно, у каждого тега будут свои предки, родители и братья.
Родителем называют тег, внутри которого находится рассматриваемый тег.
Предками называются, теги которые расположены внутри рассматриваемого тега.
Братскими называют теги, которые находятся на одном уровне с рассматриваемым тегом.
Данную связь легко понять по данному примеру:
Известные футбольные цитаты Сэр Алекс Фергюсон однажды сказал о Филиппо Индзаги: Этот парень должен был родиться в положении вне игры . При критике со стороны Джона Карью, Златан Ибрагимович ответил: То, что делает Карью с мячом, я могу сделать с апельсином. Джордж Бест сказал: Я потратил много денег на выпивку, девчонок и быстрые автомобили. Остальное я просто промотал , - когда его спросили о его образе жизни.В этой структуре:
- является предком для любого другого элемента;
- является родителем для и трёх ;
- и три являются братскими друг для друга;
- каждый является родителем для и , которые в них содержатся;
- каждый
,
, и - это всё потомки .
Аналогия с семейным древом также применяется при прохождении нескольких слоёв вложений в HTML:
- потомок элемента X - это любой элемент внутри X;
- ребёнок - это просто прямой потомок;
- предком элемента Y является любой элемент;
- родитель - это лишь первый прямой предок.
указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.
HTML5 | |
Для всех документов. | |
HTML 4.01 | |
Строгий синтаксис HTML. | |
Переходный синтаксис HTML. | |
В HTML-документе применяются фреймы. | |
XHTML 1.0 | |
Строгий синтаксис XHTML. | |
Переходный синтаксис XHTML. | |
Документ написан на XHTML и содержит фреймы. | |
XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов. | |
XHTML 1.1 | |
Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. |
Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.
Стандарты HTML и XHTMLHTML - стандартный язык разметки Web-документов.
В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.
Например, тег и атрибут align объявлены устаревшими.
XHTML - расширяемый язык разметки Web-документов, созданный на базе XML . Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.
Достоинства языка XHTML - не строгость синтаксиса, а возможность придумывать собственные теги.
Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. И хотя стандарт HTML5 всё ещё не утверждён, на нём уже написано множество сайтов.
Кому интересно, когда же HTML5 будет закончен, могут ознакомиться с первоисточниками:
Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/
Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.
На!DOCTYPE, предназначенных для документов, использующих фреймы , останавливаться не будем: позавчерашний день.
Следующий вопрос: какой выбрать синтаксис - строгий или переходный?
Строгий и переходный синтаксис HTML 4.01Переходные синтаксисы существуют для того, чтобы облегчить переход на новый стандарт. Они пропустят многое из того, что строгий синтаксис посчитает ошибками.
Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.
Строгий синтаксис Проверка на валидность Проверка на валидностькрасным цветом.
Соответствие HTML-кода объявленному стандарту называют валидностью , а проверку на это соответствие - валидацией .
Чтобы отслеживать ошибки верстки, установим дополнение к FireFox Html Validator .
Откроем нашу страницу в браузере FireFox, наведем мышку на знак валидатора:
Двойной щелчок на знаке валидатора даст развернутый список ошибок:
Поменяем!DOCTYPE на переходный синтаксис:
Переходный синтаксис Проверка на валидность Проверка на валидностьЧасть текста понадобилось выделить красным цветом.
Запускаем FireFox. Ошибок нет:
Вроде все прекрасно. Может, на этом и остановиться?
Мой совет: делать валидную верстку или в соответствии со строгим синтаксисом HTML 4.01, или сразу на HTML5. HTML надо использовать по его прямому назначению, а оформление оставить CSS. Кроме того, если у сайта валидная верстка, а он неправильно отображается в каком-либо браузере, то это однозначно проблема браузера. Новые версии браузера будут лучше соответствовать стандарту и не ошибаться в интерпретации валидного кода. Если же сложная верстка реализована невалидным способом, то нет гарантий, что новые версии браузеров не рассыпят ее на кусочки.
Не соблазняйтесь лояльностью переходного синтаксиса, только строгое соответствие стандартам!
Зачем нужна валидная версткаКазалось бы, зачем мучиться? Ведь маленькие недочеты верстки браузеры часто исправляют автоматически, и сайт работает абсолютно нормально. Но эти мелкие, практические незаметные ошибки тем не менее замечают поисковые системы. Даже один отсутствующий тег
- это минус на оценке качества сайта.Именно из-за способности поисковых систем замечать любые недочеты HТML-кода и рекомендуется соблюдать валидность верстки. Кроме того, проверяя код на валидность, можно обнаружить наряду с мелкими недочетами еще и серьезные ошибки, которые были не замечаны ранее.
Начинаем изучение языка. Текст на HTML представляет собой "простой текст". Все гипертекстовые особенности документа задаются с помощью тегов - особых пометок, включаемых в этот текст.
Пусть есть текст:
Запишем этот текст по-другому, вставив указания о том, как надо отображать текст. Указания выделим угловыми скобками.
В языке HTML указания называются тегами. Браузер выполняет указания-теги, то есть, не показывая их, производит изменения текста. Поэтому на экране мы увидим следующее:
«Мама мыла раму, а котик играл с клубком. Мальчик забрал у котика клубок».
Тег – команда в угловых скобках. Имя тега – первое, что пишется после открывающей угловой скобки, без пробелов перед ним! Существуют теги одиночные и теги контейнеры. Одиночные теги – некоторая команда браузеру, выполняемая в том месте, где указана, например, команда «нарисовать линию»:
Теги контейнеры состоят из открывающего тега и закрывающего, и их указание относится ко всему тексту, расположенному между ними, говорят: «вложенному в контейнер». Закрывающий тег имеет то же имя, что и открывающий, но перед именем ставится символ «слэш»: «/»:
Мама мыла раму.
.У тега могут быть атрибуты. Атрибут дополняет и поясняет тег. Порядок атрибутов не важен. Например, у тега HR есть атрибут WIDTH, обозначающий ширину линии, SIZE – толщину линии, ALIGN – расположение (выравнивание) и COLOR – цвет. Значения атрибутов конкретизируют заданную характеристику. Синтаксическое правило звучит следующим образом: после имени тега может следовать, по крайней мере, один пробел, затем, через пробелы, могут следовать тройки: атрибут, символ «=», значение. Значение рекомендуется заключать в кавычки, хотя стандарт HTML позволяет значения, состоящие только из латинских букв и цифр, не заключать в кавычки.
Изображение на экране будет примерно следующим.
_____________________________________
Стандарт позволяет не писать закрывающий тег, если он подразумевается. Например, тег
Имеет закрывающий, но его можно не писать перед открытием следующего абзаца. Тег
Обозначает абзац.
Мама мыла раму.
Дочка играла с мячиком.
Некоторые атрибуты не имеют значений, точнее, они имеют единственное значение, и потому достаточно просто указать или не указать в теге этот атрибут. Например, у тега FRAME есть атрибут NORESIZE, указывающий на то, что пользователю не позволено изменять размер данного фрейма.
Теги (элементы) в HTML могут быть вложены друг в друга аналогично циклам или условным операторам в языках программирования. Пересечения тегов без вложенности запрещены.
Пример ошибочной записи:
пример блока
с вложенным абзацем
Пример правильной записи:
пример блока
С вложенным абзацем
Кроме тегов и простого текста в HTML-коде могут встретиться так называемые символьные объекты или Escape последовательности: именованные и нумерованные сущности. Они нужны для представления в документе символов, запрещенных синтаксически или физически, а также символов, которые невозможно ввести с клавиатуры. Например,
Регистр букв для имен тегов и имен и значений атрибутов не важен. Хотя рекомендуется соблюдать некоторый стиль, например, писать имена всех тегов большими буквами, либо маленькими, либо маленькими, но с первой заглавной буквой. Такой текст легче воспринимается человеком.
Очень важное замечание! Цель браузера – показать клиенту вашу страницу. Обычная реакция браузера на ошибку – попытка исправить ошибку, а если не удалось, то пропустить не понятные для него слова или теги. Это и хорошо и плохо. Так как, с одной стороны, в результате браузер постарается показать пользователю максимум текста, но, с другой стороны, в этот текст может попасть часть с тегами и скриптами или не попасть собственно текст, если его браузер воспримет, например, как комментарий. Разработчику сайта такое поведение браузера очень мешает. Будьте готовы к тому, что сначала браузер будет старательно исправлять ваши ошибки, но через некоторое время он запутается, и у вас перестанут работать ранее работавшие фрагменты. Поэтому совет: не делайте ошибок, а лучше используйте современные редакторы, осведомленные о html-правилах, и указывающие вам на ошибки.
HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
- пустые элементы
— , ,
, , , , , , , , , , , , ; - элементы с неформатированным текстом — , ;
- элементы, выводящие неформатированный текст — , ;
- элементы из другого пространства имён — MathML и SVG;
- обычные элементы — все остальные элементы.
В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.
Полный список HTML-элементовИспользуется для добавления комментариев. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Создаёт гипертекстовые ссылки. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Загружает звуковой контент на веб-страницу. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Выделяет текст как цитату, применяется для описания больших цитат. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Представляет тело документа (содержимое, не относящееся к метаданным документа). | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Перенос текста на новую строку. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Добавляет подпись к таблице. Вставляется сразу после тега
|