«Создание сайтов»: 3 : УРОВЕНЬ 1 : ЯЗЫК HTML: ГРАММАТИКА, СИНТАКСИС и дюжина первых строк

От Музея: а мы продолжаем цикл лекций по основам создания сайтов — для гуманитариев и людей, не обладающих знаниями программистов. И наконец-то переходим к изучению HTML! Лекция Ани Амасовой снова во многом теоретическая, но увлекательная для любителей языков. Плюс небольшая практика в конце.

Текст: Аня Амасова
Иллюстрация: Андрей Коротаев

Вступление

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

Мы, гуманитарные люди, понимаем, что вообще-то любой текст и на любом языке является набором кодов для создания мира. Но фантастическая привлекательность именно гипертекстов заключается в том, что в отличие от художественной литературы или журналистики вам не надо ждать пятьдесят лет, десять лет и даже месяц, чтобы увидеть плоды своих трудов в реальности. Все, что вы пишете, созидается сразу, сейчас! В режиме он-лайн. Пусть и в виртуальности, но зато еще при вашей жизни (буквально сегодня) вы увидите результат! По-моему, это заводит.

Итак, вы зарегистрировали доменное имя сайта (лекция 1), вы осознали проект будущего первого сайта - отражения вашей жизни в виртуальной реальности (лекция 2), и получили выделенное место на сервере, где будет размещаться ваш сайт (обе лекции Level 1), и нам не остается ничего иного, как начать понимать простые принципы языка html и приступить к созданию первой — ГЛАВНОЙ — СТРАНИЦЫ.

HTML: правила грамматики

Несмотря на тома словарей и справочников языка — например, «Справочник по HTML» на сайте HTMLBOOK.RU, — как и в любом языке, для того, чтобы начать им пользоваться, совершенно не обязательно изучить весь словарь, — достаточно понимания правил грамматики и нескольких слов.

(Кроме того, доступность информации в современном мире так высока, что, понимая общие принципы, вы всегда сможете найти ответ на любой вопрос, стоит лишь правильно его задать: например, «html объединение ячеек в таблице».)

Язык состоит из набора «слов» — это коды html. Они позволяют отображать на сайте ваш контент, и делать это именно так, как этого хотите вы. Другое их назначение — позволить вам дать описание к странице-документу, которое будет использовано в интернет-пространстве.

Коды html — лексемы языка разметки гипертекста — называются ТЕГАМИ (а те, что важны лишь для Всемирной паутины — метатегами). Разнообразные дополнения и уточнения к ним — АТРИБУТАМИ тегов.

Если сравнивать с русским языком, то тег — это подлежащее, выраженное существительным:

p — ПАРАГРАФ, table — ТАБЛИЦА, img — ИЗОБРАЖЕНИЕ и т. д.

А атрибут — набор уточнений к нему, выраженных через существительное с последующим описанием свойств («значений» или «функций»), приставленных через знак «равно».

Например, запись на языке html:

table align="center" width="600"

в переводе на русский звучит так:

ТАБЛИЦА расположение="центр", ширина="600 пикселей"

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

Все теги (вместе с их атрибутами) при письме заключаются в угловые скобки:

<тег>
или
<тег атрибут1="свойство" атрибут2="свойство">

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

И 95% тегов имеют не только открывающий, но и закрывающий тег — повторение со знаком «/» после первой скобки, что означает «конец фрагмента, к которому применяется это описание». Между этими двумя тегами — открывающим и закрывающим — и размещается ваш контент. 

Впрочем, есть коды, которые логичным образом не требуют закрытия. Например, один из таких кодов:

br — РАЗРЫВ СТРОКИ (или «перевод каретки»)

, принудительно переносящий часть вашего текста на следующую строку. Так как никакого текста или элемента между открывающим и закрывающим кодом «РАЗРЫВ СТРОКИ» быть не может, то, следовательно, и закрывающего тега у него нет.

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

HTML: принцип записи

Иногда начинающих пугает вид страницы с html-кодом, где все теги начинаются с новой строки, теги внутри тегов — имеют отступы, теги третьего уровня — еще большие отступы, и закрывающие теги — стоят на отдельных строчках, вровень с открывающимся тегом. «А-а-а! Сколько клеточек надо отступать?» — спрашивают филологи-перфекционисты, считая такое расположение текста чем-то важным.

Общий вид (фрагмент) файла страницы сайта

Но нет. Для логической машины важна одна лишь последовательность. Вы пишете слева направо последовательность кодов, перемежая их с элементами своего контента, и для программы — а также для мира вашего сайта — в отбивках нет никакого смысла. Мир поймет ваше описание, даже если вы напишете весь текст одной строкой, или будете каждое слово писать с новой строки, или даже разделите все слова в произвольном порядке!

