Как вставить тег в текст html

Начало работы с HTML

В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

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

Что такое HTML?

HTML (HyperText Markup Language — язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» ( <p> ), например:

Примечание: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег <title> может быть записан как <title> , <TITLE> , <Title> , <TiTlE> , и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.

Структура HTML-элементов

Давайте рассмотрим элемент «параграф» чуть подробнее:

Основными частями элемента являются:

Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
Содержимое: Как видно, в нашем случае содержимым является простой текст.
Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Активное изучение: создание вашего первого HTML-элемента

Отредактируйте строку текста ниже в поле Ввод, обернув её тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

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

Вложенные элементы

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово «очень» в элемент <strong> , который означает, что это слово крайне важно в данном контексте:

Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong , затем мы закрываем элемент strong первым, затем p . Следующее писать неправильно:

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

Блочные и строчные элементы

Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.

Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент <a> (ссылка) или акцентирующие элементы вроде <em> или <strong> .

Посмотрите на следующий пример:

<em> — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, <p> — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).

Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

Примечание: вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.

Пустые элементы

Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент <img> вставляет картинку на страницу в том самом месте, где он расположен:

Это выведет на вашу страницу следующее:

Примечание: Пустые элементы иногда называют void-элементами.

Атрибуты

У элементов также могут быть атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.

Атрибут должен иметь:

Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
Имя атрибута и следующий за ним знак равенства.
Значение атрибута, заключённое в кавычки.

Активное изучение: Добавление атрибутов в элемент

Возьмём для примера элемент <a> — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:

В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, href=»https://www.mozilla.org/» .

Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title=»The Mozilla homepage» . Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.

Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target=»_blank» отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.

Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент <a> затем атрибут href и атрибут title . Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title , а при щелчке переходит по адресу в атрибуте href . Помните, что между именем элемента и каждым из атрибутов должен быть пробел.

Булевые атрибуты

Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут disabled , который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.

Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

На выходе оба варианта будут выглядеть следующим образом:

Опускание кавычек вокруг значений атрибутов

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

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением «The» и два булевых атрибута: Mozilla и homepage . Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!

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

Одинарные или двойные кавычки?

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

Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

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

Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:

Поэтому вам нужно сделать так:

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

Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:

Вот что мы имеем:

<!DOCTYPE html> : Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так: Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <!DOCTYPE html> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
<html></html> : Элемент <html> содержит в себе всё содержимое на всей странице, и иногда его называют «корневой элемент».
<head></head> : Элемент <head> . Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
<meta charset=»utf-8″> : Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
<title></title> : Элемент <title> . Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
<body></body> : Элемент <body> . Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.

Активное изучение: Добавление элементов в ваш HTML-документ

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

Скопировать пример HTML-страницы, расположенный выше.
Создать новый файл в текстовом редакторе.
Вставить код в ваш новый текстовый файл.
Сохранить файл как index.html .

Примечание: вы также можете найти этот базовый пример HTML на MDN Learning Area Github repo.

Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:

Скриншот примера тестовой страницы

Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента <body> . Попробуйте сделать следующее:

Добавьте заголовок страницы сразу за открывающим тегом <body> . Текст должен находиться между открывающим тегом <h1> и закрывающим </h1> .
Напишите в параграфе о чём-нибудь, что кажется вам интересным.
Выделите важные слова, обернув их в открывающий тег <strong> и закрывающий </strong>
Добавьте ссылку на свой абзац так, как объяснено ранее в статье.
Добавьте изображение в свой документ под абзацем, как объяснено ранее в статье. Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!

Если вы запутались, всегда можно запустить пример сначала кнопкой Сбросить. Сдаётесь — посмотрите ответ, нажав на Показать решение.

Пробелы в HTML

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

Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.

Ссылки на сущности: Включение специальных символов в HTML

В HTML символы < , > , » , ‘ и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.

Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).

Буквенный символ	Символьный эквивалент
<	<
>	>
«	"
‘	'
&	&

В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:

В живом выводе ниже вы можете заметить, что первый абзац выводится неправильно, так как браузер считает, что второй элемент <p> является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.

Примечание: Таблица всех доступных в HTML символов-мнемоников — в Википедии: List of XML and HTML character entity references.

HTML комментарии

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

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <!— и —> , например:

Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.

Подведение итогов

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

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.

Name already in use

html-foxford-materials / lessons / html-base.md

