Вот один простой пример:
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.
Ссылки (гиперссылки или дополнительные ссылки) на веб-страницы устанавливаются с помощью пары тегов <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: изменение толщины шрифта, направления, наклона и размера текста, выделение текста, как вставить, удалить или, выделить как цитату, и многое другое. Наглядным примером тому служат сами названия отдельных видов форматов.
Устанавливается парой тегов <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 уроки продолжение