Изучаем HTML теги и атрибуты. Учимся работать с текстом, списками и изображениями в HTML

Опубликовано: 06.09.2018

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

HTML для начинающих - #2 - Теги и атрибуты

Итак, первым делом, прежде чем приступить к дальнейшему изучению основ HTML, давайте узнаем, что такое теги и атрибуты в HTML. Тема тегов уже затрагивалась в статье « Основы HTML. Как создать HTML страницу », поэтому начнем сразу с атрибутов.

Атрибуты в HTML — это так называемые свойства, которые сообщают браузеру дополнительную информацию о том, как нужно отображать тот или иной элемент на странице. При помощи атрибутов, например, можно задать выравнивание тексту, шрифт, цвет и т.д. Одним словом атрибуты являются неотъемлемыми элементами языка гипертекстовой разметки HTML.

HTML для начинающих - #7 - Атрибуты.Часть 1

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

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

<p>Текст или другой код внутри абзацев</p>

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

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

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

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

<p style="font-size: 12px; text-align: center;">Произвольный текст</p>

Теперь текст будет написан шрифтом размером 12 пикселей и будет выровнен по центру. Аналогичным образом элементам в HTML можно придавать и другие свойства, например, выделить текст жирным шрифтом.

<p style="font-weight: bold;">Произвольный текст</p>

При этом текст примет полужирное начертание без применения каких-либо других тегов. Если же вам нужно выделить отдельные слова жирным шрифтом или курсивом, то для этих целей существуют другие теги, такие как <strong> и <em>. Для этого достаточно просто в нужном месте выделить слова этими тегами.

<strong>Слово выделенное жирным шрифтом</strong> <em>Слово выделенное курсивом</em>

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

Заголовки в HTML. Заголовки H1 – H6

Во всех статьях независимо от их объема существует необходимость создания заголовков. Заголовки играют важную роль в оптимизации страниц под поисковые системы, поэтому их использование обязательно на каждом сайте. В HTML для создания заголовков существуют специальные теги. Всего их шесть. Для заголовков первого уровня – H1, для второго – H2, для третьего – H3 и т.д. до заголовка шестого уровня H6. При этом желательно чтобы заголовок каждого уровня встречался не более одного раза на странице. Особенно это касается заголовка первого уровня H1.

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

<h1>Заголовок первого уровня</h1>

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

<h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3>

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

Работа со списками в HTML

Язык гипертекстовой разметки HTML позволяет создавать как маркированные, так и нумерованные списки. Для этих целей существуют специальные теги списков. Для начала давайте рассмотрим процесс создания маркированных списков, а затем приступим к рассмотрению нумерованных списков.

Маркированные списки в HTML

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

<ul type="circle">  <li>элемент 1</li> <li>элемент 2</li> <li type="disc">элемент 3</li>  <li type="square">элемент 4</li>  </ul>

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

Нумерованные списки в HTML

Нумерованные списки в HTML создаются аналогичным образом с единственным отличием, что в них вместо тега <UL> применяется тег <OL>, который сообщает браузеру, что данный список является нумерованным. В качестве нумерации данного вида списков HTML могут использоваться как цифры, так и буквы.

Нумерованные списки могут иметь следующие атрибуты.

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

Пример списка с обычной числовой нумерацией.

<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>

Пример списка с буквенной нумерацией.

<ol type="A">  <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>

Пример списка с произвольной числовой нумерацией.

<ol start="5">  <li>элемент 1</li> <li value="9">элемент 2</li>  <li>элемент 3</li> </ol>

Вышеприведенные списки будут выглядеть в браузере следующим образом.

Теперь давайте перейдем к завершающей части статьи и рассмотрим основы работы с изображениями в HTML.

Работа с изображениями в HTML

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

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

Где

Height – высота изображения. Width – ширина изображения. Class – класс CSS задающий свойства для изображения. Title – заголовок, который отображается при наведении курсора на изображение. Alt – описание для изображения. Используется поисковыми системами при поиске картинок. Src – путь к изображению.

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

Теперь наше изображение стало ссылкой и при нажатии на него пользователь перейдет на сайт http://dmitriydenisov.com .

На этом, пожалуй, статья подошла к концу. Если у вас остались какие-то вопросы по данной статье, вы всегда можете задать их в комментариях к статье.

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

На этом все. Удачи вам и до скорых встреч на страницах блога dmitriydenisov.com

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter