Учебник HTML 5. Статья «Введение»
Приступая к изучению
Создание первой страницы
МЕНЮЯзык гипертекстовой разметки HTML (англ. HyperText Markup Language) — является языком разметки документов во Всемирной паутине.
Хочу сразу обратить Ваше внимание, что HTML является языком разметки, а не программирования, как многие ошибочно полагают. Его основная задача создать каркас для описания различных компонентов документа, таких как абзацы, заголовки, списки, таблицы, ссылки на другие страницы и так далее.
HTML документы описываются специальными именами HTML элементов (тегами), каждый тег описывает различное содержание документа. Теги представляют собой команды, которые сообщают браузеру, каким образом отображать веб-страницу (документ).
Цель любого веб-браузера прочитать HTML документ и правильно его отобразить.
Браузер не отображает HTML теги, но использует их, чтобы определить, как отображать конкретный документ.
Теги бывают двух видов: парные и одиночные (пустые). У парных HTML-тегов первый тег в паре является начальным (открывающим) тегом, а второй тег является конечным (закрывающим) тегом. Основная функция начального тега заключается в том, чтобы сообщить браузеру где команда начинается, а конечным тегом определить где она заканчивается.
Давайте рассмотрим чем отличаются парные теги от одиночных.
Вид (синтаксис) парного тега:
<тег>Содержание тега</тег>
Обратите внимание, что все теги заключены в угловые скобки < и >, а закрывающий тег всегда должен содержать прямой слеш перед названием тега — </тег>, этим мы сообщаем браузеру, что на этом месте наша «команда» закончена.
Большинство ошибок в верстке (создание структуры HTML кода) у Вас может возникать по той причине, что не указан закрывающий тег или он указан без прямого слеша / .
Вид (синтаксис) одиночного тега:
<тег>Содержание
В современном стандарте HTML 5 одиночные теги записываются как и начальные теги у парных тегов (наименование тега помещено в угловые скобки < и >).
Обращаю Ваше внимание, что до выхода современного стандарта одиночные теги требовали наличие прямого слеша перед наименованием тега (записывались по аналогии с закрывающими тегами).
Основное отличие одиночных тегов от парных заключается в том, что одиночные теги не требуют закрывающий тег после содержимого элемента.
Они добавляют на страницу одиночные объекты, например, изображение, или производят какое-то одиночное действие, например, такое как перевод строки. В HTML одиночных тегов значительно меньше чем парных, к концу обучения вы будете знать их все.
Хотя в HTML 5 теги не чувствительны к регистру, я рекомендую вам писать их в нижнем регистре. С помощью тегов браузер распознает структуру и значение текста, они сообщают браузеру, какая часть документа является заголовком, где начинается новый абзац, где начинается список, либо размещена таблица, что нужно выделить цветом, что перенести на следующую строку и так далее. Анализируя эту информацию, браузер отображает каждый элемент так, как мы ему это сообщили.
Пример простого HTML документа:
И так, мы с Вами поняли, что HTML — это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу. Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:
<!DOCTYPE html> <html> <head> <title>Название для документа (страницы)</title> </head> <body> <h3>Это заголовок</h3> <p>Это параграф (абзац).</p> </body> </html>
</p>
</body>
</html>
Хочу сразу обратить Ваше внимание на то, что браузеры игнорируют символы табуляции и пробелы в документе
А теперь детально разберем из чего состоит любая HTML страница:
DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.
Декларация <!DOCTYPE html> сообщает, что в этом документе используется пятая версия языка гипертекстовой разметки — HTML 5.
Обращаю Ваше внимание на то, что декларация должна указываться самой первой в вашем HTML документе, перед тегом <html>.
Декларация <!DOCTYPE> не чувствительна к регистру, но записывать её принято в верхнем регистре.
Хронология версий HTML:
| Версия | HTML | HTML 2.0 | HTML 3.2 | HTML 4.01 | XHTML | HTML 5 |
|---|---|---|---|---|---|---|
| Год | 1991 | 1995 | 1997 | 1999 | 2000 | 2014 |
Текст между тегами <html> и </html> сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки. Является корневым элементом HTML документа и все остальные элементы должны быть его потомками (вложены в него).
Текст между <head> и </head> содержит информацию о документе (сведения о документе, которые не отображаются пользователю). Внутри этого элемента обязательно должен быть вложен HTML тег <title>.
Текст между <title> и </title> обеспечивает название для документа. Название документа должно содержать важные ключевые слова, чтобы поисковые системы могли включить вашу страницу в результаты поиска (по определенным запросам пользователей).
Текст между <body> и </body> описывает видимое содержимое страницы!
Текст между <h3> и </h3> (англ. heading level 2) описывает заголовок второго уровня. Поисковые системы используют ваши заголовки для индексации структуры и содержания веб-страниц. Поэтому важно использовать заголовки, чтобы показать структуру документа. Как правильно использовать заголовки от первого до шестого уровня на ваших страницах мы рассмотрим далее в учебнике в статье «Базовый HTML».
Текст между <p> и </p> (англ. HTML Paragraph Element) определяет параграф (абзац). Содержание элемента всегда начинается с новой строки.
Ниже показано как отображается вышерассмотренный пример в браузере:
Рис.
1 Пример отображения HTML документа браузером.Обращаю Ваше внимание, что все примеры, которые рассматриваются в учебнике доступны для просмотра в отдельном окне. Желательно, чтобы вы помимо вопросов и задач, которые будут приводится в конце каждой статьи создавали аналогичные (собственные примеры) и эксперементировали с ними. Это позволит Вам максимально быстро изучить и применять рассмотренный материал.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы ответьте, или найдите ответ на следующие вопросы:
- Какая основная задача языка гипертекстовой разметки?
- Какая версия языка HTML сейчас используется?
- Что такое декларация? Какая декларация используется в современном стандарте?
- В какой HTML элемент помещается видимое содержимое документа (страницы)?
Приступая к изучению
Создание первой страницы
МЕНЮЧто такое HTML
HTML — язык гипертекстовой разметки.
Это стандартный язык разметки, который используется для создания веб-страниц и других типов цифрового контента, который может отображаться в интернете. В этой статье расскажем, чем он полезен и для чего используется.
HTML-код состоит из набора тегов и текстовых данных, которые определяют структуру и содержимое веб-страницы. Теги — это дескрипторы (или описатели), передающие браузеру информацию о способе отображения содержимого, помещенного между ними. Теги представляют собой элементы языка разметки. У каждого тега есть название, которое заключено в угловые скобки < >.
Например, приведенный ниже HTML-код содержит теги «head» и «body», а также теги «h2» и «p», которые определяют заголовок и абзац текста на странице:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h2>Заголовок</h2>
<p>Это абзац текста.
</p>
</body>
</html>
Здесь тег «head» определяет метаданные страницы, такие как заголовок страницы, а тег «body» определяет содержимое страницы, которое отображается в браузере.
Что такое теги?Теги HTML — это команды, которые используются для описания содержимого веб-страницы. Теги используются для создания элементов на веб-странице, таких как заголовки, абзацы, изображения, ссылки и многое другое. Каждый тег начинается с символа «<» и заканчивается символом «>».
Дескрипторы (теги) делятся на парные и непарные. Первые — двухчастные (один тег открывает, другой — закрывает), а вторые — из одной.
В то же время, непарный тег можно закрыть, но он будет выполнять свою функцию и без закрытия.
Например, тег <img> нужен, чтоб размещать на сайте изображения. Он непарный. У любого тега есть атрибуты, позволяющие сообщать дополнительную информацию об элементах на странице (размеры, идентификатор элемента, гиперссылки и т. д.).
Итак, у <img> два главных атрибута — src и alt. Первый указывает гиперссылку на файл изображения, а второй сообщает альтернативный текст, который отображается, если изображение невозможно загрузить.
Тег <p> парный и во всех случаях должен быть закрыт тегом </p>. Парные дескрипторы нужны при разметке блоков (это такие элементы, что содержат другие элементы, в том числе блоки другого уровня). Типичные примеры — контейнеры (div), заголовки, абзацы, таблицы и списки.
ЗаголовокЗаголовок (англ. «header») — это элемент, который используется для определения названия документа или раздела. Заголовки представляют собой текст, который располагается в верхней части веб-страницы или раздела и обычно оформляется более крупным и выделенным шрифтом, чем остальной текст на странице.
В HTML заголовки могут быть шести уровней (от <h2> до <h6>). h2 имеет наибольший размер и важность, а h6 — наименьший.
<h2>Добро пожаловать на Elbrusboot.camp</h2>
<h3>Расскажите нам больше</h3>
<h4>О разных уровнях заголовков</h4>
<h5>Их использование и функции</h5>
Заголовок <h2> следует использовать только один раз на странице, поскольку он является основным.
АбзацАбзацы в HTML делят смысловые отрезки текста, аналогично любому письменному тексту. Для создания абзаца используется дескриптор <p> </p>.
СпискиСуществует два основных вида: нумерованные и ненумерованные.
Ненумерованные (маркированные) списки, обозначаются тегом <ul></ul>. Эти списки используются, когда порядок расположения пунктов не имеет значения.
Нумерованный список нужен, когда последовательность его элементов принципиально важна.
Он обозначается тегом <ol></ol>.
Каждый элемент списка (независимо от вида) создается при помощи тега <li></li>. Необходимо закрывать этот тег по каждому пункту.
Как HTML работает на сайтахРассмотрим, как браузер показывает Вам страницу, используя файлы HTML:
- Пользователь набирает адрес сайта в поисковой строке.
- Браузер посылает запрос на указанный адрес, в ответ получая файл HTML.
- Код из этого файла расшифровывается, и вы видите привычные изображения, текст, анимацию и т. д.
Для каждого из браузеров работают собственные правила, по которым отображаются объекты. Ранее создатели сайтов должны были делать версию каждой страницы под каждый браузер. Если специфика Google Chrome или Safari не учитывалась, сайт мог выглядеть неправильно, что приводило к недовольству пользователей. Однако, благодаря разработке веб-стандартов W3C, сайты теперь отображаются примерно одним образом во любом из браузеров.
Но есть набор обычных ошибок разработчиков. Например, при создании страницы забыли закрыть тег, или содержимое добавили в неправильное место. Тогда в браузере отобразится нечто совсем неожиданное.
HTML составляет основу веб-сайта, благодаря которой браузер понимает принцип отображения содержимого, добавляя стили из CSS (язык описания внешнего вида документа) и логику JavaScript. В HTML можно создавать заголовки, абзацы, блоки, гиперссылки, изображения, таблицы и формы.
Цвет и шрифт текста, фоновый цвет блока можно задать прямо в HTML. Все же рекомендуется создать отдельный файл CSS для определения стилей, поскольку это позволяет свободно экспериментировать с множеством свойств (отступы, позиционирование, анимация, тени и прозрачность).
В настоящее время обработка пользовательских действий обычно осуществляется при помощи JavaScript и его фреймворков (программных платформ), но ряд функций, например, перетаскивание объектов (drag-and-drop), последовательно переносятся в HTML.
То, что ранее работало только при использовании JavaScript, сегодня уже базовая функциональность HTML.
Файл HTML можно создать в любом текстовом редакторе (например, Notepad в Microsoft Windows, TextEdit на Mac и Pico на Linux). Но чтобы увидеть, как результат будет выглядеть в сети, необходим браузер. Просматривать страницы HTML возможно и без доступа к сети. Например, можно поместить файлы HTML в одну папку, вставить в них гиперссылки, которые будут переводить пользователя из одного документа в другой.
HTML позволяет реализовать базовый дизайн сайта, выбрать цвета и шрифты для текста и фон для блоков. Однако, использование одного HTML при верстке страниц нежелательно, так как дизайн будет выглядеть слишком простым и несовременным. Для того, чтобы творчество не ограничивалось базовым набором, нужен CSS. Но многие функции, доступ к которым раньше был только в более сложных инструментах, сейчас также доступны в HTML. Например, ранее Drag&Drop (перетаскивание мышкой) работал только при использовании JavaScript, однако, теперь это реализовано в HTML.
HTML не выполняет операций с данными, он лишь диктует правила их отображения на странице. Невозможно выполнить математические действия прямо в HTML, поскольку его главной функцией является разметка содержимого страниц. При этом у HTML есть все признаки декларативного языка программирования (уникальный синтаксис, семантика и лексика).
HTML — основой внутренней структуры сайта, он представляет собой базовый каркас веб-страницы. Стоит отметить, что этот язык не является программным (как C++ или Python). HTML применяется при разметке гипертекста, что позволяет браузеру выстраивать веб-страницу в форме, удобной для восприятия человеком, а затем оформлять ее при помощи CSS и добавлять логику JavaScript. HTML является отличным выбором для новичков в программировании, поскольку он легок в освоении и полученные навыки могут помочь при изучении собственно языков программирования. В ходе обучения как frontend, так и backend-разработке HTML — обязательный компонент образовательного процесса.
Базовый синтаксис HTML активно использовался пользователями LiveJournal без всякой подготовки. Для изучения основ и создания простеньких страниц уйдёт несколько часов. Однако, необходимо не только создать каркас веб-страницы, но и убедиться в том, что он корректно отображается на разных устройствах. Специалисты, которые владеют навыками создания адаптивных, качественных веб-сайтов с продвинутым дизайном и пользовательским интерфейсом, очень ценятся на рынке труда. Быть просто HTML-верстальщиком не слишком выгодно, поскольку это профессия сегодня не является востребованной и не обеспечивает высокий уровень доходов. С другой стороны, frontend и backend-разработчики весьма востребованы, и обязательно осваивают HTML.
Полезные советыПри разработке сайта рекомендуется создать отдельную папку на вашем жестком диске. В нее вы будете сохранять страницы сайта, называя их именами, имеющими смысл.
Не рекомендуется использовать бессмысленные названия типа «abc.html» или «111.html», чтобы избежать бардака и не запутаться. Несмотря на то, что это может показаться несущественным на первых порах, в дальнейшем такой подход сделает рабочий процесс значительно более легким и приятным. Когда у вас будет более 20 файлов с именами, которые нужно запомнить, чтобы делать перелинковку (связывать перекрестными ссылками).
В код рекомендуется располагать теги «лесенкой» по мере вложенности одного блока или дескриптора в другой. Такой подход сильно облегчит чтение кода в будущем. Этот же принцип работает в других языках программирования, так что эта привычка поможет вам в дальнейшем развитии.
HTML для чайников | Книга чудес
Титтел, Эд и Джеймс, Стивен Н.
Описание
Изучает новейшие HTML-теги, синтаксис и расширения для создания веб-страниц; охватывает текст, анимацию и мультимедиа; и отслеживает процесс веб-публикации от создания до обслуживания Подробнее
Ниже приведен список продуктов, отсортированных по состоянию. Выберите необходимое количество товара и нажмите кнопку «Добавить». | |||||
|---|---|---|---|---|---|
| Б/у — Очень хорошее Очень хорошее состояние. С компакт-диском! 3-е издание. Копия, которая может иметь несколько косметических дефектов. Может также содержать несколько отметок, таких как имя владельца, короткую надпись дарителя или световую печать. | 4,99 $ 2 в наличии на складе | Количество | |||
| Б/у — Хорошее Хорошее состояние. | 5,76 $ 1 в наличии на складе | Количество | Бесплатная доставка в континентальную часть США ИЛИ скидка 1 доллар США за единицу при отправке в магазин. | ||
Извините, компакт-диск отсутствует. 3-е издание. Копия, которая была прочитана, но осталась нетронутой. Может содержать маркировку, такую как экслибрисы, штампы, ограниченные пометки и выделение, или несколько светлых пятен.HTML для чайников | Базовые вещи для начала работы
ByAamir Hussain Часы работыHTML для чайников | Основные сведения, которые необходимо знать
HTML — это язык программирования высокого уровня, обозначающий ЯЗЫК ГИПЕРТЕКСТНОЙ РАЗМЕТКИ, обычно используемый для создания веб-страниц. HTML легко выучить. HTML разработан SUN MICRO-SYSTEMS и выпущен в 1995 году. Вы можете запускать HTML на различных платформах, таких как Windows, Mac OS и многих версиях UNIX. Если у вас нет знаний о кодировании, не беспокойтесь, вы также можете начать отсюда. Теперь я дам вам точное практическое и теоретическое понимание HTML с самого начала.
Потребности
Неважно, какая у вас профессия, если вы хотите создать свой собственный веб-сайт, вы можете изучить его, создать и опубликовать в любое время, зависит от вас, насколько вам любопытно, что вы собой представляете.
учится прямо сейчас. HTML — самый простой язык для изучения. И даже эта часть обучения может иметь большое значение в вашей карьере. Начните свою ВЕБ-КАРЬЕРУ прямо сейчас…
Вам нужен ноутбук и есть желание начать свою карьеру. Основное требование заключается в том, что мы предполагаем, что вы, по крайней мере, знаете основы работы с компьютером, такие как создание файла, запись в блокноте, сохранение файла и многое другое.
ОсновыИзучайте HTML с помощью блокнота или текстового редактора. Веб-страницы могут быть созданы и легко изменены редакторами HTML.
Но для начинающих мы рекомендуем такие редакторы, как блокнот (Windows) или текстовое редактирование (mac).
Вам необходимо выполнить несколько шагов, чтобы создать свою первую веб-страницу:-
Шаг 1: – Откройте Блокнот
Откройте Пуск>Программы>Стандартные>Блокнот
Вот как выглядит ваш блокнот.
Шаг 2: — Напишите что-нибудь в блокноте.
Можно так написать.
Шаг 3: – Сохраните HTML-страницу
Сохраните файл на своем ПК.
Выберите «Файл»> «Сохранить» в меню блокнота.
Сохраните файл блокнота с расширением «.html».
Шаг 4: — просмотрите свою HTML-страницу при просмотре.
Откройте сохраненный файл HTML в своем любимом браузере.
Дважды щелкните файл.
Выход
Особенности- Язык HTML — это простой и понятный язык, который также можно модифицировать.
- Предоставляет гибкий способ разработки веб-страниц с текстом, абзацами, изображениями и т. д.
- Это платформо-независимый язык.
- Язык HTML чувствителен к регистру.
- Создавать эффектные презентации очень просто.
HTML-теги заключаются в угловые скобки 
| 1 | Этот тег определяет тип документа и версии HTML. |
|---|---|
| 2 | Этот тег сообщает браузеру, что это документ HTML и представляет корень HTML. |
| 3 | Этот тег выступает в качестве заголовка документа и содержит другие теги HTML, такие как |