HTML уроки: Введение, заголовки, гиперссылки, форматирование
HTML введение
Что такое HTML?
- HTML – это сокращение от HyperText Markup Language – в вольном переводе “язык разметки гипертекста”.
- HTML является наиболее широко используемым языком для написания веб-страниц.
- HTML использует теги (метки) для маркировки определенных элементов веб-страниц, таких как заголовки, абзацы, списки, гиперссылки и т.д.
HTML-теги
- HTML теги – это команды, которые оборачиваются знаками “<” и “>”, например: <p>
- HTML теги часто образуют пару открывающих и закрывающих тегов, например, пара тегов абзаца: <p> и </ p>. Текст, вставленный между <p> и < p>, будет представлен на веб-сайте одним абзацем.
HTML-документы
- HTML-документы описывают веб-страницы.
- HTML-документы, также называемые веб-страницами, содержат теги и простой текст
- HTML-документы по сути являются текстовыми файлами и могут создаваться и редактироваться с помощью простого текстового редактора, такого как Блокнот. Подробнее о текстовых редакторах, используемых при создании документов HTML, вы можете прочитать в статье «Текстовые редакторы».
- Такие браузеры, как Internet Explorer, Firefox и Google Chrome, читают документы HTML и отображают их в виде веб-страниц. Они не отображают HTML-теги, но используют их для интерпретации содержимого страницы.
- HTML-документы сохраняются в формате .htm или .html. Нет разницы в работе между .htm и .html – расширение .htm относится к тому времени, когда расширения файлов были длиной всего три символа.
Вот один простой пример:
HTML код |
Будет выглядеть в браузере: |
|
|
Интересное НазваниеИнтересный текст |
В этом примере используются следующие теги:
- <html> и </ html> указывают начало и конец веб-страницы.
- <body> и </ body> определяют видимую часть документа, которая будет отображаться на экране.
- <h1> и </ h1> окружают текст, который будет отображаться в качестве заголовка.
- <p> и </ p> окружают текст, который будет отображаться в виде абзаца.
Что нужно для создания веб-страницы?
Все, что вам нужно, это текстовый редактор для создания HTML-документа и браузер, чтобы увидеть, как он выглядит на экране. Вам не нужно арендовать сервер, сохранять доменное имя или создать веб-сайт. Учебные примеры, включенные в это учебное пособие, даже не требуют текстового редактора – вы можете редактировать примеры прямо в окне браузера.
HTML – заголовки и абзацы
Заголовки
Если вы хотите выделить текст в качестве заголовка, вы должны его обернуть следующими тэгами: непосредственно перед началом заголовка поставить<h1> , а после окончания</h1>:
<h1>Основной заголовок</h1>
Это выведет основной заголовок:
Основной заголовок
Если вы хотите выводить подзаголовки, используйте <h2>, <h3> и т.д. до <h6> – с увеличением цифры после h в <h_> размер заголовка уменьшается. Вы можете выбрать между 6 размеров текста, но на практике используют <h1>, <h2> и <h3>. Вот как будут выглядеть заголовки в браузере:
Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Абзацы
Абзацы заключены в теги <p> и </ p>:
<p> Абзац </p>
Не забудьте поставить закрывающий тег </ p> после конца абзаца. В HTML допускается пропуск закрывающегося тега, но в более новых версиях, таких как ХHTML, правило должно строго соблюдаться. Хорошая идея – разработать правильные привычки написания кода с самого начала.
Каждый новый абзац отображается в новой строке, но вы можете разбить строку посередине и поместить остальную часть текста в новую строку, не прерывая абзац с помощью тега <br/>. <br/> не имеет закрывающего тега, но вместо этого содержит закрывающий тег “/”.
Как указать цвет, шрифт, размер текста и т. д. описано в статье о стилях HTML.
HTML гиперссылки
Как установить ссылки на сайт
Ссылки (гиперссылки или дополнительные ссылки) на веб-страницы устанавливаются с помощью пары тегов <a> и </a> – для начала и конца соответственно. Вот пример гиперссылки на нашу главную страницу:
<a href=”https://ravechnost.ru/”> Веб-студия Вечность</a>
Гиперссылка будет выглядеть так:
Адрес страницы, на которую ведет ссылка, задается в качестве атрибута тега <a> с фразой href= и заключением в кавычки. Текст, который будет отображаться на экране, находится между <a> и </a>. Как видите, гиперссылка (https://ravechnost.ru/) и ее текст (Веб-студия Вечность) могут не иметь ничего общего друг с другом.
“Атрибут” является широко используемым понятием в HTML и означает дополнительную информацию об элементе (теге). Каждый тег имеет определенный набор атрибутов, которые могут принимать определенные значения. В этом случае, атрибут href тега <a> предоставляет дополнительную информацию, такую как URL-адрес веб-сайта, на который ссылается ссылка.
Гиперссылки на раздел страницы
С помощью гиперссылок вы можете указывать не только на отдельную страницу, но более конкретно на ее раздел. Для этого один из элементов (например, заголовок) должен получить атрибут, называемый идентификатором, т.е. имя. Идентификаторы обозначаются как id = “name”, и любое слово может быть вместо “name”. Например, эта страница имеет идентификатор с именем «top» для заголовка:
<h1 id = “top”> Ссылка (гиперссылка) </ h1>
Используя идентификатор top, вы можете создать гиперссылку на заголовок этой страницы:
<a href=”#top”> Главная страница </a>
будет отображаться следующая ссылка: Главная страница. Обратите внимание на символ #, который предшествует имени идентификатора в адресе гиперссылки.
Идентификаторы также можно использовать в адресах других страниц. Например
<a href=”https://ravechnost.ru/html-uroki#abzac”> Абзац </a>
является ссылкой на подзаголовок Абзацы HTML-страницы – заголовки и абзацы.
Открытие страницы в новом окне
Иногда желательно, чтобы страницы, ссылающиеся на гиперссылки, открывались в новом окне браузера. Это тот случай, когда ссылки ведут на внешние по отношению к вашему сайту страницы – пользователи могут не вернуться на ваш сайт после того, как покинули его. Чтобы сохранить присутствие на экране, откройте внешние ссылки в новом окне, указав целевой атрибут со значением «_blank» для гиперссылки:
<a href=”https://ravechnost.ru/” target=”_blank”> Веб-студия Вечность</a>
Эта ссылка откроется в новом окне: Веб-студия Вечность
Форматирование текста в HTML
Здесь мы рассмотрим, как форматировать текст в HTML: изменение толщины шрифта, направления, наклона и размера текста, выделение текста, как вставить, удалить или, выделить как цитату, и многое другое. Наглядным примером тому служат сами названия отдельных видов форматов.
- Жирный текст
Устанавливается парой тегов <b> и </b> . Тот же самый эффект имеет и использование <strong> и </strong>:
<b>Жирный</b> текст
<strong>Жирный</strong> текст
- Курсивный текст
Устанавливается тегами <i> и </i>. Альтернативно, можно использовать теги <em> и </em>:
<i>Курсивный</i> текст
<em>Курсивный</em> текст.
- Подчеркнутый текст
Может быть установлен тегами <u> и </u>:
<u>Подчеркнутый</u> текст
Теперь, однако использование <u> и </u> не рекомендуется. Вместо этого, используйте стили.
- Увеличенный текст
Вы можете выделить определенный текст, как выше, тегами <big> и </big>:
<big>Увеличенный</big> текст
- Уменьшенный текст
Если вы заключите фразу тегами <small> и </small>, эта фраза будет отображаться меньшего размера, чем остальной текст:
<small>Уменьшенный</small> текст
- Верхний индекс
Обозначается тегами <sup> и </sup>:
<sup>Верхний</sup> индекс.
- Нижний индекс
В свою очередь нижний индекс устанавливается тегами <sub> и </sub>:
<sub>Нижний</sub>индекс
- Вводный текст
Чтобы выделить определенный текст, поставьте перед ним и после него теги <ins> и </ins>:
<ins>Вводный</ins> текст
Обратите внимание, что браузер будет представлять подобный текст, как подчеркнутый.
Перечеркнутыйтекст
Если вы хотите подчеркнуть, что данный текст был удален (очень распространенный способ для акции, чтобы сосредоточиться на том, насколько высокой является старая цена), используйте <del> и </del>:<del>Перечеркнутый</del> текст
Цитируемый
текст
Короткие цитаты оборачивайте в <q> и </q>:
<q>Цитируемый</q> текст
Обратите внимание, что использование тегов <q> и </ q> просто заключает в кавычки текст с кавычками. Если вы хотите выделить большую цитату, используйте теги <blockquote> и </ blockquote>
- Изменение направления текста
Вряд ли вам придется использовать подобное форматирование, только если вы пишете текст на иврите или арабском, но на всякий случай вот как определяет направление текста справа-налево:
Смена <bdo dir=”rtl”>направления</bdo> текста.
Читайте далее: HTML уроки продолжение
