Как создать сайт
Хотите создать самостоятельно свой сайт, но не знаете, с чего начать? Тогда этот пошаговый урок – для вас. Мы подготовили простые рекомендации для тех, кто не владеет html, css, php и другими навыками профессионального сайтостроителя.
Первый этап. Продумываем идею
Возьмите лист бумаги (или сделайте список в Word) и запишите, зачем вам вообще нужен сайт, каковы его цели и задачи.
Среди таких задач могут быть:
- Продажа товаров или услуг
- Продвижение бренда, коммерческого или персонального
- Продажа рекламы
- Портфолио, представляющее ваш опыт и достигнутые успехи
Возможно, весь сайт вам нужен всего лишь как практика сайтостроения и администрирования. Это косвенная задача, и давайте сделаем всё по-взрослому.
Документирование задач поможет вам не завалить проект, держать под контролем все важные моменты, поэтому обязательно создайте такой список. От каждого пункта этого списка задач и целей зависит слишком многое, начиная от выбора шаблона сайта и заканчивая тарифом хостинга, где вы разместите свой сайт.
Если вам нужен сайт для серьезного проекта – обратитесь к профессиональным разработчикам. Специалисты с большим опытом создания и продвижения сайтов подготовят для вас проект, семантическое ядро, установят и настроят систему управления контентом и шаблон для неё.
Соберите список запросов
Создание сайта под ключ начинается с проработки структуры сайта. Это делается ещё до того, как дизайнеры начнут продумывать дизайн, верстальщики – готовить шаблон, а программисты писать серверные скрипты.
Чтобы создать качественную структуру сайта, вам нужно собрать список ключевых слов, запросов, по которым вас будут находить посетители. Для этого можно воспользоваться сервисом Яндекс-Вордстат.
Все эти запросы объединяются в группы, называемые «кластерами». Предположим, что вы подписываете свадебные открытки в каллиграфическом стиле на заказ и продаете свой авторский курс по каллиграфии. В вашем списке могут быть такие ключевые слова:
- подписать открытку каллиграфическим почерком
- курс каллиграфии цена
- где подписать открытку
- каллиграфия заказать надпись
- каллиграфия цена
- каллиграфия заказать
- подписать открытку образец
- стоимость каллиграфии
- заказать красивую надпись
После того, как вы объедините эти запросы в группы и добавите к этим группам служебные страницы, у вас получится нечто похожее:
Главная страница
- стоимость каллиграфии
- каллиграфия заказать надпись
- заказать красивую надпись
- каллиграфия заказать
- каллиграфия цена
Услуги
- подписать открытку каллиграфическим почерком
- подписать открытку образец
- где подписать открытку
Курс каллиграфии
Портфолио
Контакты
Каждая группа слов должна располагаться на отдельной странице. Как видите, у вас уже получается небольшой сайт, состоящий из нескольких страниц, поэтому сайт-одностраничник для вас не подходит. Теперь – время выбрать платформу, на которой вы соберете свой первый сайт.
Выбираем платформу для сайта
Поскольку программировать и верстать вы не умеете, обойдёмся без этого: сейчас доступно множество платформ, которые позволяют собрать полноценный сайт без таких навыков и знаний. Среди них можно перечислить:
И это лишь малая часть таких систем управления контентом (CMS), на которых любой новичок может сделать сайт самостоятельно.
Сразу отметим: сайты-конструкторы, подобные Wix, использовать не стоит. Главная причина – их можно использовать только для платной рекламы, поисковые системы работают с ними плохо. Tilda в этом плане отличается более гибким функционалом, но и у нее есть свои ограничения, с которыми вы рано или поздно столкнетесь. Проблема в том, что перенести сайт с этих платформ на другую будет намного сложнее, фактически – невозможно, и вам придётся начинать все работы, по сути, с нуля. Даже если вы к тому времени больше узнаете о вёрстке, работе с базами данных и т.п.
Самая важная причина, по которой не стоит делать сайт на Wix и Tilda: вы будете ограничены теми функциональными возможностями, которые заложены в готовые шаблоны, а также действиями техподдержки. Сделать сайт просто и быстро там можно, но вот просто так уйти оттуда уже не удастся, как не удастся и внести необходимые правки.
В отличие от платформ-конструкторов такие платформы как WordPress или Joomla! предоставляют вам фактически неограниченные возможности по изменению дизайна, добавлению функциональных возможностей, масштабированию и переноса сайта на другую площадку. например, на WordPress вы можете самостоятельно сделать сайт-портфолио, блог или целый интернет-магазин. Поэтому дальнейшие шаги мы будем рассматривать именно на примере WordPress, хотя почти всё то же самое можно сделать и на Joomla! и некоторых других CMS — без необходимости учить вёрстку и программирование.
Выбираем шаблон
Итак, мы решили использовать для создания сайта своими руками WordPress. Большое преимущество этого движка в том, что для него существует множество готовых шаблонов, бесплатных и платных, в пределах 10-100$. Вы можете выбрать подходящий для вашего проекта и быстро адаптировать для себя, без программирования.
Поищите в репозитории WordPress или на таком сайте, как TemplateMonster.com. Все шаблоны удобно распределены по категориям, тегам и другим характеристикам. Вам остаётся только выбрать тот шаблон, который максимально точно соответствует вашим идеям и планам. В хорошем случае вам достаточно просто загрузить свой логотип вместо демо-версии, – и этого достаточно.
Заказываем хостинг и регистрируем домен
Теперь время найти площадку для размещения своего сайта. Хостинговых компаний, предоставляющих такие площадки, очень много. Для простого сайта вам понадобится самый базовый тариф, стоит такой на год около 1000-1700 рублей. Есть хостинги, которые предоставляют бесплатный хостинг, хотя и с очень ограниченными возможностями.
При оплате площадки для размещения за год большинство хостеров предоставляют бесплатное доменное имя — веб-адрес, по которому будет лежать ваш сайт. Можете воспользоваться такой возможностью, но лучше купить доменное имя отдельно. Это понадобится, если вы решите сменить хостинг.
мы не рекомендуем использовать домены третьего уровня — такие домены чаще всего предоставляют бесплатные площадки. Выглядят такие домены как Ваш-сайт.ваш-хостинг.ру — это не только выглядит несерьезно, но и ранжируются такие домены невысоко.
Как выбрать тариф хостинга
Для начала возьмите самый простой и дешевый. Большинство хостеров позволяют сменить тариф буквально налету, добавив вам системные ресурсы и пространство на диске.
Поскольку в самом начале посетителей на ваш сайт будет немного, а функциональные возможности у сайта будут невелики, большой нагрузки на сайт не будет. А значит, на этом этапе вам подойдёт и самый простой тариф.
Выберите домен
Доменное имя – это адрес, по которому будет доступен ваш сайт, и которое должны запомнить пользователи вашего сайта. Поэтому домен должен соответствовать имени вашего бренда, компании, или вашему имени, если это персональный сайт. Например, sashaivanov.ru.
Однако вы можете выбрать в качестве домена имя, содержащее ключевое слово, описывающее содержание сайта. Это хорошо для продвижения.
Помните, что имя должно быть недлинным, хорошо запоминаемым и хорошо звучащим.
Проверьте, не занят ли уже этот домен. Для проверки вы можете попробовать зайти по выбранному адресу — если он занят, вы уже увидите какой-то сайт. А возможно, вы увидите табличку, что домен уже кто-то зарезервировал, для перепродажи или других целей. В таком случае вы можете выкупить этот домен или подобрать другой.
Вам остается лишь зарегистрироваться на хостинге, выбрать тариф и начать разворачивать свой сайт.
Как правило, компания-хостер предоставляет тестовый бесплатный период, в течение которого вы можете понять, нравится ли вам этот хостинг или стоит поискать другой. Используйте эту возможность, оплатить вы успеете по истечении срока (обычно это 7-14 дней).
Настраиваем сайт
Итак, вы купили хостинг и доменное имя. Время установить систему управления контентом — WordPress. Есть три основных способа:
- Зайдите в официальный репозиторий WordPress и скачайте последнюю официальную версию. Выбирайте русифицированную. После этого скачанный архив надо загрузить на сервер с использованием протокола SSH или FTP. Если вы не знаете, как это сделать – переходим к пункту 2.
- В этом случае этот же архив вы должны загрузить через панель управления хостингом, «Менеджер файлов». Загружаем архив, по окончании загрузки разархивируем встроенными инструментами панели управления. Готово! Но есть способ ещё более простой.
- Любой современный хостинг сейчас предоставляет возможность установки WordPress одним кликом. В этом случае вам нужно всего лишь зайти в соответствующий раздел панели управления и нажать кнопку «Установить». Всё!
Если что-то непонятно – посмотрите справку, предоставляемую хостером, или задайте вопрос техподдержке.
А теперь — время создать сайт.
Устанавливаем тему оформления сайта
После установки WordPress вы увидите дефолтную установку со стандартной темой WordPress. В принципе, уже можно работать, но мы не для того искали свой шаблон. Пора его установить.
Если вы выбрали бесплатную тему из репозитория WordPress, установить её можно прямо из админки. Зайдите в админку, выберите вкладку «Внешний вид» – «Темы», и уже оттуда загрузите понравившуюся, нажав кнопку «Установить». После установки активируйте её.
Если вы уже добавляли какой-то контент – он сохранится. Новая тема лишь заменит оформление.
Платные темы, как правило, поставляются с некоторым количеством заранее предустановленных стандартных страниц для типовых задач: «О компании», «Портфолио», «Галерея», страницы авторов и т.д. Обычно они поставляются в нескольких вариантах вёрстки.
Кроме того, хорошо сделанная тема позволяет менять дизайн темы прямо из админки: фон, цвета, шрифты, особенности вёрстки, выравнивание. Для тех, кто владеет css, есть возможность добавить собственные стили оформления.
Более того: некоторые темы — это настоящие «комбайны», включающие в себя несколько шаблонов, адаптированных под разные задачи. Вам нужно лишь выбрать нужный шаблон в рамках темы, загрузить его из админки, установить и активировать.
Чаще всего предусмотрен демо-контент: шаблонные тексты и изображения, которые нужны для того, чтобы вы не делали всё с нуля. Такой контент можно использовать в качестве основы для своего контента или просто как пример. Если вы собираете сайт в первый раз, и есть возможность импортировать демо-контент – сделайте это.
Добавляем контент
На предыдущих шагах мы установили WordPress, шаблон, адаптировали дизайн под свой вкус или фирменный стиль. Начнем добавлять страницы и контент на них.
Вот как добавить страницу «Обо мне»: в панели управления WordPress найдите вкладку «Страницы» — «Добавить новую», и система создаст новую пустую страницу. Выглядит она почти так же, как стандартный интерфейс Word. Здесь есть визуальный редактор, вкладка для правки кода в режиме html, а также дополнительные окошки, где можно выбрать шаблон страницы.
Добавьте текст, отформатируйте его (точно так, как это делается в любом текстовом редакторе). Готово! На вашем сайте появилась первая страница, которую вы создали своими руками.
Добавляем страницу в меню
После сохранения изменений на новой странице переходим на вкладку панели управления «Внешний вид» — «Меню».
В зависимости от шаблона у вас может быть несколько типов меню, расположенных в разных частях сайта: главное (сверху), боковое, в «футере» (в «подвале» сайта).
Выберите нужное меню и найдите на вкладке «Страницы» только что созданную вами «Обо мне». Поставьте «галочку» рядом с ней, а затем кликните на кнопке «Добавить в меню». Страница добавлена в заданное меню и будет там выводиться.
Пункты меню можно перетаскивать в панели управления, зацепив «мышкой», произвольно меняя их порядок, делая подкатегорией другого пункта и т.д.
Не забудьте сохранить изменения кнопкой «Сохранить меню».
Добавляем на сайт блог
Блог на WordPress обычно реализуют через формат «Записи» — привычную всем ленту сообщений. Хотя, возможно, вы будете использовать «Записи» как формат для статей, а категории записей — как отдельные пункты меню. Всё определяет ваша разработанная в самом начале структура сайта.
В любом случае, если у вас есть контент, который явно укладывается в формат и шаблон записей – время создать первую.
Зайдите в панели управления WordPress на вкладку «Записи» – «Создать новую». Вы увидите почти такой же интерфейс текстового редактора, как в «Страницах», но общий интерфейс будет немного отличаться. Здесь так же есть окно выбора шаблона, а к нему добавляются выбор категории и тегов (меток страницы). Добавьте нужную категорию и теги.
Теперь остаётся добавить категорию в меню, точно так, как мы делали это раньше.
Адаптируем дизайн и настраиваем шаблон
Почти всё в WordPress можно решить с помощью плагинов, бесплатных и платных. Хорошие темы оформления уже поставляются с некоторыми плагинами. Как правило, это редакторы интерфейса, слайдеры, социальные кнопки «Поделиться», и многое другое. Если вы считаете, что вашему сайту нужны какие-то дополнительные возможности, то вам не понадобится разработчик: вы можете найти соответствующий плагин в репозитарии WordPress, установить и активировать его, а потом внести простые настройки. Знания программирования здесь не нужны.
С одной стороны — это очень удобно. С другой — вы можете столкнуться с программными конфликтами и проблемой «грязного» кода. Однако даже это представляет собой намного меньшую проблему, чем ограничения конструкторов сайтов, подобных Wix. Сайты на WordPress отлично продвигаются в поиске, не требуют глубоких знаний для настройки и администрирования, и, если вы хотите создать сайт самостоятельно – это, пожалуй, лучший выбор.
Но надо понимать, что для серьезного продвижения сайта в качестве вебмастера, разработчика, веб-дизайнера, верстальщика таких навыков мало. Вам всё равно придётся изучать и html, и css, и javascript, и даже php, если вы решите стать профессиональным разработчиком.
Создание сайта без шаблона
Для создания сайт с чистого листа, перейдите в раздел «Создать сайт» и кликните на ссылку «С чистого листа:
После этого вы будете перемещены в редактор.
Вы всегда можете создать сайт, взяв за основу профессиональный шаблон. О том, как это сделать написано в отдельной статье.
Редактирование пустого сайта
Перед вами пустая рабочая область редактора. Вы можете добавить на нее свои фотографии, картинки, файлы и воспользоваться базой А5, содержащей свыше 10 000 различных компонентов.
Важно вносить все изменения и размещать новые элементы так, чтобы они не выходили за границу шаблона т.к. иначе они окажутся за пределами видимости на вашем сайте. Граница, за которую нельзя выходить очерчивается красной линией:
В редакторе вы увидите визуальное разделение рабочей области (контейнера) от заднего фона:
Изменение фона
Вы можете менять цвет заднего фона. Для этого нажмите в верхнем меню на «Файл» >>> «Настройки»:
В открывшемся окне выберете необходимый цвет:
Цвет заднего фона изменится автоматически:
Теперь о том, как редактировать основной фон сайт. У нас есть коллекция фоновых изображений, которой можно смело пользоваться. Она находится в левом меню «Страница» >>> «Фоны»:
У вас откроется панель, где вы увидите более 1000 различных фоновых изображений. Слева, для вашего удобства, есть рубрикатор по категориям:
Просто нажмите на понравившуюся картинку, и фон применится автоматически к текущей страницы сайта:
Разумеется, вы можете сделать в качестве фона собственную картинку, для этого в уже известном вам окне нажмите на желтую кнопку «С компьютера»:
Затем выберете свою картинку и нажмите кнопку «Открыть»:
Фон применится автоматически:
Вы также можете сделать фоновым изображением любую картинку. Нажмите один раз левой кнопкой мышки на нужное изображение и снизу кликните на «Сделать фоном»:
Фон применится автоматически:
Управление страницами
Справа в редакторе находится панель управления страницами. Для перехода на другую страницу кликните на скриншот нужной страницы. Для добавления нажмите на «Добавить страницу»:
Перетаскивая левой кнопкой мышки одну страницу на другую, вы можете поменять порядок их отображения.
Нажатие на стрелочку вниз откроет меню, в котором можно также поменять местами страницы, переименовать их, дублировать (копировать), удалить:
Работа с текстом
Наиболее детально описывается в видео-уроке:
Работа с контентом
В контентном меню слева вы найдете свыше 10 000 компонентов. Для того, чтобы перетащить нужный элемент на рабочую область, зайдем в какой-нибудь раздел, например, «Фигуры»:
Перед вами откроется окно с доступными фигурами. Для того, чтобы поставить конкретную фигуру на рабочую область просто перетащите ее левой кнопкой мышки:
Вы можете загрузить картинку с компьютера или сфотографировать себя с веб-камеры (уже писалось выше).
Редактирование элементов
После того как вы выбрали элемент в меню Медиа или Виджеты и он появился на вашем сайте, кликните на него и сможете редактировать его, как вам захочется.
Клик на элементе активизирует панель редактирования элемента. Также вы сможете изменять размер, поворачивать и перемещать элемент по сайту.
Настройки компонента
Нажмите на нужный компонент, для того, чтобы сделать его активным, затем кликните на «Настройки» в нижнем меню:
После этого откроется панель, в которой вы сможете выставлять вручную размеры компонента, выставлять угол поворота, применять эффект прозрачности:
Изменение размера компонента
Изменять размеры компонента удобнее всего при помощи маркеров – квадратиков, находящихся на границах компонента.
Потяните маркер в нужную сторону, чтобы изменить размер:
Поворот элемента
Для поворота компонента воспользуйтесь стрелочкой сверху справа над самим компонентом:
Изменение порядка наложения компонентов
Здесь речь пойдет о том, как сделать, чтобы одна картинка была над другой или наоборот. Порядок наложения компонентов друг на друга регулируется при помощи контекстного меню:
Иконки слева направо означают:
· Понизить приоритет показа на один пункт
· Повысить приоритет показа на один пункт
· Убрать компонент на задний план
· Поставить компонент на передний план
Так, если мы нажмем у контекстного меню желтого круга «убрать на задний план», то увидим, что квадрат стал показывать поверх круга:
Замена картинок в шаблоне
Замена картинки позволяет добавить новое изображение на то же месте и в тех же размерах, что картинку, которую вы заменяете.
Для замены кликните на ненужную картинку и в нижем меню нажмите на кнопку «Заменить»:
После этого выберете новую картинку и нажмите кнопку «Открыть».
Работа с кнопками, ссылками и меню
В качестве перехода между страницами можно использовать три вещи – текстовые ссылки, кнопки и меню.
Как сделать текстовую ссылку уже отмечалось выше, теперь о том как поставить кнопки и меню.
Все кнопки А5 хранятся в данном разделе:
После того, как кнопка находится на рабочей области, вы можете менять текст внутри, дважды по нему кликнув левой кнопкой мышки. В нижнем меню откроется режим редактирования, с помощью которого можно изменять внешний вид текста внутри кнопки:
Чтобы установить ссылку с кнопки, один раз нажмите на нее и перейдите по значку глобуса в нижнем меню:
После этого откроется окно, в котором нужно выбрать страницу, на которую будет установлена ссылка:
Доступна возможность ссылки, ни только на страницу, но и на внешний сайт или на конкретный файл.
Для того, что установить внешнюю ссылку, перейдите по соответствующей вкладке:
Далее выберете тип ссылки и вписываем адрес:
Компонент меню подразумевает автоматическую настройку ссылок на все существующие страницы сайта.
Перетащите понравившееся меню на рабочую область редактора:
В панели снизу можно переключить вертикальное расположение меню на горизонтальное:
Для того, что исключить ненужную страницу из меню кликните на «Редактировать меню»:
В открывшемся окне снимите галочки там, где это нужно:
Просмотр перед публикацией
Чтобы просмотреть свою работу, кликните на Просмотр в верхнем меню редактора:
После этого вы увидите свой сайт ровно также, как увидят его посетители уже после публикации:
Сохранение сайта
Не забывайте периодически сохранять свою работу в редакторе:
Публикация сайта
После того, как вы закончили работу над сайтом опубликуйте свой сайт в Интернете.
Важно: вы всегда сможете в последствие редактировать свой сайт, кнопки «опубликовать» в редакторе больше не будет, это нормально.
Нажмите на кнопку «Опубликовать»:
Вы переместитесь на страницу, где предстоит определиться с названием своего сайта.
Если вы хотите уйти от поддомена, то всегда можете прикрепить собственное название (домен) или вовсе получить его бесплатно (при годовой подписке на тарифные планы «Премиум» или «Бизнес»).
После того, как вы определились с адресом сайта, нажмите на кнопку «Опубликовать».
Все, ваш сайт опубликован:
Переход на Премиум
С помощью тарифных планов «Премиум » или «Бизнес » вы сможете уйти от названия с концовкой “a5.ru”, прикрутив свое собственное название (домен). На A5.ru действует постоянная акция – при оплате тарифа «Премиум » или «Бизнес» на год или 10 лет мы бесплатно вам предоставим собственный домен.
Более продвинутые тарифы позволяют значительно увеличить объем дисковой квоты на сайте, так, что вы сможете загружать неограниченное количество фотографий, файлов. С «Премиум » тарифом вы сможете создать бесконечно много страниц на своем сайте.
Для смены тарифа кликните на «Подключить».
После этого вы переместитесь на странице описания наших тарифов.
Наиболее популярной и оптимальной опцией является «Премиум », именно ее уже выбрали более 10 000 человек.
После этого у вас откроется страницами с тарифными планами:
Нажмите у нужного тарифа кнопку «Подключиться» и определитесь со сроком подписки (при годовой подписке мы предоставим домен в подарок!):
В случае наличия денежных средств, произойдет смена тарифного плана.
Способы пополнения личного счета описаны в отдельной разделе.
Шаблон простого сайта на 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
Как создать сайт через блокнот
197110, Россия, Санкт-Петербург, а/я 144, ООО «Юми» +7 (812) 309-68-23
При взгляде на огромное разнообразие сайтов, представленных в сети, у людей непосвящённых зачастую создаётся впечатление, что создание сайтов бесплатно самостоятельно — дело избранных. Тем не менее, как и любая дальняя дорога начинается с первого шага, а шедевр с первого штриха в альбоме, так и создание нового сайта начинается с малого, можно даже сказать, подручными средствами. А для этого нам понадобится всем известный инструмент и простейший текстовый редактор — Блокнот.
Что такое HTML
Дело в том, что странички сайтов, которые мы видим на мониторах и экранах гаджетов, по сути, являются не чем иным, а текстовыми документами, правда, созданными с использованием языка гипертекстовой разметки или HTML, а делать это можно в обычном Блокноте. Следует отметить, что HTML не относится к языкам программирования — это способ предоставления информации в виде «доступном для понимания» браузерами. Браузеры, выступая в роли переводчиков со своего на человеческий язык, интерпретируют страницы в HTML, в результате чего вы видите на экране не набор символов, а форматированный текст.
Вот как выглядит на экране домашняя страница сайта umi.ru:
А вот как её «видит» браузер:
Существуют и непарные теги, когда действие разовое и не относится к определённому участку текста, например, перенос строк, обозначаемый в HTML комбинацией
.
Основные виды тегов и их роль в разметке веб-страницы
- . С этого элемента начинается сайт. Он сообщает браузеру, что документ создан с помощью языка гипертекстовой разметки HTML. По большому счёту, этот элемент не обязателен, но его присутствие позволит избежать потенциальных проблем с отображением страницы;
- парный тег и сообщает о начале и конце каждой страницы;
- внутри между элементами парного тега и указывается всевозможная служебная информация о странице, в том числе, ее заголовок, указания на стили, использованные в ее оформлении, подключаемые скрипты, специальные метаданные;
- ещё один парный тег содержит заголовок страницы и находится внутри тега . Благодаря этому тегу браузер и поисковые роботы определяют название каждой страницы;
- область документа, отображаемая непосредственно на мониторе и видная пользователю, ограничивается парным тегом . На странице эта область следует за тегом .
- для добавления в текст ссылок служит тег , однако он несколько отличается от предыдущих своим видом и выглядит текст ссылки.
- абзацы в тексте обозначаются парным тегом
.
- для разделения текста при помощи подзаголовков различных уровней существуют парные теги , , , , , . Благодаря им можно выделять текст в зависимости от его важности.
- для выделения текста полужирным шрифтом служит парный тег .
Это всего лишь небольшая часть из всего разнообразия тегов, которых насчитывается около ста. Тем не менее, с их помощью уже можно начинать cоздание сайта через блокнот. Есть также ряд правил, по которым теги располагаются в документе. Для основных тегов, включая , , , , существует строгий порядок распределения, тогда как в блоке, ограниченном тегами , остальные теги комбинируются в зависимости от общего замысла и в соответствии со стандартами языка HTML.
Создаём сайт своими руками в Блокноте
Давайте попробуем научиться cозданию сайта через блокнот, чтобы были понятны роль и функции тегов, а также структура создаваемого документа.
Для работы с текстом сайта лучше работать не с традиционной программой «Блокнот», а со специальной его версией Notepad++, созданной как раз для написания кода. Скачать её можно с сайта разработчика. Всё описанное можно сделать и в обычном «Блокноте», но в Notepad++ работать с кодом гораздо удобнее.
Как уже говорилось, документ начинается с тега , который сообщает браузеру, как его интерпретировать. Это и будет первая строчка в коде вашего сайта.
Следующий шаг. Обозначьте начало и конец страницы, добавив тег во вторую строку и через несколько строк ниже. Все остальное содержимое будет находиться в пределах, ограниченных этим парным тегом.
Затем выделим в документе участок страницы со служебной информацией, добавив парный тег между тегами , как показано ниже:
Чтобы указать заголовок страницы, в пространстве между тегами
и в одну строку напишите парный тег и вставьте между них заголовок (название сайта), например, «Создание сайта через блокнот».А вот как её «видит» браузер:
Это будет единственная служебная информация нашего сайта. Далее приступаем к оформлению той части, которая будет видна на экране дисплея, выделив её тегами . Открывающий тег ставим в строке после тега , а закрывающий — перед тегом