Как оформить сайт html

HTML дизайн: применение на практике

Глава содержит пример применения HTML дизайна в сайтостроении.

В меню слева вы найдете современные и очень подробные уроки по Гипертекстовой разметке.

Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.

Основное содержание главы о дизайне

1. HTML дизайн и его применение на практике: верстка
2. Познакомимся с современными способами создания сайта, а затем с HTML дизайном
3. HTML дизайн и стилевые описания: пример страницы
4. HTML дизайн и CSS стили в отдаленном файле или как все сделать правильно

Прежде, чем приступить к HTML дизайну, предлагаю ознакомиться с некоторой информацией.

Это может быть интересно.

Современные способы создания сайта

Несколько основных вещей необходимы для создания сайта: а) компьютер с доступом к сети интернет; б) учебный материал, который бы подробно описывал все шаги в процессе создания сайт (смело можете использовать мой самоучитель); в) необходимо воспользоваться услугами хостинга. Что это такое? Хостинг – это услуга, которая предоставляет физическим лицам и организациям сохранение веб-страниц и других файлов (данные, текстовые файлы, изображения, видео и подобное содержание) в сети интернет. Выражаясь другими словами, за определенную месячную плату ваш сайт разместят на отдаленном сервере, который имеет связь с интернетом. Естественно, пароль доступа к сайту будет известен только вам. Сегодня существует несколько способов самостоятельного создания сайтов: а) создание сайта с помощью HTML и б) создание сайтов с помощью систем управления содержанием, например, WordPress или Joomla, предоставляющих возможность использования шаблонов с готовым дизайном.

HTML дизайн сайта и стилевые описания

Применение дизайна к файлу index.html :

Моя первая страница! llllllll oooooooo mmmmmmmm kkkkkkkk eeeeeeee wwwwwwwwwwww wwwww www wwww wwww www www wwwww wwww wwwwww wwwww wwwwww wwwww wwwwww wwwww wwwwww www www wwwwwwwwww wwwwwwwww www ww www ww wwwwww wwww wwwwww wwww www www www wwww ww wwwwww wwwwwwwwww ww wwww wwwwwww ww ww wwwwwwww wwwww wwwww wwwwwwwwww ww wwwwwww www www www wwww wwwww ww wwwwww ww ww wwwww wwwww ww www www wwww wwww wwwwww www wwwwwww www wwwwwww wwwww wwww wwwwwww wwww ww wwwwwwwww wwwwww wwww wwww wwwwwwww wwww www wwww ww wwww wwww wwwwwww www wwwwww www www wwwwww wwww www ww wwwww wwwww wwwww wwww www wwwwwww www wwwww www www wwwwww www wwww www wwww wwww wwww www wwwwwww www wwwwwww www wwwwwwww ww wwwww wwww wwwwwwwwwww mmmmmmmmmmmm mmmmm mmmmmmm mm m mmmm mm mmmm mmmm mm mm mmm mmmmmm mmmmm mmmmmm mm mmmm mmmmm mm mmmm mmmm mmm mmm mmmm mmm mmm mmmmmm mmm mmm mmmmm mm mmm mmmm mm mmmm mmmmm mm mmmm mmmm mm mmmm mmmmmm mmmm mm mmmmm mmm mmmmm mm mmmmm mmmm mm mmmm mmmm mmm mmmmm mm mmm mmmm mm mmmmmm mmmm mmmm mmm mm mmm mmmm mm mmm mmm mmm mmmm mm mm mmm mm mmm mmm mmmm mmm mmm mmm mmmm mmm mmmm mm mmmm mmmm mmm mmmmm mmm mmm mm mmmm mmmmmmmm mm mm mmm mmmmmm mm mmm mmm mmmmm mmmmm mm mm mmmmmmm mmmmm m mmmm mm mmmm mmm mm mmmm mmm mmmmm mmmm mm mmmm mmmmm mmmmm mm mmm mmmm mm mmm mmm mm mm mm mmmmmmmmm mmmm eeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeeee eeeeeeeeeee eeeeeeeeee eeeeeeeeeee eeeeee eeeeeee eeeeeeee eeeeeeee eeeeeeeeee eeeeeeeee

HTML дизайн сайта в отдельном файле

Исходный код file.css :

body div.werty #l, #r #l #r #bottom width: 740px; background-color: #cc66ff; margin: 35px 0 0 0; border-top: 1px solid #ff3366; padding: 20px 30px 20px 30px; line-height: 180%; text-align: center; font-size: 10px > #header height: 130px; width: 800px; margin: 0; padding: 0; background: #cc66ff; border-bottom: 1px solid #ff3366 > #header h2 ul.nav display: block; margin: 0; padding: 0 0 0 91px; list-style-type: none > ul.nav li ul.nav li a:link, ul.nav li a:visited, ul.nav li a:active background-color: #660033; padding: 5px 15px 1px 15px; color: #cccccc; text-decoration: none; border-bottom: 2px solid #660033 > ul.nav li a:hover background-color: #ffffff; padding: 5px 15px 1px 15px; color: #cc0000; text-decoration: none; border-bottom: 2px solid #660033 > #spisok a:link a:visited

Мы имеем 2 файла: index.html и file.css .

в секции файла index.html не что иное, как ссылка на отдаленный документ file.css . Атрибуты style=»» со значениями – прямое включение Каскадных таблиц стилей в HTML документ, что не является оптимальным вариантом внедрения стилевых описаний – семантически правильным есть способ ввода атрибутов class=»» и id=»» в теги документа и последующее описание их значений (значений атрибутов class=»» и id=»» ) во внешнем файле с расширением .css — такой способ не засоряет код страницы, что очень важно для поисковых роботов.

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

Так выглядит дизайн index.html без использования стилей: HTML дизайн

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

Автор проекта — Вася Митин | Дата публикации: Июль 2011 | Обновление: Ноябрь 2018

CSS дизайн или верстка сайта Применение HTML дизайна

HTML страничка: ее создание и видоизменение

Глава содержит примеры форматирования страничек из области Гипертекстовой разметки.

В меню слева вы найдете современные и очень подробные уроки по HTML.

Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.

Краткое содержание странички

1. HTML страничка, ее создание и видоизменение: предисловие и немного теории
2. Немного про создание организации World Wide Web Consortium, а затем о страничках в HTML
3. HTML страничка и ее начальная структура: описание значения тегов
4. HTML страничка, цвет ее фона и отдельных элементов: примеры изменения цвета

Прежде, чем приступить к HTML страничке, предлагаю ознакомиться с некоторой информацией.

Это может быть интересно.

Создание организации World Wide Web Consortium

В 1994 году под эгидой научного центра CERN, где была рождена WWW технология, создана международная некоммерческая организация World Wide Web Consortium (www.w3c.org), которая сегодня занимается разработкой протоколов передачи данных, международными стандартами в рамках интернета и специализированными программами. World Wide Web Consortium существует на базе трех организаций: Массачусетского технологического института (MIT), Национального института исследований в сфере информатики и автоматики во Франции (INRIA) и университета Keio в Японии. Кроме этого, World Wide Web Consortium объединяет более 165 коммерческих и академических организаций, среди которых – Microsoft и Netscape. Официальный сайт www.w3c.org предлагает всем желающим ознакомиться с историей компании, с информацией о развитии WWW технологии в мировом масштабе, материалами с международных конференций. Практический интерес представляет огромный архив технических материалов, связанных с архитектурой сети, утвержденными протоколами и стандартами. Представлены также спецификации Гипертекстовых языков разметки, стоящих в основе каждой отдельной интернет-странички.

HTML страничка и ее начальная структура

Описание параметров странички, в данном случае – значения тегов:

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

Выше представлена схема параметров XHTM документа. Подробнее: HTML и XHTM

HTML страничка, цвет ее фона и элементов

Сделаем фон HTML странички светло-зеленым:

Заголовок 1-го уровня Первый параграф Второй параграф Третий параграф

Строка style=»color:Yellow; background-color:#66cc66″ в теге делает цвет фона HTML странички зеленым, текст – желтым.

Атрибуты style=»» со значениями – это линейные CSS включения.

Автор проекта — Вася Митин | Дата публикации: Июль 2011 | Обновление: Ноябрь 2018

HTML коды странички и сайта HTML страничка и ее оформление

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Страничка на HTML? – Не вопрос!

Как создать свой сайт на шаблоне html и вывести его в интернет — инструкция для начинающих

20.02.2023

• Зачем делать сайт на HTML
• Как открыть готовый код сайта html в блокноте для редактирования
• Основные теги html
• Замена текстовых блоков в шаблоне
• Что такое инструмент для разработчиков в браузере и как его открыть
• Замена изображений в html-коде
• Что нужно знать о работе с кодом html
• Загрузка готового сайта на хостинг

Зачем делать сайт на HTML

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

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

Для этого потребуется немного внимательности и знаний, но адаптация готового шаблона вполне доступна новичкам. Такой опыт будет полезен тем, кто интересуется версткой, а также для создания своего собственного сайта простейшего формата — лендинг-пейдж или визитки. Статический html более выгоден для небольших сайтов, чем разработка на CMS, ведь системы управления контентом весят гораздо больше. Пользоваться движком с большим объемом php-кода и набором различных модулей для лендинга — не совсем рентабельно. Html-сайт требует очень мало ресурсов на хостинге, поэтому если стоит задача создания сайта всего на одну страницу — это самый лучший вариант.

Итак, начинаем работать. Сначала нужно найти хороший шаблон (платный или бесплатный) и скачать на свой компьютер в виде zip-папки.

Для его адаптации можно использовать два варианта:

1. Редактировать на компьютере и затем залить готовый сайт на хостинг.
2. Залить сайт на хостинг и редактировать в файловом менеджере.

Мы пойдем первым путём, чтобы потенциальные пользователи не увидели недоработанный сайт.

Как открыть готовый код сайта html в блокноте для редактирования

Распакуйте архив у себя на компьютере и зайдите в папку. Вы увидите примерно такую картину — директории с JS и CSS-кодом, картинками (images) и основные страницы. Среди них нужно выбрать index.html — это страница, с которой начинается запуск сайта. В случае с одностраничным сайтом это будет единственный файл формата HTML. В нашем примере у сайта есть несколько разделов, поэтому и файлов больше.

Система уже подтянула к html-файлам Google Chrome, и они будут автоматически открываться в этом браузере. Можно сразу посмотреть, как будет выглядеть основная страница шаблона в сети (пока ее видите только вы).

Чтобы редактировать страницу, мы откроем ее с помощью правой кнопки мышки в другой программе. Если вы начинающий разработчик, вероятно, у вас уже есть специальный софт вроде Subline или Visual Studio Code. Но этот гайд делается для непрофессионалов, потому представим, что у вас такой программы нет. Html-код сайта прекрасно редактируется в стандартном блокноте или WordPad, поэтому откроем его через блокнот.

Не забудьте выбрать опцию Формат => Перенос по словам, чтобы видеть весь код в одном окне. Вот такой вид вы примерно получите.

Основные теги html

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

• div — универсальный контейнер для группировки блоков контента;
• H1, H2, H3… H6 — заголовки;
• li — элемент списка;
• p — текстовый абзац;
• a href — ссылка;
• img — изображение.

В общем тегов гораздо больше, но этого пока достаточно. Также нужно понимать, где начинается и заканчивается содержимое тега.

Открывающий тег имеет вид < p >, закрывающий похож на него, но со слешем < /p >. То есть текстовый абзац должен содержаться между ними.

«Lorem ipsum» и все, что следует после него на латыни, означает на «программистском» языке «любой текст» или просто «бла-бла-бла». Его ставят, когда нужно посмотреть, как будет выглядеть текстовый блок, но контента еще нет.

Замена текстовых блоков в шаблоне

Давайте попробуем заменить заголовок и главный текст на странице.

Заголовок «Welcome To Beauty Class» легко найти по тегу < h2 >(большой заголовок второго порядка). А основной текст выделен голубым, чтобы вы увидели, где он начинается и заканчивается.

Вместо текста вставляете свой, нажимаете в блокноте Файл => Сохранить и обновляете браузер, чтобы проверить результат. Как видите, у нас поменялся текст.

Что такое инструмент для разработчиков в браузере и как его открыть

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

Как открыть в Chrome инструменты разработчика:

• Кликнуть правой кнопкой мышки на элемент и выбрать из списка «Проверить».
• Нажать клавишу F12 на клавиатуре и выбрать пункт Elements.
• Зайти в Меню браузера в правом верхнем углу => Другие инструменты => Инструменты разработчика.

Чтобы просмотреть название и тег элемента, еще раз кликните по нему правой кнопкой мыши и выберите «Проверить».

Например, вот это изображение имеет адрес images/image_01.jpg, где images — название папки, а /image_01.jpg — название файла.

Замена изображений в html коде

Давайте заменим картинку. Это нужно сделать в двух местах — в папке и в коде. Как это вообще работает?

Изображений нет в разметке — они лежат в папке images. В коде прописан путь к ним в виде места, где находится картинка, и ее названия. Когда вы видите фото на сайте, html-код просто показывает вам файл из папки.

Поэтому для замены или добавления изображения необходимо загрузить его в папку images и прописать путь в коде.

Знак «слэш» означает папку, а последнее название в кавычках всегда должно относиться к файлу.

К примеру, если у нас есть папка images, а в ней есть папка banners, внутри которой лежит изображение main-picture.jpg, то путь будет выглядеть так:

«images/banners/main-picture.jpg»

Но учтите, что лучше не делать много вложений.

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

Заменяем в папке с изображениями существующую фотографию на другую (у нас это будет фото кота) с таким же названием image_01.jpg. Следите, чтобы расширения тоже были одинаковыми. Если названия одинаковы, но исходная картинка имела расширение .jpg, а вы добавили в формате .webp — изображения не заменятся на сайте.

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

Следует заметить, что создатели бесплатных шаблонов не всегда прописывают размер картинок в стилях, поэтому иногда их приходится подгонять вручную. Наша картинка была подогнана под размер всех остальных в графическом редакторе Figma.

Таким образом, вы можете заменить весь контент на свой, получить уникальный сайт и смело им пользоваться. Если разбираетесь в CSS — кастомизируйте дизайн с помощью цветов или шрифтов.

Что нужно знать о работе с кодом html

Предлагаем несколько советов по работе с разметкой, которые могут пригодиться новичкам:

1. Элементы в коде разметки размещаются в том же порядке, что и на странице. То есть, если элемент вверху, то он будет в начале кода, если внизу — то в конце.
2. Элемент в коде можно найти и по его тексту. Например, нужно найти кнопку с надписью «Blog», расположенную в верхнем меню. Нажмите в блокноте CTRL+F и введите слово «Blog», и вы увидите его в коде.

1. Для кода важен каждый знак. Если вы что-то «поломали», это может означать, что был удален или неправильно добавлен какой-то символ — кавычки, точка или даже пробел, который тоже имеет значение.
2. Постарайтесь не редактировать и не удалять другие части кода, если вы не понимаете, что это. В нем много взаимосвязей с JS с CSS файлами, и удалив какую-то ссылку, вы рискуете остаться без стилей или интерактивных элементов.
3. У верстальщиков есть неписаные правила — называть файлы в коде английскими словами, прямолинейно обозначающими сам вид контента, а не его содержание. То есть изображение чаще называют image или picture, а видео будет так и называться: video_1. Это очень упрощает работу с разметкой и помогает посторонним верстальщикам быстро понять, что написано в коде.

Загрузка готового сайта на хостинг

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

Для начала нужно попасть внутрь сайта, что можно сделать с помощью FTP. Но мы не будем работать с тяжелыми файлами, поэтому для этой задачи вполне достаточно файлового менеджера.

Зайдите в свой аккаунт на сайте Cityhost и откройте вкладку Хостинг 2.0 => Управление => Открыть в файловом менеджере.

Сейчас на сайте пусто, но на новом хостинге обычно стоит «баннер-заглушка» в виде php-файла – ее можно удалить.

Заархивируйте свой сайт в zip-папку и загрузите его на хостинг через кнопку «Загрузить файл».

Далее нужно распаковать папку с помощью кнопки «Извлечь архив». После распаковки архив лучше сразу удалить.

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

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

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

Автор: Богдана Гайворонская

Журналист (с 2003 года), IT-копирайтер (с 2013 года), контент-маркетолог Cityhost.ua. Специализируется на статьях о технологиях, создании и продвижении сайтов.

Шаблон простого сайта на 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