Как написать страницу в html

Введение в HTML

Прежде чем мы начнем углубляться в шаблоны Hugo, мы сделаем краткий обзор HTML, который является базовым языком для всех шаблонов.

Если ты уже знаешь HTML, смело переходи к следующему разделу.

Что такое HTML?

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

Чтобы начать экспериментировать с HTML и вещами, описанными в этой секции, создай на рабочем столе файл с именем index.html . Далее открой его в VSCode, а также открой этот файл в своем веб-браузере.

Элементы (Elements)

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

Вперед! Напиши, что-то в твоем файле index.html , который ты создал(а). Сохрани файл, затем открой его в веб-браузере, чтобы увидеть твой абзац.

Мы рассмотрим основные элементы ниже и, если хочется, проверяй каждый из них в твоём файле index.html . Не забывай сохранять файл после каждого изменения и перезагружать окно браузера, чтобы увидеть изменения.

Заголовки (Headings)

Заголовки используются для создания больших текстовых заголовков на твоей веб-странице. Например, на этой странице какой-то текст больше, потому что он является заголовком для контента ниже. Чтобы создать заголовок, нужно написать:

<h1> элемент создает самый большой заголовок, но ты можешь пройти весь путь от него до <h6> , который используют для подзаголовков.

h2 будет немножко меньше, чем h1 , h3 немножко меньше, чем h2 и так далее…

Абзац (Paragraph)

Абзацы используются для отображения текста с нового абзаца без форматирования.

Изображения (Images)

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

Элемент img должен иметь атрибут src (атрибуты мы рассмотрим ниже), атрибут src обозначает source . Это должен быть путь к файлу изображения на твоём компьютере или к URL-адресу изображения в Интернете.

Сохрани изображение на своем компьютере рядом с файлом index.html и попробуй отобразить его на экране.

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

Списки (Lists)

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

• Я — элемент списка
• Я — элемент списка
• Я — элемент списка

1. Я — первый
2. Я — второй
3. Я — третий

Первый список можно составить так:

<ul> — это Unordered List (неупорядоченный список) и его следует использовать, когда порядок не имеет значения.

Если же порядок имеет значение, ты можешь увидеть <ol> , что является Ordered Lists (упорядоченным списоком).

Ссылки (Links)

Ссылки создают кликабельную ссылку на твоей странице. Эта ссылка может перевести пользователя куда угодно, например, на другой веб-сайт или другую страницу на твоём сайте, или даже на другую позицию на текущей странице.

Элемент <a> обозначает anchor (якорь), а атрибут href является целью.

Ты также можешь сделать так, чтобы новая ссылка автоматически открывалась на новой вкладке в браузере, добавляя атрибут target .

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

Разделы (Divs)

Разделы (divs) используются для группировки элементов. Это позволяет структурировать большие веб-страницы с тысячами элементов.

Атрибуты (Attributes)

Атрибуты используются для передачи элементу дополнительной информации. Мы уже видели много примеров выше, таких как src и href , но есть десятки атрибутов, которые можно использовать, и каждый элемент может иметь свои собственные специфические атрибуты.

Чтобы узнать обо всех доступных элементах и ​​атрибутах, ознакомься с учебными руководствами по html от w3schools для получения дополнительной информации.

Прежде чем перейти к следующему уроку, поэкспериментируй с созданием полноценной веб-страницы с множеством различных элементов, но не беспокойся о ее стилизации.

HTML для JavaScript разработчика

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

Hpertext Markup Language является языком, описывающим структуру и семантику содержимого веб-документа.

2. Директива <!DOCTYPE html>

Большинство современных html-документов начинается с строки <!DOCTYPE html>, это говорит браузеру, что документ надо интерпретировать в соответствии с современными стандартом HTML (HTML5.*).

Это просто специальная строка в начале html-документа и она всегда должна выглядеть точно так же:

3. Понятие тега

HTML теги — это имена элементов, заключенные в угловые скобки.

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

У тегов может быть несколько форм. Элемент вроде тела, параграфа и ссылки начинается открывающим тегом <p> и заканчивается закрывающим </p>. Некоторые открывающие теги, типа ссылки <a>, содержат дополнительную информацию в виде имя=”значение”. Она называется «атрибутами».

Некоторые теги ничего не окружают, и их не надо закрывать. Пример – тег картинки

HTML разбирается парсером довольно либерально по отношению к возможным ошибкам. Если какие-то теги пропущены, браузер их воссоздаёт. Как именно это происходит, записано в стандартах, поэтому можно ожидать, что все современные браузеры будут делать это одинаково.

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

Как уже говорилось ранее любая html5 страница начинается со строки <!DOCTYPE html>.

Затем вся наша веб-страница должна быть обернута в тег <html>. Все, что находится внутри тега, считается частью <html> элемента, который представляет собой саму веб-страницу.

Внутри элемента <html> у нас есть еще два элемента, называемые <head> и <body>. <head> веб-страницы содержит все ее метаданные, такие как заголовок страницы, любые таблицы стилей CSS и другие вещи, необходимые для отображения страницы. Основная же часть HTML-разметки будет находиться в элементе <body>, который представляет видимое содержимое страницы.

5. Cинтаксис HTML комментариев

Также обратите внимание на синтаксис комментариев HTML в приведенном ниже фрагменте. Все, что начинается с <!— и заканчивается —>, будет полностью игнорироваться браузером. Это полезно для документирования вашего кода и создания заметок самому себе.

6. Заголовок страницы

Одним из наиболее важных фрагментов метаданных является название вашей веб-страницы, определяемое тегом <title>. Браузеры отображают <title> на вкладке для вашей страницы, и Google отображает ее как результат поиска.

7. Paragraphs

Элемент <p> помечает весь текст внутри него как отдельный абзац.

8. Headings

Headings(заголовки) похожи на (title)заголовок, но на самом деле они отображаются на странице. HTML предоставляет шесть уровней заголовков, и соответствующие элементы: <h1>, <h2>, <h3>, . <h6>. Чем выше номер, тем менее заметен заголовок.

Первый заголовок страницы обычно должен быть <h1>.

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

9. Cписки

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

В HTML5 существует 3 типа списков: unordered lists (маркированный список) — <ul>, ordered lists (нумерованный список) — <ol> и список определений(тройка элементов предназначена для создания определений) — <dd>, <dt>, <dl>.

9.1 Unordered lists

Оборачивание содержимого тегами <ul> сообщает браузеру, что все, что находится внутри, должно отображаться как неупорядоченный список. Чтобы обозначить отдельные элементы(пункты) в этом списке, Вам нужно обернуть их в теги <li> (list item) следующим образом:

9.2 Ordered lists

Если последовательность элементов списка имеет значение, вам следует использовать упорядоченный список. Чтобы создать упорядоченный список, просто измените родительский элемент <ul> на <ol>.

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

9.3 Definition list

10. Emphasis (italic) elements

Часть, упакованная в теги <em>, должна отображаться как курсив, как показано ниже. Обратите внимание, что затронута только часть строки.

11. Strong (bold) elements

Если вы хотите зделать контент более выразительным, чем в теге <em>, вы можете использовать <strong>.

12. Пустые элементы HTML

Теги HTML, с которым мы столкнулись до сих пор,имели текстовое содержимое (например, <p>) или другие элементы HTML (например, <ol>) внутри. Это не относится ко всем HTML-элементам. Некоторые из них могут быть пустыми или самозакрывающимися. Наиболее распространенными пустыми элементами являются разрывы строк <br> и горизонтальные линии <hr>.

12.1 Разрывы строк <br>

12.2 Горизонтальные линии <hr>

13. Links и images

14. Forms

Форма — гипертекстовый контейнер контейнер, позволяющий установить обратную связь между посетителем веб-страницы и веб-приложением. Получение данных от пользователя осуществляется через типовые элементы управления : текстовые поля, кнопки, чекбоксы и т.п., размещаемых в теге form.

Также форма — способ взаимодействия(интерфейс) пользователя с бизнес логикой и данными на сервере посредством HTTP запросов.

14.1 Radio buttons

14.2 Select elements

14.3 Textareas

14.4 checkboxes

14.5 submit buttons

15. Semantic html

*. Таблицы

*. HTML Media

16. Emmet

16.1 Syntax

16.1.1 Child

16.1.2 Sibling

16.1.3 Climb-up

16.1.4 Grouping

16.1.5 Multiplication

16.1.6 Item numbering

16.1.7 ID and CLASS attributes

16.1.8 Custom attributes

16.1.9 Text

16.1.10 Implicit tag names

16.2 HTML

16.3 CSS

16.4 Cheat Sheet

17. HTML и JavaScript

В контексте нашего курса самый главный тег HTML — <script>. Он позволяет включать в документ программу на JavaScript.

Такой скрипт запустится сразу, как только браузер встретит тег <script> при разборе HTML. На странице появится диалог-предупреждение.

Включать большие программы в HTML непрактично. У тега <script> есть атрибут src, чтобы запрашивать файл со скриптом (текст, содержащий программу на JavaScript) с адреса URL.

18. Совместимость и браузерные войны

На ранних стадиях развития Веба браузер по имени Mosaic занимал большую часть рынка. Через несколько лет баланс сместился в сторону Netscape, который затем был сильно потеснён браузером Internet Explorer от Microsoft. В любой момент превосходства одного из браузеров его разработчики позволяли себе в одностороннем порядке изобретать новые свойства веба. Так как большинство людей использовали один и тот же браузер, сайты просто начинали использовать эти свойства, не обращая внимания на остальные браузеры.

Это были тёмные века совместимости, которые иногда называли «войнами браузеров». Веб-разработчики сталкивались с двумя или тремя несовместимыми платформами. Кроме того, браузеры около 2003 года были полны ошибок, причём у каждого они были свои. Жизнь людей, создававших веб-страницы, была тяжёлой.

Mozilla Firefox, некоммерческое ответвление Netscape, бросил вызов гегемонии Internet Explorer в конце 2000-х. Так как Microsoft особо не стремилась к конкуренции, Firefox отобрал солидную часть рынка. Примерно в это время Google представил свой браузер Chrome, а Apple – Safari. Это привело к появлению четырёх основных игроков вместо одного.

У новых игроков были более серьёзные намерения по отношению к стандартам и больше инженерного опыта, что привело к лучшей совместимости и меньшему количеству багов. Microsoft, видя сжатие своей части рынка, приняла эти стандарты. Если вы начинаете изучать веб-разработку сегодня – вам повезло. Последние версии основных браузеров работают одинаково и в них мало ошибок.

Нельзя сказать, что ситуация уже идеальная. Некоторые люди в вебе по причинам инерционности или корпоративных правил используют очень старые браузеры. Пока они не отомрут совсем, написание веб-страниц для них потребует мистических знаний об их недостатках и причудах. Эта книга не про причуды – она представляет современный, разумный стиль веб-программирования.

Как сверстать веб-страницу. Часть 1

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов

Первым шагом давайте создадим простую структуру файлов для наших файлов.

• Создаем папку с названием нашего проекта, например Whitesquare.
• В ней создаем пустой файл index.html.
• В папке проекта создаем папку css с пустым файлом styles.css.
• В папке проекта создаем пустую папку images.

Предварительный осмотр

После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

• Как будут нарезаться изображения?
• Какими будут основные стили?
• Какой макет у нас получится?

Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.

Общие изображения

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

Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили

И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

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

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML

И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.

Макет

В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).

Опишем это в теге body:

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

Логотип

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Поиск

Вставляем форму поиска в тег header:

И стили выравнивания по правому краю для нее:

Для отображения меню необходимо создать список со ссылками внутри тега nav:

CSS стили для него будут следующие:

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

Заголовок страницы

Заголовок страницы помещается в div с идентификатором heading

Заголовок имеет следующие стили:

Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Колонки

Для того, чтобы создать колонки страницы нужно прописать следующие стили:

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

И применяем к подменю следующие стили:

Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.

Контент сайдбара

В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.

В html это выглядит так:

В стилях укажем шрифты, цвета и отступы:

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

Цитата

Вёрстку контента начнём с добавления цитаты.

Добавим код цитаты в раздел section

И применим для него стили:

Здесь нет ничего нового, так же — шрифты, фоны и отступы.

Контент

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после

Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :

, которому зададим следующие стили:

Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.

Блок «Our team»

При верстке этого блока добавим сначала заголовок:

А затем два блока-строки с карточками сотрудников

Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:

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

Футер

Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

Контейнер с находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.

Лента Твиттера

Верстаем содержимое ленты Твиттера:

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

Карта сайта

Карта сайта представляет собой два блока со ссылками:

Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.

Социальные ссылки

Вставляем набор ссылок в контейнер

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт

Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.

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

Как написать страницу в html

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

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

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

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

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

Привет-мир #

1. Создаём рабочую папку
2. В папке создаём файл “first-page.html”
   • Если у вас проблемы с созданием файла с расширением html, то попробуйте создать этот файл с помощью запроса в google “как создать html файл”.
   • Рекомендую параллельно к этому пособию вообще нагугливать термины и объяснения из альтернативных источников. А вдруг я не прав, а вдруг всё уже поменялось?
3. Открываем в редакторе вашего выбора наш файл.
4. И пишем в нём ручками код.

helloworld

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

helloworld в хромиуме

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

helloworld в IE

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

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

helloworld с UTF

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

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

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

Давайте начнём с конца. <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 разбит на две части head и body — голова и тело.

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

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

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

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

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

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

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

1. Этот текст отображается в самом тайтле браузера или в закладке браузера, где открыта наша страница. Если закладок много, то текста пользователь скорее всего не увидит.
2. Но это тот же текст, который по дефoлту(default — стандартно) подставляется при внесении страницы в закладки. Попробуйте.
3. Это тот текст, который может быть виден пользователю в результатах поиска в 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.

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

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

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

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

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

опера css

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

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

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

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

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

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

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

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

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

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