Основы HTML
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
Главными частями нашего элемента являются:
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
Вложенные элементы
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент
. Приведённое ниже неверно:
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Анатомия HTML документа
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):
Теги HTML: 10 крутых вещей которые они могут делать
В общем сложности, сегодня в HTML присутствует 142 элемента, которые стандартизованы W3C, исключая те, которые находятся в разработке или устарели (такие как: strike, center, font, plaintext и многие другие).
1. Map картинок
тег может быть использован для создания кликабельных областей на картинке, которые могут быть использованы в перенаправлении пользователя на другой сайта или перемещение экрана на другую область страницы.
2. Input подсказки
Используя можно сделать список подсказок, которые будут появляться по время ввода данных в input.
3. Подсветка текста
4. Template
Внимание: Данный тег не поддерживается в IE.
5. Small
Иногда требуется сделать размер шрифта меньше — не таким как основной. Например: условия, цитаты, юридические права и так далее. Для этого подойдет тег .
6. Ссылка на корень сайта
Тег указывает корневую ссылку для всех ссылок внутри используемого документа. Так же об этом теге можно прочитать на официальном сайта Mozilla Developers.
7. Picture тег
Количество девайсов с разными расширениями экрана расчет с каждым днем. Для телефона надо одно разрешение, для компьютера другое. Теперь такой вопрос — как быть с картинками? Ведь их нужно адаптировать под разные экраны. Проблема решена, мы будем использовать HTML5 тег —
, который позволяет добавлять разные картинки под разные расширения.
Внимание: данный тег работает только в Chrome. Для того, чтобы это работало в FireFox нужно поставить dom.image.picture.enable как true в about:config.
8. Color Picker или выбор цвета
HTML5 представил очень много разных возможностей. Одним из них — это возможность выбора цвета. Input элемент, с type=»color», теперь позволяет выбрать цвет из окошка, которое появляется при нажатии на поле.
9. Группирование
Внимание: данный тег может принимать свойства CSS.
Как писать на HTML5 и какие у него возможности
Разбираемся, какие возможности есть у HTML5, чем он отличается от предыдущих версий и что почитать по теме HTML для самообучения.
Что такое HTML
HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:
Словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C). Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документе перечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, к которому придётся часто обращаться.
Конечно, современные браузеры отлично покажут документ независимо от того, в каком стиле оформлен код HTML, но вам будет стыдно перед коллегами, которые заглянут в исходники. Курс «Frontend-разработчик» поможет не только освоить HTML, но и в разы обойти программистов-самоучек. А сейчас обратимся к самым азам.
Пишет про разработку в Skillbox. Работал главным редактором сайта «Хабрахабр», ведет корпоративные блоги.
Набор технологий HTML5
HTML5 — последняя и самая мощная версия стандарта HTML, с новыми элементами, атрибутами и поведением. Под термином HTML5 также подразумевают набор технологий для разработки сайтов и веб-приложений.
Термином HTML5 обозначаются свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).
Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идёт о технологиях HTML5.
В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. На HTML5 даже создают браузерные игры. И всем известный YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.
Отличия HTML5 от предыдущих версий
Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег для указания типа документа.
Всё, теперь у нас документ по стандарту HTML5.
Однако здесь добавлено много новых технологий:
Как редактировать HTML?
Разметка HTML5 создаётся с помощью тех же приложений, что и разметка обычного HTML, начиная с «Блокнота» в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5 — например, Notepad++, Sublime Text.
Справочные ресурсы по HTML
Как научиться писать на HTML
Одной зубрёжкой тегов не обойтись. Изучайте основные элементы и экспериментируйте. Поставьте сами конкретную задачу (например, сделать сайт-визитку) или возьмите платное задание как фрилансер и пробуйте его реализовать.
Можно подсматривать в справочник, гуглить, спрашивать совета на форумах и сайтах с вопросами-ответами. Или найти максимально похожий сайт, открыть его код — и разбираться, как он работает. Можно изменить его для своих нужд, только не забудьте стереть копирайты и комментарии авторов.
Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.
Некоторые разработчики не хотят открывать свой код, они шифруют (обфусцируют) скрипты на сайтах, но их тоже можно разобрать специальными инструментами.
Чтобы создавать интерактивные сайты с более сложной функциональностью, с современным и красивым дизайном, нужно дополнительно изучить CSS, JavaScript, веб-дизайн и некоторые другие предметы. Тут требуется более фундаментальная подготовка.
Погрузившись в обучение, вы научитесь создавать свои собственные
веб-проекты и сможете претендовать на позицию junior-разработчика.
Полезные техники HTML, CSS и JavaScript
Техника – это способ справиться с заданием, и у нас, разработчиков и дизайнеров фронтэнда, этих способов бывает достаточно много. При это, будучи погруженными в рутинную работу, мы порой не всегда замечаем как стремительно меняется окружающая нас сфера. В период с 2002 по 2010 годы сообщество фронтэнд-разработчиков буквально покрывалось язвами избыточного кода и ресурсов, от которых страдали и работа сайтов, и удобство их использования. Чтобы с этим справиться, мы придумали уйму хаков, трюков и уловок под кодовым названием «техника». Мы по-прежнему продолжаем выполнять поставленные перед нами задания, просто используем не самые эффективные способы.
Оборачиваясь назад, отметим, что в последние несколько лет установились новые, лучшие, стандарты и способы их применения, позволяя нам создавать более продвинутые «техники». Этот новый мир, открытый перед нами, называется «modern web». Web 2.0, которым восхищались в свое время, сегодня для нас стал запутанным и застойным. С одной стороны нет сомнений в том, что подобная судьба постигнет и то, что мы называем «modern web». С другой — пока что мы можем использовать этот термин и злоупотреблять им сколько угодно, пока понимаем, что он означает.
Используя следующий код мы можем предложить пользователям IE, у которых еще нет этого дополнения, загрузить его с помощью JavaScript:
Возможно, вы помните, как приходилось придумывать кучу уловок для каждого конкретного браузера, чтобы ваш сайт в них хорошо отображался, создавать бесчисленные пустые элементы с порезанными изображениями, писать подробные и даже избыточные коды на JavaScript, чтобы обеспечить работу простейшего функционала. В каком-то смысле, сейчас мы мучаемся с теми же проблемами. Мы по-прежнему боремся за полный контроль, ищем лучшие инструменты для «приструнения» размещения, стиля и функционала, просто сегодня это уже происходит на другом уровне.
 
Инфографика с www.html5readiness.com, иллюстрирующая поддержку браузерами свойств HTML5 и CSS3.
Расположение
Clearfix
Свойство float было введено еще в CSS 2.1, но так и не стало той панацеей, на которую мы надеялись. Одна из основных проблем — поддержание размеров родительского элемента при плавающем дочернем. Чтобы решить ее, был придуман хак, известный как clearfix. Возьмем следующий HTML:
>> Если для разработки своих проектов вы пользуетесь HTML5Boilerplate, то эта техника уже интегрирована в среду.
Box-sizing
Разработчики годами спорят о том, какая модель боксов лучше. Противостояние режимов Quirks и Standards на самом деле заключается в одном вопросе, должны ли размеры элемента меняться после установки при применении границ и заполнения, или нет. Теперь все в основном сходятся на том, что имеет смысл считать границы и заполнение частью доступного пространства внутри элемента, а не добавлять их к его ширине и высоте.
Однако с широким распространением хака по изменению размера боксов этот спор утратил свою актуальность. Теперь браузер будет идти у вас на поводу, а не наоборот. Эту универсальную технику, разработанную Крисом Койером и Полом Айришем, можно применить следующим образом:
>> Использование селектора* в CSS многие критикуют за возможное ухудшение производительности. На самом деле снижение довольно несерьезное и его можно не учитывать, если конечно вы не гипероптимизируете ваш сайт/приложения. С помощью функции border-box браузер добавит заполнение и границы внутрь доступного пространства. Режим ‘Standards Mode’ можно использовать, установив размер боксов равным размеру содержания.
Multi-columns
На отображение текстовой информации в Интернете очень повлияли традиции письма и печати, только вот незадача: в данном вопросе он все равно застрял на стадии пергамента. Некоторые проблемы могут быть решены после внедрения долгожданных стандартов Paged-Media и CSS Regions. Хотя надо сказать, что первые шаги с расположениям «как из журнала» были сделаны еще когда браузеры начали внедрять мультиколонки CSS. Код, который потребуется для создания такого эффекта, довольно прост:
Расчет размера
Рассчитывать размеры элементов бывает непросто. Раньше у нас не было никаких инструментов для подсчета используемых в верстке единиц, не говоря уже о подсчете смешанных единиц, но все изменилось благодаря calc. Она создает заполнение, которое не влияет на оригинальную ширину элементов и не использует ничего типа box-sizing:border-box; до недавнего времени это возможно было только через добавление дополнительных элементов.
>> calc() заботится о правильном расчете ширины на основании ширины материнского элемента минус определенное заполнение в 20px. Я умножил это на два для каждой стороны элемента 2, центрировал элемент с помощью относительного поцизионирования и установил автоматические левую и правую рамки.
Стили
Прозрачность
Оформление элемента в нужном стиле всегда зависело от тех инструментов, которые были доступны в CSS. Прозрачность — один из первых поддерживаемых свойств, который вы встретили бы еще в начале-середине двухтысячных. С появлением HTML5 и более эффективной стандартизации, браузеры начали реализовывать свойство непрозрачности по умолчанию, появилась поддержка альфа-канала как в новом стандарте Color Module. В него включены и руководства по моделям RGBA и HSLA.
>> Цветовые модели RGBA и HSLA можно использовать всегда при наличии значений HEX. Там же вы найдете длинный список интересных цветов и определенными именами, которые можно посмотреть в этом стандарте. Они пригодятся для создания динамичного смешения элементов.
Фильтры
Работать с фильтрами в CSS очень интересно. Иметь возможность динамически изменять вид и ощущение элементов на странице без каких-либо дополнений со стороны — это потрясающе, к тому же, так удастся значительно сократить время, проведенное с Photoshop.
>> Фильтры CSS пока поддерживаются только в браузерах на движке webkit, поэтому пока лучше использовать их как дополнение, а не основной инструмент. Дополнительно о фильтрах можно почитать здесь.
 
Фильтры CSS позволяют дорабатывать изображения на страницах прямо в браузере. Больше примеров набора доступных фильтров, можно найти тут.
Замена изображений
Данная техника применяется уже давным-давно, но, к сожалению, даже новейшие и самые продуманные техники замены не лишены недостатков. Впрочем, недавно стали популярны два удивительных метода, каждый из которых по-своему уникален. Первый из них был написан Скоттом Келлманом:
Метод переключения изображений Скотта Келлмана и Николаса Галлахера
Адаптивное видео
Довольно трудно заставить аудиовизуальные элементы отображаться в правильном масштабе в адаптивной верстке. Теперь, когда все больше сайтов имеют самонастраивающуюся конструкцию, необходимо позаботиться о том, чтобы размеры элементов и разрешение обрабатывались корректно. Встроенное видео — один из самых «упрямых» типов аудиовизуальных средств из-за того, что контент поставляют дополнительные серверы. Встраивание типичного видео с YouTube выглядит примерно так:
>> «Заворачивание» iframe в другой элемент позволит нам применить тот функционал адаптивности, который нам нужен.
>> Основа этого метода — установка wrapper’s padding-bottom видео: 56,25%; Использование заполнения означает, что значения в процентах будут основываться на ширине родительского элемента; ‘56,25%’ даст нам разрешение 16:9. Посчитайте сами, если хотите. 9 / 16 = 0,5625. 0,5625 * 100 = 56,25 (наше значение в процентах).
Функциональные возможности
Простой выбор элементов
С ростом популярности некоторых библиотек JavaScript (например, jQuery), комитет ECMAScript и стандартная комиссия W3C отметили одну из основополагающих деталей в функциональности, которой изначально недоставало разработчикам: выбор элементов. Такие методы, как getElementByID() и getElementsByClassName() быстры, но не так гибки и надежны, как selector engines из сообщества разработчиков; комиссия по стандартизации сымитировала эту гибкость в оригинальном методе-селекторе в виде querySelectorAll().
>> querySelectorAll() может работать с разными и с многими селекторами одновременно. Здесь можно прочитать об этом подробнее.
Создание новых массивов данных
Переборы элементов массива стало очень утомительно писать. Писать и переписывать циклы for(), прямо скажем, скучно. В JS версии 1.6 появился метод map(), поддерживающий более легкий перебор массива и создание нового массива на его базе.
Прогоняя этот код с применением функции console.log(welcomes), вы увидели бы приветствия в новом массиве [ ‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Kevin!’ ].
«Чистка» документов
Отдельные библиотеки JavaScript часто вмешиваются в исходный документ и объекты в окне браузера. Это может представлять неудобство как для других отдельных библиотек, так и для разработчика. В любом случае постарайтесь обеспечить себе «чистые» версии всех объектов, создав новую копию каждого. Лучший способ это сделать — создать элемент iframe, вставить его в модель DOM и хранить новые копии этих объектов.
Хотя в серверном программном обеспечении было сделано множество улучшений, очень важно продолжать дополнять и достраивать наши технологии в соответствии с задачами, которые встречаются нам в свете расположения, стиля и функционала наших проектов. Для поддержания роста и развития экосистемы необходимо поощрять комитеты по стандартизации и производителей браузеров толкать прогресс вперед, предлагая новые стандарты и внедряя новые свойства, обмениваясь знаниями с другими разработчиками и дизайнерами. Больше понимания, меньше плясок с бубном.
Начало работы с HTML
В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!
| Необходимые знания: | Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами. |
|---|---|
| Цель: | Познакомиться с языком HTML и научиться описывать некоторые его элементы. |
Что такое HTML?
Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» (
Структура HTML-элементов
Давайте рассмотрим элемент «параграф» чуть подробнее:
Основными частями элемента являются:
Активное изучение: создание вашего первого HTML-элемента
Отредактируйте строку текста ниже в поле Ввод, обернув её тегами и (вставьте перед строкой, чтобы указать начало элемента, и после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
Вложенные элементы
Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!
Блочные и строчные элементы
Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.
Посмотрите на следующий пример:
— это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).
Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.
Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.
Примечание: вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.
Пустые элементы
Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент вставляет картинку на страницу в том самом месте, где он расположен:
Это выведет на вашу страницу следующее:
Примечание: Пустые элементы иногда называют void-элементами.
Атрибуты
У элементов также могут быть атрибуты, которые выглядят так:
My cat is very grumpy</p>» src=»https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-attribute-small.png» style=»display: block; margin: 0px auto;» width=»1287″ height=»156″ loading=»lazy»>
Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.
Атрибут должен иметь:
Активное изучение: Добавление атрибутов в элемент
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
Булевые атрибуты
Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):
На выходе оба варианта будут выглядеть следующим образом:
Опускание кавычек вокруг значений атрибутов
Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:
Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:
Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.
Одинарные или двойные кавычки?
В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:
Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!
Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:
Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:
Поэтому вам нужно сделать так:
Структура HTML документа
Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:
