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

Как всё устроено

Открывать ХТМЛ‑файлы можно и в блокноте, но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор Саблайм Текст

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

Открывать ХТМЛ‑файлы можно и в блокноте, но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор Саблайм Текст

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

Но от простого текста толку мало. Чтобы страницу было удобно читать и изучать, нужно структурировать и стилизовать её содержимое. Для этого используют язык разметки ХТМЛ и язык стилей ЦСС. Сегодня поговорим о ХТМЛ.

ХТМЛ, теги и атрибуты

ХТМЛ‑разметка структурирует содержимое и состоит из тегов — контейнеров, в которые помещается текст. Текст помещается внутри тега, между его открывающей и закрывающей частями:

<h1>Текст внутри тега-заголовка</h1>
    ​  
<p>
  Текст внутри текстового тега p — параграфа
</p>
    ​  
<small>
  Маленький текст в своём специальном теге
</small>

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

<p>По-настоящему <b>важные</b> принципы:</p>
    ​  
<ul>
  <li>Не планировать впритык</li>
  <li>Сделать значит сдать</li>
  <li>Флекс — всегда боль</li>
</ul>

У тегов есть атрибуты — параметры для настройки внешнего вида и поведения. Напри­мер, атри­бут href добавляют к тегу‑ссылке a, чтобы он по клику отправлял на другую страницу. Тег br в примере переносит строку, чтобы ссылки не слиплись.

<a>Нерабочая ссылка</a>
    ​  
<br>
    ​  
<a href="https://vk.com/">Рабочая ссылка</a>

Ещё есть теги, которые не нужно закрывать и в которые нельзя ничего вложить. Это картинки и разные интерактивные элементы: видео, поля ввода, кнопки. Поведение и содержимое таких тегов полностью настраивается атрибутами. Например, у тега‑картинки img ссылку на саму картинку указывают в атрибуте src:

<img src="https://bureau.ru/files/3slova-logo.png">

Служебные теги

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

Стандарты и рекомендации для веб‑страниц разрабатывает Консорциум Всемирной паутины

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

Стандарты и рекомендации для веб‑страниц разрабатывает Консорциум Всемирной паутины

Добавим тип документа, корневой тег, обозначение языка страницы и кодировку UTF‑8, контейнер для метаданных head и контейнер для всего видимого содержимого body.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>Моя прекрасная веб-страница</h1>
    <p>Я верстаю и сияю как заря!</p>
  </body> 
</html>

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

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>😎 Моя прекрасная веб-страница</title>
  </head>
  <body>
    <h1>Моя прекрасная веб-страница</h1>
    <p>Я верстаю и сияю как заря!</p>
  </body> 
</html>

Всё! Концептуально это весь ХТМЛ, дальше верстальщик уже изучает разные теги и особенности работы с ними, осваивает смежные технологии: язык стилей ЦСС и язык программирования Яваскрипт. В следующих советах расскажу как стилизовать теги языком ЦСС и как загрузить страницу в интернет, чтобы сделать доступной для других людей.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы