Что такое HTML и как с помощью него войти в IT
Социальные сети, интернет-магазины, новостные порталы: в основе большинства веб-страниц лежит HTML. Поэтому не будет преувеличением назвать его главным языком интернета. Редакция MC.today разобралась, что такое HTML, а также изучила его преимущества и принцип работы.
Что такое HTML
HTML (HyperText Markup Language) – это специальный язык разметки, который применяется при создании сайтов в интернете. Браузеры прекрасно понимают html и могут интерпретировать в понятном для человека виде.
Представьте, что вы кликнули по ссылке на сайт mc.today. В этот момент браузер обращается к серверу сайта и получает с него файл в формате HTML. Но пока это всего лишь набор элементов, которые обозначают специальными пометками – тегами. Чтобы превратить их в заголовки, кнопки, ссылки, изображения, браузер интерпретирует теги согласно правилам языка HTML.
Таким образом документ HTML – это своеобразный план с информацией, из каких строительных блоков и в каком порядке собирать веб-страницу. Блоками здесь выступают наборы тегов. Почти все теги парные. Открывающий показывает, где элемент начинается, а закрывающий – где заканчивается. К примеру, чтобы создать абзац, нужно поместить текст между исходным тегом <p> и закрывающим </p>.
Для чего используют HTML
Читая эти строки, вы пользуетесь HTML. Сегодня сайты есть практически у всех, начиная от корпораций и заканчивая специалистами по маникюру. И все они написаны на HTML. Веб-версии имеют приложения, сервисы, игры, Viber и Telegram.
На HTML написаны многие приложения, которые мы считали десктопными или мобильными. И если щелкнуть правой клавишей и выбрать «Просмотреть код», то вездесущий тег <div> обнаружится и в Google Drive, и в Facebook, и на сайте ПриватБанка.
История появления
В 1989 году программист международного центра высоких энергий в Женеве Тим Бернерс-Ли предложил проект Всемирной паутины, или World Wide Web. Идея состояла в том, чтобы создать систему взаимосвязанных гипертекстовых документов, расположенных на компьютерах по всему миру. Для реализации Тим и его помощники разработали технологии, без которых просто невозможно представить себе современный интернет.
- HTTP – протокол, который позволяет передавать документы от клиента к серверу;
- URL – уникальный адрес, который определяет расположение ресурса в интернете;
- HTML – язык гипертекстовой разметки для создания веб-документов.
Не умаляя заслуг Бернерса-Ли скажем, что HTML не появился на пустом месте. За его основу «отец интернета» взял уже хорошо известный на то время язык разметки SGML. И даже визитная карточка HTML – теги с угловыми скобками – тоже оттуда.
Первым официальным описанием HTML стал документ «Теги HTML», который Бернерс-Ли опубликовал в 1991 году. В него вошли 18 структурных и семантических элементов – дескрипторов, или тегов. Небольшое количество элементов решило проблему сложности SGML, но в то же время позволяло создавать простые и красиво оформленные документы. Кроме того, HTML получил поддержку гипертекста.
С ростом популярности Сети стало понятно, что язык гипертекстовой разметки нуждается в развитии. Но нововведения должны подчиняться единым стандартам, чтобы каждый сайт можно было без проблем открыть на любом браузере. Созданием таких стандартов должен был заниматься Консорциум Всемирной Паутины, или W3C, который в 1994 году основал Тим Бернерс-Ли. Это международное сообщество продолжает работать над разработкой web-стандартов. На сегодня актуальной является их версия HTML с порядковым номером 5.3.
Что можно и нельзя сделать на HTML?
Как мы уже говорили, HTML указывает браузеру, из каких элементов и в каком порядке собирать веб-страницу, а также, где брать стили элементов и скрипты. Он также позволяет организовывать информацию разными способами. Например, создавать таблицы, списки, параграфы, форматировать текст, добавлять изображения, заголовки, ссылки и кнопки.
Но его функционала мало, чтобы оформить внешний вид элементов и заставить их реагировать на действия пользователей. Для этой цели используют стили CSS и язык JavaScript.
СSS, или каскадные таблицы стилей , – это язык, на котором описывают внешнюю, визуальную сторону HTML-документов. Совместное использование HTML и CSS упрощает разработку, так как свойства можно прописать один раз в для множества одинаковых элементов. Без CSS, напротив, часть возможностей теряется. Нельзя добавлять дизайнерские шрифты, устанавливать фон веб-страницы, указывать стили для разных состояний объекта.
Хоть HTML и является языком разметки, в нём всё же присутствуют некоторые элементы оформления. Так тег <strong> может сделать текст жирным, а тег <i> – курсивным. Но на практике HTML придает этим тегам в первую очередь смысловое (семантическое) значение. Поэтому использование элементов <strong> и <i> ради визуального эффекта считается дурным тоном.
JavaScript – это язык программирования, который создали специально, чтобы сделать страницы «живыми». Программы, которые написали на JavaScript, легко встраиваются в HTML и автоматически выполняются при загрузке страницы. Без JavaScript HTML тоже теряет часть своих функций: нельзя добавлять анимации, создавать интерактивные элементы, добавлять поиск по странице.
Как выучить HTML
Предположим, вы хотите стать верстальщиком сайтов, Frontend-разработчиком, проектировщиком пользовательских интерфейсов или PHP-программистом. А может занимаетесь маркетингом, пишете тексты и часто публикуете контент. В любом из этих случаев вам необходимо знание HTML.
Поначалу задача освоить его кажется очень сложной. Неясно, что учить и в каком порядке, где писать год и как проверить себя без преподавателя. Однако в сети достаточно подробных справочников и учебников. Вдобавок некоторые из них снабжены тестовыми заданиями по каждой теме и позволяют в любой момент проверить знания.
Для написания кода достаточно обычного блокнота. А запустить его можно в любом браузере, например, Chrome, Opera или Firefox. Если этого недостаточно, есть редакторы с расширенным функционалом: Notepad++, Sublime, Atom. Или бесплатные «песочницы», вроде Codepen. В них можно возиться с HTML и видеть результат в том же окне.
Для тех, кому проще воспринимать аудиовизуальную информацию, можем посоветовать плейлисты на YouTube и бесплатные курсы. Например, «Основы WEB UI разработки 2022» от Prometheus. Или «Основы веб-разработки» от Educational Era. Оба курса рассчитаны на новичков без опыта работы и даже базовых знаний.
Что такое frontend-разработка
Фронтенд-разработка отвечает за создание внешней, или клиентской стороны веб-сайтов. Другими словами, фронтенд – это всё, что ваш браузер может читать, выводить на экран и запускать . В ее основе лежат «три кита» – HTML, CSS и JavaScript. HTML подсказывает сайту, что показывать, CSS определяет как это будет выглядеть, а JS помогает отследить действия пользователя и прописать реакцию на них.
Создание сайта включает в себя несколько этапов: создание прототипа, разработка макета дизайна, верстка, программирование функциональной части, наполнение контентом и тестирование. Как правило, эти задачи разделены между несколькими специалистами. Но в небольших компаниях программисты могут их совмещать.
Дизайнеры проектируют интерфейсы, создают визуальные решения. Верстальщики создают по макетам веб-страницы с помощью HTML и CSS. Фронтенд-разработчики не только верстают, но и программируют веб-страницы или создают веб-приложения. Помимо HTML и CSS, они должны владеть JavaScript. Fullstack-разработчики занимаются фронт- и бэкендом одновременно. Кроме JavaScript они работают с PHP, Python, Java и другими языками программирования.
Почему начинать нужно с frontend разработки? Во-первых, если у вас нет специального образования, то вам будет намного проще понять frontend, потому что это про визуал и про браузер. То есть свои ошибки вы сможете наглядно видеть в браузере. А во-вторых, потому что JavaScript традиционно занимает одно из первых мест в рейтинге востребованности языков программирования.
Как стать frontend-разработчиком
Самостоятельно изучив HTML и CSS, можно начинать применять знания на практике, конвертируя макеты сайтов в код HTML. На рынке труда такие специалисты называются верстальщиками. Их навыков может вполне хватать и для разработки простых сайтов, например landing page.
Дизайнер-верстальщик может совмещать верстку с проектированием интерфейсов и созданием визуальных решений. По данным work.ua, средняя зарплата верстальщика в Украине составляет от 15 до 23 тыс. грн.
Фронтенд-разработчик не только верстает, но и программирует веб-страницы или создает полноценные фронтенд-приложения. В его обязанности входит создание HTML-страниц на основе макетов, написание и привязка скриптов, оптимизация производительности и совместимости сайта, тестирование и сборка проекта.
Junior frontend-разработчик должен понимать принцип работы Веб, знать основы HTML и CSS, иметь опыт программирования на JavaScript, практические навыки работы с фреймворками, jQuery, React и GIT. Чтобы получить первую работу, новичку нужно обратиться в компанию веб-разработки. Там, конечно, захотят оценить не только теоретические знания, но и практические навыки претендента. Поэтому важно заранее подготовить портфолио с работами.
Frontend-разработчики в Украине зарабатывают от 30 до 45 тысяч гривен. Растет и количество вакансий, связанных с этой профессией. Отсюда можно заключить, что изучение HTML – это реальная возможность получить перспективную IT-профессию.
Отличия HTML и HTML5
Долгожданная пятая версия HTML увидела свет в 2014 году, через 15 лет после HTML4. А ее появлению предшествовала драматическая история, достойная детективного сериала. Дело в том, что в конце 90-х годов консорциум W3C счел язык HTML неспособным на дальнейшее развитие. Свои надежды там возлагали на вероятного наследника HTML – язык XHTML.
В 1998 году W3C и вовсе прекратил поддержку HTML. Но нововведения не всем пришлись по вкусу. С одной стороны, более строгие стандарты XHTML упрощали обработку страниц автоматическими программами. С другой – заставляли разработчиков изменить подход к веб-разработке, требовали обновления уже существующих страниц и не добавляли новой функциональности.
Всё это привело к тому, что группа программистов из Apple, Mozilla Foundation и Opera Software создала сообщество WHATWG, призванное продолжить разработку стандартов HTML. Члены сообщества сфокусировались на том, чего языку разметки не хватает для воплощения идей веб-разработчиков. В частности на улучшении поддержки веб-приложений. После длительной паузы W3C всё же отказалась от работы над XHTML и примкнула к WHATWG для совместной разработки HTML5, которая подарила нам множество новых возможностей.
Поддержка аудио и видео – появилась возможность вставлять медиафайлы прямо в веб-страницу без использования Adobe Flash и Microsoft Silverlight. Для этого используют новые медиа элементы <audio>, <video>, <source>. При этом атрибут controls позволяет отображать элементы управления (запуск, прокрутка, регулятор громкости).
Семантическая разметка – в HTML5 появились новые элементы для более логичного структурирования страницы. Так элемент <header>, как ясно из названия, содержит «шапку» с вводными и навигационными элементами. Элемент <nav> создает блок навигации по сайту. Элемент <aside> определяет дополнительный блок сбоку от основного. А элемент <footer> задает «подвал» сайта с контактной и правовой информацией.
Рисование на странице – появившийся в HTML5 тег <canvas> можно использовать для рисования графики с помощью сценариев.
Поддержка локального хранилища – теперь данные на стороне клиента можно хранить не только в кэше браузера, но и в базе данных SQL. Это улучшает безопасность и позволяет не беспокоиться, что пользователь сотрет файлы cookie.
Преимущества и недостатки HTML
Преимущества
- Широкое распространение языка;
- Совместимость файлов с большинством браузеров;
- HTML бесплатен и находится в открытом доступе;
- Поддержка стандарта консорциумом W3C;
- Простая интеграция с базовыми языками вроде PHP или Node.js.
Недостатки
- По большей части не годится для создания динамических страниц. Для этого может понадобиться JavaScript или PHP.
- Некоторые браузеры медленно осваивают поддержку новых функций.
- Иногда бывает сложно предугадать реакцию старых браузеров (Internet Explorer версии 8 и ниже) на новые теги.
Перспективы развития
По данным We Are Social, в январе 2020 года в мире было 4,54 миллиарда пользователей интернета. В июле 2022 их стало уже 5,03 миллиарда. Это 63% населения от всего населения планеты. Всего за два года армия потребителей контента выросла на полмиллиарда человек.
Эти данные позволяют предположить, что интернет будет расти и в обозримом будущем. А значит, у HTML прибавится работы. Очевидно также, что возросшие требования веба потребуют от разработчиков новых решений. Но какими они будут, сегодня знают разве что в консорциуме всемирной паутины.
HTML-верстка: что это такое и какие основные правила процесса
HTML-верстка — это создание каркаса сайта, основанного на готовом макете или представлениях верстающего. В ходе нее прорабатывается основная структура страницы — происходит деление на блоки, размечается текст, кнопки и другие элементы. После создания HTML-каркаса требуется придать ему стили через CSS, а также некоторый функционал, используя JS, PHP и другие веб-языки программирования, если в этом есть необходимость. Сам же процесс HTML-верстки включает в себя только прописывание каркаса сайта без каких-либо стилей или с их минимальным количеством.
Правила процесса верстки
С технической точки зрения — это самый важный процесс в создании любого сайта, так как более расширенный функционал уже накладывается на готовую верстку страницы. Дополнительно от качества макета, преобразованного в цифровой вариант зависит:
- Как будет выглядеть готовый сайт. Можно нарисовать очень красивый дизайн в Photoshop или Figma, но его нужно еще правильно перевести в HTML и CSS, чтобы хотя бы структура страницы была такой, как это изначально задумал дизайнер.
- Скорость загрузки сайта. Использование передовых стандартов HTML-верстки позволяет сильно сократить время загрузки страниц и контента на сайте. Пускай пользователи с хорошим интернет-соединением и не заметят особого прироста в скорости, это отметят поисковые роботы, что повлияет на ранжирование сайта в поисковых системах.
- Качество отображения контента в разных браузерах. Задача верстальщика сделать так, чтобы готовый макет выглядел практически идентично для всех популярных веб-обозревателей, если, конечно, перед ним не была поставлена противоположная задача.
- Адаптивность внешнего вида страниц под другие устройства. Здесь, как и с браузерами, задача верстальщика сделать так, чтобы сайт можно было комфортно просматривать на любых экранах и устройствах.
- Адаптация под требования поисковых систем. В процессе верстки нужно указать специальные теги для прописывания заголовков, ключевых слов, описаний, плюс, правильно расположить их на странице. Также нужно не забывать об оптимизации скорости загрузки, адаптацию под разные браузеры и устройства — это тоже сильно влияет на продвижение ресурса.
В разработке сайта версткой называется процесс перевода дизайн-макета сайта в цифровой вид, читаемый браузерами, с учетом приведенных выше требований. Верстальщику нужно позаботиться о том, чтобы сайт не только выглядел красиво и в соответствии с макетом, но и был правильно реализован с технической точки зрения. В противном случае дальнейшие улучшения сайта и его продвижение будут затруднены.
Валидность верстки
Чтобы разработчикам было проще верстать были разработаны специальные стандарты валидности написанного кода. На данный момент актуален стандарт WC3. Страницы, использующие данный стандарт, обычно лучше индексируются поисковыми системами, их проще продвигать, они более удобные для пользователей, плюс, их проще улучшать при необходимости.
Валидность страницы определяется:
- Корректностью отображения блоков с контентом. Элементарно, если блоки верстки съезжают без какого-либо постороннего воздействия (изменение размера окна, разрешения), то это значит, что верстка невалидна. Вам требуется пересмотреть HTML-каркас или поработать со стилями, если проблема появилась после использования CSS-стилей.
- Адаптивностью под браузеры и разные размеры экрана. Если какой-то из блоков съезжает, не отображается или ведет себя странно при изменении размера окна, то означает, что ваша верстка невалидна. В идеале, у вас должен быть дизайн макет под мобильные устройства от дизайнера, с которым вы будете сверяться для определения корректности верстки.
- Наличие SEO-тегов и атрибутов. Их нельзя проверить при внешнем осмотре готовой страницы, но они должны присутствовать, если сайт в дальнейшем будет продвигаться в поисковиках. К таковым относятся различные мета-теги и атрибуты.
Стандартный шаблон расположения элементов в верстке
Для определения валидности верстки можно использовать специальные сервисы, однако ее можно проверить и в браузере, перейдя в режим разработчика. В нем настраивается размер и формат страницы, что позволяет посмотреть, как будет вести себя верстка на разных устройствах и размерах экрана.
Правила валидности верстки
Среди веб-разработчиков есть общепринятые стандарты, которым должна соответствовать HTML-верстка. Некоторые из них уже упоминались выше. Вот полный список общепринятых правил с пояснениями:
- Верстка должна корректно отображаться во всех основных браузерах и на разных устройствах или размерах окон. Это мы уже рассмотрели.
- Всегда заключайте атрибуты тегов в кавычки.
- Прописывайте основные заголовки исключительно с помощью тегов h1, h2 и так далее. При этом помните, что на странице должен быть только один тег h1, то есть заголовок самой страницы. Использование специальных заголовков необходимо для дальнейшего SEO-продвижения.
- Необходимо адаптировать верстку под использование через основные CMS. Исключение может быть в том случае, если заказчик не требует в дальнейшем подключение CMS к готовому сайту или в ТЗ уже прописана CMS, которая будет использоваться. В последнем случае нужно приложить все усилия, чтобы верстка корректно работала с выбранной CMS.
- Максимальное соответствие дизайн-макету. Обычно не требуется верстать “пиксель в пиксель”. Из-за погрешностей в размерах экранов или окон и особенностей программ для работы с дизайном допускаются небольшие расхождения с макетом. Однако они не должны быть заметны при беглом просмотре.
- CSS-стили нужно выносить в отдельный документ. Если проект сильно большой, то придется использовать сложную структуру из CSS-файлов. Прописывать стили прямо в HTML-структуре можно, но делать это не нужно.
- Если в дизайне предусмотрено размещение логотипа сайта в верхнем меню и/или в подвале, то его нужно делать в виде ссылки на главную страницу проекта. Исключение допускается только в случае с одностраничными сайтами.
- Рекомендуется давать понятные имена классам и идентификаторам в верстке, соответствующие их назначению или другим характеристикам. Это упростит и вам работу, и другим разработчикам, если над проектом трудится команда.
- Прописывайте комментарии к большим кускам кода. По аналогии с предыдущим пунктом так будет проще работать и вам, и коллегам.
- Придерживайтесь единого стиля оформления кнопок — надписи везде должны быть либо строчными, либо заглавными буквами, размер отступов, цветовая заливка, толщина обводки, реакция на наведение курсора и клик должны тоже быть примерно одинаковыми.
- Используйте одинаковые единицы измерений в таблицах стилей. Это тоже делает дальнейшую поддержку верстки более удобной.
- По возможности минимизируйте количество HTML и CSS кода. У вас не должно быть пустых классов, блоков, ненужных повторений стилей.
В идеале ваша верстка должна соответствовать всем указанным условиям.
Структура проекта
Помимо соблюдения основных правил валидной верстки важно соблюдать иерархию файлов и папок в проекте. Здесь можно выделить несколько рекомендаций:
- главная страница всегда верстается в файле index.html. Вам, конечно, ничего не мешает назвать его иначе, но в среде веб-разработки уже крепко закрепилось правило называть главный html-документ в проекте названием index;
- разделяйте HTML-каркас, CSS-стили и JS-скрипты по отдельным файлам. Об этом уже писалось выше. В теории, и скрипты, и стили можно писать прямо в HTML-файле, но такую верстку будет крайне сложно поддерживать;
- для больших проектов может потребоваться несколько файлов со стилями и скриптами. В таком случае в корневой папке проекта рекомендуется создать отдельную папку для CSS, JS или даже для стилей или скриптов отдельных страниц;
- изображения хранятся в папке img или images. Внутри этой папки могут быть другие папки для более лучшей разбивки, например, папка с иконками, фонами и так далее;
- создайте резервные копии. Этот совет больше актуален для крупных проектов.
Пример структуры файлов и папок в небольшом проекте
Подходы и типы верстки
Подходы к верстке определяют общее поведение сайта. Их существует несколько:
- Фиксированный. Размеры элементов в верстке строго фиксируются, а их изменение под размеры окна запрещается. Такой тип верстки уже почти не используется из-за трендов на адаптив.
Пример фиксированной верстки
- Резиновый. Блоки могут менять свою ширину в зависимости от размера окна, через которое просматривается верстка.
Пример резинового макета
- Адаптивный. В такой верстке заточено поведение под основные разрешения и устройства. Изменения внешнего вида происходят скорее рывками при достижении определенного разрешения экрана или окна, однако, данный тип верстки считается одним из самых популярных.
Пример адаптивного макета
- Отзывчивый. Самый “плавный” и одновременной адаптивный из рассмотренных вариантов. Сочетает в себе принципы адаптивной и резиновой верстки, благодаря чему элементы ведут себя как нужно на определенном разрешении, но при этом изменение внешнего вида происходит максимально плавно.
Пример поведения отзывчивой верстки
Типы же верстки стоит рассмотреть более подробно. Их выделяют всего три.
Табличный тип
По аналогии с фиксированной версткой является уже устаревшим решением. Суть заключается в том, что страница разбивается на таблицу с невидимыми границами. Ячейки этой таблицы заполняются контентом, создавая имитацию дизайна. Несмотря на то, что этот тип верстки уже устарел, ему все же обучают, плюс, некоторые заказчики могут требовать верстать сайт таблицами.
Пример табличной верстки
Свои позиции этот тип верстки сохраняется по следующим причинам:
- с помощью таблиц легче сделать адаптивную верстку, так как можно просто задать поведение конкретной ячейки при изменении размеров;
- нет проблем с адаптацией под разные браузеры — таблицы и их стили поддерживают все;
- проще выравнивать элементы относительно друга из-за особенностей их расположения в ячейках;
- больше возможностей для анимации изображений, так как их проще разбить на несколько частей, которые помещаются в соседние ячейки.
Однако, если бы все было так хорошо, то от табличной верстки никто не отказывался бы до сих пор:
- Во время прогрузки страницы пользователь видит всю таблицу. Если интернет у пользователя плохой, то стили таблицы могут и вовсе не загрузится.
- Табличная верстка требует соблюдение строгой иерархической структуры, что делает код более громоздким и влияет на качество его поддержки, расширения и скорость загрузки страницы.
- Поисковые роботы хуже индексируют контент в табличной верстке.
Сейчас не рекомендуется верстать сайт полностью, основываясь только на табличной верстке. Однако в верстке некоторых элементов вполне может быть использован подобный подход.
Блочный тип
Здесь уже в качестве основной структуры выступают секции и блоки — теги section и div. Сейчас это самый распространенный тип верстки. Стили для каждого блока прописываются отдельно в CSS файле, что, конечно, может создавать некоторые сложности при адаптивной верстке.
Пример блочной верстки
У блочного типа верстки выделяют следующие весомые преимущества:
- можно быстро изменить внешний сайта — достаточно внести пару правок в файл со стилями;
- требуется меньше объем кода, что делает дальнейшую поддержку проще, а скорость загрузки страницы выше;
- проще реализовывать нестандартное размещение элементов или нестандартный дизайн;
- легко настраивается поведение блоков под разные разрешения и устройства;
- роботы поисковых систем быстрее сканируют контент сайта, что улучшает ранжирование в выдаче.
Благодаря своим преимуществам блочная верстка является стандартом HTML-верстки. Конечно, у нее есть некоторые минусы, но они незначительны:
- Сложности с освоением. У новичков уходит больше времени, чтобы понять принцип расположения секций и блоков, а научиться работать со стилями и правильно их присваивать.
- Сложности с отображением в разных браузерах. Стили, применяемые к блокам могут поддерживаться в одних браузерах и не поддерживаться в других либо требовать использование альтернативных стилей. К счастью, в самых популярных современных браузерах такая проблема почти не наблюдается.
Рекомендуется уделить как можно больше внимание обучению этому типу верстки, так как он является самым популярным и вряд ли будет вытеснен в ближайшее время.
Верстка слоями
Такое решение появилось недавно и пока еще не сильно распространено. Помимо знаний HTML и CSS здесь потребуются углубленные познания в JavaScript, поэтому данный тип верстки не подойдет новичкам. Он позволяет быстро реализовывать самые разнообразные дизайн-идеи и эффекты. Пока технология только обрабатывается.
У верстки с помощью слоев выделяют такие преимущества:
- еще более быстрая обработка страниц браузером;
- можно указывать расположение элементов на странице с высокой точностью;
- позиционирование слоев позволяет сделать интересную анимацию страниц.
Так как верстка слоями это пока еще новое направление, у него имеются свои недостатки:
- сложность в освоении — помимо HTML/CSS потребуется на хорошем уровне знать JS и различные библиотеки;
- могут быть проблемы с отображением контента в старых версиях даже популярных браузеров, некоторые нововведения могут вообще не поддерживаться текущими версиями браузеров;
- такой сайт сложнее поддерживать и расширять.
Пока верстка слоями используется в крупных и/или нестандартных проектах. Вероятно, в ближайшем будущем этот тип верстки станет более распространенным, но общим стандартом, как блочная верстка, вряд ли станет.
Заключение
Задача HTML-верстальщика перенести разработанный дизайн-макет в понятный для браузера интерактивный вид. Помимо знаний самого HTML верстальщику будет не выжить без знаний CSS. Также очень желать освоить JavaScript хотя бы на самом базовом уровне.
Выбор технологий верстки может лежать полностью на верстальщике, если в ТЗ от заказчика не сказано иначе. Необходимо придерживаться общепринятых правил в верстке и, желательно, использовать наиболее популярные современные подходы к верстке. Анализируйте свои возможности, техническое задание и другие условиям, чтобы выбрать наиболее оптимальный путь для реализации поставленной задачи.
Основы HTML, язык разметки гипертекста Hyper Text Markup Language
Язык разметки гипертекста Hyper Text Markup Language, а проще говоря HTML это основной язык создания веб-страниц. В этой статье проведем самое общее знакомство с языком HTML.
Язык разметки гипертекста Hyper Text Markup Language
HTML–документ строится на основе тегов. Теги создают структуру документа. Основные теги парные. Это значит, что если есть открывающий тег типа <…>, то должен быть и закрывающий тег со слешем </…>. Стоит отметить, что бывают и не парные теги.
Весь документ HTML обрамляется двумя тегами <html> … </html>. Как видите они парные. Кроме этого, в HTML документе должен присутствовать одиночный тег валидатор <!DOCTYPE> указывающий тип текущего документа.
У HTML 4 три валидатора, у HTML 5 валидатор один. Структура тега HTML 5 , следующая:
Примеры:
- <!DOCTYPEHTMLPUBLIC “-//W3C//DTDHTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd”> для документов HTML 4.
- <!DOCTYPE html> единый для всех документов HTML5.
Структура HTML документа
HTML документ состоит из заголовка (header) и тела (body). Заголовок обрамляется тегами <head> … </head> . Тело документа обрамляется парными тегами <body> … </body> .
Пример: Основной каркас HTML 5 документа должен иметь следующую структуру:
Структура заголовка
Заголовок <head> … </head> , включает несколько специальных тегов. Основные из них это теги: <title></title> и <meta></meta> .
Тег title
Это заголовок документа, выводится в заглавной части страницы.
Тег meta
Тег мета, а вернее теги мета, потому что в одном документе таких тегов может быть несколько. содержит специальную информацию. Например, обязательно должен быть тег мета с указанием кодировки документа:
Замечу, что современные поисковики перестали «видеть» keywords, но это не отменяет их использования. Внутреннюю перелинковку никто не отменял.
Пример веб-страницы на HTML
Приведу элементарную веб-страниццу на HTML:
Изучая основы HTML, нельзя без изучения и использования специальных текстовых редакторов. Потому-что набирать любой текст страницы HTML нужно только в текстовом редакторе типа: NotePad++, Sublime Text2 и т.п. После набора документа его нужно сохранить с расширением htm или html. Cозданный файл открываем в любом браузере, которым вы пользуетесь.
Структура тела документа
Текст в документе (в тегах <body> </body> ) также разбивается на заголовки и части тегами.
Теги заголовка и абзаца
Текст, документа, может обрамляться специальными тегами.
Абзац выделяется тегами
Заголовки разделов текста выделяется тегами
Организуются теги заголовков в иерархической форме, а число в теге указывает на степень вложенности заголовка.
Пример применения тегов <p> и <h> :
Атрибуты тегов
Один из основных атрибутов тегов это атрибут форматирования, под названием align. Значение атрибута align:
- left – выравнить по левому краю,
- center – выровнять по центру,
- right – выровнять по правому краю,
- justify – симметричное выравнивание по двум краям.
Такое форматирование называется физическим и в принципе устарело. Для форматирования лучше и рекомендовано использовать таблицы каскадных стилей (CSS).
Списки
Современный стандарт HTML предусматривает создание трех основных видов списков:
- Списки маркированные (unordered list);
- Списки нумерованные (ordered list);
- Список определений терминов (definition list).
Рассмотрим каждый из видов списков.
Списки маркированные
Маркированные списки задаются тегами <ul> … </ul> (unordered list). Для создания каждого элемента списка применяется теги <il> и </il> (item list).
В список можно помещать теги загловков:
Маркеры, то есть видимые значки перед элементами списка, могут меняться, а их внешний вид задается атрибутами type. Атрибуты type могут быть: circle (не закрашенный кружок), disk(закрашенный кружок) и square( квадрат закрашенный). По умолчанию используется атрибут disc. Пример использования маркера с атрибутом disk:
Списки нумерованные
Нумерованные или упорядоченные списки (ordered list), каждому элементу списка присваивается номер. Создаются нумерованный списки тегами <ol> … </ol> . Для каждого элемента нумерованного списка, также используются парные теги <il> … </il> .
В нумерованных списках используются пять атрибутов:
1-Цифры арабские; i- Римские строчные цифры; I- римские прописные цифры; a-Латинские строчные буквы; A-Латинские прописные буквы.
Пример нумерованного списка.
Пример нумерованного списка с маркерами латинских строчных букв:
Списки определений
Для создания списков по типу термин-определение термина, применяются теги <dl> … </dl> (definition list) и <dd> … </dd> (definition description). Причем сам термин заключается в парный тег <dl> , а определение (объяснение) термина заключается в парный тег <dd> .
Вложение списков
Любой тип списка, маркированный и нумерованный, можно друг в друга вкладывать. Вложение допустимо произвольное. Главное при создании вложенных списков не запутаться в парных тегах.
Пример вложенных списков:
Таблицы в HTML
Для структурирования документов HTML основной структурой являются таблицы. Правда, стоит отметить, что использование таблиц для организации структур страниц устаревает и уже признано не рекомендуемым.
Структура таблицы:
- Border – рамка шириной 2 px;
- Cellpadding-расстояние между внешними границами ячеек таблицы;
- Cellspacing-расстояние между внешними границами ячеек таблицы.
- Height- высота таблицы;
- Width- ширина таблицы.
- Caption- тег для создания заголовка таблицы, может размещаться только внутри контейнера <table> .
Теги colspan и rowspan
предназначены для объединения ячеек <td> :
Гиперссылки
Гиперссылки или просто ссылки это основной элемент документа HTML для связи документов, их оптимизации и продвижения в поисковых системах.
Тег реализующий ссылки в документах HTML, это парный тег-контейнер <a> … </a>
Основной атрибут этого тега href. Этот тег содержит адрес ресурса, на который ведет ссылка. Внутри тега-контейнера <a> </a> пишется текст ссылки.
Как видите из примера, в ссылках можно использовать, как абсолютные, так и относительные URL. Относительный путь это адрес документа относительно текущей страницы, но которой ссылка создается.
Якорь
Для ссылки на конкретное слово страницы, используется якоря. Чтобы сделать ссылку на якорь, атрибуту href дается имя якоря со значком решетка впереди имени:
Чтобы сослаться на якорь, в другом документе, имя якоря с решеткой (#), пишется сразу после адреса стороннего документа, без пробела.
Рисунки в виде ссылок
Рисунки и фото также можно делать в виде ссылок. Для этого рисунок вставляется в текст с тегом <img>. Атрибута src этого тега имеет значение файла картинки:
Затем, картинка «оборачивается» в тег ссылки:
На этом все! Конечно, основы HTML не включают все особенности этого языка, но дают представление о формировании HTML документа.
Что такое HTML?
HTML — Hypertext Markup Language (язык разметки гипертекстовых документов) — стандартный язык разметки для создания веб-страниц и веб-приложений. Вместе с каскадными таблицами стилей (CSS) и языком программирования JavaScript, этот язык создаёт триаду основных технологий для всемирной паутины.
HTML не является языком программирования. С помощью специальных меток — тегов HTML — производится размещение различных объектов на веб-странице — заголовков, текста, изображений, кнопок, списков и т.д. и создаётся общая структура веб-документов (скелет). Оформление (стилизация) этих объектов производится с помощью CSS.
HTML расшифровывается как Hyper Text Markup Language — язык гипертекстовой разметки
HTML — это стандартный язык разметки веб-страниц
HTML элементы являются строительными блоками HTML-страниц
HTML элементы представлены <> тегами
HTML Элементы
HTML элемент представляет собой тег начальный и тег конечный с содержимым между ними:
| Начальный тег | Элемент содержимое | Конечный тег |
|---|---|---|
| <h1> | Это заголовок | </h1> |
| <p> | Это параграф. | </p> |
HTML Атрибуты
- HTML элементы могут иметь атрибуты
- Атрибуты предоставляют дополнительную информацию об элементе
- Атрибуты входят в пары имя / значение, такие как charset="utf-8"
Простой HTML документ
Объяснение примера
HTML-элементы являются строительными блоками HTML-страниц.
- Объявление <!DOCTYPE html> определяет этот документ как HTML5
- Элемент <html> является корневым элементом HTML страницы
- Атрибут lang определяет язык документа
- Элемент <meta> содержит метаинформацию о документе
- Атрибут charset определяет набор символов, используемый в документе
- Элемент <title> определяет заголовок документа
- Элемент <body> содержит видимое содержимое страницы
- Элемент <h1> определяет большой заголовок
- Элемент <p> определяет параграф
HTML Документы
Все HTML документы должны начинаться с объявления типа документа: <!DOCTYPE html> .
Сам HTML-документ начинается с тега <html> и заканчивается тегом </html> .
Видимая часть документа HTML находится между тегом <body> и тегом </body> .
HTML Структура документа
Ниже приведена визуализация HTML-документа (структура HTML-страницы):