За 1 час от полного новичка до новичка с начальными знаниями HTML.
Курс HTML. За 1 час от полного новичка до новичка с начальными знаниями HTML. На этом курсе, мы с вами за 1 час познакомимся с основами HTML, изучим самые популярные и нужные элементы, а также создадим свой первый сайт с полезной информацией, который будет не стыдно показать работодателю при найме на работу.
В рамках предварительной подготовки прохождения курса "Курс 1 HTML. За 1 час от полного новичка до новичка с начальными знаниями HTML." вам следует сделать следующее.
Запустим HTML валидатор и проверим наш HTML код на валидность.
HTML валидатор, проверка кода HTML.
Делаем выбор вкладки Validate by Direct input, вставляем наш код и нажмем кнопку Check.
В результате получаем ответ валидатора:
Document checking completed. No errors or warnings to show.
А если бы были проблемы в коде, то валидатор вывел бы список ошибок и предупреждений.
Важно понимать следующее. Даже невалидный код будет вполне успешно работать в браузере. Тут нет таких строгостей, как, например, в каком-нибудь настоящем языке программирования.
Но все равно, HTML код следует делать максимально валидным. Это хорошая привычка, это лучшее ранжирование в поисковых системах, и это меньшая вероятность возникновения всякого рода неприятных и непонятных ситуаций.
В HTML объявление типа документа тегом <!DOCTYPE html> - обязательная преамбула, расположенная в верхней части документа. Единственное предназначение тега - не допустить переключение браузера в так называемый режим совместимости (“quirks mode”) во время рендеринга документа; то есть, тег <!DOCTYPE html> гарантирует, что браузер с максимальными усилиями будет следовать соответствующей спецификации, а не использовать другой тип рендеринга, несовместимый с некоторыми спецификациями.
Все понятно?
Вообще, ничего непонятно?!
Тогда тоже самое более простыми словами.
Используйте всегда элемент (тег) <!DOCTYPE html> как первую строчку в любом файле *.html.
Тут часто бывает путаница, хотя правило совсем простое:
Элемент состоит или из одного тега, или из двух тегов - открывающего и закрывающего, а также, контента между ними.
Закрепим понимание на практических примерах.
<div> - это тег (открывающий)
</div> - это тег (закрывающий)
<div>контент между тегами</div> - а вот это элемент
HTML-элемент <html> представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него).
В нашем примере HTML-элемент <html> представлен так: <html dir="ltr" lang="ru-RU">
dir
Это перечислимый атрибут указывающий направление текста в элементе. Он может принимать одно из следующих значений:
ltr, что расшифровывается как left to right (слева направо), и предназначено для языков, в которых пишут слева направо (как в русском).
lang
Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определённом в документе IETF BCP47
Можно прочитать небольшой документ по ссылке выше или просто резюмировать так:
Если атрибут lang имеет значение ru-RU, то это значит: язык русский, страна Россия.
HTML-элемент заголовка <title> определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.
Элемент <title> всегда используется внутри блока <head>.
Элемент <title> рекомендуется использовать после элемента <meta charset="UTF-8" />.
Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации (SEO). Как правило, более длинный описательный заголовок будет лучше ранжироваться (Ranking), но, желательно, чтобы суммарная длина текста заголовка была не более 60 символов.
Хороший пример использования: <title>Краткий справочник популярных элементов HTML</title>
Несколько раз мы используем HTML-элемент <meta> с атрибутом:
name
Этот атрибут имеет здесь особое значение.
Для каждого атрибута name должен быть content
Атрибут name - определяет имя метаданных
Атрибут content - определяет значение для данного имени
Мы используем следующие элементы meta с атрибутом name
<meta name="description" content="Краткое описание." /> - это строка, в которой разработчики могут объяснить, что делает приложение или краткое содержание страницы.
<meta name="keywords" content="ключевые слова" /> - список ключевых слов, соответствующих содержимому страницы сайта.
<meta name="viewport" content="width=device-width,initial-scale=1"/> - дает подсказки о размере изначального размера viewport. Используется на некоторых мобильных устройствах.
<meta name="HandheldFriendly" content="true" /> - This tag was originally used to identify mobile content in AvantGo browsers, but became a general standard for identifying mobile websites. However, it’s unknown what range of browsers support this meta tag. Этот тег первоначально использовался для идентификации мобильного контента в браузерах AvantGo, но стал общим стандартом для идентификации мобильных веб-сайтов. Однако неизвестно, какой диапазон браузеров поддерживает этот мета-тег.
<meta name="MobileOptimized" content="width" /> - This is a Windows-proprietary meta tag that also eventually became used as another means of identifying mobile content. The drawback with this tag is that a specific width must be given. Again, it’s unknown what the support for this tag is. Это собственный мета-тег Windows, который также в конечном итоге стал использоваться в качестве еще одного средства идентификации мобильного контента. Недостатком этого тега является то, что необходимо указать определенную ширину. Опять же, неизвестно, какова поддержка этого тега.
<meta name="apple-mobile-web-app-capable" content="yes" /> - В Safari iOS для закрепленных сайтов на экране "Домой" включает полноэкранный режим.
Примечание. В нужности и полезности таких мета, как viewport, HandheldFriendly, MobileOptimized, apple-mobile-web-app-capable я сомневаюсь, но, все-таки, решил о них рассказать. Их, может быть, и не стоит использовать, но знать о них нужно.
HTML-элемент <header> представляет собой вводный контент, обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы.
Разрешённые родительские элементы. Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент <header> не должен быть потомком элемента <address>, <footer> или другого элемента <header>.
Родительским элементом может быть элемент <body>.
Важно! Не путайте элементы <header> и <head>. Это другое!
Практическая работа. Вносим в наш файл index.html изменения (пусть, это будет версия 1.02). Добавляем элемент <header>.
Вероятно, вы обратили внимание, что в текущей версии нашей страницы (1.02) для элемента <header> мы используем атрибуты: id, style
Давим к этому списку еще один атрибут class, который мы не используем, но который очень популярен, поэтому и о нем скажем пару слов.
Глобальные атрибуты - это атрибуты, общие для всех элементов HTML.
Эти атрибуты можно использовать для всех элементов, хотя на некоторые элементы они могут не влиять.
Популярные атрибуты:
id - устанавливает элементу уникальный идентификатор (ID). Значение должно быть уникальным в документе (на странице). Его назначением является однозначная идентификация элемента для различных действий над этим элементом.
class - это разделённый пробелом список классов элемента или просто один класс. В отличии от атрибута id, один и тот же class можно присваивать разным элементам, с целью групповой обработки.
style - стили CSS. Этот атрибут интересен тем, что тут имеет место быть пересечение технологий HTML и CSS. С одной стороны, здесь содержатся стили CSS. С другой стороны, это просто один из атрибутов элемента HTML, и как все другие атрибуты, должен изучаться в рамках курса HTML. Мы затронем этот атрибут совсем немного, чтобы выделить для наглядности основные семантические элементы HTML, как в данном случае, элемент <header>.
HTML-элементы <main> (основной контент) и <footer> (нижний колонтитул)
HTML-элементы
<header> (мы его изучили ранее),
<main>,
<footer>
представляют собой триаду (вверх, основной контент, низ).
<main> - предназначен для основного контента (содержимого) <body> документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.
<footer> - представляет собой нижний колонтитул (футер, подвал) для своего ближайшего секционного контента или секционного корня. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.
Практическая работа. Вносим в наш файл index.html изменения (пусть, это будет версия 1.03). Добавляем элементы <main> и <footer>.
Также, заодно, подправляем контент в элементе:
<header> (добавляем в него таблицу с содержанием)
Практическая работа. Вносим в наш файл index.html изменения (версия 1.03). Добавляем элементы: <main>, <footer>. Вносим изменения в элемент <header> (добавляем новый элемент <table> с содержанием).
HTML-элемент <div> - самый популярный элемент. Его используют, где только можно и даже там, где его не рекомендуют использовать.
Являясь "чистым" контейнером, элемент <div>, по существу, не представляет ничего (с точки зрения семантики). Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id.
Типичный пример использования:
Результат вот такой:
А я есть элемент HTML div, внутри меня какой-то контент.
А я есть элемент HTML div, который живет внутри другого div, так часто бывает!
HTML-элементы <h1>–<h6> представляют собой 6 уровней заголовков секций. <h1> это наибольший заголовок и <h6> - наименьший
Интересный эффект при использовании заголовков внутри HTML-элемента <article> - размеры
текстов внутри <h1> и <h2> не отличаются.
А валидатор дает предупреждение: Warning: Consider using the h1 element as a top-level heading only.
Таким образом, вывод: не надо использовать <h1> внутри HTML-элемента <article>.
HTML-элемент <img> - встраивает изображение в документ.
HTML-элемент <img> - встраивает изображение в документ.
Используются атрибуты:
src - обязателен и содержит путь к изображению, которое вы хотите встроить в документ.
alt - содержит текстовое описание изображения, которое не обязательно, но полезно - программы чтения с экрана читают это описание своим пользователям. Также оно отображается на странице, если изображение не может быть загружено по какой-либо причине.
title - содержит текст, предоставляющий консультативную информацию об элементе. Эта информация может показываться пользователю в виде всплывающей подсказки.
width - ширина элемента.
height - высота элемента.
Типичный пример использования:
Результат вот такой:
Обратите внимание. В данном примере графические файлы HTML5_Logo_64.png и ballerina.gif загружаются с сайта wpvi.ru, независимо от того, на каком именно сайте будет находиться наш файл index.html.
Использование чужих сайтов для получения каких-то объектов, в принципе, нормальная практика. Мы таким образом экономим трафик, используя бесплатно чужой ресурс. Это неплохо для учебных примеров. Но когда вы будете делать реальные проекты, обращайте внимание на такие моменты.
Владелец сайта, на котором хостятся импортируемые объекты, может в любой момент закрыть доступ, удалить файлы, переименовать их и т.п.
В этом случае информация будет отображаться примерно так, как на примерах ниже.
В случае отсутствия файла браузер отобразит текст из атрибута alt.
Самый популярный элемент в мире HTML в недалеком прошлом (лет 20-30 назад), когда таблицы лепили в огромных количествах и использовали где только можно и даже где совсем нельзя.
Постепенно таблицы вытеснили дивы и семантические элементы, но до сих элемент <table> является нужным, особенно если его использовать там, где нужно, для создания таблиц.
HTML-элемент <table> представляет табличные данные, то есть информацию, представленную в двумерной таблице, состоящей из строк и столбцов ячеек, содержащих данные.
Типовая структура:
<caption> - заголовок таблицы (необязательный)
<colgroup> - группа колонок (необязательный, может быть от 0 до нескольких)
<thead> - описания колонок таблицы (необязательный)
<tbody> - тело таблицы, в который входят строки <tr>. Необязательный. Можно использовать строки <tr> непосредственно в <table>.
HTML-элемент <hr> служит для тематического разделения абзацев. Рисует горизонтальную прямую
Типичный пример использования:
Результат вот такой:
Первое правило членов Клуба Красивого Кода - писать красивый код.
Второе правило членов Клуба Красивого Кода - осуждать тех, кто пишет НЕкрасивый код, перевоспитывать их всеми возможными способами.
HTML-элементы <aside> - блок с вспомогательным содержимым
HTML-элемент <aside> представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.
Типичный пример использования:
Результат вот такой:
Основной контент - начало.
Основной контент - конец.
HTML-элемент <span> является основным строковым контейнером для фразового контента, который, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов class или id) или потому, что они имеет общие значения атрибутов, например lang. Он должен быть использован только когда нет другого подходящего по семантике элемента. <span> очень похож на элемент <div>, но <div> является блочным элементом, в то время как <span> является строчным (инлайновым).
HTML-элемент <a> определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.
Элемент HTML <form> представляет собой раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.
Типичный пример использования:
Результат вот такой:
Простая форма, которая пошлет GET запрос в "никуда", т.к. не установлен обработчик запроса.
Если Вы введете, например, "Света", то, поскольку это GET запрос, в адресной строке браузера отобразится значение Света переменной name1:
?name1=Света#page_n22s
По факту эта информация некуда отправлена не будет, т.к. не установлен обработчик запроса.
HTML элемент <mark> представляет текст, выделенный в справочных целях из-за своей актуальности в определённом контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова.
Элемент сильной значимости (<strong>) указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.
Элемент <b> является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом.
HTML <em> элемент отмечает акцентируемый текст. Элемент <em> может быть вложенным, причём каждый уровень вложенности указывает на большую степень акцента.
HTML элемент <i> представляет диапазон текста, который по какой-либо причине отличается от обычного текста, например, идиоматический текст, технические термины, таксономические обозначения и другие. Исторически они были представлены с использованием выделения курсивом (italicized), который является исходным источником <i> наименования этого элемента.
Типичный пример использования:
Результат вот такой:
HTML элемент <mark> для выделения
Элемент сильной значимости (<strong>)
Элемент <b> является частью текста стилистически отличающейся от нормального текста
HTML <em> элемент отмечает акцентируемый текст - здесь сильно акцентируемый текст.
HTML-элемент <audio> - встраивание звукового контента в документ
HTML-элемент <audio> используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута src или элемента <source> – браузер выберет один наиболее подходящий.
HTML-элементы <video> - встраивание видео контента в документ
Для встраивания видео контента в документ используйте элемент HTML <video>. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент <video>. Браузер определит подходящий источник.
Типичный пример использования:
Результат вот такой:
Игра Пилота. Показательная партия.
Игра Пилота. Показательная партия.
Это интересно!
Сравните использование HTML-элемента <video> с использованием HTML-элемента <iframe>, как, например,
загрузка youtube роликов.
HTML-элемент <article> - статья, фрагмент текста, самостоятельная часть документа
HTML-элемент (<article>) представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.
Типичный пример использования:
Результат вот такой:
Странный заказ
- У меня есть для Вас отличное предложение. Надо написать статью на любую тему. Размер: от 3 до 30 килобайт, как захотите. Плачу тысячу рублей за 1 килобайт. Тема - любая, по Вашему выбору. Но текст должен быть относительно грамотным и абсолютно оригинальным. И, главное, понятен среднему человеку.
- В чем же подвох? - поинтересовался я.
- Никакого подвоха. Но есть еще одно очень важное условие...
HTML-элемент <pre> - предварительно отформатированный текстовый элемент
Элемент HTML <pre> представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием моноширного ("monospace") шрифта. Пробелы внутри этого элемента отображаются как записанные.
Типичный пример использования:
Результат вот такой:
Что ввожу, то и вижу!
1
2
3
4
5
Строка номер 6
...
.
.
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⠋⠄⠄⠄⠈⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⡿⠃⠄⠄⠄⠄⠄⣸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⡦⠄⠄⠄⠄⠄⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⡟⠛⠋⣀⠄⠄⠄⠄⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⡿⠟⠁⠄⠄⠄⠄⠘⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⡿⠄⢀⣀⠄⠄⠄⠄⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⡿⠁⢠⣾⣿⡆⠄⠄⣶⣿⣿⣿⠿⠛⠉⠄⠄⠹⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⡿⠄⢠⣿⣿⣿⡿⠄⠄⣿⠟⠋⠄⠄⠄⢀⣤⡀⠄⠙⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⠃⣰⣿⣿⣿⣿⠃⠄⠄⠄⠄⠄⠄⢀⣴⣿⣿⣿⣦⣀⠈⠻⣿⣿⣿⣿⣿
⣿⠉⠈⢰⣿⣿⣿⣿⣿⠄⠄⠄⠄⠄⢀⣴⣿⣿⣿⣿⣿⣿⣿⣷⣦⠙⠿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣄⣀⣀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣤⣶⣬⣽⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
После окончания этого курса, вам следует закрепить полученные знания на практике и завести свой сайт на бесплатном хостинге.
Хостинг Фри! Бесплатный хостинг с php и mysql без рекламы. Хорошая идея использовать для учебных и тренировочных целей бесплатный хостинг. Современный бесплатный хостинг предлагают в России многие хостинговые компании с поддержкой не только фронтенда, но и бакенда в виде PHP, Python, Node.js, а также базы данных MySQL. Вашему вниманию предлагается исследование и подробный обзор использование на практике нескольких бесплатных хостингов. Хостинг Фри! Бесплатный хостинг. ➳
Ссылки по теме.
https://html.spec.whatwg.org/multipage/ - HTML - текущий стандарт. W3C и WHATWG совместная разработка HTML5. Здесь живет актуальная версия HTML. Эта страница - библия для HTML кодера.
https://validator.w3.org/ - Markup Validation Service. Служба проверки разметки HTML. Проверка кода HTML на формальную валидность.
Курс HTML. За 1 час от полного новичка до новичка с начальными знаниями HTML. На этом курсе, мы с вами за 1 час познакомимся с основами HTML, изучим самые популярные и нужные элементы, а также создадим свой первый сайт с полезной информацией, который будет не стыдно показать работодателю при найме на работу.
Хостинг Фри! Бесплатный хостинг с php и mysql без рекламы. Хорошая идея использовать для учебных и тренировочных целей бесплатный хостинг. Современный бесплатный хостинг предлагают в России многие хостинговые компании с поддержкой не только фронтенда, но и бакенда в виде PHP, Python, Node.js, а также базы данных MySQL. Вашему вниманию предлагается исследование и подробный обзор использование на практике нескольких бесплатных хостингов.
