Как сделать красивый сайт в html

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

      
Информация о нашей компании
  
Кто мы?
 
Мы - комманда профессионалов.
 
Наши услуги
 
Создание сайтов
 
Мы создаем по-настоящему крутые сайты.
 
Продвижение сайтов
 
Ваш сайт в ТОП-3 поисковых систем через 2 дня.
 
Посадка картошки
 
20 соток в час.
 
Контакты
 
Карта проезда: .
 
Телефон: 0000
  

Основная информация о создании сайта при помощи конструктора сайтов «Нубекс» описана в статье: Как правильно создать сайт.

Шаблон простого сайта на HTML

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

Личный сайт
Который сделан на основе готового шаблона
Первая секция
Она обо мне
Но может быть и о семантике, я пока не решил.
Вторая секция
Она тоже обо мне
И третья
Вы уже должны были начать догадываться.





 -->

Короткий разбор

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

Доктайп помогает браузеру понять, как отображать страницу.

Называем кодировку страницы — для русского языка подходит utf-8 .

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

Подключаем файл со стилями — замените ./styles/style.css на имя вашего файла со стилями. Если ничего не работает или файл не видно, прочитайте про абсолютные и относительные ссылки.

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

Дальше идут и — заголовки первого и второго уровня.

Это мой сайт
 
Первая секция
 

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

Одна из самых важных частей страницы — семантический тег , в нём хранится основное содержимое, которое относится только к этой странице и не повторяется на других.

Изображение, картинка или фотография. Обязательно с атрибутом alt — он важен, не забывайте о нём.

Абзац текста — здесь пишем просто какой-то текст, который хотим показать на странице. Подробнее — в тренажёре.

Но может быть и о семантике, я пока не решил.
 

Если захотите подключить JavaScript и добавить интерактивные элементы, можете сделать это в этом блоке — достаточно его раскомментировать.

На этом всё, дорабатывайте шаблон по своему усмотрению.

Без чего ещё верстальщику никак:

• Шаблон HTML-формы
• Что нужно уметь верстальщику
• Как подготовить вёрстку к retina-экранам

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

Читать дальше

Осмысленный alt-текст: 6 правил

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

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 27 февраля 2024

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 22 ноября 2023

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 1 ноября 2023

Специальные символы в HTML

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 23 октября 2023

Зачем нужен метатег viewport

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

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

• 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 14 сентября 2023

В чём отличия цитат

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 12 сентября 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 13 июня 2023

Как отличить h1, h2 и h3

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

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

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

• 8 июня 2023

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

�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

Пошагово объясняем как самостоятельно создать сайт в REG.Site

Для многих пользователей процесс создания сайта кажется чем-то невероятно сложным, особенно когда речь идёт о самостоятельном проектировании и разработке веб-страницы. Но пусть вас не пугают технические термины, благодаря сервису REG.Site на основе CMS WordPress, создать проект в Сети сможет каждый (и совершенно без знаний программирования).

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

Шаг 1. Определяем цель создания сайта

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

Проанализируйте цели будущего сайта и вашу целевую аудиторию, чтобы выбрать тип сайта

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

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

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

А может быть вы хотите вести тревел-блог? Если у вас нет аудитории, подумайте, кому интересно было бы вас читать.

Посмотреть, что делают конкуренты

Если вы ещё не знаете, кто ваши конкуренты — поищите в интернете их сайты. Важно обращать внимание на их подачу, оформление и подмечать интересные идеи в дизайне или тексте. Но не копируйте их — лучше вдохновиться и адаптировать идеи под ваш проект, создав нечто уникальное.

Шаг 2. Выбираем тип сайта

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

Сайт компании

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

Интернет-магазин

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

Блог

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

Лендинг

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

Портфолио

Если вы частный специалист или сервисная компания, , то можно ограничиться небольшим сайтом с несколькими страницами. Такой тип подойдёт для салона красоты, кафе, медицинской клиники. На нескольких страничках будут расписаны основные услуги компании или выложен прайс-лист.

Порталы, новостные блоги

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

Шаг 3. Придумываем название и доменное имя

Если ваша компания на рынке несколько лет, то наверняка у вас уже есть название. Но если вы только создаёте свой проект в Сети, то рекомендуем прочитать нашу статью «Как придумать крутое название или гайд по неймингу», в которой мы собрали все правила и методы.

Как только вы определитесь с именем компании — вам понадобится зарегистрировать домен. Ключевое:

• Используйте название компании в домене. Так меньше рисков, что возникнет путаница
• Можно рассматривать сокращения и аббревиатуры. Например, OK.RU.
• Избегайте дефисов и цифр в домене. Они снижают качество восприятия и запоминаемость домена.
• Не используйте сложных транслитов (например слово «игровой» можно написать как “igrovoj”, “igrovoy” или “igrovoi”) и труднозапоминаемых сочетаний букв. Простота и однозначность лучше всего.
• Проверяйте обязательно не содержит ли доменное имя уже существующий товарный знак, чтобы в дальнейшем избежать доменных споров. Детали темы можно узнать в статье Как зарегистрировать домен и не попасть под суд.
• Избегайте слов с нарочно допущенным ошибками (SABAKOVOD.NET) или дополнительными буквами (WWWKONTAKTE.RU). Такие домены могут наводить на мысль, что ваш сайт мошеннический.

Ещё больше рекомендаций читайте в посте «Как правильно выбрать домен для сайта».

Шаг 4. Выбираем шаблон

Когда вы определились с типом вашего сайта, переходим к выбору тарифа REG.Site и оплате услуг. Никаких дополнительных сервисов подключать не придётся, потому что REG.Site уже включает в себя хостинг, на котором будут храниться файлы вашего сайта, а SSL-сертификат идёт в подарок.

Итак, переходим в Личный кабинет. Во вкладке «Мои сайты» выбираете нужный домен и понравившейся шаблон.

Шаблон — это уже свёрстанная HTML-страница с готовым дизайном. Можно взять шаблон за основу и изменить в нём цвет, шрифт, расположение блоков и элементов или сделать сайт в конструкторе с нуля.

Также вы можете выбрать шаблон в админке WordPress и поменять его в процессе создания сайта. Подробнее о редактировании шаблона расскажем дальше.

Шаг 5. Собираем семантическое ядро сайта

Семантическое ядро сайта — это набор ключевых запросов, по которым пользователи будут находить ваш сайт в поисковых системах — Google, Яндексе и так далее. Например, «купить автомобиль Тверь» или «торты на заказ Питер».

Подобрать запросы по вашей теме, или «ключи», можно с помощью специальных программ и сервисов. Принцип их работы очень прост: вы вбиваете в поисковик одно или несколько слов, а в результате получаете список из ключевиков: чем больше цифра, тем популярнее запрос. Подробнее о таких сервисах читайте в нашей подборке в блоге «Лучшие сервисы для подбора ключевых слов», а о настройке SEO-продвижения в WordPress — в нашей Базе знаний.

Шаг 6. Пишем текст для сайта

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

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

Если вы решили подготовить текст самостоятельно, например, для лендинга, то сначала нужно подумать о структуре вашего сайта — блоках. О чём конкретно вы хотите рассказать на своём сайте? Например: о компании, о методике работы, о тарифах, своих клиентах или ваших преимуществах? В качестве примера — посмотрите шаблоны REG.Site, в каждом из которых уже есть продуманная структура сайта.

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

• Представить, какая информация нужна человеку для принятия решения о покупке, а какая будет излишней и только усложнит выбор.
• Плотно проанализировать ЦА, посмотреть боли людей и их барьеры к покупке.

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

• Яркие цепляющие заголовки.
• Лаконичные тексты — максимум конкретики, минимум «воды».
• Чёткие выгоды для клиентов.
• Понятный призыв к действию (кнопки «купить», «подписаться на рассылку», «получить промокод» и так далее).
• Старайтесь использовать меньше оценочных слов как «самый качественный» — предоставьте пользователю факты о вашем продукте или услуге, а он сам решит подходит это ему или нет.
• И обязательно соблюдайте структуру в самом тексте: используйте списки, подзаголовки модулей, выделения — так читателю будет проще ориентироваться в тексте.

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

Шаг 7. Ищем фото и видео для веб-ресурса

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

Найти фрилансера можно здесь:

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

Бесплатные стоки с фотографиями:

Также обратите внимание на сайты с иллюстрациями:

И несколько бесплатных видеостоков:

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

Шаг 8. Наполняем шаблон контентом

Перейдя в графический редактор, вы увидите такую страницу:

После чего вам нужно нажать на кнопку «Редактировать страницу» в верхнем меню.

Внутри каждого раздела REG.Site есть строки и модули. Их можно редактировать и настраивать — всё как в конструкторе. Здесь вы остаётесь один на один с вашим творчеством, а в помощь идут десятки модулей. Меняя различные элементы, как отступы, тени, фон, рамки, градиент, изображения, карты, вы сможете оформить сайт в соответствии с вашей задумкой. Нюансы о работе с модулями и строками читайте в этой инструкции. Для тех, кто любит видеоинструкции, у нас есть видеоролик.

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

Всё, ваш сайт готов!

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

Как создать свой сайт на шаблоне 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. Специализируется на статьях о технологиях, создании и продвижении сайтов.