Основы HTML5. Мои курсы в Санкт-Петербурге

Я с октября начинаю вести обновлённый курс по HTML5 и CSS3 в Санкт-Петербурге. Обучаю я индивидуально и в группе.

Технологии ВЕБ разработки развиваются удивительными темпами и вам, новичкам, нужно «не отставать от паровоза». Если вы решили стать ВЕБ разработчиком — для вас билет на этот поезд.

Это первый пост из рубрики «Новичку». В нём я начну давать основы HTML  максимально понятно и наглядно.

Основы HTML

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») простой набор правил, которые воспринимает браузер. Согласно им, он выводит на странице нужным образом текст, картинки, флеш, видео и звук. Сам HTML чрезвычайно прост, т.к. в его основе лежит ограниченный набор специальных текстовых знаков — тэгов.

Тег — специальная пометка, которая говорит браузеру — «выведи в этом месте страницы вот этот элемент», например — абзац текста. Набор тегов собственно и составляет HTML — документ.

Признак тэга — угловые скобки — <…какой-то тэг>

HTML — документ

Любой HTML документ — это файл в текстовом формате. Создать его можно и в примитивном текстовом редакторе (типа «Блокнот»). Другое дело, что существуют более продуктивные способы создания этих файлов. Я часто использую Adobe Dreamweaver и продвинутый текстовый редактор Notepad++

Каждый HTML файл имеет определённую структуру.

Структура документа

Начинается документ специальной служебной областью, в которой расположены невидимые человеку правила — указания для браузера. В самом начале документа идёт так называемый Doctype — это указание браузеру — какую версию HTML он использует.

Doctype
«Объявление» Doctype и начало HTML документа

Потом только идёт тег <HTML>.  Большая часть тегов обязательно должна иметь закрывающий тег — со знаком / («слеш») перед текстом тега.

В итоге, теги составляют пары из открывающего тега <HTML> и закрывающего — </HTML>. Внутри них могут быть другие теги, поэтому такие пары ещё называют — «тег — контейнер«.

Существуют и «одинокие» или непарные теги, но закрывающий слеш они содержат в самих себе. Пример — тег разрыва строки <br /> и тег горизонтальной линии  <hr />

Теги HEAD и BODY

«Голова и Тело» — так нагляднее всего представить структуру HTML — документа. В теге <HEAD> находятся другие теги, которые содержат служебную информацию для браузера. Большая часть её не видна посетителю (за исключением содержимого тега <TITLE>).

Сразу за «головой» идёт «тело» — тег <BODY>. В нём, как в контейнере и содержаться все остальные теги и контент, составляющий ВЕБ — страницу.

Структура HTML документа
Структура HTML документа

Как в «русской матрёшке» — внутри тега <HTML> мирно соседствуют <HEAD> и <BODY>. В свою очередь, в них есть матрёшки поменьше. Так в <HEAD> есть тег-контейнер <TITLE>

Тег TITLE

<TITLE> — буквально — «заголовок» документа. Он должен содержать текст, кратко и ёмко описывающий — о чём этот HTML-документ.

Тег TITLE
Тег TITLE

Содержание заголовка видно в заголовке окна браузера. Этот текст предлагается и как название закладки (в браузере нажать Ctrl+D).

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

Содержание  title видно в заголовке окна браузера
Содержание title видно в заголовке окна браузера

Оформление документа. Абзацы. Тег P

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

тег P отступ абзацев
тег P и отступ абзацев

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

Заголовки в HTML. Теги H1, H2…

Любой текст желательно логично структурировать. Принято снабжать тест заголовком — часто это название статьи.

Относительно большие статьи нужно снабжать подзаголовками (их называют — «заголовок второго уровня») и «под-под заголовками» («Заголовок третьего уровня»).

Самый большой (верхний) уровень заголовков задает тэг <H1>. Далее идут <H2>, <H3>,.. до <H6>.

Заголовки в HTML
Заголовки в HTML

На практике, больше первых трёх уровней заголовков (<H1>,<H2>, <H3>) очень редко используют.

Рекомендую внутри тега заголовка, ничего, кроме текста не использовать. Хотя стандарты не запрещают, например, помещать туда сылку или картинку (эти другие теги мы изучим позже) — поисковые машины сочтут это как «тут лажовая не профессиональная верстка». A сама фраза в теге <H1> должна составляться с учетом  семантического ядра сайта, т.е. того набора ключевых фраз, по которым вашу страницу будут находить в поисковых системах.

Да, и не нужно использовать заголовки, если вам нужно только увеличить размер текста 🙂 , для этой цели нужно использовать CSS. Теги <H1> и другие нужны только для логического структурирования текста статьи.

Продолжение темы…

В следующем посте рубрики, мы продолжим изучать основы HTML. Я буду писать о тегах для форматирования текста и создания списков. Постараюсь делать выпуски не реже раза в неделю.

Поделиться этим:

Добавить комментарий

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