Вы здесь

Как работать с HTML5, или Разбираемся с атрибутами

Опубликовано: ср, 29/06/2016 - 01:47
HTML5

Большинство веб-мастеров просто пугаются страниц, которые состоят из неизвестных скобок и английских слов, но поверьте, со временем вы будете понимать каждую страницу и понимать каждый тег. Главное - разбирать все медленно и по частям. Для того, чтобы создавать странички, вовсе не обязательно сразу брать дорогостоящий VPS сервер - их можно просмотреть и на локальном компьютере.

Все вы, наверное, знаете про несколько базовых тегов: body, head, html, meta charset, которые закладывают фундамент в каждую страницу. Но если бы использовались только основные элементы, мы бы с вами не видели того разнообразия дизайнов, оформления материалов и богатства содержимого, которое наблюдаем сейчас. Именно за разнообразие и внесение дополнительного файлового контента отвечают всеми нами любимые атрибуты.

К примеру, если вы хотите отправить пользователя на другой сайт или страницу, вам придется воспользоваться одним из них, а именно:

<a href="index-2.html"> бальзам </a>

Если вы хотите вставить картинку, то нужно сделать следующее:

<img src="pogoda.png">

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

Из приведенных выше атрибутов вы можете увидеть следующие общее черты – это <само слово=" "> в данном случае слово – это ключ, а и знак присваивания – это знак "=", то есть, в большинстве случаев атрибуты идут в парном значении. Есть, конечно, и исключение из правил – это <br>, <hr> - они состоят только из этих частей и выполняют назначение изменения вида изложенного материала.

Чтобы просмотреть удивительные свойства атрибутов, попробуйте создать документ на основе базовых составных частей HTML5. Если вы забыли их, то напоминаю, что они выглядят следующим образом:

<!DOCTYPE html>
<html>
<head>
<meta charset="ANSI">
</head>
<body>
<h1> Что говорят синоптики о погоде </h1>
<a href ="weather.html" img src="laboum.png"> погода на завтра </a>
<p img src="wind.gif"> Сегодня ожидается сильный ветер 10 метров в секунду с небольшим дождем, будьте осторожны и по возможности оставайтесь дома </p>
<a href="hobby.html"> чем заняться при непогоде </a>
<p> Настоящая весенняя погода наступит в середине апреля, ждем </p>
</body>
</html>

Попробуйте ввести то же самое и посмотрите, как этот документ конвертирует ваш браузер. Как видно из примера в один элемент, мы внесли сразу же и картинку, и ссылку.