Курс HTML 5 и CSS 3 от «Специалист» ведет Борисов И. (1.1 — 2016)

 

Сайт – это по сути папка, где хранится документ, который содержит в себе текст с разметкой html. Файлы с раширением html или htm являются веб-станицами интернета. Веб сервер это программа, которая отдает эти html файлы.

История появления технологий html:

 

1991 – HTML

1994 – Консорциум W3 – организация, которая занимается приемом стандартов (w3.org)

1995 – CSS – отдельная технология, которая называется каскадные таблицы стилей

1999, декабрь – HTML 4.0.1

2002 – XHTML 1.0

2012 – HTML 5

 

Для работы с html требуется минимум: браузер и текстовый редактор. Для начала рекомендуется использовать бесплатный текстовый редактор Notepad++.

В notepad++ можно удобно обращаться к файлам, выбрав иконку «Папка как проект» и выбрать директорию для хранения файлов и папок.

Главный файл на сайте всегда носит имя index.html, хотя это и не описано в стандартах w3, но так повелось исторически.

Текст в документе без разметки браузер читает сплошняком (в одну строку). Для разметки текста на странице существуют элементы.

 

Элемент – <имя>Содержание элемента</имя>

Открывающий тэг – <имя>

Закрывающий тэг – </имя>

Содержание – Содержание элемента

 

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

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

 

Совет: Каждый раз, когда вы что-то пишете, не забывайте сохранять документ (ctrl+s). Это сочетание клавиш всегда удобно, почаще его используйте.

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

Каждый html документ имеет структуру. Эта структура древовидная. Т.е. что-то вложено во что-то.

Основа:

<html>

   <head>

      Служебная информация, которую не видно

   </head>

   <body>

      Содержание документа, которое выводится в браузер

   </body>

</html>

Т.е. блок html, содержит в себе два блока, head и body. Один из них служебный, другой содержит то, что мы хотим выводить для показа.

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

 

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

Стандартно принято вложенные элементы сдвигать справа налево, как правило, табуляцией (tab), к блоку head и body это обычно не относиться, чтобы сэкономить на отступах. Но остальные элементы лучше делать с отступами. Табуляцию удобно уменьшить в вашем редакторе, чтобы влезало больше блоков.

По мере изучения мы будем использовать различные новые элементы. Начнем мы с элементов в блоке head. Один из самых главных – это title.

<head>

   <title>

      Заголовок документа

   </title>

</head>

Пока вы не укажете title документа, его название во вкладке браузера будет отображать имя этого документа.

Пробелы и отступы, которые мы ставим для форматирования человеческого вида, браузер никак не обрабатывает, что как раз, удобно для нас.

У нас в документе могут быть комментарии.

<!— Комментарий —>

Как правило, используются для отключения части кода или пояснения части кода.

 

Посмотрим самые простые элементы, заголовки:

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

 

Заголовки нужны всегда, на одной странице на практике используется максимум от h1 до h3. Причем для правильной семантической разметки рекомендуется иметь только один заголовок h1.

Пример: <h4>Организаторы фестиваля</h4>

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

 

После заголовка должен быть абзац, как и в любой книге. А именно он называется параграф и задается элементом <p></p>.

Пример: <p>Пример текста в параграфе</p>

Он тоже блочный, т.е. задает структуру документа.

 

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

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

Как перенести текст, для этого есть элемент </br> — одиночный тэг, принудительны разрыв строки. Одиночный значит, что нет закрывающего тэга. Это пустой элемент, он не имеет содержимого. Он работает как команда – «перейди на следующую строку».

 

Текст документа обычно выравнивается по левому краю как стандарт европейской разметки. Но если мы хотим выровнять текст или другое содержимое по центру или справа налево. Существуют атрибуты у элементов и указываются в открывающем тэге. Например <h1 align=”center”></h1>

Т.е. у атрибута есть имя (align), символ = и «значение». Данный атрибут устарел по стандартам html и он не используется для выравнивая текста на странице, но мы его просто рассмотрим как пример атрибута, а выравнивать текст позже будем с помощью другой удобной технологии.

Атрибут align использует несколько значений: left, right, center.

 

Еще один одиночный элемент – <hr> – горизонтальная линия. На данный момент является нежелательным для использования. Но мы его должны знать. У элемента есть ширина и ее можно изменить с помощью атрибута <hr width=””>

Существует две единицы измерения: px – пиксели и % — проценты.

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

 

<html>

   <body>

      <hr>

   </body>

</html>

 

Элемент <Hr> вложен в <body>, <body> вложен в <html>. Это и есть древовидная структура документа.

Есть специальные термины: предки, родители, дети. Т.е. для <hr> элемент <body> это родитель, а элемент <html> предок элемента <body>, а сам <hr> ребенок для элемента <body>.

 

Еще один простой элемент <blockquoute></blockquote>

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

 

Элемент <pre></pre> — авторское форматирование, т.е. внутри тэга браузер читает все пробелы, табуляции, отступы. Используется не часто. Имеет одну особенность, меняет шрифт на моноширинный.

 

Есть три основные группы шрифтов: serif, sans-serif, monospace.

 

В html есть сущности (entity), для подстановки различных символов. Любой текст это код представленный для человека в десятичной или шестнадцатеричной системе, а для компьютера в двоичной. Например, символ copyright имеет код U+OOA9, напечатать его можно Alt+0169. Но мы можем сделать это удобнее:

&#169;

Это и есть сущность. Но для человека это сложно запоминается, поэтому помимо такого вида созданы мнемонические коды. У копирайта это:

&copy;

По факту это переменная в html, если кто-то знаком с программированием.

 

А как представить сам тэг в тексте, если браузер не выводит тэг.

Например вывести в body:

<p>

Элемент p начинается с тэга <p>

</p>

 

Мы можем подставить мнемоническую переменную &lt; для открывающей угловой скобки и переменную &gt; для закрывающей угловой скобки.

 

Самые ходовые спец-символы:

&nbsp;            &#160;            Неразбиваемые пробел

&quot;            &#034;            Прямая кавычка

&amp;             &#038;            Амперсанд

&lt;                 &#060;            Знак меньше

&gt;                &#062;            Знак больше

&copy;            &#169;            Копирайт

&reg;               &#174;            Зарегестрировано

&trade;           &#153;            Торговая марка

&mdash;         &#8212;          Длинное тире

&ndash;          &#8211;          Тире

&laquo;           &#171;            Левая елочка

&raquo;           &#187;            Правая елочка

 

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

 

&nbsp; иногда полезная вещь, неразбиваемый пробел. Ведь браузер обрезает все пробелы и выводит на страницу только один, а с помощью такого, неразбиваемого пробела мы можем наплодить их сколько угодно. Но такой пробел не разрешает сносить текст на новую строку. Т.е. пробел становится единой строкой вместе со словами.

 

Тэг <div></div> — не семантический элемент

Это контейнер объединитель, что бы внутри него можно было совмещать несколько блоков или элементов. Т.е. мы зададим ему какое-то свойство и те элементы, которые вложены в него будут наследовать это свойство. Например:

<div aligh=”center”>

   <h1>Заголовок</h1>

   <p>Текст</p>

</div>

 

Подытог:

Выяснили что такое HTML

Рассмотрели базовые элементы

Познакомились с атрибутами элементов

Научились комментировать код и использовать сущности

 

На данном этапе мы не учитывали версии документов html.

Анатомия страницы HTML.

HTML это стандарт, описанный консорциумом W3.org. Эта организация занимается многими проектами. Как у любого проекта у этого есть спецификация для разработчиков самих страниц html и браузеров. Спецификация описывает правила использования html, т.е. по факту это договор об использовании данной технологии.

У языка html есть не стандартизированные правила, а так сказать общепринятые. Например, как писать теги, в верхнем регистре или нижнем, с заглавной или маленькой буквы.

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

 

Существуют элементы с закрывающим тэгом, но закрывать его необязательно. К таким относится элемент <p>. Но настоятельно рекомендуется закрывать ВСЕ элементы, которые можно закрывать.

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

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

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

 

Одиночные тэги могут писаться так:

<br> — HTML 4.01

<br/> — HTML 5

 

HTML 5 версии рекомендует закрывать одиночные тэги, а вот 4.01 описывает написание без закрывающей черты.

 

Атрибуты:

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

Чем строже, тем лучше.

 

В любой спецификации появляется что-то новое, а что-то отменяется. Есть некоторые термины для элементов спецификации.

 