Go to file T
Go to line L
Copy path
Copy permalink

1 contributor

Users who have contributed to this file

Open with Desktop
View raw
Copy raw contents Copy raw contents

Copy raw contents

1.1 Теги и атрибуты

Что такое браузер

Браузер — прикладное программное обеспечение для просмотра веб-страниц. В глобальной сети браузеры используют для запроса, обработки, манипулирования и отображения содержания веб-сайтов.

Браузер может быть:

Клиентским приложение на вашем компьютере
Приложением на смартфоне
Другим приложением, в которое встроен браузер
Браузер может быть доступен и на других устройствах (Smart TV, часы, компьютер автомобиля, холодильник) Вы сообщаете браузеру что отобразить, для этого указываете ему адрес документа, или URL (Uniform Resource Locator) — единый указатель ресурса

протокол — схема обращения к ресурсу, для веб-страниц, это http или https.

хост — полностью прописанное доменное имя сервера.

путь — уточняющая информация о месте нахождения ресурса, очень похожа на путь в файловой системе.

якорь — идентификатор «якоря», ссылающегося на некоторую часть (раздел) открываемого документа.

Например, адрес страницы программы на которой вы все регистрировались на этот курс http://netology.ru/programs/html-css-base

К URL мы еще вернемся когда будем разбираться со ссылками и изображениями.

Что делает браузер:

Формирует и отправляет запрос на сервер (HTTP)
Получает ответ сервера (HTTP)
Разбирает ответ сервера, документ (HTML)
Рисует и отображает полученную страницу в окне (HTML и CSS)
Реагирует на действия пользователя (CSS и JavaScript)

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

Текстовая информация;
Структура документа (заголовки, абзацы и т.д.);
Ссылки на другие ресурсы (изображения, видео, аудио, стили).

book

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

текст разбитый на абзацы
заголовки разных уровней
иллюстрации
цитаты
акценты по тексту

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

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

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

Для создания не должно требоваться сложное программное обеспечение — пусть документ будет обычным текстом, тогда для создания потребуется обычный текстовый редактор. Текстовый редактор — блокнот. Текстовый процессор — MS Word.

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

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

Сам подход должен быть легок в изучении — а это мы проверим по итогам курса К меткам есть дополнительные требования:

Метка должна быть уникальной и не используются в обычной письменной речи. Поэтому Заголовок — плохой вариант метки, как и символ *.
Они должны состоять из небольшого числа символов, иначе их набор будет утомителен. Поэтому ТутНачинаетсяЗаголовокОтнынеИВоВекиВеков — плохой вариант метки, хоть и вряд ли встретится в самом тексте.
По ним должна быть понятна их суть. Поэтому ТНЗ29 — тоже плохой вариант метки, хоть короткий и уникальный

Язык разметки — набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении.

HTML — HyperText Markup Language — «язык гипертекстовой разметки» Cтандартизированный язык разметки документов во Всемирной паутине. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения.

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

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

Вёрстка веб-страниц — создание структуры html-кода, и описание стилей, размещающие элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.

tag

Теги в HTML заключены в угловые скобки < > Нам привычнее их называть символами меньше и больше. Так как нам нужно обозначать начало и конец элемента, например абзаца, то существует понятие открывающего и закрывающего тега. Тег p — позволяет выделить абзац текста (Paragraph по английски).

Для разметки заголовков предусмотрено 6 тегов, что позволяет нам различать заголовки разного уровня h1-h6 (Heading)

Для разметки блоков цитат, врезок и просто выделенных блоков текста предусмотрен тег blockquote .

Если не закрыть один из тегов, это может привести к ошибке отображения

Цитата может состоять из нескольких абзацев текста. Нам потребуется обозначить их внутри тега цитаты. В HTML можно помещать одни теги внутрь других. Поэтому мы можем текст внутри цитаты так же разметить тегами абзацев:

При этом теги p внутри цитаты будут дочерними для blockquote . А тег blockquote будет родительским для вложенных тегов p Вспомним ошибку которую мы разбирали ранее

Теперь думаю понятно что браузер посчитал что первый тег p и blockquote вложены в h1 . А второй тег p в свою очередь вложен в blockquote Не все теги можно вкладывать в другие теги. Например логика подсказывает что нет смысла вкладывать абзацы или цитаты в заголовок. Но например то что тег blockquote нельзя вкладывать в абзац, уже не так очевидно. Какие теги в какие можно вкладывать, тоже регулируется стандартом. И там все подчинено очень простой логике. Например, блок цитаты может состоять из нескольких абзацев. А абзац не может состоять из нескольких блоков цитат. Для вставки цитаты по тексту есть тег q .

Теги должны быть вложены только целиком. Т.е. нельзя вложить один тег в два других:

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

Мы уже знаем что вложенные теги считаются дочерними для того тега в который они вложены. А этот тег будет для них непосредственным родителем.

Если теги вложены в один и тот же тег и идут друг за другом, то такие теги называются соседями.

При этом соседи которые следую раньше — предшественники. А позже — последователи. Ближайший предшественник — предыдущий тег. Ближайший последователь — следующий.

Все теги вложенные в тег, и вложенные во вложенные теги — потомки.

Теги для расстановки акцентов по тексту:

q — цитата по тексту.
strong — сделать акцент на слове или фразе, обозначить их важность.
em — выделить слово.

В эти теги нельзя вкладывать никакие другие

Стандарт не регламентирует как форматировать код. Переносы строк преобразуются в пробелы, несколько пробелов подряд преобразуются в один. Но опыт разработчиков привел к тому, что форматирование кода стало не регламентированным стандартом индустрии. И все это для увеличения скорости работы верстальщика:

Каждый уровень вложенности обозначается отступом
Отступ составляет два пробела
Если у тега нет вложенных, его весь можно записать в одну строку
Но если строка слишком длинная, то теги нужно разместить отдельно от содержимого

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

Значение атрибута задается в двойных кавычках “ » после символа = .

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

Есть универсальные атрибуты, которые можно указать в любом теге. Например:

id — позволяет задать тегу универсальный идентификатор, чтобы в дальнейшем ссылаться на него
class — позволяет задать один или несколько через пробел определенных пользователем классов для дальнейшего управления внешним видом элемента через стили. Так же, у некоторых тегов есть специальные атрибуты, доступные только им. Например у тега blockquote и q есть атрибут cite , который позволяет указать автора или источник цитаты:

С остальными мы познакомимся при изучении тегов.

Гипертекст — текст, «который разветвляется как бы сам по себе или выполняет действия по запросу».

Именно благодаря гипертексту интернет стал таким популярным и таким каким мы его сейчас видим. Так как же нам сделать текст, который разветвляется сам по себе? В HTML для этого предусмотрены ссылки в тексте, которые позволяют по клику перейти на другую страницу, или к другой части текущей страницы. Для того чтобы слово или фразу сделать гиперссылкой, её нужно разметить тегом a:

Чтобы сообщить браузеру куда перенаправить пользователя, укажем информацию об этом в специальном атрибуте href (hyper reference – гиперссылка):

Самый простой способ задать ссылку, использовать так называемый якорь внутри страницы. Мы можем задать уникальный идентификатор любому тегу с помощью атрибута id , и потом сослаться на него из этого же документа добавив к идентификатору символ решетки # в начале. Браузер прокрутит страницу так, чтобы содержимого этого тега оказалась видно в окне. Это удобно для больших документов или для создания оглавлений. Для того чтобы ссылаться на другие документы, нам нужно изучить что такое URL.

Адрес, который содержат протокол и хост и может содержать дополнительно путь и якорь, называется абсолютным.

http://netology.ru/programs/html-css-base Адрес без указания протокала и хоста, является абсолютным относительно сервера. При переходе по такой ссылке будет использован протокол и хост открытой страницы: /programs/html-css-base Если эта ссылка на странице http://netology.ru/development/programs то при переходе мы попадем на страницу http://netology.ru/programs/html-css-base А если на странице http://www.ruscircus.ru/study/pc.shtml то при переходе мы попадем на страницу http://www.ruscircus.ru/programs/html-css-base Адрес без протокола, хоста и ведущего слеша / называется относительным. И при его расчете учитывается не только протокол и хост страницы но и ее адрес. Принцип тот же что и при перемещении по файлам и папка на компьютере: programs/html-css-base Если открыть на странице http://netology.ru/ то перейдем на страницу http://netology.ru/programs/html-css-base Если на странице http://netology.ru/development/programs то перейдем на страницу http://netology.ru/development/programs/html-css-base А если на странице http://netology.ru/development/programs/ то перейдем на страницу http://netology.ru/development/programs/programs/html-css-base Особый случай пути . и .. . — текущая папка .. — родительская папка

