Заготовка html страницы: Простые html заготовки для страниц

29.06.2021 alexxlab

Содержание

Создание HTML страницы, структура HTML страницы | Введение в HTML

Для того, чтобы создать HTML документ, достаточно сделать следующие вещи:

Выбор текстового редактора

Первое что необходимо сделать — это выбрать текстовый редактор с которым мы будем работать. Выбор на сегодняшний огромный, вот список текстовых редакторов для верстки и не только. Они обладают рядом инструментов начиная от подсветки кода заканчивая плагинами, в разы ускоряющими написание HTML разметки. Но на самом деле они служат лишь для того, чтобы упростить жизнь верстальщику. И для создания самого примитивного HTML документа вам может хватить даже встроенного текстового редактора NotePad. Но мы в этом курсе будем пользоваться текстовым редактором Brackets.

Прейти на сайт Brackets.io

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

Создание каркаса HTML страницы

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

Создаем новый документ в текстовом редакторе (пока не сохраняем).

Напишите, или скопируйте данный код.

<!DOCTYPE html>
<html>

<head>
  <!-- Здесь размещены служебные теги для HTML страницы. -->
  <meta charset=”utf-8”>
  <title>Название страницы</title>
</head>

<body>
   <!-- В этой части размещается видимый контент страницы. -->
</body>

</html>

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

Указание версии HTML с помощью инструкции Doctype

Любой HTML документ должен содержать объявление doctype в самой первой строчке, до тега html. С помощью данной инструкции мы указываем браузеру, на какой версии HTML написан HTML документ.

Дело в том, что существуют различные версии языка HTML. На данный момент используется версия HTML5. И по этому инструкция DOCTYPE выглядит таким образом

<!DOCTYPE html>

Что нам дает эта инструкция – она позволяет нам использовать все нововведения (теги и атрибуты) языка разметки HTML5. При этом устаревшие теги, нам в этой версии уже будут недоступны. Если же мы хотим использовать старые версии, к примеру,

HTML4.01 Transitional, то тогда наша строка DOCTYPE выглядела бы следующим образом

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

Тег <html>

Данный тег служит в роле контейнера, который связывает не видимую часть страницы <head> и контент самой страницы <body>

Тег <head>

Содержимое тега <head> не отображается на странице браузера (кроме

title), он выполняет роль контейнера, в который можно поместить такие вещи как: таблицы стилей(CSS), клиентские скрипты, название страницы title, указать кодировку страницы, meta теги и другую важную для роботов информацию о HTML странице.

Тег <body>

В тег body помещается вся видимая часть страницы (контент страницы). Текст, изображения, видео, формы, и всё остальное, что вы хотели бы видеть на HTML странице, следует помещать именно в этот контейнер body.

Тег <title>

Данный тег позволяет указать название документа

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

Указание кодировки HTML страницы

Используемый в шаблоне meta тег charset отвечает за кодировку, которая была использована на данной HTML странице

Комментарии в HTML.

Когда вы будете писать html-код, может понадобиться:

1) Сделать пометки в коде, по которым можно позже вспомнить, зачем нужен тот или иной фрагмент кода.

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

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

И.т.д. ситуаций может быть масса.

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

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

Все эти задачи можно решить с помощью комментариев HTML.

Комментарий

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

Синтаксис у комментариев в html следующий:

<!-- Текст комментария -->

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

Рассмотрим HTML-документ со следующим содержимым:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<!--Пример комментария HTML. Этот текст будет невидим в браузере.-->
<p>Пример текста в абзаце</p>
</body>
</html>

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

Текст комментария на странице никак не отображается, но при просмотре исходного кода документа, комментарии видны и с ними можно работать.

Анатомия Web-страницы — HTML, CSS, JavaScript, Perl, PHP, MySQL: Weblibrary.biz

Ниже показана заготовка типичного Webдокумента. На этом примере мы рас
смотрим структуру HTMLстраниц. Я назвал этот файл Strukt.htm.

Листинг 1.1. Пример (шаблон) Webстраницы

<HTML> <HEAD> <Т1Т1Е>Структура МеЬстраницы<ДШе>

