Coding-space.ru
menu

Полезные теги

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

Вставка изображения, тег <img>

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

<img>

Мы ничего не увидем - потому что откуда HTML документ может знать что какое именно изображение мы хотим вывести? - и здесь на помощь приходят атрибуты!
Чтобы вывести изображение на помощь приходит атрибут src со своим значением "путь к изображению"

"путь к изображению" может быть:
1) относительный (прописывается из нашей папки с HTML документом)
2) абсолютный (ссылка с какого-нибудь сайта)

Давайте используем относительный путь и добавим картинку с названием smile.jpg на наш сайт:

<img src="smile.jpg">

Результат:

smile image

Отлично! Мы научились добавлять изображение! Но что если по каким-то причинам изображение не добавилось? - тогда у нас вместо изображения должно быть написано описание этой картинки. В этом нам поможет атрибут alt.
Давайте "случайно" сделаем ошибку в названии изображения и добавим атрибут alt:

<img src="smoile.jpg" alt="smile image">

Результат:

alt atribute
Атрибут alt обязателен.

Атрибут размеров: width и height

Что если нам нужно увеличить или уменьшить размер изображения? - просто используем атрибут width и height

<img src="smile.jpg" width="100px" height="300px" alt="smile image">

Результат:

width/height atributes
P.S. Мы могли бы пропорционально уменьшить изображение, но для наглядности сделали так.

Атрибут задания рамки border

Часто для стилизации элементов используют рамку, в этом помогает атрибут border

<img src="smile.jpg" alt="smile image" border="2px">

Результат:

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

Тег ссылки <a>

Еще один представитель тегов, которые бесмысленны без атрибутов - ссылки. Это важный тег без которого не обходится ни один веб сайт.
Основная задача ссылки - перенаправить пользователя на другую страницу или в другое место документа.

Как сказано выше, ссылки не работают без атрибута. Этот атрибут - href - служит для указания адреса ссылки. Давайте попробуем!

<a href="http://coding-space.ru">Вперед к знаниям!</a>

Результат:

Вперед к знаниям!
Вы можете сделать любой элемент ссылкой на другой документ. Просто вставьте <img> в <a>

Атрибут target

В приведенном выше примере при нажатии на ссылку страница открывается в текущей вкладке. Чтобы произошло открытие в новой вкладке нам нужен атрибут target

<a href="http://coding-space.ru" target="_blank">Откроется в новой вкладке</a>

Результат:

Откроется в новой вкладке

Создание списков в HTML <ol> и <ul>

Давайте теперь познакомимся с тегом, позволяющим создавать списки. В HTML Вы можете создать нумерованный (с помощью тега <ol>) или ненумерованный список (<ul>).
Элементы списка можно создать при помощи тега <li>, причем не важно нумерованный или ненумерованный будет список.
Попробуем, запишите следующий код в свою HTML разметку:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<ol>
<li>Первый пункт нумерованного списка</li>
<li>Второй пункт</li>
</ol>
<ul>
<li>Первый пункт НЕнумерованного списка</li>
<li>Второй пункт</li>
</ul>
</body>
</html>

Результат:

ul ol lists

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

Задачи

Мой топ-3

Составьте свой топ-3 лучших сайтов на Ваше усмотрение, используя любой список. Сделайте так, что по нажатию на пункт списка можно было перейти на этот сайт.

Надеемся у Вас получилось! А вот и наш скромненький ТОП-3:

<html>
<head>
<title>Мой ТОП-3 лучших сайтов.</title>
</head>
<body>
<ol>
<li><a href="http://coding-space.ru/">coding-space.ru</a></li>
<li><a href="https://ru.wikipedia.org/">wikipedia.org</a></li>
<li><a href="https://www.youtube.com/">youtube.com</a></li>
</ol>
</body>
</html>

Помогайте другим!

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