Html что нужно знать

Почему HTML по-прежнему востребован и зачем он предпринимателям?

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

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

Что такое HTML?

HTML (HyperText Markup Language — язык гипертекстовой разметки) представляет собой стандартизированный язык разметки документов и используется для отображения веб-страниц в браузере. Это формат разметки, с помощью которого браузер создает страницы сайтов при загрузке, формируя их из разных типов контента. HTML-код обрабатывается браузером в виде текстовых документов с расширением .htm или .html.

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

Изначально язык предназначался только для структурирования и форматирования документов, а также поддерживал гипертекст – текст со ссылками на другие тексты, доступ к которым можно получить немедленно. Что касается поддержки мультимедийного контента (анимация, видео, звук и т.д.), то эти возможности были добавлены в него позже.

История возникновения и развития языка HTML

Язык разметки гипертекста был разработан в конце 80-х-начале 90-х годов ХХ века Тимом Бернерсом-Ли – британским ученым, которого по праву считают отцом-основателем современного интернета. Технология гипертекстовых документов, связанных между собой гиперссылками, была представлена им в 1989 году.

Сначала она предназначалась для обмена научной и технической документацией между сотрудниками института CERN, где на тот момент работал Бернерс-Ли. Язык HTML, протокол HTTP и идентификаторы URI и URL стали теми базовыми элементами, которые легли в основу всемирной паутины WWW. В наши дни HTML считается официальным веб-стандартом, а его спецификации поддерживаются и разрабатываются консорциумом World Wide Web (W3C).

Первая версия языка гипертекстовой разметки HTML была опубликована в 1991 году и содержала 18 структурных элементов-дескрипторов, получивших название «теги» (tags). Они обеспечили максимально простой и лаконичный дизайн языка, который со временем дополнялся и усложнялся. Помимо тегов, разметка HTML содержит их модификаторы, называемые атрибутами. На сегодняшний день существует 140 различных тегов и атрибутов HTML, некоторые из них уже устарели и не поддерживаются современными браузерами.

Хоть Бернерс-Ли и выпустил первую версию языка в 1991 году, однако она не получила статус официальной спецификации, поэтому до 1995 года существовал целый ряд неофициальных стандартов HTML. В 1995 году работой над обновлением HTML занялся консорциум World Wide Web (W3C), вскоре он выпустил первый официальный стандарт языка, получивший название HTML 2.0.

В том же году вышел HTML 3.0, а в 1997 году HTML 3.2 и HTML 4.0. Третья версия языка разметки гипертекста получила поддержку таблиц, gif-изображений и математических формул, а еще обтекание изображений текстом. В версии 4.0 разработчики произвели «очистку» стандарта, отказавшись от ряда устаревших элементов.

В 1998 году W3C начал разработку нового языка разметки на базе HTML 4, который соответствовал бы синтаксису XML. Он получил название XHTML, а первая его версия появилась в 2000 году. В 2009 году готовился выпуск XHTML 2.0, однако впоследствии разработка этого стандарта была прекращена. В 2000 году был разработан стандарт ISO HTML, созданный на основе HTML 4.01 Strict.

Самым масштабным обновлением языка стал выпуск HTML5 в 2014 году. В нем были реализованы возможности для упрощенного создания и управления мультимедийным контентом (аудио и видео) и графическими элементами без внешних плагинов и API. Также HTML5 получил поддержку формата SVG и математических формул, а еще обратную совместимость с предыдущими версиями языка. Кроме того, разметка этой версии получила ряд новых семантических тегов (, , и ), что сделало содержимое страниц более структурированным и насыщенным. В 2016 был представлен стандарт HTML 5.1, в 2017 году HTML 5.2, а в 2018 году HTML 5.3.

Как работает язык HTML?

В основе языка гипертекстовой разметки HTML находится комбинация тегов, которые указывают браузеру, как правильно преобразовать HTML-код в визуальные объекты на страницах сайта. Они представляют собой парную (как правило) конструкцию, при помощи которой можно задать значения тексту или другим данным, находящимся внутри нее.

К примеру, тег выделяет текст жирным шрифтом, тег

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

Свяжите сервисы между собой без программистов за 5 минут!

Как настроить выгрузку данных по звонкам из Stream Telecom в Google Sheets?

Как настроить выгрузку новых заказов из PrestaShop в виде сделок в Битрикс24?

• Тег относится к самому высокому уровню, он обозначает начало и конец HTML-кода в документе.
• Тег включает в себя метаинформацию, в том числе кодировку и заголовок страницы.
• Тег содержит всё остальное содержимое страницы: заголовки, абзацы, списки, ссылки, встроенный медиа-контент и т.д.

