Шаблон простого сайта на HTML
Если вам нужно быстро сделать сайт на учёбе или для личных дел, используйте этот шаблон. Вы можете наполнить его чем угодно — добавить тексты, картинки или подключить любые стили. Например, такие, через awsm.css.
Сайт легко запустится у вас на компьютере по инструкции или откроется сразу в браузере.
Заголовок страницы Личный сайт
Который сделан на основе готового шаблона
Первая секция
Она обо мне
Но может быть и о семантике, я пока не решил.
Вторая секция
Она тоже обо мне
И третья
Вы уже должны были начать догадываться.
Короткий разбор
Если у вас есть немного времени, давайте посмотрим на код и поймем, из чего состоит сайт, и зачем нужна каждая строчка.
Доктайп помогает браузеру понять, как отображать страницу.
Называем кодировку страницы — для русского языка подходит utf-8 .
Дальше идёт магия, которая помогает нашему сайту выглядеть чуть лучше. Она просто нужна, можете пока не задумываться.
Подключаем файл со стилями — замените ./styles/style.css на имя вашего файла со стилями. Если ничего не работает или файл не видно, прочитайте про абсолютные и относительные ссылки.
В этом блоке напишите, какой заголовок, описание и ссылка будут видны на карточке в ленте, если ваш сайт кто-нибудь запостит в соцсетях.
Дальше идут и — заголовки первого и второго уровня.
Это мой сайт
Первая секция
Следом навигация. В шаблоне она сделана через верхнюю навигацию , в которой ссылки сделаны списком и завёрнуты в тег .
Одна из самых важных частей страницы — семантический тег , в нём хранится основное содержимое, которое относится только к этой странице и не повторяется на других.
Изображение, картинка или фотография. Обязательно с атрибутом alt — он важен, не забывайте о нём.
Абзац текста — здесь пишем просто какой-то текст, который хотим показать на странице. Подробнее — в тренажёре.
Но может быть и о семантике, я пока не решил.
Если захотите подключить JavaScript и добавить интерактивные элементы, можете сделать это в этом блоке — достаточно его раскомментировать.
На этом всё, дорабатывайте шаблон по своему усмотрению.
Без чего ещё верстальщику никак:
- Шаблон HTML-формы
- Что нужно уметь верстальщику
- Как подготовить вёрстку к retina-экранам
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Как создавать адаптивные изображения. Атрибут srcset
Адаптивные изображения автоматически изменяют свой размер, чтобы соответствовать экрану пользователя, что улучшает вид страницы и ускоряет загрузку.
Давайте рассмотрим несколько способов создания адаптивных изображений.
�� В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.
- 25 мая 2023
Что такое каркас сайта?
Всесторонний гид, из которого вы узнаете, чем полезны каркасы, какую роль UX и UI играют на начальных стадиях разработки сайтов и приложений и почему создавать каркасы на специальных платформах проще, быстрее и эффективнее.
Читается за 12 мин.
Хотите создать каркас самостоятельно? Попробуйте Lucidchart! Быстро, удобно и совершенно бесплатно.
Что такое каркас сайта?
Изначально термин «каркас» применялся в отношении наглядных планов трехмерных объектов, например, в архитектуре. Теперь же его широко используют в 3D-моделировании в области компьютерной анимации, а также в сфере дизайна и разработки двухмерных веб-страниц и мобильных приложений.
В веб-дизайне каркас, или вайрфрейм, представляет собой черно-белую схему устройства и работы отдельной веб-страницы или экрана мобильного приложения. Каркасы применяются на ранних стадиях разработки и позволяют наметить общую структуру страницы, прежде чем она «обрастет» визуальными элементами и контентом. Каркасы можно создавать на бумаге, прямо в HTML/CSS или в специальных приложениях.
Задачи каркаса
Каркас позволяет сменить абстрактную карту сайта (обычно первый этап разработки) на более конкретный и понятный план. Каркасы выполняют несколько связанных между собой задач:
- Создание сайта или приложения согласно поставленным целям. Возможность увидеть весь функционал как на ладони, не вдаваясь во внешние детали, дает участникам работы возможность сосредоточиться на остальных аспектах проекта. Каркас иллюстрирует, как будут устроены, где расположены и чем полезны функции сайта или приложения, тем самым формируя ожидания команды относительно внедрения функционала. Например, если функция не вписывается в задачи сайта, возможно, что ее придется исключить из проекта.
- Постановка акцента на удобстве использования. Каркас формирует объективный взгляд на названия ссылок, пути к конверсии, удобство пользования, навигацию и расположение функций. Каркасы также помогают выявить недостатки в архитектуре или функциона