Что нужно знать в html для верстки
Перейти к содержимому

Что нужно знать в html для верстки

  • автор:

Обязанности HTML-верстальщика

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

HTML-верстальщик должен знать:

  • HTML и CSS на 100%. Именно с помощью этих языков разметки и происходит верстка страницы с макета дизайнера. При этом верстальщик должен учитывать все особенности, предпочтения и версии этих языков для того, чтобы осуществлять верстку страниц любой сложности;
  • JavaScript или jQuery. JavaScript (jQuery) используется для реализации различных динамических элементов на странице (слайдеры, калькуляторы и т.д.). jQuery — набор готовых функций, написанных на языке JavaScript (так называемый, фреймворк);
  • Photoshop. Верстальщик должен уметь работать в Adobe Photoshop и обладать знаниями веб-дизайна для того, чтобы при анализе макета до верстки указать дизайнеру на его ошибки и, если потребуется, быстро сделать поправки в макете без особых усилий;
  • Язык программирования PHP. В арсенале верстальщика должно быть представление о языке PHP и о том, как программист будет натягивать верстку сайта на движок;
  • Как работает CMS и ее API. Обычно верстка сайта делается под какой-то конкретный движок и в большинстве случаев ставится на бесплатную CMS. Знание того, как работает CMS, а также ее особенностей, нужно для того, чтобы у человека, который будет работать с вашей версткой, не возникало проблем при ее «натяжке». Только плюсом будет идеальное знание API одной или нескольких CMS. Например, клиент может заказать изготовление шаблона на CMS у вас.
  • SEO-оптимизацию. HTML-верстальщик обязательно должен ориентироваться в SEO, потому что оптимизация сайта начинается именно с первых строк верстальщика.