HTML предоставляет некоторые возможности по редактированию внешнего вида контента. Например, с его помощью можно изменить шрифт или цвет текста, сделать его жирным, подчеркнутым, курсивным, зачеркнутым и т.д. Начиная с 5-й версии, язык получил функционал по проверке правильного заполнения форм (можно указать типы данных для каждой формы) и встроенный аудио-видео плеер. Раньше для размещения мультимедийного контента в HTML-документе приходилось подключать Adobe Flash Player или другие плагины. А атрибут draggable позволяет визуализировать процесс перетаскивания элементов.

Популярные HTML-редакторы

К числу наиболее известных и широко используемых программ для работы с HTML-кодом относят:

Notepad++. Универсальный и весьма функциональный бесплатный текстовый редактор, который может использовать не только в качестве HTML-редактора, но и как достойную альтернативу обычному блокноту. Имеет довольно простой и понятный интерфейс, поэтому хорошо подходит для начинающих пользователей. Есть широкая подборка дополнительных плагинов, функции проверки работоспособности кода, подсветки синтаксиса, автодополнений, а еще поддержка макросов.

Brackets. Бесплатный текстовый редактор для веб-разработчиков, оптимально подходит для написания кода на HTML, CSS и JavaScript. Разработан компанией Adobe, поддерживается на GitHub. Совместим с операционными системами Mac, Windows и Linux. Имеет целый ряд расширений, в том числе множество инструментов для работы с кодом: Live Preview (просмотр HTML-кода в режиме реального времени), Git (система контроля версий), Git-FTP (синхронизация с FTP) и т.д.

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

Aptana Studio. Свободная кроссплатформенная среда разработки (IDE), предназначенная для создания динамических веб-приложений. Поддерживает более 50 форматов, включает обширный набор JavaScript-библиотек и фреймворков (AJAX). Среди других полезных функций стоит отметить выделение цветом и автодополнение кода JavaScript, HTML и CSS, проверка ошибок и ряд расширений пользовательского интерфейса.

Sublime Text. Проприетарный текстовый редактор поддерживает множество языков программирования с подсветкой синтаксиса для HTML, CSS, JavaScript, Java, C, C++, PHP, Python, Perl, XML и многих других. Функционал программы включает удобный интерфейс с рядом режимов экрана и визуальных тем, опции выделения столбцов и множественной правки, автодополнения, сниппеты (сохранение часто используемых элементов кода), автосохранение, проверка синтаксиса, автоматизация при помощи макросов, настраиваемые комбинации клавиш и т.д.

Плюсы и минусы языка HTML

HTML имеет немало преимуществ, которые обеспечили ему популярность и широкую сферу применения на протяжении нескольких десятилетий. Фактически, на этом языке создавался весь современный интернет. К основным плюсам HTML можно отнести такие тезисы:

• Его код выполняется во всех распространенных интернет-браузерах, включая Google Chrome, Mozilla Firefox, Internet Explorer, Opera, Safari и т.д. Писать же HTML-код можно, по сути, в любом текстовом редакторе, хоть в обычном блокноте.
• Комбинация из HTML, CSS и JavaScript позволяет создавать полноценные сайты не только с голым текстовым контентом, но еще с дизайном (в CSS прописываются отступы, выравнивания, позиционирование, прозрачность, границы, тени и многое другое), скриптами (например, для обработки действий пользователей и мультимедийным контентом (есть встроенный аудио-видеоплеер). При помощи HTML можно обмениваться данными с другими сайтами, но для их обработки понадобится PHP.
• Язык имеет очень простой синтаксис, хорошо упорядоченную и последовательную разметку. Благодаря этому, он очень легко учится – освоить его базовую часть с нуля и научиться создавать простые сайты на HTML можно буквально в течение часа.
• Язык полностью бесплатен и находится в открытом доступе.
• Массово используется как профессиональными веб-разработчиками, так и рядовыми пользователями, оптимально подходит для создания простых любительских сайтов.
• Официальные стандарты языка HTML разрабатываются и обновляются консорциумом World Wide Web (W3C).
• Легко интегрируется с другими популярными языками веб-программирования, включая Node.js, PHP и т.д.
• Большой выбор шаблонов для админ-панелей и других инструментов для разработки и управления сайтами на HTML. Многие из них предоставляют широкое разнообразие макетов, более 1000 HTML-страниц и компонентов, а также сотни плагинов и расширений.

Вместе с тем, у HTML есть и определенные минусы, которые также нельзя обойти стороной. К ним относят такие факты:

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

Зачем нужно изучать HTML в 2022 году?

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

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

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

Заключение

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

При помощи HTML можно публиковать на страницах сайтов не только тексты, но и мультимедийный контент (видео, аудио), математические формулы и другие объекты. Для разработки полноценного сайта HTML используют в сочетании с таблицей стилей CSS и языком программирования JavaScript. На сегодняшний день чистый HTML уже редко используется для создания сайтов, однако он по-прежнему востребован при верстке сайтов, являясь полезным инструментом веб-разработки и веб-дизайна.

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

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

3 вещи, которые нужно знать, прежде чем начать HTML-кодирование с нуля

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

Если вы не упоминаете DOCTYPE в файле исходного кода, веб-браузер будет отображать веб-страницу самостоятельно. Это значит, что он будет понимать ваш HTML-код наилучшим образом и может неправильно интерпретировать то, что не может понять. Таким образом, у вас могут возникнуть неподходящие элементы веб-сайта, потому что браузер может эффективно понять, что вы имели в виду. По сути, ваша страница будет отображаться в режиме причуд, если вы не упомянете DOCTYPE в своем коде. В противном случае ваш код будет отображаться в стандартном режиме. Всегда проверяйте, чтобы ваша страница отображалась в стандартном режиме, чтобы дать точные и желаемые результаты на стороне пользователя. Избегайте использования встроенного CSS и внутреннего JavaScript

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

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

Теги

Html Coding Html Coding Html5 Служба веб-разработки Html Coding Service Последние технические истории

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

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

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

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

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

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

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

Верстка — создание страницы с применением 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-теги и можете определить, какие элементы есть на сайте, приступайте к изучению стандартов верстки. В веб-разработке за единообразие и общие правила отвечает организация 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. Справочник собран специалистами в сфере разработки сайтов и веб-приложений. Ресурс можно использовать как для изучения с нуля, так и для актуализации знаний.

W3C

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

CSS Diner

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

Flexbox Froggy

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

Frontend Masters Bootcamp

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

Flexbox Defense

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

HTML book

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

JSFiddle

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

CodePen

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

WebDesign Master

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

HTML Base

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

Code.mu

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

FreeCodeCamp

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

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

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

Что должен из HTML (4 + 5) знать профессионал Front-End-а?

Искал в нете книги по HTML. Нашел вот эту — «HTML и XHTML. Подробное руководство, 6-е издание». Да в ней аж 750 страниц! Неужели все оттуда нужно знать WEBеру? В общем, какие основные моменты из HTML по вашему мнению должен знать каждый?

• Вопрос задан более трёх лет назад
• 3283 просмотра

1 комментарий

Простой 1 комментарий

Да в ней аж 750 страниц! Неужели все оттуда нужно знать WEBеру?

Что случится, когда вы узнаете, что книжек такого объема нужно минимум 4-5?)
Решения вопроса 0
Ответы на вопрос 8
Сергей Горностаев @sergey-gornostaev
Седой и строгий

Хахаха! Если вы хотите связать свою жизнь с ИТ, то готовьтесь к тому, что нужно будет в месяц по 500-1000 страниц техдокументации осваивать.

Ответ написан более трёх лет назад
Нравится 16 7 комментариев
Stalker_RED @Stalker_RED

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

Poirg @Poirg Автор вопроса

Я понимаю. Дело в том, что эта книга, во-первых, 11 года издания. А, во -вторых, я даже не представляю, что там про HTML современный можно на 700 страниц расписать. Что уж говорить, в книге по именно языку программирования JavaScript столько же страниц.

Сергей Горностаев @sergey-gornostaev
Stalker_RED, я техлитературу тоже приравниваю к документации.
Poirg @Poirg Автор вопроса

Т.е вы посоветуете читать напрямую спецификации и пр. документы официальные? Ок, стоит мне вообще искать на русском по HTML специф. ?

Сергей Горностаев @sergey-gornostaev
Poirg, я советую не бояться количества страниц и читать всё — и учебники, и документацию и спеки.
Poirg, в упомянутой вами книге много «воды» — там просто все очень подробно разжевано.

Poirg, я бы еще рекомендовал забыть про поиск чего-либо на русском. Язык разработки — английский. Если с ним сложности, то в первую очередь надо подтянуть именно его, а не изучать html/css/js/whatever.

знать профессионал

Если не знаете английский начните с него, если знаете, то непонятно где Вы ищите. (в китайском интернете?)

Все доступно (но это только верхушка айсберга)

CSS: The Definitive Guide, 4th Edition
Author: Eric A. Meyer, Estelle Weyl
ISBN-10: 1449393195
Year: 2017 Pages: 1090
Language: English

CSS Pocket Reference, 5th Edition
Author: Eric A. Meyer
ISBN-10: 978-1492033394
Year: 2018
Pages: 208
Language: English

CSS in Depth
Author: Keith J. Grant
ISBN-10: 1617293458
Year: 2018
Pages: 472
Language: English

CSS Refactoring
Author: Steve Lindstrom
ISBN-10: 1491906421
Year: 2016
Pages: 160

New Perspectives HTML5 and CSS3, 7th Edition
Author: Patrick M. Carey
ISBN-10: 1305503937
Year: 2017 Pages: 872
Language: English

Responsive Web Design by Example
Author: Frahaan Hussain
ISBN-10: 1787287068
Year: 2018 Pages: 292
Language: English

Pro HTML5 with CSS, JavaScript, and Multimedia
Author: Mark J. Collins
ISBN-10: 1484224620
Year: 2017
Pages: 560

HTML5 and JavaScript Projects, 2nd Edition
Author: Jeanine Meyer
ISBN-10: 148423863X
Year: 2018
Pages: 425
Language: English

Web Design with HTML5 & CSS3: Comprehensive, Eighth Edition
Год издания: 2017
Автор: Minnick J.
Издательство: Cengage Learning
ISBN: 978-1305578166
Серия: Shelly Cashman Series
Язык: Английский

Ответ написан более трёх лет назад
Комментировать
Нравится 7 Комментировать
Верстка/frontend
В семантике нужно отлично шарить, посмотрите доку по бэмУ
https://ru.bem.info/methodology/
Ответ написан более трёх лет назад
Нравится 2 11 комментариев

Человек html еще не освоил, а Вы ему бэм подсовываете. Да и как бэм поможет в освоении html?

А какое отношение бэм имеет к семантике? >_>
snap44, на самом деле самое непосредственное) БЭМ — это про деление страницы на семантические блоки.

Игорь Воротнёв @HeadOnFire

Толстый Лорри, Не совсем. Тем более что понятие «семантики» в самом HTML имеет абсолютно автономное и полноценное значение и к БЭМ никаким боком не тулится.

Игорь Воротнёв, идеология БЭМ близка к веб-компонентам и прочему светлому будущему. Но формально вы правы (=

Игорь Воротнёв @HeadOnFire

Толстый Лорри, опять же, какое такое прямое отношение веб-компоненты имеют к семантике HTML? Семантика разметки — это совершенно другое, тут дело не в формальном определении.

Простой тест. Вопрос — может ли быть семантическая верстка без БЭМ? Ответ — да, может. Вывод — это разные вещи.

какое такое прямое отношение веб-компоненты имеют к семантике HTML?

Смотря что вы понимаете под семантикой HTML (= Тут не все так однозначно.

Если смотреть со стороны браузера (некая имплементация парсера по стандарту HTML), то БЭМ-структура ему ничего не скажет, в отличии от веб-компонентов (на основе информации о которых он будет определенным способом заниматься рендером, обрабатывать события и прочее).

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

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

Вопрос — может ли быть семантическая верстка без БЭМ? Ответ — да, может. Вывод — это разные вещи.

Тут закралась коварная логическая ошибка) «Рубли — это деньги? Могут ли быть деньги, но не рубли? Да, значит, рубли — это не деньги».

А «семантической версткой» принято называть специальные теги и ряд правил их использования, внесенные стандартами HTML5. БЭМ не требует их использования и не включена в стандарт, никто, кроме веб-разработчиков и ряда инструментов не обращает внимание на семантику БЭМ. Поэтому с формальной точки зрения (стандарта) вы действительно правы.

Игорь Воротнёв @HeadOnFire

Смотря что вы понимаете под семантикой HTML (= Тут не все так однозначно.

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

Тут закралась коварная логическая ошибка) «Рубли — это деньги? Могут ли быть деньги, но не рубли? Да, значит, рубли — это не деньги».

Логическая ошибка действительно есть в вашем примере про деньги. В моем примере про семантику логической ошибки нет.

А «семантической версткой» принято называть специальные теги и ряд правил их использования, внесенные стандартами HTML5

Ура, истина начинает всплывать на поверхность! 🙂
Только «семантическая верстка» это уже вторичный термин, первичный — семантические теги. Семантика в основе самого языка. Именно об этом речь.