Основные теги HTML: ключевые элементы веб-разработки

Использование сброса CSS

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

Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) — наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.

Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера, его сброс CSS адаптирован для включения новых элементов HTML5.

Если вы чувствуете себя немного авантюристом, есть также Normalize.css, созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.

Кроссбраузерность и тестирование

Как упоминалось ранее, разные браузеры отображают элементы по-своему

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

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

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

Блочные и строковые элементы

В описании элементов разметки языка HTML существует понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки.
Объяснить различие между блочным и строковым элементами можно на примере:
-параграф — это блочный элемент разметки;
-выделение курсивом — это строковый элемент разметки.

Блочные элементы HTML (BLOCK) занимают по ширине всю область, в которой они находятся.
Высота блочного HTML элемента если он пустой равна нулю, если блочный элемент имеет какое-либо содержимое, то его высота равна высоте содержимого плюс внутренний отступ блочного элемента.
Строчные элементы HTML (INLINE) – это такие HTML элементы, ширина которых равна ширине их содержимого, если у строчного элемента HTML нет содержимого, то его ширина равна нулю.
Высота строчного элемента равна высоте его содержимого. Ширина строчного элемента HTML не подстраивается ни под один элемент, поэтому содержимое строчного элемента может быть перенесено на другую строку в том случае если ширина области просмотра недостаточно для отображения всего содержимого строчного элемента HTML.

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

HTML Example

We now have a basic HTML file that will load in your browser. Here’s what our completed file looks on the front end.

Below is how it would look on the front end. Note that only the heading and paragraph from the body section are rendered.

See the Pen HTML tutorial: final by HubSpot (@hubspot) on CodePen.

As you can see, this is a pretty skeletal page. To fill it, we need to learn some more page elements. Page elements are elements that are actually rendered on the front end. We’ve already used two of them, <h1> and <p>. Let’s take a closer look at these page elements and others next.

If you’d prefer to watch how a more complex HTML file is built out with images, links, forms, and other elements, check out this video:

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

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

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

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

  • WordPress;
  • Joomla;
  • InstantCms.

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

Ссылки[править]

Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст, является гиперссылка. Гиперссылки создаются с помощью тега <a> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>
         Ссылка
      </title>
   </head>
   <body>
      Здесь можно найти материалы о web-дизайне: <a href="http://ru.wikibooks.org/wiki/HTML">ru.wikibooks.org</a>. 
   </body>
</html>

Теперь на странице надпись ru.wikibooks.org станет гиперссылкой.

Обычно страницы в интернете не сидят одиноко. Они размещаются группами, которые называются узлами. Сайт — это по моему определению набор страниц и других файлов, которые имеют общую часть URL. Например, все страницы, начинающиеся на http://www.microsoft.com, принадлежат одному сайту одной маленькой компьютерной фирмы. Далее следует символ «/», и адрес продолжается.

Можно сделать у себя на компьютере маленькую модель сайта. Для этого нужно создать новый каталог, в котором будем размещать файлы. Затем в каталоге разместить файл index.htm. Если есть какая-то ссылка на ваш сайт, без указания, какой конкретно файл загружать, то будет загружен именно index.htm. Далее мы можем создать ещё одну папку внутри нашей. Пусть она называется subdir. Если в ней разместить файл index.htm, то для перехода к нему нужно будет написать: «www.ваш_сайт.com/subdir/».

Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:

<html>
<head>
<title>Моя музыка</title>
</head>
<body>
Я только что записал новый трек. Вы можете <a href="track1.mp3">скачать его здесь.</a>
</body>
</html>

Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы «site/1.htm» и «site/subdir/2.htm», то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href =»subdir/2.htm» и href =»../1.htm» соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.

Но этим возможности тега <a> не исчерпываются. a — сокращенно от anchor — что значит якорь. С помощью тега <a> можно ставить в гипертекстовом документе якоря, или проще говоря закладки, позволяющие переходить в определённое место документа. Это особенно полезно, когда документ большой, и нужно быстро переходить в нём к нужному разделу. Для этого существует атрибут id.

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

<html>
<head>
<title>Моя музыка</title>
</head>
<body>
<h1> Содержание</h1>
<a href="#part1"><h2>Часть 1</h2></a>
<a href="#part2"><h2>Часть 2</h2></a>
<a href="#part3"><h2>Часть 3</h2></a>
<h1 id="part1">Часть 1</h1>
<p> Много текста </p>
<h1 id="part2">Часть 2</h1>
<p>Много текста</p>
<h1 id="part3"> Часть 3</h1>
<p>Много текста</p>
</body>
</html>

