Шаблон HTML для начинающих: создаем свой первый сайт

Дизайн

Вёрстка текста

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

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

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

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

Новые элементы макета в HTML5

Спецификация HTML5 предоставляет новые семантические теги, описывающие содержащийся в них контент. Так как современные сайты включают в свои страницы боковые панели, заголовки и секции, в спецификацию HTML5 были включены новые теги, предназначенные для деления страницы на логические области. Семантическая разметка предназначена для описания контента. Семантическая разметка упрощает понимание смысла и контекста информации, размещенной на странице — как для поисковиков, так и для разработчиков. Теперь программы экранного доступа могут позволить пользователям проигнорировать заголовки и нижние колонтитулы и сразу перейти к основному контенту. Кроме того, поисковые машины могут придать большее значение содержимому элементов <article>, чем содержимому <header> или <footer>.

Новые элементы разметки в HTML5

Элемент
Значение / описание

<header>
Определение заголовка страницы или раздела.

<nav>
Определение области навигации страницы или раздела.

<section>
Определение логической области страницы или группировка контента.

<article>
Определение статьи (логически завершенного блока контента).

<aside>
Определение вторичного или связанного контента.

<footer>
Определение завершителя страницы или раздела.

<details>
Определяет дополнительные детали.

<summary>
Определяет заголовок для элемента <details>.

<div><div><header><nav><article>

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

<body>
<div id=»page»>
<header>

<nav>
<section>
<footer>

Пример: Макет на основе элементов HTML5

  • Результат
  • HTML-код
  • Попробуй сам »
Главное меню
  • HTML Элементы
  • HTML Атрибуты
  • HTML Таблицы
Основной контент…
Copyright 2017 wm-school.ru

HTML Фреймы
HTML JavaScript

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список

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

Нам нужно переместить список налево и сдвинуть остальное
содержимое немного вправо, чтобы создать пространство для него.
Свойства CSS которые мы будем использовать для этого —
‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’
(для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или
“верстка” на странице изучая CSS, вы найдете несколько готовых к
использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>

Если вы снова сохраните файл и обновите его в браузере то список
ссылок получится у вас слева от основного текста. Это уже смотрится
интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст
переместился направо а навигация налево

Главные блоки (верх, середина и низ)

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

/* -------------------------------
Главные блоки
----------------------------------*/

#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }

.header{
 width:100%;
 background: #0dbfe5;
 height:57px;
 z-index: 4;
 }

#headerInner {

 position:relative;
 border:0px solid #333;
 width:1200px;
 height:250px;
 margin:0 auto;
 margin-top:0px;
 }
#content {
 margin-top:40px;
}

#content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }

#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}

#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content  будет выравнивать сверху левую и правую сторону сайта.

#colLeft  отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<nav class="topMenuRight">

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

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

A navigation bar contains a list of links to help visitors navigating through
your website:

<div class=»navbar»>  <a href=»#»>Link</a>  <a href=»#»>Link</a> 
<a href=»#»>Link</a>  <a href=»#» class=»right»>Link</a></div>

Use CSS to style the navigation bar:

/* Style the top navigation bar */.navbar {  overflow: hidden; /* Hide overflow */  background-color: #333;
/* Dark background color */}/* Style the navigation bar links */.navbar
a {  float: left; /* Make sure that the links stay
side-by-side */  display: block; /* Change the display to
block, for responsive reasons (see below) */  color: white; /* White text color */  text-align: center;
/* Center the text */ 
padding: 14px 20px; /* Add some padding */  text-decoration: none;
/* Remove underline */}/*
Right-aligned link */.navbar a.right {  float: right;
/* Float a link to the right */
}/*
Change color on hover/mouse-over */.navbar a:hover { 
background-color: #ddd; /* Grey background color */  color: black;
/* Black text color */}

Summary

So far, so good! We’ve taken a few big steps in this lesson.

Just think, you now know the basics of HTML and CSS. As we continue and you spend more time writing HTML and CSS, you’ll become much more comfortable with the two languages.

To recap, so far we’ve covered the following:

  • The difference between HTML and CSS
  • Getting acquainted with HTML elements, tags, and attributes
  • Setting up the structure of your first web page
  • Getting acquainted with CSS selectors, properties, and values
  • Working with CSS selectors
  • Referencing CSS in your HTML
  • The value of CSS resets

Now let’s take a closer look at HTML and learn a little about semantics.

Новые теги HTML5

В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>. Сделано это для поисковых роботов, чтобы они лучше распознавали код страниц и отделяли основной контент от вспомогательных элементов.

С использованием новых тегов пустой шаблон HTML5 может выглядеть так:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

<header>Заголовок страницы</header>

<nav>Меню навигации</nav>

<aside>Боковая колонка SideBar</aside>

<article>
 Контент - основное содержимое страницы.
</article>

<footer>Подвал сайта</footer>
 
</body>
</html>

Упрощение написания DOCTYPE

Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:

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

Теперь же запись минимальна, проще, наверное некуда :

<!doctype html>

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

Необязательные теги в HTML5

Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только <!doctype html>.

Трактовка русского языка как основного языка HTML документа

Тег <html lang=»ru»> определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.

В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».

Благодарности

  1. http://snipplr.com/view/42713/
  2. https://www.sitepoint.com/a-basic-html5-template/
  3. https://html5book.ru/neobyazatelnye-tegi-html5/
  4. http://htmlbook.ru/samlayout/verstka-na-html5/novye-tegi

6. Самые крутые HTML-трюки: прокрутка или падение текста.

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

Вход:

Выходная демонстрация:

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

Чтобы создать крутой эффект падающего текста, снова зайдите в Quackit и скопируйте их тщательно настроенный код выделения .

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavSplit NavigationNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

CSS-фреймворки

Если вы немного ленивы

Если у вас нет времени возиться с кодом при CSS верстке, можно использовать один из CSS-фреймворков. В нашем примере мы используем Bootstrap. Для этого нужно скачать его и подключить в HTML-файле.

Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.

Вот пример:

<div class="row">
    <div class="col-md-6">
        <!--some content-->
    </div>
    <div class="col-md-6">
        <!--some more content-->
    </div>
</div>

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

Далее мы создаем раздел «Скоро в прокате». Он будет содержать четыре постера фильмов. Путем несложных математических вычислений определяем, что каждый из них будет охватывать по три столбца.

HTML-код:

<div id="coming-soon">
    <h2>Coming Soon:</h2>
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_01.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_02.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_03.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_04.jpg">
            </div>
        </div>
    </div>
</div>

Я также добавил класс thumbnail, чтобы сделать постеры красивее. Он также содержится в Bootstrap.

И вот, что я получил:

Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS. Но вы не видите, что происходит внутри.

Многостраничные сайты в блокноте

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

Например, вы создаёте страницу page1.html, а нужно попасть на page2.html. тогда нужно внутри страницы page1 прописать ссылку для перехода на page2. Это делается с помощью специального тега и его параметра:

<a href=»page2.html»>Нажмите для перехода на Страницу 2</a>

Файл page2.html должен лежать рядом с page1.html в одном каталоге, иначе нужно указывать более подробный относительный путь или абсолютную ссылку, если страница расположена на другом сайте.

Соответственно, если со Страницы 2 вам нужно вернуться на первую, то внутри второй страницы нужно прописать уже другой URL, который будет ссылаться на первую. И т.д.

Количество ссылок на другие страницы никак не ограничено, вы можете создавать столько страниц, сколько вам нужно.

Альтернативные методы бесплатного создания сайтов

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

  • Weblium;
  • UKit;
  • Nethouse;
  • UMI.

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

  • WordPress;
  • Joomla;
  • InstantCms.

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

Отличия блочной вёрстки от табличной

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

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

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

Какой из способов выбрать?

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

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

Float. Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear. Этого достаточно для начала.

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

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

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

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

Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!

Вадим Дворниковавтор-переводчик статьи «4 Different HTML-CSS Layout Techniques to Create a Site»

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

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

Напомним, что мы рассмотрели следующее:

Разница между HTML и CSS.
Знакомство с элементами HTML, тегами и атрибутами.
Настройка структуры вашей первой веб-страницы.
Знакомство с селекторами CSS, свойствами и значениями.
Работа с селекторами CSS.
Указатель на CSS из HTML.
Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Структура HTML-документа

Для формирования собственной web страницы достаточно поверхностных знаний HTML, а также CSS. Без второго языка тоже можно сделать страничку, но она будет выглядеть примитивно. Перед началом разработки необходимо познакомиться со структурой HTML-документа.

Такой файл представляет собой простой текстовый документ, сохраненный со «специальным» расширением. Оно называется .html. Для того чтобы сделать web страницу, необходимо подобрать текстовый редактор «под себя».

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

  • < !Doctype html >;
  • < html >;
  • < head >;
  • < body >.

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

  1. !Doctype – это объявление типа документа. Тег, размещаемый всегда в самом начале HTML-документа. Он сообщает браузерам о том, какая версия языка применяется.
  2. Внутри тега <html> компонент <head> будет определять верхнюю часть документа, включая всевозможные метаданные (сопроводительную информацию о web page). Информация из head не будет отображена непосредственно в браузере на странице. Вместо этого он может поддерживать название документа. Оно отобразится в строке заголовка окна браузера, различные ссылки на внешние файлы и иные полезные метаданные.
  3. Body – тег, применяемый для формирования «тела» веб страницы. Внутри него находится основной текст документа.

Выше – пример создания элементарной веб-странице на рассматриваемом ЯП. Этот код наглядно объясняет структуру HTML-документов.

Самозакрывающиеся теги

Когда программист решил написать собственную веб-страницу на HTML, ему необходимо помнить, что все теги должны открываться и закрываться. Пример – заголовки h1, h2, …, hn.

Некоторые теги в рассматриваемом языке являются самозакрывающимися. Для них не требуется указывать закрывающий компонент. Типичными тегами соответствующего вида являются?

  • br;
  • embled;
  • img;
  • hr;
  • link;
  • param;
  • input;
  • wbr;
  • source.

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

Разметка для сайта на HTML 5

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

Хочу сразу оговориться, что в этом примере будет использовано CSS свойство, которое позволяет сделать элемент плавающим — содержимое, которое находится ниже плавающего элемента, смещается вверх и начинает обтекать этот плавающий элемент.
Не переживайте если вы сейчас не поймете работу этого свойства, так как нас сейчас больше интересует правильная разметка документа, а подробное изучение плавающих элементов будет рассмотрено в учебнике CSS в статье «Плавающие элементы».

<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h1>Главный заголовок сайта</h1>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
			<address>Пример с сайта basicweb.ru</address>
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не
является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3. И так по порядку, что мы сделали в этом документе:

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами.
  • Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Рис. 44 Разметка страницы на HTML 5.

Последние обновления

07.02.22. Учебный сайт полностью обновлен: проведена адаптация под мобильные устройства, подключена мини
библиотека js-скриптов, доработана старая галерея и добавлена новая фотогалерея. Также исправлен ряд мелких ошибок.

01.05.21. На страницу загрузок добавлена версия сайта на PHP.

25.04.21. Макет сайта стал адаптивным, также были добавлены новые примеры верстки.

23.04.21. На страницы «Примеры анимации» и
«Многоколоночная верстка» были добавлены новые примеры верстки.

22.04.21. Добавлена страница «Калькуляторы», также добавлены новые
примеры на страницы «Оформление списков» и «Создание html-форм».

21.04.21. Добавлена страница «Меню сайта», изменена главная страница
сайта.

21.04.21. Изменена структура и оформление учебного сайта. Добавлены новые страницы и элементы.

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

  1. селектор (в нашем примере: “body”), которые
    говорит о том, к какой части документа применить правило;

  2. свойство (в нашем примере свойствами являются
    ‘color’ и ‘background-color’), которое указывает что именно мы
    устанавливаем у данного элемента, выбранного селектором;

  3. и значение (‘purple’ и ‘#d8da3d’), которое
    устанавливает значение атрибута.

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

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

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

Использование Visual Studio Code для Интернета или Visual Studio Code Desktop

Пользователи могут редактировать, отлаживать и просматривать изменения в изменениях страниц, используя веб-версию Visual Studio Code без необходимости использования внешних инструментов. Visual Studio Code Desktop предоставляет другие расширенные функции для редактирования всех метаданных сайта и интеграции с платформами GitHub и процессами непрерывной интеграции/непрерывной разработки (CI/CD).

Функция VS Code в Интернете VS Code Desktop
Создание новых записей метаданных конфигурации веб-сайта No Ограничено веб-страницами, шаблонами страниц, веб-шаблонами, фрагментами содержимого и веб-файлами.
Прямое редактирование сайта Да No
Редактирование метаданных сайта Ограничено редактированием веб-страниц, фрагментов содержимого, базовых форм, многошаговых форм, списков и веб-шаблонов. Вся конфигурация метаданных Power Pages
Предварительный просмотр сайта Плановое Плановое
Поддержка интерфейса командной строки Power Platform No Да
Расширенный рабочий процесс с привязкой к ЦП и хранилищу — поддержка ReactJS или другого инструмента для сборки платформы No Да
Интеграция с GitHub с такими возможностями, как возврат кода, получение кода, управление конфликтами и слияние. No Да

Следующие шаги

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

Заключение

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

Шаг 2 – добавляем разметку веб-страницы

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

  1. <!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
  2. <html>
  3. <head>
  4. <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
  5. <title>Топовый сайт новичка</title>
  6. </head>
  7. <body>
  8. <h1>Это тег заголовка первого уровня для содержимого страницы</h1>
  9. <p>Первый абзац</p>
  10. <p>Второй абзац</p>
  11. <p>Третий абзац и т. д.</p>
  12. </body>
  13. </html>

Это базовые элементы, которые есть на любом веб-ресурсе. Весь контент страницы должен находится между тегами <body></body> (это тело документа), всё, что выходит за их пределы выше и ниже, не будет отображаться на сайте.

Оцените статью

Шаблон HTML для начинающих: создание базового веб-сайта

Разработка сайтов

Вёрстка текста

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

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

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

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

Новые элементы макета в HTML5

Спецификация HTML5 предоставляет новые семантические теги, описывающие содержащийся в них контент. Так как современные сайты включают в свои страницы боковые панели, заголовки и секции, в спецификацию HTML5 были включены новые теги, предназначенные для деления страницы на логические области. Семантическая разметка предназначена для описания контента. Семантическая разметка упрощает понимание смысла и контекста информации, размещенной на странице — как для поисковиков, так и для разработчиков. Теперь программы экранного доступа могут позволить пользователям проигнорировать заголовки и нижние колонтитулы и сразу перейти к основному контенту. Кроме того, поисковые машины могут придать большее значение содержимому элементов <article>, чем содержимому <header> или <footer>.

Новые элементы разметки в HTML5

Элемент
Значение / описание

<header>
Определение заголовка страницы или раздела.

<nav>
Определение области навигации страницы или раздела.

<section>
Определение логической области страницы или группировка контента.

<article>
Определение статьи (логически завершенного блока контента).

<aside>
Определение вторичного или связанного контента.

<footer>
Определение завершителя страницы или раздела.

<details>
Определяет дополнительные детали.

<summary>
Определяет заголовок для элемента <details>.

<div><div><header><nav><article>

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

<body>
<div id=»page»>
<header>

<nav>
<section>
<footer>

Пример: Макет на основе элементов HTML5

  • Результат
  • HTML-код
  • Попробуй сам »
Главное меню
  • HTML Элементы
  • HTML Атрибуты
  • HTML Таблицы
Основной контент…
Copyright 2017 wm-school.ru

HTML Фреймы
HTML JavaScript

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список

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

Нам нужно переместить список налево и сдвинуть остальное
содержимое немного вправо, чтобы создать пространство для него.
Свойства CSS которые мы будем использовать для этого —
‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’
(для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или
“верстка” на странице изучая CSS, вы найдете несколько готовых к
использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>

Если вы снова сохраните файл и обновите его в браузере то список
ссылок получится у вас слева от основного текста. Это уже смотрится
интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст
переместился направо а навигация налево

Главные блоки (верх, середина и низ)

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

/* -------------------------------
Главные блоки
----------------------------------*/

#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }

.header{
 width:100%;
 background: #0dbfe5;
 height:57px;
 z-index: 4;
 }

#headerInner {

 position:relative;
 border:0px solid #333;
 width:1200px;
 height:250px;
 margin:0 auto;
 margin-top:0px;
 }
#content {
 margin-top:40px;
}

#content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }

#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}

#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content  будет выравнивать сверху левую и правую сторону сайта.

#colLeft  отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<nav class="topMenuRight">

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

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

A navigation bar contains a list of links to help visitors navigating through
your website:

<div class=»navbar»>  <a href=»#»>Link</a>  <a href=»#»>Link</a> 
<a href=»#»>Link</a>  <a href=»#» class=»right»>Link</a></div>

Use CSS to style the navigation bar:

/* Style the top navigation bar */.navbar {  overflow: hidden; /* Hide overflow */  background-color: #333;
/* Dark background color */}/* Style the navigation bar links */.navbar
a {  float: left; /* Make sure that the links stay
side-by-side */  display: block; /* Change the display to
block, for responsive reasons (see below) */  color: white; /* White text color */  text-align: center;
/* Center the text */ 
padding: 14px 20px; /* Add some padding */  text-decoration: none;
/* Remove underline */}/*
Right-aligned link */.navbar a.right {  float: right;
/* Float a link to the right */
}/*
Change color on hover/mouse-over */.navbar a:hover { 
background-color: #ddd; /* Grey background color */  color: black;
/* Black text color */}

Summary

So far, so good! We’ve taken a few big steps in this lesson.

Just think, you now know the basics of HTML and CSS. As we continue and you spend more time writing HTML and CSS, you’ll become much more comfortable with the two languages.

To recap, so far we’ve covered the following:

  • The difference between HTML and CSS
  • Getting acquainted with HTML elements, tags, and attributes
  • Setting up the structure of your first web page
  • Getting acquainted with CSS selectors, properties, and values
  • Working with CSS selectors
  • Referencing CSS in your HTML
  • The value of CSS resets

Now let’s take a closer look at HTML and learn a little about semantics.

Новые теги HTML5

В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>. Сделано это для поисковых роботов, чтобы они лучше распознавали код страниц и отделяли основной контент от вспомогательных элементов.

С использованием новых тегов пустой шаблон HTML5 может выглядеть так:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

<header>Заголовок страницы</header>

<nav>Меню навигации</nav>

<aside>Боковая колонка SideBar</aside>

<article>
 Контент - основное содержимое страницы.
</article>

<footer>Подвал сайта</footer>
 
</body>
</html>

Упрощение написания DOCTYPE

Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:

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

Теперь же запись минимальна, проще, наверное некуда :

<!doctype html>

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

Необязательные теги в HTML5

Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только <!doctype html>.

Трактовка русского языка как основного языка HTML документа

Тег <html lang=»ru»> определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.

В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».

Благодарности

  1. http://snipplr.com/view/42713/
  2. https://www.sitepoint.com/a-basic-html5-template/
  3. https://html5book.ru/neobyazatelnye-tegi-html5/
  4. http://htmlbook.ru/samlayout/verstka-na-html5/novye-tegi

6. Самые крутые HTML-трюки: прокрутка или падение текста.

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

Вход:

Выходная демонстрация:

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

Чтобы создать крутой эффект падающего текста, снова зайдите в Quackit и скопируйте их тщательно настроенный код выделения .

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavSplit NavigationNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

CSS-фреймворки

Если вы немного ленивы

Если у вас нет времени возиться с кодом при CSS верстке, можно использовать один из CSS-фреймворков. В нашем примере мы используем Bootstrap. Для этого нужно скачать его и подключить в HTML-файле.

Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.

Вот пример:

<div class="row">
    <div class="col-md-6">
        <!--some content-->
    </div>
    <div class="col-md-6">
        <!--some more content-->
    </div>
</div>

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

Далее мы создаем раздел «Скоро в прокате». Он будет содержать четыре постера фильмов. Путем несложных математических вычислений определяем, что каждый из них будет охватывать по три столбца.

HTML-код:

<div id="coming-soon">
    <h2>Coming Soon:</h2>
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_01.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_02.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_03.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_04.jpg">
            </div>
        </div>
    </div>
</div>

Я также добавил класс thumbnail, чтобы сделать постеры красивее. Он также содержится в Bootstrap.

И вот, что я получил:

Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS. Но вы не видите, что происходит внутри.

Многостраничные сайты в блокноте

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

Например, вы создаёте страницу page1.html, а нужно попасть на page2.html. тогда нужно внутри страницы page1 прописать ссылку для перехода на page2. Это делается с помощью специального тега и его параметра:

<a href=»page2.html»>Нажмите для перехода на Страницу 2</a>

Файл page2.html должен лежать рядом с page1.html в одном каталоге, иначе нужно указывать более подробный относительный путь или абсолютную ссылку, если страница расположена на другом сайте.

Соответственно, если со Страницы 2 вам нужно вернуться на первую, то внутри второй страницы нужно прописать уже другой URL, который будет ссылаться на первую. И т.д.

Количество ссылок на другие страницы никак не ограничено, вы можете создавать столько страниц, сколько вам нужно.

Альтернативные методы бесплатного создания сайтов

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

  • Weblium;
  • UKit;
  • Nethouse;
  • UMI.

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

  • WordPress;
  • Joomla;
  • InstantCms.

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

Отличия блочной вёрстки от табличной

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

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

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

Какой из способов выбрать?

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

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

Float. Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear. Этого достаточно для начала.

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

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

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

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

Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!

Вадим Дворниковавтор-переводчик статьи «4 Different HTML-CSS Layout Techniques to Create a Site»

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

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

Напомним, что мы рассмотрели следующее:

Разница между HTML и CSS.
Знакомство с элементами HTML, тегами и атрибутами.
Настройка структуры вашей первой веб-страницы.
Знакомство с селекторами CSS, свойствами и значениями.
Работа с селекторами CSS.
Указатель на CSS из HTML.
Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Структура HTML-документа

Для формирования собственной web страницы достаточно поверхностных знаний HTML, а также CSS. Без второго языка тоже можно сделать страничку, но она будет выглядеть примитивно. Перед началом разработки необходимо познакомиться со структурой HTML-документа.

Такой файл представляет собой простой текстовый документ, сохраненный со «специальным» расширением. Оно называется .html. Для того чтобы сделать web страницу, необходимо подобрать текстовый редактор «под себя».

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

  • < !Doctype html >;
  • < html >;
  • < head >;
  • < body >.

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

  1. !Doctype – это объявление типа документа. Тег, размещаемый всегда в самом начале HTML-документа. Он сообщает браузерам о том, какая версия языка применяется.
  2. Внутри тега <html> компонент <head> будет определять верхнюю часть документа, включая всевозможные метаданные (сопроводительную информацию о web page). Информация из head не будет отображена непосредственно в браузере на странице. Вместо этого он может поддерживать название документа. Оно отобразится в строке заголовка окна браузера, различные ссылки на внешние файлы и иные полезные метаданные.
  3. Body – тег, применяемый для формирования «тела» веб страницы. Внутри него находится основной текст документа.

Выше – пример создания элементарной веб-странице на рассматриваемом ЯП. Этот код наглядно объясняет структуру HTML-документов.

Самозакрывающиеся теги

Когда программист решил написать собственную веб-страницу на HTML, ему необходимо помнить, что все теги должны открываться и закрываться. Пример – заголовки h1, h2, …, hn.

Некоторые теги в рассматриваемом языке являются самозакрывающимися. Для них не требуется указывать закрывающий компонент. Типичными тегами соответствующего вида являются?

  • br;
  • embled;
  • img;
  • hr;
  • link;
  • param;
  • input;
  • wbr;
  • source.

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