Единственный, кому это надо — это вы. Такое расположение (все эти новые строки и отбивки) имеет визуальное значение для самого создателя. Благодаря отбивкам вы можете отследить: а не забыли ли вы закрыть тег? А где у вас начинается место, куда вы хотите внести исправления? и т.д. — то есть это значительно облегчает вашу навигацию по документу. И только. Единственное, какой бы «принцип записи» вы ни выбрали, я бы рекомендовала для начала новые теги начинать с новой строки. Так действительно удобнее.

Кстати, вот вам еще информация для понимания происходящего: как бы вы ни делили свой собственный текст (текст контента) в файле (и как бы он сам ни делился), как бы ни форматировали путем отточий, «энтеров» и табуляций, — все это решительно никак не повлияет на то, как текст отображается на сайте! Все форматирование происходит либо автоматически (по размеру экрана), либо путем верстки текста через коды — в одной из следующих лекций мы обязательно поговорим об этом.

HTML: «где писать?», кодировка и синтаксис

«Где писать?» — логичный вопрос. Ответ: да хоть в блокноте! Я не шучу: в стандартных программах большинства компьютеров есть такая исключительно текстовая программка «Блокнот». При открытии напоминает простой белый лист с минимумом функций, как у печатной машинки. По-умолчанию, файлы блокнота сохраняются с расширением .txt, но вы можете задать любое расширение, выбрав опцию «все файлы». Как вы помните, нам необходимо расширение .html .

Создание нового файла - главной страницы - в программе «Блокнот»

Что важно в первом варианте:
То, что вы будете создавать у себя на компьютере — вы будете только у себя на компьютере и видеть: файлы будут открываться вашими браузерами. До того момента, пока вы не загрузите свой файл (index.html) или группу файлов и папок на сервер вашего хостинга, ваша работа не будет видна никому, кроме вас. Ах да, файлы с расширением .html автоматически открываются в браузере как страница сайта: для редактирования файла вам необходимо будет настроить его автоматическое открытие в программе «Блокнот», либо каждый раз открывать через выбор.

Однако большинство хостингов предлагает создание файлов прямо на сервере! Это похожие на «Блокнот» программки, но часто — чуточку удобнее. Кроме того, что они могут иметь разлинованное поле и нумерацию строк, частенько они подыгрывают и помогают. Например, при написании тега, который должен непременно закрываться, они могут автоматически подставлять рядом тег закрытия. Или давать подсказки подсветкой, что какой-то тег у вас «повис», оставшись незакрытым, или и вовсе стоит не на месте. Конечно, программа видит не все, но очевидные вещи — да. Также она сама визуально структрирует ваш документ, двигая элементы. Кому-то все это помогает, кому-то, наоборот, мешает — выбирать вам.

Создание нового файла - главной страницы - в программе,
предоставляемой хостингом Beget
если создавать файлы сразу в папке сайта на сервере

Что важно во втором варианте:
Так как вы создаете файлы не на жестком диске своего персонального компьютера, а сразу на сервере хостинга, — все создаваемое вами автоматически располагается во всемирной паутине. Вы можете оперативно консультироваться со своими друзьями, если их участие предусмотрено. Также вы сможете делать тесты — как смотрится эта страница — не только с браузеров, имеющихся на вашем компьютере, но и, к примеру, с телефонов. В этом варианте удобнее редактировать и отражать файлы: при открытии файла с сервера открывается именно файл, а все изменения мгновенно отображаются в интернете, стоит лишь нажать «Сохранить» для файла и «Обновить» для страницы.

Я для показа буду использовать и тот и другой.

Итак, какой бы вариант — «где писать?» — вы ни выбрали, в обоих случаях нам необходимо уже при создании файла сразу задать КОДИРОВКУ ФАЙЛА, т.е. каким символьным набором создана страница. В случае Блокнота кодировка выбирается из списка, расположенного перед кнопкой «сохранить (файл)». В случае программы на хостинге — обычно предлагается собственный список внутри файла. Что брать? При наличии национальной кодировки koi8-r все-таки обычно выбирают из двух более широко распространенных вариантов: utf-8 или windows-1251. Самая оптимальная и интернациональная — и, как говорят интернет-источники, более 95% сайтов во Всемирной паутине пользуются именно ею, — кодировка utf-8. Я тоже предпочитаю ее.

Кроме того, где-то вас могут запросить также прямо при создании файла указать СИНТАКСИС, то есть прояснить для программы, на каком языке вы пишете файл, каким образом ей воспринимать (и соответственно обрабатывать) ваши лексемы. В нашем случае это, разумеется, html.

Созданный новый файл в программе хостинга Beget
и выпадающие списки "Кодировки" и "Синтаксиса",
в которых следует выбрать необходимое

Итак, где-то: либо на вашем компьютере, либо на сервере хостинга, существует папка с вашим доменным именем, а в ней — корневая папка с именем public_html (или www), и в этой корневой папке вы создали файл своей первой главной страницы сайта — index.html, задав файлу верные настройки кодировки (а во втором случае — и синтаксиса).

В учебном примере это (и на моем компьютере, и на сервере хостинга Beget) такая последовательность двух папок и одного файла:

wolfpower.ru
      - > public_html
              - > index.html

Сам файл при открытии пока девственно чист и ждет ваших первых строчек, которые создадут во Всемирной паутине первый фрагмент созидаемого вами мира...

Созданный новый файл на компьютере в программе "Блокнот"

HTML: структура документа и основные теги

Принцип создания страницы сайта очень похож на создание человека.

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

! DOCTYPE html — только, разумеется, в угловых скобках — первая строчка вашего документа. И это просто инструкция (о чем свидетельствует восклицательный знак в начале) для браузеров всемирной паутины, на каком языке и какими технологиями был создан ваш документ и как им следует его читать. Поэтому и закрывающий тег к инструкции не нужен.

html — это корневой тег документа (и парный закрывающий к нему): вторая и последняя строчки вашего документа, между которыми будет расположено абсолютно все! Именно он превращает все написанное с момента открытия и до момента закрытия в гипертекстовую реальность.

А дальше структура документа делится на две части: head и body — голову и тело. Одна вверху, остальное — внизу.

head — голова, т.е. мозг вашего документа. То, что размещается внутри открывающего и закрывающего тега ГОЛОВА — никто снаружи не увидит, но именно сюда вы заложите в последствии важные сведения: как зовут эту страницу, где она живет, о чем она, кто ее создал, какой синтаксис и кодировку она использует, как тело должно отражаться, какие паттерны поведения ему свойственны, какие стили будут использованы и много чего еще...

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

Основная разметка документа — страницы сайта

 Итак, вы разметили свой документ и теперь знаете, где у него что находится. Но пока мозг нашего нового человечка — странички сайта — чист. Сегодня мы вложим в него минимальные сведения. Мы расскажем страничке, какую кодировку она использует и как ее имя.

meta charset="utf-8" — тег МЕТА принадлежит к целому классу разных данных о создаваемом документе, внутри головы их может быть множество: важных и не слишком. Но тег с атрибутом charset (=кодировка) должен появиться среди первых строчек, чтобы сайт читался браузерами корректно. В зависимости от выбранной вами кодировки вы дописываете к атрибуту-уточнению нужное значение. Я использую кодировку utf-8, о чем и сообщаю в первой же строке после тега, заявляющего, что мы говорим «на языке html».

title — а еще я хочу, чтобы страничка знала, как ее имя! Имя страницы, как и имя персонажа, — это «о чем она», какова ее тема, и часто для названия используется заголовок размещаемого на ней контента. Разумеется, имя у каждой странички сайта может быть только одно, поэтому тег title (= имя, название) на каждой странице может быть только один, и лучше бы ему не повторяться на других страницах. Именно имя страницы, заключенное в этом теге, является важным элементом для ее нахождения «поисковиками».

На сегодня для мозга хватит информации! Переходим к телу!

Внутри тега ТЕЛО (=body) может располагаться любая информация. С точки зрения структуры текстовая информация обычно является либо АБЗАЦЕМ (=paragraph), либо  ЗАГОЛОВКОМ (=heading). Поэтому для обозначения обычного текста (каждого нового абзаца) используется тег-сокращение от слова paragraph — p, а для заголовков и разнообразных выделений варианты 1-5 рядом с тегом-сокращением от слова heading — h1,,h2, h3 и т.д. (заголовки и как их задавать мы пройдем в следующих лекциях). Про принудительные РАЗРЫВЫ (=break) строк вы уже знаете: это одиночный тег-сокращение от break — br.

ЗДРАВСТВУЙТЕ!
Здесь будет мой будущий сайт!

— вот что я напишу на своей страничке для начала, внутри тега p через атрибут align (=выравнивание) высказывая к этому абзацу пожелание, чтобы он размещался по центру.

Общий вид итогового файла. Начало.

А теперь сохраню его и посмотрю через браузер (если вы создавали страницу на компьютере, то просто откройте ее с помощью браузера; если страница создавалась на хостинге, задайте в строке адрес своего сайта):

Ну вот, обещанная первая дюжина строк вами написана! Поздравляю вас «с новорожденной»! Если вы хотели бы и дальше продолжать ее растить, то: 

Перейти к 4 лекции курса: «ТЕКСТ и панель его инструментов» >>>

[ноябрь, 2023]