Добавим ссылку на курс в тексте

В тег a так же как и в теги q , strong и em нельзя вкладывать другие теги. Если вы хотите сделать заголовок ссылкой, вложите в него тег а

Для ссылки можно задать подсказку в атрибуте title , которая покажется при наведении указателя мыши на ссылку:

Для вставки картинки в документ используется тег img . Этот тег не имеет содержимого и закрывающего тега. Это так называемый одиночный тег. URL файла с изображением указывается в специальном атрибуте src :

После загрузки картинки браузер определит её размер в пикселях и отобразит в полный размер в указанном месте.

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

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

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

HTML: Теги для текста

В HTML есть теги для изменения внешнего вида текста, такие как <b> и <i>. Они используются для выделения текста полужирным шрифтом или курсивом, такие теги в HTML называются тегами для форматирования.

Форматирование текста

Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:

Тег <pre>

Тег <pre> позволяет выделить часть исходного текста, которая должна отобразиться браузером в первоначальном виде, то есть теми же символами и с тем же количеством пробелов и разрывов строк. Весь текст, заключенный между открывающим тегом <pre> и закрывающим </pre>, будет отображаться моноширинным шрифтом:

Теги для отображения кода

Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:

Тег <address>

Адрес является распространенным элементом многих HTML-документов, для выделения адреса на странице существует специальный тег <address>, отделяющий текст, заключенный в него, от всего остального содержимого.

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

Аббревиатуры

Пример демонстрирует, как можно написать аббревиатуру или сокращение:

Направление текста

Пример демонстрирует, как можно изменить направление текста:

Цитаты

В HTML есть два тега для выделения цитат в тексте — <q> и <blockquote>. Тег <q> является строчным элементом и предназначен для выделения коротких цитат непосредственно в тексте абзаца. Текст, размещенный внутри элемента <q>, по умолчанию большинством браузеров отображается в двойных кавычках.

В отличие от тега <q>, тег <blockquote> является блочным элементом, он предназначен для выделения длинных цитат, которые по объему больше похожи на целые абзацы. В большинстве браузеров текст элемента <blockquote> будет отображаться с небольшим отступом вправо и иметь разрывы строки до и после себя:

Удаленный и вставленный текст

Пример демонстрирует, как можно в документе пометить текст, который был удален (помечается как перечеркнутый) или вставлен (помечается как подчеркнутый):

Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.

Редактируем текст на своей странице..

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

В этой главе я расскажу о том, как изменить шрифт и его размер, как сделать текст жирным, курсивом, подчёркнутым и о том как его выравнивать по краям или центру документа.

Параграф.

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

Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> — собственно параграф.

Параграф имеет атрибут align «выравнивание» который в свою очередь может быть равен тому ли иному значению.

Рассмотрим на примерах:

С помощью параграфа можно расположить наш текст по центру:

<p align=»center»>Привет мир. </p>

По правому краю:

<p align=»right»>Привет мир. </p>

Или же обоим краям документа:

<p align=»justify»>Привет мир. — здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>

Давайте слегка изменим нашу первую страничку:

Так уже лучше, не правда ли?

Запомним некоторые вещи:

1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так:

Нельзя! — это нелогично, как может один параграф содержать в себе другой?

2) Так же, нельзя писать пустые теги без текста или других тегов.

<p> здесь, что-то обязательно должно быть. </p>

3) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо атрибут align=»left» для параграфа можно не указывать.

4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пишется так:

<div align=»center»>Привет мир. </div>
<div align=»left»>Привет мир. </div>
<div align=»right»>Привет мир. </div>
<div align=»justify»>Привет мир. </div>

Все то же самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p> по принципу:

А вообще тег <div> многофункциональный.. и по своей сути он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <div> , но об остальных возможностях данного тега мы поговорим позже..

5) Еще одним способом выравнивания текста по центру является использование тега <center> любое содержание взятое в данный тег выравнивается по центру экрана. Пишется так:

<center>Привет мир. </center>

Заголовки

В наборе тегов html языка имеется шесть типов заголовков:

<h1> Привет мир. </h1>

<h2> Привет мир. </h2>

<h3> Привет мир. </h3>

<h4> Привет мир. </h4>

<h5> Привет мир. </h5>

<h6> Привет мир. </h6>