Когда мы делаем гиперпереходы в пределах одной страницы, то в атрибуте href просто пишем знак («#») и название закладки (то что написано в атрибуте id). А когда делаем переход на закладку в другой странице, то сначала пишем адрес страницы, затем добавляем знак («#») и название закладки. Когда случайно делается переход на закладку, которой не существует, ничего страшного не происходит. Мы просто попадаем в начало страницы, как при обычном переходе.

Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <a> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.

Основные теги

Вот основные теги, которые используются в HTML:

<head>…</head> — служебная область на странице, которая не показывается в браузере, но влияет на страницу в целом.

<title>…</title> — находится внутри <head>. Текст, который написан внутри этого тега, отображается в названии вкладки и в закладках браузера.

<body>…</body> — видимая часть страницы. Всё, что вы видите, происходит внутри этих тегов.

<h1>…</h1>, <h2>…</h2> и так далее — заголовки разного уровня.

<p>…</p> — абзац.

<a href=»…»>…</a> — гиперссылка. Свойство «href» отвечает за адрес ссылки.

<img src=»…»> — картинка. Свойство «src» отвечает за адрес, по которому лежит изображение, чтобы браузер мог запросить её оттуда, скачать и показать на экране.

<ul><li>…</li></ul> — ненумерованный список с одним элементом внутри. Чтобы элементов было больше, добавьте <li>…</li> внутрь <ul>…</ul>.

<ol><li>…</li></ol> — нумерованный список.

<div>…</div> — универсальный блок внутри страницы. Его можно настроить, чтобы содержимое выглядело и работало как угодно, от назойливой всплывашки до кнопки подтверждения.

<span>…</span> — с помощью этого тега можно менять внешний вид выбранного текста. Например, выделить его жёлтым, как маркером на бумаге.

<table><tbody><tr><td>…</td><td>…</td></tr></tbody></table> — минимальный набор тегов, чтобы сделать таблицу. TR отвечает за строки в таблице (table row), а TD — за ячейки в этой строке (table division). Мы вкладываем один тег в другой: ячейки живут внутри строк, строки — внутри <tbody>, и всё это живёт внутри тега <table>.

Ещё есть <TH>, который отвечает за первую строку таблицы (её называют головкой), но мы туда сейчас не полезем. 

Работа с таблицами стилей CSS

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

* {
box-sizing:border-box;
}
.main {
width:1170px;
margin:0 auto;
border: 5px solid black;
}

Звездочка обозначает – любые элементы,
то есть все. Теперь рамки, отступы, не будут увеличивать ширину блоков, а для
установления правил, определяющих внешний вид веб-страницы, нам придётся
обратиться к классу main, задав ряд команд:

  • ширина контейнера;
  • отображение по центру;
  • добавление рамок чёрного цвета с каждой из сторон.

Теперь можно с помощью HTML задать внешний вид
ключевых структурных блоков:

.menu {
margin:0 0 40px 0;
padding:0px;
}
.menu li {
display:inline-block;
width:auto;
padding:7px 15px;
}
.footer {
background-color:#f4f4f4;
}

Принцип работы заключается в
обращении к существующим элементам, у каждого из которых есть персональный
идентификатор или класс. У тега класс прописывается в свойстве class=”myname” и в CSS файле записывается .myname, а идентификатор
по аналогии id=”myname2″
и #myname2.

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

  • ширина;
  • высота;
  • правило float: left – прижатие компонента к
    левой стороне родительского компонента.

Внимание! Идентичное свойство задаётся разделу с контентом,
прижимающемуся с той же стороны, но после колонки. После этого пишем блок
«Подвал»,  который по умолчанию не
высокий и имеет свойство clear, препятствующее наезду на разделы «Контент»
и  «Боковая колонка», считающиеся
плавающими

«Подвал» теперь будет видеть эти блоки и всегда размещаться под
ними, но при условии, что ему будет задана команда clear: both

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

  1. Фон прописывается контейнеру по классу .content и
    задаётся сразу для всего сайта.
  2. Отдельно задаётся для каждого из блоков, для
    подвала, шапки, контента и т.д.

Рекомендую дать сайт общий цвет, воспользовавшись одним кодом:

.main {backgroun-color:#f9f9f9;}

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

Архивархив с готовым сайтом на HTML

История развития HTML

Точной даты создания языка HTML нет, его появление соотносится с периодом между 1986 и 1991 годами. Он изначально создавался для использования людьми без специальных знаний в верстке и программировании. Сложная система разметки SGML (Standard Generalized Markup Language) была сведена к небольшому набору дескрипторов. Они чаще называются тегами.

Особенности HTML:

  1. Изначально перечень команд оформления текстов включал всего 18 элементов, 11 из которых используются даже в последних релизах.
  2. Основная задача языка заключалась в воспроизведении контента без искажений независимо от технического оснащения устройства.
  3. Современные версии HTML стали более зависимыми от платформы из-за появления тегов для мультимедийного и графического оформления.

К актуальной относится версия HTML 5-го поколения. Она появилась в декабре 2012 года и выросла до релиза 5.3. Именно это поколение языка разметки поддерживается большинством браузеров. При использовании устаревших версий вероятно искаженное отображение. Существует понятие кроссбраузерной несовместимости сайта, когда он по-разному выглядит на разных устройствах.

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

Понравилась статья? Поделиться с друзьями: