HTML-старт для детей. Head — это гальюн!

Когда вы прошли первый урок, то скачали к себе папку с начальным сайтом.

Давайте теперь опять откроем нашу папку, запустим файл index.html через программу Notepad++, и посмотрим на него внимательнее.

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

В HTML закрываются не только скобки, но и сами теги, то есть теги — это тоже такие большие скобки. Например:

<p>Hello, world!</p>

<p> — открывающий тег, а </p> — закрывающий. Он отличается от открывающего дополнительной косой палочкой, которая называется slash [слэш] — слэш. Также зовут знаменитого рок-музыканта из группы Guns&Roses:

slash
Slash

Если взглянуть теперь на весь файл целиком, то видно, что он весь как матрешка — состоит из вложенных друг в друга тегов, где самый первый открывающий — он же самый последний закрывающий.

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

6 7

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

Лесенкой — значит, что вложенный блок отстоит вправо от внешнего, например:

8

Чтобы добится такого эффекта, после перехода на следующую строку нужно нажать клавишу Tab на клавиатуре (справа напротив буквы Q).

Теперь разберем те несколько тегов, которые уже есть в нашем файле.

<!doctype html>

doctype расшифровывается как Document Type [докьюмэнт тайп]. Ну докьюмент и так понятно — документ. А тайп — это тип. То есть мы говорим: «Тип документа — HTML».

Кстати, type — это еще и печатать, даже по звуку похоже — тайп-тайп-тайп:

hacker-goldfinger-3d-animated-gif-at-hacker-informer-artful-3d-gif-animator-gif-animator-ddd-ulead-gif-animator-websites-blogs-photo-graphics-clipart-the-attention-computer-program-free-download

Что такое HTML?

Hyper Text Markup Language [Хайпер Текст Маркап Лангуадж]

Hyper — это гипер, в смысле — супер-дупер.

Text — ну это и есть текст

Markup — это разметка, то есть разметка страницы. Это то, что мы делаем — мы размечаем страницу, чтобы изменить вид текста в документе.

Language — это язык, как English language например.

 

<html></html>

Это мы открыли и закрыли весь html-документ.

<head>…</head>

Head переводится как голова [хэд]. Между прочим, по-английский также называется и корабельный туалет (по-русски гальюн). Как можно было туалет назвать головой?!? Оказалось, что раньше туалеты устраивали на носу корабля, там, где обычно располагали снаружи голову или фигуру какой-нибудь русалки или чудовища. И ты вроде как шел в туалет «к голове» корабля.

c11121437bc33ba5f155b427579e1efc

<pirate>

Каррамба!

</pirate>

 

<body>…</body> — боди — это тело. Раньше женщины даже носили такую одужду — боди. В 90-е годы все просто с ума сошли от этой моды:

body

Итак, мы получили хтмл-документ, внутри которого 2 основные части — голова и тело. Практически, как человек!

И последнее на сегодня, что вам нужно знать — это тег <p>…</p>

Это сокращенно от paragraph [параграф]! Вот насколько английский язык похож на русский, и как легко запомнить, что означает этот тег. Он разбивает большой текст на параграфы.