New – Новый элемент

Deprecated – Устаревший (нежелательный, т.е. пока еще работает, но его готовят к отмене и рано или поздно он будет отменен)

Obsolete – Отмененный

 

Атрибуты имеют свои термины

Implied – Необязательный

Required – Обязательный

 

Семантика элементов означает, что имеет в виду тот или иной элемент.

Существую блочные элементы (block), а есть строчные (inline). Строчные элементы ведут себя на странице по-другому.

Некоторые строчные элементы:

 

<strong> Очень важный текст </strong>

<em> Акцент </em>

<ins> Добавили текст </ins>

<del> Удалили текст </del>

<cite> Процитировали </cite>

 

<b> Выделяем полужирным </b>

<i> Наклонное начертание </i>

<u> Подчеркивание </u>

<strike> Перечеркнули строку </stike>

<s> Еще одно перечеркивание </s>

 

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

 

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

 

Когда начали создавать стандарт HTML 5 для него придумали самое удобное описание

В самом верху каждого документа html мы вводим коротенькую строку

<!doctype HTML>

Тем самым мы предполагаем, что документ написан по стандартам версии 5

Программа валидатор на сайте консорциума W3.org (validator.w3.org/nu) поможет проверить соответствие кода для нужной нам версии.

Там есть несколько способов проверки кода, мы можем передать документ по ссылке, либо скопировать код прямо в поле валидатора, выбрать версию html для проверки кода и нажать Enter. Валидатор покажет все ошибки для выбранной версии.

 

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

Стоит добавить, что для каждой версии языка есть несколько версий, такие как transitional и strict, переходная и строгая. Обычно переходная версия, конечно же, позволяет писать более дозволенный код.

 

Когда появилась необходимость создавать на сайтах блочную структуру, похожую на такую как в газетах. Ранее это делали с помощью тегов div. Объединяли элементы в блоки div, самим блокам div прописывали атрибут id со значением по смыслу подходящим для конкретного блока. Например, для верхнего блока – id=”header”, для других content, article, article-header, info, footer и т.д.

 

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

Теперь в html 5 есть конкретные элементы для каждого блока.

 

<header> Шапка </header>

<section> Основной контент </section>

<article> Текст, который самостоятельно несет ценность (чаще всего это статьи на сайтах) </article>

<aside> Дополнительная информация (врезка) </aside>

<nav> Меню </nav>

<footer> Подвал </footer>

 

Итого:

Познакомились с элементами для форматирования текста

Уяснили понятие блочных и строчных элементов

Познакомились со структурными элементами HTML 5

Научились проводить валидацию документа

 

Гиперссылки. Позволяют перейти с одной страницы на другую.

Существуют внутренние и внешние.

Внешняя ссылка

 

Абсолютная ссылка

<a href=”https://www.luboysite.ru”> Текст на который кликать </a>

 

Относительные ссылки

<a href=”/”> Текст ссылки ведущий в корень сайта </a>

<a href=”/file.html”> В корне открыть файл </a>

<a href=”/directory/article.html”> Открыть папку а в ней статью </a>

<a href=”../file.html”> Вернуться назад и открыть файл </a>

<a href=”../../file.html”> Два раза вернуться назад и открыть файл </a>

<a href=”../folder/file.html”> Вернуться назад, открыть папку, а в ней открыть файл </a>

 

Использование псевдопротокола

<a href=”mailto:vasya@mail.ru”> Послать письмо </a>

<a href=”tel:79994456633”> Позвонить </a>

 

Открыть ссылку в новом окне

<a href=https://ya.ru target=”_blank”> Открыть яндекс в новом окне </a>

Открыть в том же окне (значение поумолчанию)

<a href=https://ya.ru target=”_self”> Открыть яндекс в том же окне </a>

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

Элемент <base> для блока <head> позволяет задать переход ссылок по умолчанию.

 

<head>

   <base targer=”_blank”></base>

</head>

 

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

 

<p id=”link”>Параграф для якоря ссылки</p>

<a href=”#link”></a>

 

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

Чаще всего конечно ссылки внешние.

 

Итого:

Знаем гиперссылки

Знаем типы гиперссылок

Поняли адресацию www

Научились загружать документы в новом окне браузера

Оставить комментарий

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