<STYLE> h3 {fontfamily: Arbat;}
CODE {fontfamily: Arial;} </style>
<META httpequiv="ContentType" content="text/html; charset=windows1251">
<META name="Author" content="Alexei Goncharov">
<МЕТА name="Keywords" content="WWW, HTML, document, element">
</head>
<BODY bgcolor=#FFFFFF>
<! Комментарий к странице >
<A name="top"x/a>
Переход в <А target="_blank" href="#bottom">KOHeu</a> документа<Р>
Переход к <А пгег"="#5001"хВ>ссылке K/bx/axP>
<Р>
<HR>
<Н1>Заголовок 1</h2>
<Н2>Заголовок 2</h3>
<НЗ>Заголовок 3</h4>
 <Н4>Заголовок 4</h5>
<Н5>Заголовок 5</h5>
<Н6>Заголовок 6</h6>
<HR>
Здесь расположена <В>ссылка K/bxA name="S001"x/a>
<HR>
<Р>Здесь должен располагаться оригинальный текст Webстраницы
<HR>
<А name="bottom"x/a><P>
Переход в <А target="_blank" href="jftop">Ha4ano</a> документа
</body>
</html>

Если рассмотреть исходные тексты различных Webстраниц, то можно легко уви
деть схожесть их структур. Это объясняется тем, что документы создаются по опре
деленным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986
«Information processing. Text and office systems. Standard Generalized Markup

Language (SGML)». Правда, существует большое различие между стандартом
официальным и стандартом фактическим. HTML постоянно развивается, допол
няется новыми элементами, и изучать его надо не по официальным первоисточ
никам, а на практике, обращаясь к последним разработкам ведущих фирм и спе
циалистов.

Чтобы понять структуру Webстраницы, необходимо рассмотреть вес элементы,
входящие в приведенный выше листинг. При рассмотрении элементов языка я
буду приводить оба тега: начальный и конечный. Например: <I> </i>. Этим я
хочу подчеркнуть, что в большинстве случаев разработчик должен использовать
два тега для каждого элемента. Число случаев, когда допустим только начальный

тег (часть элементов не имеют конечного вообще), невелико, и они специально
оговариваются. Для имен тегов можно использовать как прописные, так и строч
ные буквы латинского алфавита. Некоторые пользователи записывают начальные
теги прописными буквами, а конечные теги — строчными. Это помогает разобрать
ся в исходном тексте Webстраницы.

<HTML> </html>

Обозначение документа на языке HTML. Я уже упоминал о том, что одним и:
принципов языка является многоуровневое вложение элементов. Данный эле
мент является самым внешним, так как между его начальным и конечным тегам!
должна находиться вся Webстраница. В принципе, этот элемент можно рассмат

ривать как формальность. Он имеет атрибуты version, lang и d i r , которыми в дан
ном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY
FRAMESET и других, определяющих общую структуру Webстраницы. Естественно
что конечным тегом </html> заканчиваются все подобные документы.

<HEAD> </head>

Область заголовка Webстраницы. Иными словами, ее первая часть. Так же, как
предыдущий элемент, HEAD служит только для формирования общей структурь
документа. Этот элемент может иметь атрибуты lang и d i r , должен включать эле
мент TITLE и допускает вложение элементов BASE, МЕТА, LINK, OBJECT, SCRIPT, STYLE.

<TITLE> </title>

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

<STYLE> </style>

Описание стиля некоторых элементов Webстраницы. В файле Strukt.htm назна
чены шрифты для элементов Н2 и CODE. На рис. 2.1 видно, как изменится вид заго
ловка второго уровня после такого переопределения. Естественно, что для каждого
элемента существует стилевое оформление по умолчанию, поэтому употребление
элемента STYLE не обязательно, но желательно.

Интересно, как синтаксис HTML отражает историю развития вычислительной
техники. Например, старый, теперь уже не работающий элемент BLINK напомина
ет нам о тех временах, когда люди использовали дисплеи, которые имели (страш
но подумать!) только текстовый режим. При таком положении вещей мигание
текста (blink) было, наверное, единственным достижимым визуальным эффектом.
В противоположность этому, элемент STYLE, введенный сравнительно недавно,
вызывает ассоциации с программами для Windows, так как в них впервые появи
лось стилевое оформление текста, которое теперь невероятно популярно, и без
него уже немыслима работа в таких приложениях, как Word или Excel.

<МЕТА>

Этот элемент содержит служебную информацию, которая не отражается при про
смотре Webстраницы.M« автора»

