Курс HTML (2 урок)

Курс HTML (2 урок)


Привет! Вот вы и сделали свою первую страничку, поздравляем! Наша следующая тема – теги, что это, для чего и как работает.

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

Любой тег, независимо от назначения и положения, пишется внутри угловых скобок < и >, которые открывают и закрывают тег.

К примеру:

<p>.

Парные теги

Теги делятся на 2 группы. К первой группе относятся парные, состоящие из двух составляющих, поэтому они так и называются. Эти составляющие называют открывающимися и закрывающимися тегами. Закрывающийся тег, в отличии от своей пары, имеет символ /, который стоит после <.

Например:

<p>Абзац</p>

Во второй группе тегов находятся одиночные. У них, в отличии от парных, нет второго закрывающего тега, что видно из их названия.

Одиночные HTML-теги

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

<br>, <hr>, <img>.

Пример:

Строка <br>
Следующая строка

Столкнувшись с записью тега <br/>, помните, что это немного устаревшая форма, в HTML 5 слэш не обязателен в использовании.

Атрибуты HTML-тегов

Также в работе с тегами используются атрибуты. В некоторых случаях их использование не так уж и важно, но может присутствовать, но есть также случаи, где они просто необходимы.
В качестве примера возьмем тег <img>, он необходим при вставке изображения на страницу. Для него обязателен атрибут src, благодаря которому мы указываем расположение вставляемой картинки. Без него браузер просто не сможет открыть изображение. Если же просто указать адрес картинки без атрибута, то она не отобразится на страничке.

Обычно теги и атрибуты в HTML имеют такой вид:

<имя-тега атрибут1="значение1" атрибут2="значение2" …>

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

<p class="text">...</p>
 
<a class="main-link" href="https://how2work.ru/">...</a>
 
<img class="logo" src="logo.jpg" width="200px">

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