Разметка для сайта на HTML 5

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

Хочу сразу оговориться, что в этом примере будет использовано CSS свойство, которое позволяет сделать элемент плавающим — содержимое, которое находится ниже плавающего элемента, смещается вверх и начинает обтекать этот плавающий элемент.
Не переживайте если вы сейчас не поймете работу этого свойства, так как нас сейчас больше интересует правильная разметка документа, а подробное изучение плавающих элементов будет рассмотрено в учебнике CSS в статье «Плавающие элементы».

<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h1>Главный заголовок сайта</h1>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
			<address>Пример с сайта basicweb.ru</address>
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не
является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3. И так по порядку, что мы сделали в этом документе:

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами.
  • Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Рис. 44 Разметка страницы на HTML 5.

Последние обновления

07.02.22. Учебный сайт полностью обновлен: проведена адаптация под мобильные устройства, подключена мини
библиотека js-скриптов, доработана старая галерея и добавлена новая фотогалерея. Также исправлен ряд мелких ошибок.

01.05.21. На страницу загрузок добавлена версия сайта на PHP.

25.04.21. Макет сайта стал адаптивным, также были добавлены новые примеры верстки.

23.04.21. На страницы «Примеры анимации» и
«Многоколоночная верстка» были добавлены новые примеры верстки.

22.04.21. Добавлена страница «Калькуляторы», также добавлены новые
примеры на страницы «Оформление списков» и «Создание html-форм».

21.04.21. Добавлена страница «Меню сайта», изменена главная страница
сайта.

21.04.21. Изменена структура и оформление учебного сайта. Добавлены новые страницы и элементы.

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

  1. селектор (в нашем примере: “body”), которые
    говорит о том, к какой части документа применить правило;

  2. свойство (в нашем примере свойствами являются
    ‘color’ и ‘background-color’), которое указывает что именно мы
    устанавливаем у данного элемента, выбранного селектором;

  3. и значение (‘purple’ и ‘#d8da3d’), которое
    устанавливает значение атрибута.

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

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

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

Использование Visual Studio Code для Интернета или Visual Studio Code Desktop

Пользователи могут редактировать, отлаживать и просматривать изменения в изменениях страниц, используя веб-версию Visual Studio Code без необходимости использования внешних инструментов. Visual Studio Code Desktop предоставляет другие расширенные функции для редактирования всех метаданных сайта и интеграции с платформами GitHub и процессами непрерывной интеграции/непрерывной разработки (CI/CD).

Функция VS Code в Интернете VS Code Desktop
Создание новых записей метаданных конфигурации веб-сайта No Ограничено веб-страницами, шаблонами страниц, веб-шаблонами, фрагментами содержимого и веб-файлами.
Прямое редактирование сайта Да No
Редактирование метаданных сайта Ограничено редактированием веб-страниц, фрагментов содержимого, базовых форм, многошаговых форм, списков и веб-шаблонов. Вся конфигурация метаданных Power Pages
Предварительный просмотр сайта Плановое Плановое
Поддержка интерфейса командной строки Power Platform No Да
Расширенный рабочий процесс с привязкой к ЦП и хранилищу — поддержка ReactJS или другого инструмента для сборки платформы No Да
Интеграция с GitHub с такими возможностями, как возврат кода, получение кода, управление конфликтами и слияние. No Да

Следующие шаги

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

Заключение

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

Шаг 2 – добавляем разметку веб-страницы

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

  1. <!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
  2. <html>
  3. <head>
  4. <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
  5. <title>Топовый сайт новичка</title>
  6. </head>
  7. <body>
  8. <h1>Это тег заголовка первого уровня для содержимого страницы</h1>
  9. <p>Первый абзац</p>
  10. <p>Второй абзац</p>
  11. <p>Третий абзац и т. д.</p>
  12. </body>
  13. </html>

Это базовые элементы, которые есть на любом веб-ресурсе. Весь контент страницы должен находится между тегами <body></body> (это тело документа), всё, что выходит за их пределы выше и ниже, не будет отображаться на сайте.

Оцените статью