Набор ключевых слов для поиска:

name="Keywords" content="cnoBo1, слово2, словоЗ . . . "

Краткое описание содержания Webстраницы:

name="Description" content="Содержание страницы"

Описание типа и характеристик Webстраницы:

name="ContentType" content="Описание страницы"

Указание приложения, в котором была создана Webстраница:

name="Generator" content="Wa3eaHne HTMLредактора"

Здесь и далее при описании элементов и их атрибутов курсивом выделены фраг
менты, которые должны быть заполнены пользователем по его усмотрению. Ат
рибут name используется приложениемклиентом для получения дополнительной
информации о Webстраницах и их упорядочения. Этот атрибут часто заменяют
атрибутом httpequiv. Он используется сервером для создания дополнительных
полей при выполнении запроса.

Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего ат
рибута таков:

URL="http://адрес"

<BODY> </body>

Этот элемент заключает в себе гипертекст, который определяет собственно Web
страницу. Это та произвольная часть документа, которую разрабатывает авто
страницы и которая отображается броузером. Соответственно, конечный тег этс
го элемента надо искать в конце HTMLфайла. Внутри элемента BODY можно ис
пользовать все элементы, предназначенные для дизайна Webстраницы. Внутр
начального тега элемента BODY можно расположить ряд атрибутов, обеспечиваю
щих установки для всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных Для дизайна — атрибут, определяющий фон страниць
Его появление можно уподобить маленькой революции в WWW, так как одина
ково серые Webстраницы вдруг расцвели яркими цветными узорами:

background="/7yrb к файлу фона"

Более простое оформление фона сводится к заданию его цвета:

bgcolor="#ff/?GGSS"

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

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

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

text="#/?/?GGB5"

Для задания цвета текста гиперссылок используется следующий атрибут:

link="#/?/?GGflS"

Точно так же можно задать цвет для просмотренных гиперссылок:

vlink="#/?/?GGflS"

Можно также указать изменение цвета для последней выбранной пользователем
гиперссылки:

alink="#/?/?GGflS"

Гипертекст, расположенный внутри элемента BODY, может иметь произвольную
структуру. Ее определяют, в первую очередь, назначение Webстраницы и фанта
зия разработчика.

<! Комментарий — >

В любом языке программирования есть конструкции, позволяющие создавать
произвольные ремарки. HTML в этом смысле — не исключение. Текст, введенный
внутри этого элемента, игнорируется броузером. Эти элементы могут располагать
ся в любом месте Webстраницы. Без закрывающей угловой скобки здесь, пови
димому, не обойтись: комментарий должен быть отделен от основного текста.
Признаком комментария служит восклицательный знак, а текст комментария
должен обрамляться двойными дефисом. Например:

<! Начало вывода таблицы >

<Hl></hl>

Элемент заголовка. Существует шесть уровней заголовков, которые обозначают
ся Н1…Н6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый
маленький заголовок. Рис. 2.1 дает представление об относительных размерах
букв в заголовках. Для заголовков можно использовать атрибут, задающий вырав
нивание влево, по центру или вправо:

align="left" align="center" align="right" <HR>

Горизонтальная линия (horizontal rule) — очень часто используемый элемент.twa в процентам/ч

Можно выбрать цвет:

со1ог="цеет" <A></a>

HTMLдокумент может быть очень большим, и в этом случае пользователю дол
жна быть предоставлена возможность быстрого перемещения к нужному раздел
документа. Для этого можно использовать механизм гиперссылок. Необходим
также в нужных местах текста расставить соответствующие метки. Подроби
гиперссылки обсуждаются в разделе «Гиперссылки» главы 3, а здесь мы рассмот
рим только шаблон для создания меток:

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

Например, для перехода внутри документа можно использовать следующую кон
струкцию:

<Р>Переход к <А target="_blank" href=" Пметка ">метке</а></р>

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

<BASE>

Элемент для задания базового адреса (URL) для ссылок. Это позволяет опускат]
начальную часть адреса в ссылках документа. Для использования этого элемент;
необходимо использовать следующую конструкцию:

<BASE href :="http:// компьютер/ путь1">

Фрагмент адреса путъ1’не является обязательным. При формировании полногс
адреса он будет отброшен. Так, если в тексте документа встретится относительна*
ссылка

<А ref =" путь2/имя документа, htm' '> Видимый текст ссылки</а>,

то она будет соответствовать URL

Ь11р://компьютер/путь2/имя документа. htm

В том случае, когда надо задать базовый адрес для локального диска (например.
D:), должна быть использована такая конструкция:

<BASE target="_blank" href="file://D:nyrb">

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

В выражении абсолютной ссылки можно также опустить указание на схему до
ступа (file : //). В этом случае будет учитываться только левая часть абсолютной
ссылки до первого левого символа “”, то есть имя локального диска.

Базовые приёмы вёрстки

Если вы знаете теги HTML и немного изучили CSS, то можете потихоньку осваивать вёрстку, комбинируя различные способы.

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

Заготовка:


<!DOCTYPE html>
<html>
  <head>
  <title></title>
  </head>
  
  <body>
    <p>Заготовка страницы</p>
  </body>
</html>

Вы можете и дальше добавлять различные абзацы и картинки. Но у вас получится линейная структура, которая уместна при размещении какого-нибудь документа без оформления. Сайты же имеют определённую вёрстку: шапка, подвал, боковые элементы и т.д. Данные элементы формируются блоками div. Попробуем сначала их просто объявить внутри body.


Шапка сайта
Боковая колонка
Основная часть страницы
Подвал

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

Чтобы блоки стали строительным материалом, нужно к ним добавить CSS. Обычно, свойства CSS прописываются в отдельном файле и подключаются к странице. Но для учебного примера мы будем описывать стили сразу в файле в области head. Создаваемые стили помещаются в тег style.


<style>
  div{
  border:  2px solid black;
  width: 500px;
  height: 100px;
  }
</style>

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


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    
    <style>
      div{
        border:  2px solid black;
        width: 500px;
        height: 100px;
      }
      
      #sidebar{
	    width: 200px;
	    float: left
      }
     
      #content{
	    width: 300px;
	    float: left;
      }
    </style>
  </head>
  
  <body>
    <div>Шапка сайта</div>
    <div>Боковая колонка</div>
    <div>Основная часть страницы</div>
    <div>Подвал</div>
  </body>
</html>

Результат будет не очень красивым, но общее представление, как можно управлять блоками, вы уже получили.

Чтобы граница не вылезала за блок можно дописать в стили:


*{
  box-sizing: border-box;
}

Теперь ширина рамки учитываться в ширине всего блока, а не добавляться к ней. У нас есть шапка, боковая колонка и основная часть в одной строке, а ниже располагается подвал.

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


#wrapper{
  width: 500px;
  margin: 0 auto
}

div:not(#wrapper){
  border: 2px solid black;
  height: 100px
}

Добавьте новый блок div с идентификатором wrapper, который должен окружать все остальные блоки.

Мы задали контейнеру ширину и внешние отступы (margin). Первая цифра задает отступ снизу и сверху, а вторая – слева и справа. Соответственно, ключевое слово auto создает такие отступы, чтобы элемент был выровнен прямо по центру.

Мы задавали стиль для всех элементов div в самом начале вёрстки. Он применится и к wrapper, что совсем не желали. Поэтому с помощью псевдокласса :not указываем, что правила следует применять ко всем блокам, кроме блока с идентификатором wrapper.

Обычно в боковой колонке, шапке и подвале количество информации не меняется, поэтому там можно выставить фиксированную высоту. Основное содержимое зависит от количества текста и может быть разным. Поэтому этому блоку лучше поставить минимальную высоту при помощи min-height.

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

Окончательный вариант, который далёк от идеала.


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    
    <style>
      *{
	    box-sizing: border-box;
      }
      
      #wrapper{
	    width: 500px;
	    margin: 0 auto;
      }
      
      div:not(#wrapper){
	    border: 2px solid black;
	    
      }
      
      #header{
	    height:70px;
      }
      
      #sidebar{
	    width: 200px;
        height: 600px;
	    float: left;
      }
     
      #content{
	    width: 300px;
        min-height: 600px;
	    float: left;
      }
      
      #footer{
	    height: 50px;
      }
      
    </style>
  </head>


  
  <body>
  <div>
    <div>Шапка сайта</div>
    <div>Боковая колонка</div>
    <div>Основная часть страницы</div>
    <div>Подвал. Нижняя часть страницы</div>
  </div>
  
  </body>
</html>

Как писать на HTML / Девман

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

В этом туториале вы поможете верстальщице Оле сделать страницу с результатами поиска в Яндексе. Получится не один в один, но довольно похоже:

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

1. Создайте HTML-документ

Для начала Оле понадобится заготовка, файл index.html. Создайте у себя файл с таким же содержимым:

<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
  </body>
</html>

Здесь 3 тега, которые обязаны быть в каждом html-файле:

<html> — здесь лежат все теги страницы, он “корневой”, главный;
<head> — в этом теге лежит всё, что не контент страницы: стили, заголовок страницы в теге <title>, кодировка и так далее;
<body> — “тело” HTML-документа, здесь лежит всё, что вы увидите на страничке в браузере.

2. Добавьте текст

Вот что Оля должна вывести при поиске “Коала” в поисковике, для которого она верстает страницу с результатами поиска:

Коала — Википедия

Коaла (лат. Phascolarctos cinereus) — вид сумчатых, обитающий в Австралии. Единственный современный представитель семейства коаловых ... Читать ещё.

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

Как получилось у Оли

Не долго думая, Оля добавила текст прямо внутрь <body> и получила такой результат:

3. Добавьте ссылку

Без ссылок на результаты поиска работа Оли бесполезна. Люди пришли не просто почитать про коал: им нужны ссылки на сайты про коал.

Оля помнит наизусть несколько тегов: <img> — для картинок, а <p> — для параграфа текста. Но как добавить ссылку? Какой у неё тег?

Оля загуглила, и получила этот ответ:

htmlbook.ru — крутой сайт, на котором хорошая документация по HTML и CSS, поэтому в первую очередь присматривайтесь к нему.

Отлично, нужен тег <a>! Но как его написать?..

Как писать теги

У тегов бывают разные названия, но способов их написать всего два. Способ записи зависит от того парный он или одиночный.

Пример парного тега:

<p>Покупайте наши веб-сайты!</p>

Так на страницу можно добавить параграф с текстом. Тег <p> обязательно “закрывать” — добавлять в конце ещё один, но с чёрточкой: </p>. Так вы скажете браузеру, что всё, текст параграфа закончился.

Пример одиночного тега:

<img src="адрес_картинки">

Он сам по себе, его “закрывать” не нужно. Одиночных тегов очень мало, в основном, вам пригодится только <img> — для картинок, <br> — перенос строки и <hr> — горизонтальная линия.

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

<img src="https://dvmn.org/filer/canonical/1594118255/683/">
<h2> Зачем нужен h2 </h2>
<p>
   В теге h2 пишут заголовки, как "Как писать теги" чуть выше.
   Это парный тег, у него есть начало и конец, как и у тега p.
</p>
<p>
   У тега img нет "начала" или "конца". Он значит только то, что нужно добавить картинку.
   Браузеру не нужно сообщать, когда она "закончится".
</p>

Парные теги нужно закрывать

Допишите тег

Оля хотела добавить ссылку с помощью тега <a>, и теперь она поняла, как это сделать. Ещё немного гуглежа и она узнала : тег парный, а значит выглядеть он должен вот так:

<a href="#">Читать ещё</a>

Оля не знала какую ссылку поставить для ссылки, ведь ссылки будут подставляться уже при шаблонизации, поэтому оставила “#” вместо ссылки. Это называется якорь, и это такой обычай среди верстальщиков: если не знаешь, какую ссылку поставить, ставь #.

Теперь на страничке Оли появилась ссылка. Попробуйте повторить результат Оли:

4. Выделите все “коала” на странице

Поисковик выделяет жирным шрифтом все слова, которые вы искали. Оля не знает, что это за тег, но по запросу html жирный шрифт в google.com Оля нашла ссылку на заветный htmlbook.ru.

Попробуйте, у вас получится, как у Оли? У неё получился такой текст:

Сейчас текст у Оли весь одинакового размера. В нём Оля хочет выделить заголовок: Коала — Википедия крупно, а чуть ниже весь остальной текст, мельче. Оля загуглила html заголовок и сразу нашла подходящий тег: <h2>.

Странно, получается, заголовку достался отдельный тег, а остальному тексту — нет. Оля продолжила гуглить теги и узнала о теге <p>: пишут, что он нужен для текста. Но зачем? Чтобы разобраться в этом Оле пришлось узнать о строчных и блочных тегах.

