Введение в HTML - первая страница

Теперь мы попробуем приветствовать мир.

Прежде чем мы действительно начнём изучение следующей главы нам надо решить один вопрос. Терминология:

Сайт, вебсайт
Страница, вебстраница
Одностраничник, многостраничник
Вебпроект, вебприложение
Лэндинг, Landing page
Сайт визитка
Корпоротивный сайт
Вебмагазин
Онлайн СМИ
Вебпортал
Вебресурс

Это всё возможные синонимы, которые можно употребить к тому или иному веб-проекту.

К множеству подстраниц на одном ресурсе я буду стараться применять сайт, ресурс. К одной единственной странице на сайте я буду обращаться как страница, документ или страница сайта.

Привет-мир #

Создаём рабочую папку
В папке создаём файл “first-page.html”
- Если у вас проблемы с созданием файла с расширением html, то попробуйте создать этот файл с помощью запроса в google “как создать html файл”.
- Рекомендую параллельно к этому пособию вообще нагугливать термины и объяснения из альтернативных источников. А вдруг я не прав, а вдруг всё уже поменялось?
Открываем в редакторе вашего выбора наш файл.
И пишем в нём ручками код.
helloworld
Что бы привести код в порядок и красиво его отформатировать - мы можем спросить у google как - “How do you format code in Visual Studio Code”. На первом месте (скорее всего) у вас будет сайт stackoverflow.com. Этот сайт помог не одному программисту в тяжёлой ситуации. Не стесняйтесь им пользоваться. Просто иногда задавайтесь вопросом: “Кто вы без этого сайта и сможете ли вы без него повторить то, что узнали?”

Сохраняем наш файл и открываем с помощью браузера. Если всё пошло так, то мы в Chromo-подобном браузере мы увидим:

А в интернет эксплорере скорее всего:

И мы сразу же можем начинать ругать IE потому что он неправильно отображает страницы. Ну или дядю Андрея, потому что он специально не дал ещё одну строчку.

<meta charset="utf-8">

Мы добавляем её так, что бы она оказалась седьмой. Вот так:

Сохраняемся и проверяем в Интернет Эксплорере наш файл заново:

Так что же мы написали #

Давайте начнём с конца. <meta charset="utf-8"> это то, что должно стоять в вашем HTML коде всегда. Это указание браузеру, что на странице используется не только английская кодировка. Существует множество разных кодировок кроме utf-8. Пока можете не углублять свои познания и просто пишите это строчку всегда.

То что IE-7 в итоге отобразил нашу страшненькую страницу, не значит, что мы его простили. Я держу его только для того, что бы посмотреть время от времени какой oн ужасный. Раз мы уже коснулись браузеров - вам придётся поставить маленький зоопарк: Chrome, Firefox, Safari, Opera. Хотя с большего и хром, и опера, и фаерфокс это один и тот же браузер. Ну почти. Движок у них общий - chromium. этот зоопарк нужен для проверки работоспособности ваших приложений(web-apps) в различных ситуациях.

<meta charset="utf-8"> - это на самом деле 3 указания. Во-первых, мета обозначает, что сейчас пойдёт указание для браузера, которое не видно пользователю. Чисто техническая информация. Во-вторых, идёт указание о роде технической информации - charset. И, в-третьих, уже значение чарсета utf-8.

Но вернёмся к написанному.

DTD - Document Type Definition #

<!DOCTYPE html> - говорит браузеру, что сейчас начнётся документ написанный в HTML5. Браузер не обладает интеллектом и ему надо говорить, что он должен делать. И именно доктайп говорит, что сейчас надо отображать документ формата HTML, HTML5. Да именно в версии 5. Существуют различные доктайпы. Вот так мог выглядеть доктайп для четвёртого хтмл <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN".

<!DOCTYPE html> - всегда будет для вас (мастеров HTML5) одинаков, неизменяем и всегда пишется в первой строке.

HTML #

<html> один раз открывает код страницы и </html> один раз закрывает. Между открывающим и закрывающим тегом html мы и пишем весь код нашей страницы.

Сам html разбит на две части head и body - голова и тело.

Мы будем возвращаться к голове и телу ещё не один раз. Ну, во-первых, без них нельзя сделать ни одну страницу. А во-вторых некоторые последующие теги привязаны только к “голове” или только “телу”.

Закрытие и открытие этих тегов проходит, как и у тега html. И мы можем учить новое слово Структурные элементы страницы. Их много больше, одни можно вкладывать в другие, так же как подъезд дома вложен в сам дом, а этаж в подъезд, а квартира вложена в этаж. Комната в квартиру, стол в комнате, а компьютер на столе, при этом стол не может быть в проходе, либо в рабочий кабинет, либо в коридоре, нельзя его оставить в дверях.

Абсолютно точно так же как и эта аллегория работает структура веб страницы эдакая матрёшка. Один элемент вложен в другой.

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

Купились? Не будет. Нет ничего лёгкого даже в этом языке разметки. Мир меняется каждый день, все новые приборы, безбарьерный интернет, новые технологии - всё это накладывает отпечаток на наши веб страницы. Этих элементов и правда не много - сотня. Ещё с какое-то количество атрибутов к ним, ну как charset и их значений. Но с каждым из них реально надо разобраться, посмотреть примеры, применить в практике и запомнить. Не слушайте тех, кто скажет, что редакторам или блогерам HTML не нужен - это миф. Это как фехтовальщику не нужна техника владения мечом - просто руби сверху вниз. Каждый кто связан по работе с веб страницами - обязан хотя бы один раз ознакомится с возможностями этого самого HTML.

Но мы отвлеклись - едем дальше!

Head #

Голова, то есть head в него мы вложили ещё title. У тайтла тоже есть открывающий и закрывающий тег. И внутри него мы разместили текст.

Этот текст отображается в самом тайтле браузера или в закладке браузера, где открыта наша страница. Если закладок много, то текста пользователь скорее всего не увидит.
Но это тот же текст, который по дефoлту(default - стандартно) подставляется при внесении страницы в закладки. Попробуйте.
Это тот текст, который может быть виден пользователю в результатах поиска в Google.

Отсюда мораль - тайтл должен быть продуманным, если это рецепт борща, то я бы рекомендовал написать там “Рецепт борща - 12 шагов”. Если это первая страничка на уроке HTML - то наверное есть смысл написать там “My first HTML-page - HelloWorld !”. Или то что считаете нужным, например “qwerty” вы же теперь вебмастер знающий основы HTML - вам и решать.

Title #

Title размещается только внутри тега head. Title поддерживает “Global Attributes” - глобальные атрибуты (мне надо было похвалиться своим прекрасным знанием английского языка). Ссылку на список этих атрибутов я приведу внизу статьи, но самостоятельно вы его можете нагуглить уже сейчас, например этой магической фразой “global attributes w3c”. W3C - это консорциум всемирной паутины, проще говоря боги этого вашего интернета. Про них можно нагуглить в Википедии. Я вас всё время куда-то посылаю не потому что мне лень об этом написать. Просто если я буду писать про все детали - я никогда не закончу. Моя задача научить вас HTML-грамоте. Дополнительные, интересные и полезные материалы часто будут как ссылка в гугл.

Но давайте сконцентрируемся и перейдём к тому, что мы написали в body, мы открываем и закрываем теги 4 раза: H1, _ article_, p и q.

HTML-тег H1 #

H1 - это заголовок всей страницы видимой пользователю. Очень часто H1 это название самого сайта или название статьи на нём (рецепта, видео, заметки). Вы заметили, что я написал H1 с большой? Мы ведь договорились писать всё с маленькой. Не забываем быть последовательными. h1 - браузеру всё равно, а вот читающему код человеку не всегда.

HTML-тег article #

article - вся статья помещается внутри этого тега. Если на странице две статьи, то article будет или должен быть использован дважды. Как вы понимаете, желаемое и действительное не всегда одно и то же.

HTML-тег p(paragraph) #

p - отмечает начало и конец абзаца. Зачем? Ну например, что бы текст начинался с красной строки или каждый нечётный абзац помечался бы другим оттенком, или… или… Вариантов использования для чего множество. Например транслировать на сайте в блоке “Интересные мысли” случайные абзацы редакторов сайта.

HTML-тег q (HTML Quote Element) #

q - короткая цитата или прямая речь. Очень удобно красиво выделять мысли в тексте. И кстати именно это пример малоизвестного тега, который входит в список “ай зачем их всех учить”. Забегая вперёд скажу, что если есть короткая цитата, то будет и длинная :).

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

<p>Щас скажу <q>прямую речь</p> только абзац новый начну</q> - так не правильно.

Сначала мы должны закончить прямую речь и закрыть тег q и только потом закрыть родительский тег. Смотрим как мы это сделали в примере.

<p>Щас скажу <q>прямую речь</q> только абзац новый начну</p>

Принципиально, азы HTML мы только что прошли. На самом деле теперь вы можете всем говорить, что вы знаете и понимаете структуру HTML. Вот тот пример мы теперь всё время и будем изменять. Добавлять все новые теги в него и смотреть как он изменяется. Каждый тег мы сейчас будем проходить как маленькую главу и рассматривать примеры применения. Но сначала я вам расскажу про CSS.

CSS #

Сначала будем делать руками, потом я попробую объяснить, что мы сделали.

Создаём в той же папке, где у нас лежит наш хтмл исходник, новый файл с названием style.css
Редактируем наш html файл и добавляем туда строчку <link rel="stylesheet" href="style.css">. Строчка должна быть вложена в head страницы, так как это информация не для человека, а для браузера. Этим самым мы говорим, где считывать стили страницы.

В сам css файл вносим:

body {
    background-color: #2D2D2D;
}

h1 {
    color: saddlebrown;
    font-size: 30px;
    font-family: Menlo, Monaco, fixed-width, serif;
}

p {
    color: white;
    font-family: "Source Code Pro", Menlo, Monaco, fixed-width, serif;
}

q {
    color: yellow;
}

Сохраняемся и проверяем наш результат в браузере. У нас должно было получится примерно следующее:

Ещё раз код и текст, который лежит в нашей html странице

<!DOCTYPE html>
<html>
<!-- Это моя первая страница. Создана 12 октября 2018 года -->

<head>
    <title>Привет мир</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<h1>Hello World!</h1>
<article>
    <p>
        Это моя первая web-страница и я очень волнуюсь: <q>получится ли у меня?</q>
    </p>
</article>
</body>

</html>

Что мы написали в стилях #

Мы указали каждый тег в стилях и сказали как его отображать.

Для всего body в фигурных { } скобках мы указали цвет бэкграунда. Цвет мы указали в общепринятой 16-ричной системе исчисления. Эту систему обозначают буквами HEX - hexadecimal или система исчисления с базисом 16. Если вы не знаете, что это такое, то коротко скажу, что мы используем систему с базисом 10 и считаем до десяти, вебдизайнеры считают до 16. Подробнее про неё можно (но не обязательно) загуглить в Яндексе - “Шестнадцатеричная система счисления”.

Для заголовка(h1) мы указали цвет букв, размер букв и тип и свойства шрифта.

Для абзаца(p) мы провели такую же операцию только с другими значениями, как и для тайтла. И обратите внимание, и там и там мы указали цвет “английскими словами”, а не значениями HEX. Существует табличками с заданными названиями для пары сотен HEX значений. Её точно наизусть учить не надо, но эти значения удобно использовать например в протоколировании страницы.

И наконец для короткой цитаты (q) мы просто поменяли цвет.

Принципиально всё. Вы только что изучили введение в CSS. Дальше мы будем тоже просто изменять и пробовать улучшить наши страницы и изучать, что можно сделать с помощью HTML и CSS, а что нет.

Пока можете стереть некоторые значения или даже добавить свои. Внести article в css со своими значениями и попробовать сделать конфликт, например указав разные цвет, размер для шрифтов артикля и абзаца, и посмотреть кто победит.

Про CSS мы должны знать только, что это стили. Стили пишутся в отдельном файле. Все теги можно описать по отдельности, могут быть не описаны. Для него фронтендера это примерно минимальный базовый уровень.

А мы продолжаем дальше.

Домашнее задание #

Создайте страницу index.html.
Открыть файл index.html текстовым редактором и написать в нем шаблон страницы. (DOCTYPE, head, body, p и так далее)
Напишите маленькую статью в нескольких абзацах с заголовком

Привет-мир #

helloworld

helloworld в хромиуме

helloworld в IE

helloworld с UTF

Проверка страницы в IE