Что должен делать HTML-верстальщик:

  • Кроссбраузерную верстку — учет особенностей отображения кода веб-страницы во всех браузерах любой операционной системы.
  • Валидную верстку сайта — написание HTML и CSS-кода, соответствующих стандартам W3C (компании, разрабатывающей и внедряющей интернет-стандарты), и проходящим тест на валидаторе.
  • Семантическую верстку. Осмысленное расположение фрагментов кода на странице, правильное использование тегов, понятные название классов и идентификаторов.
  • Оптимизацию под поисковые системы. От верстальщика вы должны получить полностью оптимизированную верстку, начиная от наличия тегов title, description, keywords до присутствия alt в картинках и title в ссылках.
  • Оптимизировать скорость загрузки сайта:
    • За счет уменьшения количества кода, но не в ущерб читаемости и производительности;
    • За счет уменьшения веса и количества картинок (так называемая, верстка спрайтами).

    На заметку:

    • верстка шаблона под CMS подразумевает изготовление простой верстки (HTML + CSS) с учетом требований данной CMS. То есть, на выходе вы не получаете готовый шаблон, а вам еще нужно будет искать человека который сделает шаблон из этой верстки;
    • изготовление шаблона под CMS включает верстку и изготовление из этой верстки готового шаблона, который на 100% готов для дальнейшего использования.

    Предоставлять качественный сервис

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

    Верстальщик. Гайд по профессии

    В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.

    Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.

    Сейчас же грань размылась — теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.

    В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флексов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.

    С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2023 году требуют от верстальщика работодатели.

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

    Идеальная вакансия

    Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:

    Требуется верстальщик, который:

    • Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
    • Идеально знает CSS. Использует препроцессор Sass. Знает флексы и гриды. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
    • Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
    • Использует Git. Умеет работать в GitHub.
    • Может натянуть вёрстку на CMS: Bitrix и WordPress.
    • JavaScript пишет с помощью фреймворков — React, Angular, Vue.
    • Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
    • Уверенно владеет Figma, Photoshop и Illustrator или знает Sketch.
    • Имеет своё портфолио, инициативный, готов пройти испытательный срок.

    Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.

    Инструменты верстальщика

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

    Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково.

    • SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
    • Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
    • БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
    • Canvas — сущность в HTML, на которой можно рисовать (люблю объяснять!).
    • PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
    • Git — система контроля версий, чтобы не делать Макет_2_Финальный_СПравками_final_наревью.html . Мы в Академии любим Git и написали про него много статей.
    • Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
    • Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
    • Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

    Что там с Фотошопом и Иллюстратором

    Практика показывает, что все переходят на Figma. Ну то есть Фотошоп и Иллюстратор ещё можно где-то встретить, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.

    Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.

    А портфолио откуда брать?

    • Найти бесплатных макетов и наверстать.
    • Придумать самому, если есть Дизайнерская Жилка.
    • Пройти полноценную подготовку к работе и получить пару проектов в портфолио.

    Что об этом всём думают в индустрии?

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

    По опыту: нужно точно, быстро и адаптивно.

    Точно — значит по макету: надо уметь его открыть и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах.

    Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.

    В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер.

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

    Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.

    Что ещё?

    Все работодатели хотят, чтобы к ним пришёл опытный верстальщик — для этого берите и верстайте. Можно смотреть на популярные сайты, верстать по бесплатным макетам или хорошим курсам. Как определить, хорошие ли перед вами курсы, я рассказывал в статье «Как получать 100 тысяч за код». Там есть полный список вещей, которые хорошо бы знать веб-разработчику, чтобы повысить шансы на высокую зарплату.

    Материалы по теме

    • Хочу работать в IT, но…
    • Как написать хорошее сопроводительное письмо
    • Какие вопросы задают на собеседованиях
    • Как легко выполнить тестовое задание

    «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

    С чего начать изучать HTML и CSS

    С чего начать изучать HTML и CSS

    Даниил Шатухин

    Даниил Шатухин Редактор в «Хабре», тестировщик и любитель веба

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

    Освойте профессию «Frontend-разработчик»

    Что такое HTML, CSS и верстка

    HTML — язык разметки гипертекста для структурирования контента на странице. Код на HTML говорит браузеру о том, как необходимо отобразить информацию. Для разметки используются теги, которые помогают добавлять заголовки, параграфы, списки, ссылки, изображения, видео и таблицы. CSS — каскадные таблицы стилей, язык, позволяющий менять внешний вид HTML-документа, работать со шрифтами, цветами, градиентами и анимациями. Также CSS позволяет ускорить разработку, так как с его помощью можно задавать стили сразу для группы элементов.

    Профессия / 12 месяцев
    Веб-разработчик с нуля
    Создавайте нужные любому бизнесу сервисы
    3 658 ₽/мес 6 650 ₽/мес

    vsrat_8 (2)

    Верстка — создание страницы с применением HTML и CSS. Также в масштабных проектах разработчики используют JavaScript для динамических элементов. К примеру, сложных анимаций. Связка HTML и CSS похожа на автомобиль. Язык разметки гипертекста — рама машины, которая задает общие черты и обеспечивает базу для модификаций, а каскадные таблицы стилей — кузов с уникальной формой, деталями и цветом.

    План изучения HTML

    • h1 — h6 — заголовки разных уровней;
    • b , i , strong — выделение текста курсивом или жирным шрифтом;
    • ul , ol , li , p , br — списки разных типов и деление текста на абзацы и параграфы;
    • table , tr , td — разметка таблиц;
    • img , object — использование изображений и других типов визуального контента;
    • form , input , option , textarea , select — формы и их элементы;
    • div , span , head , title , body — теги для инициализации HTML-документа и формирования структуры.

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

    Название атрибута, значение атрибута, содержание тега в HTML

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

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

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

    Станьте веб-разработчиком и найдите стабильную работу на удаленке

    План изучения CSS

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

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

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

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

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

    Ускорить разработку позволяют фреймворки, состоящие из готовых файлов HTML и CSS. С помощью фреймворка можно использовать эти кусочки кода и не писать все с самого начала. К наиболее популярным CSS-фреймворкам относятся Bootstrap, Tailwind CSS, Foundation, Bulma и Skeleton.

    Ресурсы для самостоятельного изучения

    MDN Web Docs

    Официальная документация веб-разработчика от команды Mozilla. На сайте собраны статьи по работе с HTML, CSS и JavaScript. Справочник собран специалистами в сфере разработки сайтов и веб-приложений. Ресурс можно использовать как для изучения с нуля, так и для актуализации знаний.

    Сайт документации веб-разработчика от Mozilla, главная страница

    W3C

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

    CSS Diner

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

    CSS Diner - браузерная игра для изучения CSS, интерфейс

    Flexbox Froggy

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

    Интерфейс Flexbox Froggy, браузерной игры для изучения Flexbox CSS

    Frontend Masters Bootcamp

    Короткий курс на 21 час, который поможет освоить основы верстки. Материалы включают в себя уроки по HTML, CSS и другим технологиям веб-разработки. Авторы курсов утверждают, что материалы помогут получить знания и навыки для устройства на работу в крупнейшие IT-компании.

    Flexbox Defense

    Еще одна игра на практику Flexbox CSS в жанре «защита башни». Пользователю необходимо выстраивать защиту от врагов с помощью свойств CSS. Таким образом надо пройти 12 уровней.

    Flexbox Defense - игра по Flexbox CSS в жанре защиты башни

    HTML book

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

    JSFiddle

    Онлайн-редактор кода с возможностью в реальном времени видеть результат работы кода. Также сервис указывает на ошибки и дает советы для их исправления. В JSFiddle предусмотрена возможность совместной работы.

    CodePen

    Своеобразная социальная сеть для веб-разработчиков. На платформе пользователи делятся сниппетами кода с демонстрацией результата в реальном времени. Сервис можно использовать для изучения верстки на практике или в качестве источника вдохновения. Также на CodePen часто проводят конкурсы и тематические недели с денежными призами, которые мотивируют чаще практиковаться.

    CodePen - платформа песочница для демонстрации кода на HTML, CSS и JS

    WebDesign Master

    Сервис поможет разобраться с более сложными темами веб-дизайна и верстки. На сайте есть подробные уроки и полноценные курсы на русском языке.

    HTML Base

    Современный и полный справочник по CSS и HTML. Ресурс включает в себя описание всех тегов, их атрибутов, свойств CSS и примеров кода. Кроме того, на сервисе есть обучающие статьи, видеоуроки и задачи. Сайт полностью на русском языке.

    Code.mu

    Учебник для веб-разработчиков, включающий в себя статьи и уроки по верстке, HTML, CSS, JavaScript, TypeScript и PHP. Также можно научиться работать с препроцессорами и фреймворками. Кроме учебника на сайте есть справочник.

    FreeCodeCamp

    Курс основ HTML и CSS, позволяющий с нуля изучить веб-разработку и написать свой первый сайт. Курс охватывает все базовые темы и рассказывает про адаптивную верстку. Все материалы полностью бесплатные.

    Frontend-разработчик

    Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

    Основы HTML

    HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

    Что такое HTML на самом деле?

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

    Моя кошка очень раздражена

    Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

    p>Моя кошка очень раздраженаp> 

    Анатомия HTML элемента

    Давайте рассмотрим элемент абзаца более подробно.

    Главными частями нашего элемента являются:

    1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
    2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
    3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
    4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

    Элементы также могут иметь атрибуты, которые выглядят так:

    Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

    Атрибут всегда должен иметь:

    1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
    2. Имя атрибута, за которым следует знак равенства.
    3. Значение атрибута, заключённое с двух сторон в кавычки.

    Вложенные элементы

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

    p>Моя кошка strong>оченьstrong> раздражена.p> 

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

    p>Моя кошка strong>очень раздражена.p>strong> 

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

    Пустые элементы

    Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент , который уже имеется в нашем HTML:

    img src="images/firefox-icon.png" alt="Моё тестовое изображение" /> 

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

    Анатомия HTML документа

    Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

    doctype html> html> head> meta charset="utf-8" /> title>Моя тестовая страницаtitle> head> body> img src="images/firefox-icon.png" alt="Моё тестовое изображение" /> body> html> 
    • — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
    • — элемент . Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
    • — элемент . Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
    • — элемент . В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
    • — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
    • — элемент . Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

    Изображения

    Давайте снова обратим наше внимание на элемент изображения:

    img src="images/firefox-icon.png" alt="Mоё тестовое изображение" /> 

    Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

    Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:

    1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
    2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src , сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

    Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).

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

    Примечание: Узнайте больше о специальных возможностях.

    Разметка текста

    В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.

    Заголовки

    Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков (en-US)(en-US), хотя обычно вы будете использовать не более 3-4 :

    h1>Мой главный заголовокh1> h2>Мой заголовок верхнего уровняh2> h3>Мой подзаголовокh3> h4>Мой под-подзаголовокh4> 

    Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента .

    Абзацы

    p>Это одиночный абзацp> 

    Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом .

    Списки

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

    1. Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент .
    2. Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент .

    Каждый пункт внутри списков располагается внутри элемента (list item, элемент списка).

    Например, если мы хотим включить часть следующего фрагмента абзаца в список:

    p> Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе . p> 

    Мы могли бы изменить разметку на эту:

    p>Mozilla, мы являемся мировым сообществомp> ul> li>технологовli> li>мыслителейli> li>строителейli> ul> p>работающих вместе . p> 

    Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

    Ссылки

    Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — — a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

    1. Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
    2. Оберните текст в элемент , например так:

    a>Манифест Mozillaa> 
    a href="">Манифест Mozillaa> 
    a href="https://www.mozilla.org/ru/about/manifesto/details/" >Манифест Mozillaa > 

    Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

    Примечание: href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).

    Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

    Заключение

    Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):

    A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

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

    Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 2 дек. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

Добавить комментарий

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