О строчных и блочных тегах

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

<a> — ссылка;
<i> — выделение текста курсивом;
<b> — выделение текста жирным;
<br> — одиночный тег для переноса строки.

Другой вид тегов — блочные. Это теги, которые объединяют другие теги внутри себя в группы, и наделяют их смыслом. Например, блочный тег <h2> содержит в себе заголовок страницы, а блочный тег <p> — параграф текста. За счёт них можно оформить заголовок в одном стиле, а остальной текст — в другом:

<h2>Статья о котиках</h2>

<p>
  <b>Котики</b> — замечательные животные. Я полюбил их, когда мне было 7 лет.
  Как сейчас помню, на мой <i>день рождения</i> мне подарили замечательного кота...
</p>

В этом примере заголовок статьи покрашен в красный цвет: color:red;. Текст же статьи при этом остался чёрным, покрасился только заголовок “Статья о котиках”. Для текста внутри тега <p> теперь можно определить другие, отдельные стили, которые не коснутся текста в заголовке <h2>.

Внутри тега <p> есть несколько строчных тегов: <b> и <i>. Они прямо “срослись” с текстом, существуют прямо внутри него, в отличие от блочных, которые только обрамляют текст по краям.

Блочные теги незаменимы, когда хочется добавить тексту фон, рамку, отступы… Вот небольшой список из самых популярных блочных тегов:

<header> — “шапка” сайта, полоса, которая всегда висит в самом верху страницы;
<footer> — “подвал” сайта — самый них страницы, где расположены всякие ссылки на техподдержку, лицензии, контакты поддержки и т.д.;
<main> — главный контент на странице: то, ради чего пользователь пришёл на сайт;
<div> — для создания прочих блоков, для которых нет специализированного тега. Например, для карточки товара в магазине или карточки поста.

Отдельно стоит выделить эти блочные теги:

<p> — параграф текста;
<h2>, <h3>... <h6> — заголовок. Чем больше число — тем мельче заголовок;

Допишите код

Теперь, когда Оля разобралась с блочными/строчными тегами, она может наконец закончить незавершённую работу: добавить на страницу теги <h2> и <p>. Заголовок с тегом <h2> показался ей слишком крупным, поэтому она воспользовалась <h3>:

Заголовок на то и нужен, чтобы на него хотелось кликнуть. А на ваш заголовок кликнуть нельзя. Что делать? Нужен тег для ссылок <a>. Но как правильно: положить тег <a> внутрь тега <h2> или наоборот?..

О комбинации тегов

Нельзя располагать блочные теги внутри строчных.

Такой код существовать не должен:

<a><h2>Заголовок</h2></a>

Тег <a> — строчный, он существует внутри текста. Тег <h2> — блочный, он оборачивает собой текст и все строчные теги для этого текста. Вот как стоило поступить в этой ситуации:

<h2><a>Заголовок</a></h2>

Оля прислушалась к этой рекоммендации и вот что у неё получилось:

<h3>
  <a href="#"><b>Коала</b> — Википедия</a>
</h3>

Проверьте, у вас получилось сделать заголовок ссылкой?

Теперь Оля хочет подпись под заголовком ссылки, как вот тут:

Оля загуглила html мелкий текст и нашла тег, который поможет сделать текст меньше. Подпись под заголовком Оля решила делать прямо внутри тега <h3>, чтобы она была “едина” с заголовком <h3>, никуда не уехала и так далее:

<h3>
  <a href="#"><b>Коала</b> — Википедия</a>
  <small>ru.wikipedia.org›Коала</small>
</h3>

Получилось не то, что хотела Оля… Во-первых, текст не сильно-то и уменьшился. Во-вторых, не хватает переноса.

В HTML обычные переносы строк игнорируются, так как текст переносится по ширине экрана. Чтобы заставить текст перенестись насильно, есть одиночный тег <br>:

<h3>
  <a href="#"><b>Коала</b> — Википедия</a>
  <br>
  <small>ru.wikipedia.org›Коала</small>
</h3>

Теперь нужно сделать текст ещё мельче. Оказывается, теги можно комбинировать, вот так:

<small>
    <small>
        ru.wikipedia.org›Коала
    </small>
</small>

Тег как бы “накапливает” эффект мелкого текста и делает его ещё мельче. Проверьте, у вас тоже так получится?

Попробуйте применить

Что делать, если подходящий тег не нашёлся

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

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

<button>
    <img src="#" >
</button>

Или вы хотите, чтобы ваш текст был выделен жирным и при этом был ссылкой, вот так: жирная ссылка. Это можно сделать двумя способами, комбинируя теги <a> и <b>, они оба строчные:

<a><b>Жирная ссылка</b></a>

<b><a>Жирная ссылка</a></b>

Что ещё почитать по теме

Меньше — лучше. Нетипичные приёмы верстки сайтов — Академия Яндекса

На современных сайтах часто можно встретить красивую графику, сложную вёрстку и богатую анимацию. Но их создателям не стоит забывать, что очень многие пользователи находятся в местах с плохим интернетом. Мы рассмотрим один из неочевидных способов снизить вес страницы, чтобы она загружалась быстрее, а те, кто имеет опыт в вёрстке, смогут проверить свои навыки. Примеры собрал Виталий Харисов — один из руководителей разработки интерфейсов Яндекса.

Если интернет плохой, устройство не сможет скачать и отобразить на экране элементы сайта, которые весят много мегабайт. В итоге живописный интерфейс не загрузится. К примеру, количество мобильных пользователей, которые заходят на Яндекс. Поиск при плохом интернете, составляет от 5 до 15% от их общего числа — это десятки миллионов визитов в месяц. Яндекс понимает, если соединение медленное, и показывает упрощённую страницу результатов поиска. Она весит считанные килобайты, поэтому быстро загружается практически в любых условиях. Готовя подобные страницы, разработчики применяют множество специальных техник.

Мы посмотрим, какие элементы необязательно прописывать в HTML-коде страницы, чтобы результат отображался корректно. Яндекс. Браузер, Chrome, Edge, Safari и другие современные браузеры умеют верно интерпретировать не совсем полный код благодаря стандарту HTML5. Это поможет в нашей задаче — браузеру на устройстве пользователя потребуется загрузить меньше кода, на это уйдёт меньше времени, и интерфейс откроется быстрее. Тем самым можно подготовить лайт-версию страницы для медленных соединений — а ещё потратить чуть меньше сил на составление кода.

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

Первый пример. Заготовка

Вот стандартная заготовка, с которой все начинают верстать веб-страницу:

Между двумя тегами html (открывающим и закрывающим) должно находиться всё содержимое страницы, между тегами head — служебная информация и заголовок (title) для вкладки браузера, между тегами body — главный контент.

Что из этого можно убрать?

Облегчённая версия

Оказывается, можно пропустить все перечисленные теги, кроме title. Мы стёрли часть кода, результат будет весить на несколько байт меньше. Рабочие группы, которые занимаются развитием HTML, сделали эти теги необязательными именно для снижения размера — а также для увеличения читаемости кода. Согласитесь, второй вариант позволяет быстрее разглядеть среди кода контент («АБВ»). Если вы готовите несколько прототипов с разными значениями title, вам будет проще их отличать.

Второй пример. Атрибуты

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

Что здесь лишнее?

Облегчённая версия

По стандарту HTML5 у тегов есть значения атрибутов по умолчанию. Эти значения используются, если не указать другие. У атрибута type значения по умолчанию как раз такие, как указано в полном варианте кода. Поэтому их можно специально не задавать.

Кстати, вы можете смело ставить в коде тире («—») вместо — и односимвольное многоточие («…») вместо …. Конструкции с амперсандом (&) часто встречаются в примерах в интернете и называются мнемониками — их придумали на замену символам, отсутствующим в библиотеке ASCII. Сейчас распространена гораздо более богатая кодировка Unicode UTF-8, и мнемоники в большинстве случаев не нужны.

Третий пример. Закрывающие теги

Для объявления строки в таблице используется тег tr, ячейка объявляется тегом td, а абзацы (и в таблице, и за её пределами) — тегом p. Но блок с таблицей в коде можно сделать гораздо более компактным и удобочитаемым. Какие фрагменты вы бы не стали прописывать?

Облегчённая версия

Содержимое строк и ячеек в таблице, как и абзацев, можно не дополнять закрывающими тегами. А вот в случае с таблицей целиком (table) закрывающий тег нужен.

На самом деле закрытия не требуют многие теги. Вот их полный список:

