Среда, 19 Декабря 2012 14:38

Что такое HTML, определение, версии, разметка и оформление страницы

Written by 
Оцени эту запись
(14 Голоса)

HTML - это гипертекстовый язык разметки (HyperText Markup Language), который используется для создания документов в Интернет(веб-страниц). При помощи HTML создается веб-страница, содержащая все нужные элементы. На HTML странице можно разместить простой текст, выделить его жирным или курсивом, вставить ссылку, таблицу, нумерованный или ненумерованный список, картинки, разбить текст на абзацы и разделы, задавать разделам заголовки. Также на HTML страницу можно вставить форму с текстовыми полями, кнопками, выбором вариантов из списка, checkbox'ами и radio элементами. В HTML5 в страницу можно встраивать видео и аудио файлы, рисовать при помощи canvas, делать простые анимации при помощи новых тегов(marquee). В помощь HTML пришли CSS и JavaScript. CSS используется для стилизации HTML элементов. При помощи CSS можно не только изменять цвет текста в блоке, но и делать геометрические фигуры(треугольник, трапецию), рисовать (сердечки, котиков), делать разнообразную анимацию(слайдеры картинок, преоадеры, падающий снег). При помощи JavaScript можно делать на HTML странице разнообразный функционал - ваша страница может перемещать элементы, менять их размеры, делать расчеты(калькулятор), сортировку элементов. А главный плюсом работы с JavaScript является выполнение его скриптов без перезагрузки страницы.

 

 

Язык HTML был разработан примерно в 1986-1991 годах британским ученым Тимом Бернерсом-Ли.

 

 

Текстовый документ, содержащий язык разметки HTML, имеет расширение .html или .htm и открывается браузерами. На данный момент самыми популярными браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari. Подробнее в статье Браузеры, под которые нужно делать верстку

 

Что такое HTML

 

Версии HTML

 

На данным момент актуальны такие версии HTML:

 

  • HTML 4 (разработан в 1997 году)
  • XHTML (является расширением HTML4 на основе XML)
  • HTML5 (находится в стадии разработки, но уже пользуется большой популярностью)

 

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

 

Каждый HTML документ должен начинаться со строки <!DOCTYPE ...>, которая указывает на версию HTML и строгость написания и использования HTML элементов (тегов). Примеры <!DOCTYPE> для разных версий.

 

Для HTML5 данная строка выглядит так:

 

<!DOCTYPE html>

 

Далее следует сам документ, начало и конец которого обозначаются тегами <html> и </html>. Внутри документа есть два основных блока -- <head> и <body>.

 

<html>

   <head></head>

   <body></body>

</html>

 

Начала каждого блока блока обозначается открывающим тегом (<head>), а конец - закрывающим (</head>).

 

В первой части документа, в блоке <head>, содержатся элементы, описывающие документ. Они не отображаются в браузере. 

 

В блоке <head> могут содержаться:

 

  • заголовок документа <title>, который устанавливает заголовок страницы в браузере
  • мета теги названию, описания и ключевых слов документа <meta>
  • ссылка на стилевой файл документа <link>
  • ссылки на JavaScript файлы, использующиеся в документе (тег <script>)
  • описание автора документа

 

Второй раздел <body> содержит непосредственно элементы страницы.

 

<html>

   <head>

      <title>My first page</title>

   </head>

   <body>

      <h1>Page title</h1>

     <p>Page description</p>

   </body>

</html>

 

Если есть желание создать свою первую HTML страницу, можете открыть любой текстовый редактор (даже Блокнот), написать туда этот текст, сохранить с расширением .html (вместо .txt) и открыть документ при помощи любого браузера. В таком случае вы увидите две строчки - заголовок и описание. Причем заголовок будет иметь больший размер текста, чем описание. Это связано со встроенными стандартными стилями браузера.

 

HTML тег - это элемент HTML разметки страницы(Верстка сайта. Урок 2. Введение в HTML, основные теги.). Теги бывают открывающими (<html>) и закрывающими (</html>). Некоторые теги не имеют закрывающего -- <img src="/images/1.jpg" />. Также теги бывают блочными и строчными. Блочные теги начинаются с новой строки и переводят следующий элемент на новую строку - <p>, <div>. Строчный элементы отображаются в той же строке - <span>, <b>. При расположении элементов на HTML странице помните, что элементы будут следовать друг за другом, отображаясь сбоку или снизу от предыдущего. Чем ниже описан элемент на HTML странице, тем ниже он будет отображаться. На расположение элемента и его соседей также влияют размеры элемента(width ширина и height высота), его внешние(margin) и внутренние(padding) отступы и границы(border). Фактический размер элемента равен сумме его высоты (ширины), вертикальных(горизонтальных) внутренних отступов и границ. На расположение соседних элементов также влияют его внешние отступы. Но следование элементов можно изменять при помощи различных свойств. Так, например, свойство float отображает блочные элементы в том же ряду. При помощи свойства position элемент можно вытащить из потока и разместить в любом месте страницы, поверх всех элементов и т.д. Об этом подробнее читайте в статье Влияние стилей на расположение элементов в потоке.

 

 

Блок <body> может содержать такие HTML теги:

 

 

В HTML5 появилось много новых тегов(header, footer, article, menu, figure, meter, progress) и много новый типов тега input(color, date, time, range, search).

 

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

 

Приведу несколько примеров использования основных тегов HTML.

 

Табличка:

 

<table>

      <tr>

           <td>1</td>

           <td>2</td>

      </tr>

      <tr>

          <td>3</td>

          <td>4</td>

      </tr>

</table>

1 2
3 4
 

 

 

Список:

 

 

 

<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5
 

 

 

Ссылка:

 

 

 

<a href="http://kate-land.net" title="Kate-Land" target="_blank">Kate-Land</a>
 

 

 

Картинка:

 

 

 

<img src="/images/stories/html_code2.jpg" style="float: left; margin: 0 40px 5px 0;">
 

 

 

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

 

Разметка и оформление страницы

 

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

 

  • шапка сайта (header)
  • боковые колонки (sidebar)
  • подвал сайта (footer)

 

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

 

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

 

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

 

Для создания разметки страницы можно использовать таблицу <table> (табличная верстка), блоки <div> (блочная верстка), а также элементы семантической разметки HTML5(<header>, <footer>, <section>, <aside>).  Подробно о блочной и табличной верстке читайте в статье.

 

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

 

Оформление контентной части страницы

 

Содержание страницы (статья, информация) также требует структуризации и стилизации. Для этого текст разделяют на абзацы <p>, вставляют таблицы <table>, списки <ol>, <ul>, выделяют заголовки и подзаголовки <h1>, <h2>, вставляют ссылки <a> и картинки <img>. Для выделения важного текста используют жирный шрифт(теги <b>, <strong>), курсивный текст(<i>, <em>) или подчеркивание(<u>). Также для выделения блоков с текстом могут использоваться иконки, другой цвет фона блока или текста. Подробнее можно прочитать в статье Базовая стилизация текста.

 

При создании текстов для веб-страниц, нужно учитывать, что с монитора читать сложнее, чем с бумаги. Потому нужно правильно выбирать сочетание фона и цвета текста, разделять текст на отдельные разделы, используя заголовки, разделять текст на списки(<ul>, <ol>), таблицы(<table>), чтобы он не шел сплошным полотном.

 

Атрибуты HTML тегов

 

Все HTML теги могут содержать атрибуты. Они могут быть обязательными или нет, глобальными или специфическими. Например, любому тегу можно задать атрибуты класс class и/или идентификатор id, при помощи которых к нему можно обратиться из CSS или JavaScript. Эти атрибуты считаются глобальными и не являются обязательными. 

 

Примеры обязательных атрибутов:

 

<img src="images/1.jpg">

<a href="index.html">Link</a>

 

Глобальные атрибуты делятся на основные атрибуты и атрибуты событий. Основными, как уже упоминалось, считаются атрибуты class и id, а также title, tabindex, style, spellcheck, contenteditable. Атрибутами событий являются события клавиатуры(onkeydown, onkeypress, onkeyup), атрибуты событий мыши(onclick, onmousemove) и другие.  

 

Пример использования атрибута contenteditable:

 

<div contenteditable="true" style="width: 300px; height: 100px;"></div>
Редактируемый блок:
 
 

 

 

CSS

 

CSS - каскадные таблицы стилей, которые служат для оформления HTML элементов.

 

При помощи CSS можно изменить расположение, размер, порядок блоков, фон и цвет текста и т.д. А при помощи CSS3 можно также делать анимацию и трансформацию элементов.

 

 

HTML CSS
<h1>Article Title</h1>

h1 {

color: blue;

font-weight: normal;

}

 

 

CSS стили можно вставить в HTML документ тремя способами - в <head>(при помощи тега <style>), в <body>(при помощи тега <style>)и в атрибут style элемента. Подробнее в статье - Как подключить css-файл к html-странице

 

При помощи свойств float, position и нового свойства transform можно значительно менять не только вид, но и способ отображения элемента на странице. Так, применяя к элементу свойство float, вы делаете элемент обтекаемым, все следующие элементы будут отображаться справа(слева) от него, даже его они блочные. При помощи свойства position можно делать больше чудес. Значения absolute и fixed вырвут элемент из потока так, что следующие элементы займут его место. При этом его можно разместить в любом месте страницы, независимо от того, что он физически находится. Кроме того, изменить тип отображения элемента со строчного на блочный и наоборот, можно просто применив свойство display: block(inline).

 

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

 

CSS3, кроме различных анимаций, позволяет более гибко работать с элементами HTML страницы - выбирать дочерние элементы по индексам, создавать псевдоэлементы(before и after), задавать переменные и делать вычисления. Но CSS3 является новой разработкой, поддерживается только новыми браузерами и, если поддерживается, то только с использованием вендорных префиксов.

 

Современные браузеры предоставляют такие возможности CSS3, как наложение маски, анимация при наведении transition в виде поворотов, появлений. Кроме того, разработан новый стандарт отображения элементов с использованием боксов. А браузеры WebKit позволяют также использовать свои особенные свойства, например, -webkit-filter, для изменения отображения изображения - черно-белое, сепия, изменения тона, насыщенности, размытия. 

 

Пример работы с CSS:

 

 

<style type="text/css">
.triangle {
width: 0px;
height: 0px;
background: transparent;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 101px solid blueviolet;
border-left: 147px solid transparent;
}
</style>
 
<div class="triangle">&nbsp;</div>
 
 

 

 

JavaScript

 

Язык сценариев JavaScript служит для создания динамики страницы и применяется к HTML элементам. При помощи JavaScript можно делать красивые анимированные эффекты, менять структуру и внешний вид элементов, добавлять им сложный функционал. При помощи JavaScript можно:

 

и многое другое

 

Вам также будет полезно знать о jQuery. jQuery - это библиотека JavaScript, которая облегчает доступ к элементам HTML страницы и работу с ними. 

 

Например, для получения элемента с идентификатором my_id нужно написать следующий код:

 

 

jQuery:
$('#my_id')

JavaScript:
document.getElementById('my_id')

 

 

Используя jQuery значительно легче делать простую анимацию элементов. Например, скрытие, перемещение, изменение внешнего вида элементов или другие подобные эффекты, которые должны происходить через в определенное время или при определенном событии достаточно просто реализуется при помощи функции animate() из багажа jQuery. Более же сложные вещи почти всегда требуют значия JavaScript.

 

Подробнее о возможностях JavaScript  можно узнать в разделе Js/jQuery, а про подключение JavaScript в HTML документе - в статье  Как вставить JavaScript в HTML.

 

JavaScript может стать незаменимым помошником при работе с крутными проектами, например, интернет-магазином. Можно реализовать сортировку товаром по категориям, ценам, производителям без перезагрузки страницы, добавление товара в корзину во всплывающем окне. Большинство сайтов в данный момент поддерживают разнообразные традиционные элементы, которые делаются при помощи JavaScript'а - всплывающие окна(лайтбоксы), увеличение фотограций при клике, переключение вкладок блока (табы) и многое другое. Кроме того, хорошим тоном считается плавная реализация простых эффектов. Например, можно сделать эффект при наведении на элемент при помощи CSS псевдокласса hover, но этот же эффект можно сделать более плавным при помощи JavaScript. 

 

Простой пример работы JavaScript:

 

 

<button id="clickButton">Click Me</button>
<script>
function clickButton(){
var button = document.getElementById('clickButton');
button.addEventListener('click', function(){
alert('Thank You!');
});
};
clickButton();
</script>
 

 

 

HTML5

 

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

 

Для правильной семантической верстки HTML5 предоставляет новые элементы:

 

  • header и footer для создания шапки и подвала сайта, которые повторяются на всех страницах
  • aside для создвания сайдбара(боковой части сайта)
  • article для размещения статьи или основного контента сайта
  • section для создания раздела страницы сайта или контейнера с разделами
  • menu и nav для создания меню и навигации сайта

 

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

 

Пример:

 

<video autoplay="autoplay" controls="controls" preload="auto" width="566"> <source src="/adds/nice_cats.mp4"> </video>

 

Очень интересным и полезным является элемент canvas, который позволяет рисовать на странице или создавать анимацию.

 

Новые типы элемента input и новые атрибуты элементов управления позволяют более удобно работать с формами.

 

Вам наверняка пригодятся такие элементы управления <input type="...">:

 

  • color - палитра для выбора цвета
  • date - календарь для выбора даты
  • time - для выбора времени
  • search - поле поиска
  • url - поле для ввода адреса веб-сайта, валидность поля проверяется в браузере(тоже новинка HTML5)
  • email - поле для ввода электронной почты, также проверяется на валидность
  • range - ползунок для выбора числа в заданном диапазоне
  • number - поле для ввода чисел

 

Работу с HTML5 формами и другими элементами также упрощают новые атрибуты. Приведу лишь несколько из них:

 

  • autocomplete - задает автозаполнение полей формы
  • novalidate - позволяет проверять данные формы до их отправки на сервер
  • placeholder - заменитель текста в текстовых элементах управления input, textarea
  • required - указывает на обязательность заполнения поля формы
  • contenteditable - делает содержимое элемента редактируемым
  • draggable - позволяет делать элемент перетаскиваемым

 

 

Выводы.

 

В данной статье я постаралась раскрыть все грани и возможности языка разметки HTML. Используется он в данный момент для разработки веб-сайтов и веб-приложений. Любая страничка, которую вы видите в браузере, создана при помощи HTML или языков, которые генерируют HTML код. Вы можете просмотреть этот код, если интересно -  Как просмотреть html-код страницы и узнать css сайта.

 

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

 

 

Полезные ссылки.

 

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

 

Что такое CSS - описание понятия CSS, все ключевые моменты, основные CSS свойства, виды селекторов, кроссбраузерность, CSS3 и вендорные префиксы.

 

CSS свойства - список всех CSS свойств, подробно описанных на сайте, со ссылками на нужные статьи.

 

Шаблон html страницы - пример блочной верстки, трехколоночный шаблон с подробным описанием.

 

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

 

Семантическая HTML верстка - понятие семантической верстки, правильный подбор тегов, правильное наименование элементов.

 

Юзабилити сайта. Определение и примеры.

 

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

 

Вендорные префиксы - понятие вендорного префикса, причины и примеры использования.

 

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

 

Резиновая верстка. Краткий обзор - определение резиновой верстки, плюсы и важные моменты.

 

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

 

Браузеры, под которые нужно делать верстку - описание основных браузеров, под которые актуально делать верстку.

 

Специальные символы html - таблица специальных символов.

 

Сброс стилей с помощью reset.css - описание понятия сброса стилей и пример файла reset.css.

 

Сброс стилей для элементов HTML5 - сброс стилей для новых элементов HTML5.

 

Нестандартный шрифт на сайте - описание подключения нестандартного стиля на сайт при помощи font-face.

 

 

 

 

Additional Info

Еще в этой категории: « Анализ сайта Что такое CSS »

Комментарии  

 
0 #10 Lettlefox 15.10.2017 08:21
Очень интересный сайт,. все толково и подробно написано, создавая свой собственный сайт я руководствовалс я материалами именно отсюда. Вот и хочу поделиться написанной мной программой редактора кода со встроенными библиотеками и архивами скриптов. Зацените http://ciberfox.ru
 
 
0 #9 boom beach guide 20.08.2017 22:56
The fun continues even when your base gets attacked.
 
 
0 #8 https://tinyurl.com/ 09.08.2017 14:58
Hey I know this is off topic but I was wondering if you knew
of any widgets I could add to my blog that automatically tweet
my newest twitter updates. I've been looking for a
plug-in like this for quite some time and was hoping maybe you would have some experience with something
like this. Please let me know if you run into anything. I
truly enjoy reading your blog and I look forward to your new updates.
 
 
0 #7 Tayla 07.08.2017 10:52
Every weekend i used to visit this web site, as i want
enjoyment, for the reason that this this web site conations really nice funny data
too.
 
 
0 #6 webpage 06.08.2017 23:26
Hey I know this is off topic but I was wondering if
you knew of any widgets I could add to my blog that
automatically tweet my newest twitter updates. I've been looking
for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
Please let me know if you run into anything. I
truly enjoy reading your blog and I look forward to
your new updates.
 
 
0 #5 Carroll 06.08.2017 11:04
Heya just wanted to give you a brief heads up and let you know a few of the pictures aren't loading properly.
I'm not sure why but I think its a linking issue. I've tried it
in two different internet browsers and both show the same outcome.
 
 
0 #4 high pr backlinks 23.07.2017 00:53
-- Dramaticalⅼy enhance your search engine ranking positions - Evven thouցһ you
can find software aрplicatiօns in thhe mɑгketplace that help automate the linking process, have used them sparingly,
if at all. My only concern here's that the quality from tһe backlink
most likely are not everything great. Knowing the competition is іmportant for the
sucⅽeѕs off any online buѕines or offline.

my page high pr baсklinks: https://www.fiverr.com/cldisplay_seo/do-high-page-rank-on-google-with-high-pr-backlinks-building
 
 
0 #3 Y 75 14.04.2017 05:08
The word alphabet comes, by way of the Latin phrase alphabētum, from the Greek word
αλφάβητος (alphabētos), which itself comes from the first
two letters of the Greek alphabet, α (άλφα/alpha) and β (βήτα/beta).
 
 
0 #2 я 07.02.2017 05:10
8) Вы крутые
 
 
0 #1 kilomi 26.03.2015 09:52
good, very good. :-)
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов