Перед началом изучения html, вы должны определить для себя, что это такое и зачем вообще нужно. Эти вопросы мы постарались раскрыть в вводной статье. Сейчас же перейдем к сути.
Итак, язык html состоит главным образом из тегов и атрибутов, которые их дополняют.
Структура тегов, парные и одиночные
Каждый тег заключен в специальные скобки. «<» — указывает системе, что начинается какой-то тег, а «>» — что он закончился. Например, «<h1>» или «<head>».
Для начинающих изучать основы html обозначим, что эти угольные скобки («<>») обязательны, и если их не закрыть правильным образом, данные будут отображаться некорректно. Следите за этим.
Но намного ошибки допускают, когда «не закрывают» тег.
Всё в дело в том, что теги делятся на два вида:
- парные — они состоят из двух тегов, первый из которых открывает область, а второй закрывает. При этом, последний еще имеет дополнение в написании — символ «/». Например, «<head> … </head>».. Совокупность открывающего и закрывающего тегов, а также содержимого между ними, еще называют элементом, если по нашему примеру — элемент head.
- одиночные — они не имеют закрывающей пары и влияют непосредственно на следующие после них символы или что-либо вставляют. Например, «<hr> — вставляет горизонтальную черту через всю страницу.
Как всё происходит?
Чтобы весь текст на интернет странице не шел сплошным текстом, без каких-либо отступов, абзацев, заголовков — его необходимо разбить соответствующими тегами.
Так, если нужно написать заголовок статьи — его выделяют парным тегом <h1>. То есть, пишем <h1> заголовок </h1>.
Чтобы разбить тексты на абзацы, используют тег <p>, но не забываем его закрывать.
Зачем нужны атрибуты в html
Мы уже писали, что такое атрибут, но напомним для начинающих изучать основы html («повторение мать учения»):
атрибут — это дополнительное информация, уточнение действия тега.
С его применением, строка кода выглядит примерно так:
<тег атрибут=»значение атрибута»>.
Например, если вы хотите задать цвет абзаца (возьмем красный), нужно использовать
<p style=»color: red»>.
Ознакомиться со всеми возможными атрибутами очень сложно — уж очень их много, поэтому изучайте по мере надобности, а также по возможности, старайтесь записывать наиболее нужные для вас. Со временем они запомнятся и в этом отпадет надобность, но для новичков — только так.
Помимо задания дополнительных параметров и различных условий, атрибуты также используют, чтобы обозначать определенные участки кода, чтобы потом их внешний вид можно было изменить с помощью CSS. Об этом читайте в отдельных статьях.
Структура html страницы
Надеемся, что вы примерно поняли, для чего нужны теги и их атрибуты. В дальнейшем, по мере знакомства с штмл кодом и изучением наших уроков, вы сможете на практике всё это увидеть.
Структура html страницы для начинающего может показаться очень уж сложной и запутанной.
Чтобы увидеть её для любой страницы нажмите правой кнопкой мыши на любом участке страницы и выберете пункт «Посмотреть код страницы» (Google Chrome) или «Исходный код» (Opera).
Но, на самом деле, все они имеют абсолютно идентичную базу.
Если сильно-сильно упростить, структура html страницы выглядит так:
Вот, буквально за минуту в бесплатном редакторе кода notepad++ мы набросали простейшую интернет-страницу.
Разберем её элементы
- <!DOCTYPE html> — этим тегом начинается абсолютно любой документ html формата, который и указывает именно на свой формат.
- <html> — далее будут использоваться символы присущие этому формату.
- <head> — с англ. «голова» — задаются параметры всей страницы, её верхушка, но само содержимое будет дальше;
- <title> — не обязательный тег, он задает название страницы, которое видно в самом верху открытого браузера или, если её добавить в закладки;
- <body> — «тело» страницы. Вот здесь и находится главное содержимое страницы, её суть.
Тег <p> мы уже рассматривали (задает абзацы).
Главное при написание кода страницы html для новичков — это не совершать ошибки и очень тщательно следить, чтобы нужные теги были закрыты.
На этом заканчивается наш первый урок. Следите за обновлениями, скоро будет следующий.
Привет! Тем не менее, всем настоятельно рекомендую пройти уроки с самого начала. Повторение ранее изученного принесет только пользу.