Думаю с этим понятно.. <hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести). Помните, что после использования того или иного заголовка происходит перенос строки — на то он и заголовок.

Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст?

Знакомимся тег <font> в переводе на русский — «шрифт».

Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size — размер.

Пишется и выглядит это так:

<font size=»+4″> Привет мир. </font>
<font size=»+2″> Привет мир. </font>
<font size=»+0″> Привет мир. </font>
<font size=»-1″> Привет мир. </font>
<font size=»-2″> Привет мир. </font>

Добавим эти теги на нашу страницу.

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

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

В html языке используется своя палитра красок. Вот основные цвета, выглядят они так:

Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB — например #008000 — зелёный цвет, либо используя константы цвета — green (для тех кто учил французский, green -зелёный.)

Краски есть, давайте рисовать!

Мы уже знакомы с тегом <font> у него есть еще один атрибут — color.

Так вот, если к примеру написать так:

<font color=»#ff0000″>Привет мир. </font> — То цвет шрифта станет красным. Попробуйте..

<font color=»red»>Привет мир. </font> — Будет тоже самое..

Но советую писать всё же шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых, поговаривают, что не все браузеры знают названия тех или иных красок…

Есть еще один способ изменить цвет текста. Тег <body></body> «тело» — имеет атрибут text — «текст» если присудить этому атрибуту любой цвет из доступной палитры то весь текст в нашей странице окрасится, кроме тех мест, где мы «принудительно» указали другой цвет.

В строчке где стоит открывающий тег <body> пишем так:

<body text=»#ff8c40 «>

Теперь весь текст у нас стал оранжевым кроме заголовка «Привет мир. » который мы отдельно перекрасили в красный.

А вот атрибут тега <body> bgcolor и его значение задает цвет фона страницы

<body bgcolor=»#40caff»> — залили всё голубым..

Раскрасьте свою страницу на свой лад.. пробуйте, экспериментируйте!

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

На данный момент у меня получилось вот так: .. а у Вас?

Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text=»#ff207b» bgcolor=»#1a77f0″> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками..

Стиль текста

Здесь все достаточно просто..

Итак, новые теги:

<b> </b>	— Полужирный текст
<i> </i>	— Наклонный текст
<u> </u>	— Подчеркнутый текст
<strike> </strike>	— ~~Перечеркнутый~~
<s> </s>	— ~~Перечеркнутый~~ (второй вариант, от первого ничем не отличается)
<tt> </tt>	— `моноширинный шрифт`
<small> </small>	— Малый
<big> </big>	— Большой
<sup> </sup>	— Верхний индекс
<sub> </sub>	— Нижний _индекс

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

Вот пример на всякий случай…

Шрифт

Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face — лицо то бишь..

<font face=»arial»> Эта строчка будет написана с помощью шрифта Arial </font>

Здесь необходимо отметить, что браузер использует библиотеку шрифтов, установленную на компьютере пользователя, и если вдруг указанного Вами шрифта в этой библиотеке не окажется, то он заменит его на тот который присутствует. Следовательно, чтобы не ударить face(ом) в грязь, не стоит указывать какие-то «экзотические» нестандартные шрифты, так как супер модный шрифт на компьютере Вашего друга сильно рискует превратиться в обыкновенный.

Предварительно отформатированный текст.

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

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

Однако такая политика браузеров, в ряде случаев, не всегда оправданна.. Как например, написать стихи? Нет можно конечно после каждой строчки писать тег <br> , но есть вариант куда проще..

Знакомимся тег <pre> , текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк

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

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

Расскажу про основные плюсы использования подобного редактора.

Как правило, html редакторы имеют два окна, в одном Вы пишите код, а во втором сразу видите результат написанного! То есть теперь Вам не придётся постоянно сохранять текущий результат, чтобы открыть его браузером и оценить написанное.
Как правило, они содержат в себе стандартные наборы шаблонов кода, в который Вы просто подставляете свою информацию, избавляя себя от прописывания тегов.
Ну и «общие» удобства — сохранить, открыть, редактировать сразу несколько страниц сайта перелистывая их… много короче разных полезных штук.. одна подсветка синтаксиса чего стоит!

P.S. Однако, дальше буду писать эту книгу подразумевая, что Вы тренируетесь в стандартном блокноте… иначе мы друг друга не поймём.

Немного об этике и здоровье глаз..

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