Четвёртый пример. Значения атрибутов

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

Что можно убрать из этого HTML-кода?

Облегчённая версия

По стандарту HTML5 кавычки тоже необязательны — современный браузер правильно интерпретирует значения и без них.

Писать компактный код полезно не только для быстрой загрузки, читаемости и меньшего вложения сил. В 2016 году Microsoft и организаторы конференции An Event Apart провели конкурс 10k Apart, где надо было собрать сайт, каждая страница которого (вместе с HTML-, CSS- и JavaScript-кодом, всей графикой и т. д.) занимала бы 10 килобайт. Результаты впечатляют. Участники сделали конструктор аватарки, редактор презентаций, визуализацию результатов Олимпиады в Рио и множество других красочных веб-проектов — каждый уместился в 10 КБ. Так что интерес может быть ещё и спортивным.

Создание простейшей веб-страницы. Веб-Самоделкин. Как самому создать сайт быстро и профессионально

Базовый шаблон кода для начала вашего следующего проекта

Если вы ищете базовый шаблон HTML5, который был бы одновременно бесплатным и простым в использовании, вы попали в нужное место.

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

На изображении ниже вы видите стандартную разметку (пустой шаблон документа HTML) для веб-страниц с поддержкой HTML5.

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

Нажмите, чтобы загрузить шаблон HTML5

Откройте шаблон кода HTML5 в любой программе, которую вы используете, и заполните пустые поля.

Понимание прокомментированной версии шаблона HTML5

Выделенные комментарии в этой версии шаблона кода HTML5 расскажут вам о каждом элементе документа.

Объяснение базового шаблона HTML5

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

Я хотел бы подробнее рассказать о некоторых решениях, которые я принял с помощью этого шаблона.

Размещение скриптов

Рекомендуется размещать сценарии блокировки отрисовки ближе к концу HTML-документа, прямо перед закрывающим тегом (или вообще не использовать их).

Действие, позволяющее визуализировать сначала визуальный контент, CSS и объектную модель документа, улучшая воспринимаемую скорость и производительность ваших веб-страниц.

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

Кроме того, в качестве формы прогрессивного улучшения вы должны предпочтительно использовать атрибут HTML5 async с вашими ссылками

Заготовка html страницы: Простые html заготовки для страниц

Создание HTML страницы, структура HTML страницы | Введение в HTML

Выбор текстового редактора

Создание каркаса HTML страницы

Указание версии HTML с помощью инструкции Doctype

Тег <html>

Тег <head>

Тег <body>

Тег <title>

Указание кодировки HTML страницы

Комментарии в HTML.

Анатомия Web-страницы — HTML, CSS, JavaScript, Perl, PHP, MySQL: Weblibrary.biz

<HTML> </html>

<HEAD> </head>

<TITLE> </title>

<STYLE> </style>

<МЕТА>

<BODY> </body>

<! Комментарий — >

<Hl></hl>

Базовые приёмы вёрстки

Реклама

Как писать на HTML / Девман

1. Создайте HTML-документ

2. Добавьте текст

3. Добавьте ссылку

Как писать теги

Допишите тег

4. Выделите все “коала” на странице

О строчных и блочных тегах

Допишите код

О комбинации тегов

Что делать, если подходящий тег не нашёлся

Что ещё почитать по теме

Меньше — лучше. Нетипичные приёмы верстки сайтов — Академия Яндекса

Первый пример. Заготовка

Второй пример. Атрибуты

Третий пример. Закрывающие теги

Четвёртый пример. Значения атрибутов

Создание простейшей веб-страницы. Веб-Самоделкин. Как самому создать сайт быстро и профессионально

Читайте также

Создание простейшей веб-страницы

Создание новой веб-страницы

Создание шаблона страницы

Создание шаблона страницы: <fo:simple-page-master>

Создание эффективной посадочной страницы

Создание вики-страницы

Создание страницы веб-части при помощи обозревателя

Страницы

Страницы

Создание веб-страницы

Создание «классической» ASP-страницы

Создание страницы Inventory

Создание страницы BuildCar

Создание пользовательской страницы тестирования

Создание титульной страницы

Базовый шаблон кода для начала вашего следующего проекта

Понимание прокомментированной версии шаблона HTML5

Объяснение базового шаблона HTML5

Размещение скриптов