Урок 4. Родственные связи в HTML

Снова привет! Сегодня мы не будем учить новые теги, но я покажу кое-что очень важное, без чего вы далее просто не сможете верстать. Дело в том, что пока мы делаем простенькие задания, вам трудно наделать глупости, и легко разобраться в написанном коде. Но скоро мы начнем делать задания всё тяжелее и тяжелее, и если вы не научитесь писать “чистый код”, вам будет очень трудно!
Начнем с редактора. Я надеюсь вы используете не блокнот, а Sublime Text или Notepad++ как я вас просил в предыдущем уроке. Если нет, то скачайте и установите!
Дальше отступи тегов. В тегов есть своя иерархия, которую я сейчас объясню. Есть теги “родители”, “дети”,”внуки”… как и в повседневной жизни в общем :)
Посмотрите на данный кусок кода, в нём я напишу пример родственных связей, и покажу как пишется “чистый код”.

<!doctype html>
<html>
<head>
	<title>Список покупок на завтра!</title>
	<meta charset="utf-8" />
</head>
<body>
	<h1>Не забыть купить!!!</h1>
	<ol>
	   	<li>колбаса</li>
	   	<li>сыр</li>
	   	<li>хлеб</li>
	   	<li>кетчуп</li>
	   	<li>майонез</li>
	</ol>
</body>
</html>

В данном примере обратите внимание на отступы. Начнем с первого отступа, это отступ тега title. Данный тег (открывающий и закрывающий) “окружен” тегами head. Он внутри данных тегов, значит он сын тега head. Также на одном уровне с тегом title, находится тег meta, который тоже окружен тегами head, и соответственно тоже является его сыном.
Рассмотрим тег h1. Как вы уже догадались, он сын тега body, потому что он внутри данного тега. Тег ol тоже сын тега body.
Обратите внимание! У тега ol тоже есть сын, им является тег li, который в свою очередь внук тега body.
Теги h1 и ol равны в родственных связях с тегом body. Потому отступ у них одинаковый, а вот тег li – еще смещен вправо, так как “моложе” предыдущих.
Таким образом строятся родственные связи в HTML. Я надеюсь что доступно объяснил и теперь ваш код будет выглядеть красиво. Также вам будет легче разобраться если где то будет допущена ошибка. Ну а когда мы перейдем к изучению CSS, вопросов “почему нужно понимать родственные связи?” больше не будет :)
Кстати, я не всегда так буду писать (с отступами), потому что если я буду ставить все отступы на учебном коде, то он не будет влезать на страницу по ширине и будет не красиво. Так что извините если что! Но вам советую писать только со всеми отступами!!!
До следующего урока!

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>