Структура html-документа
Теги
Язык HTML состоит из тегов. Каждый тег является элементом разметки гипертекста, и выполняет свою определенную функцию. Одни теги нужны для создания структуры html-документа, указания различной информации о веб-странице, другие – для форматирования и создания элементов на веб-странице, например, чтобы создать кнопку, необходим тег <button>Кнопка</button>, а чтобы перенести текст на новую строку – тег <br>.
Теги бывают парными, например тег <button>...</button>, и одиночными, например, тег <br>. Парные теги состоят из начального или открывающего тега, и конечного или закрывающего тега. Закрывающий тег записывается со слэшем.
Каркас html-документа
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Название веб-страницы</title>
</head>
<body>
</body>
</html>
Тип документа
В первой строке html-документа принято указывать тип документа.
Делать это нужно обязательно, потому что существует несколько версий языка html, и у каждой есть свои правила и стандарты. Если браузеру не сообщить о версии HTML, то он не будет знать какому стандарту нужно следовать при отображении веб-страницы, что может привести к ее некорректному отображению.
При вёрстке веб-страниц мы будем использовать пятую версию языка – HTML5. Для этой версии тип документа записывается таким образом: <!doctype html>.
Теги верхнего уровня
Каркас html-документа образуют теги верхнего уровня <html>, <head>и <body>.
Теги <head>и <body>определяеют заголовок и тело html-документа.
Теги заголовка документа
В заголовке документа размещается различная информация о веб-странице: кодировка, название, описание, ключевые слова, пути к файлам со стилями, скриптами и т.д. Эта информация, кроме названия, на веб-странице не отображается.
Кодировка html-документа
<meta charset="utf-8">
Кодировку html-документа указывают при помощи тега <meta>и его атрибута charset.
Атрибуты тегов записываются как пара, состоящая из имени и значения. Значения атрибутов записываются в кавычках. У тега может быть несколько атрибутов, в этом случае они записываются через пробел.
В качестве значения атрибута charset, мы будем использовать кодировку utf-8, так как она включает в себя символы всех языковых групп.
Обратите внимание! Если вы указали в качестве кодировки веб-страницы значение utf-8, то и сохранить html-документ необходимо в этой кодировке.
Название html-документа
Название или заголовок html-документа записывается между тегами
Содержимое тега <title>отображается:
- на вкладках веб-страниц
- в списке закладок
- в названии файла при сохранении веб-страницы на жесткий диск;
- в списке результатов поискового запроса на сайтах популярных поисковых систем (Google, Yandex) первыми отображаются сайты, содержащие слова вашего запроса именно в заголовке.
Теги тела документа
В теле документа можно размещать теги, предназначенные для разметки и форматирования содержимого веб-страницы. Все что будет записано в этом контейнере, отобразится на веб-странице в окне браузера. В следующих уроках мы приступим к изучению таких тегов.
Видео к уроку
Поделиться с друзьями:
Каркасы для адаптивных HTML5 шаблонов/сайтов
1) Если Вы заметили, то я также использую строку с добавлением CSS файла «normalize.css»
<!-- CSS --> <link rel="stylesheet" href="css/normalize.css">
Рекомендую это строку удалить, если не будете использовать эти стили. Хотя, настоятельно рекомендую использовать «normalize.css».
2) Если Вы хотите настроить иконку для сайта, то рекомендую использовать этот сервис RealFaviconGenerator — он поможет настроить иконку для Android, Windows 8 и IOS.
Рекомендую. Сам использую.
3) Используйте также «CSS Reset» — выберите тот, который подойдет для Вас. Зачем? Чтобы сбросить основные стили браузера, и настроить их специально на Ваше усмотрение.
Для адаптивного HTML5 сайта:
версия 1.2
<!DOCTYPE HTML> <!--============================================================ * Design: ... * Copyright (c) 2015: ... =============================================================--> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- для адаптивного дизайна --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- информация о сайте --> <title>Впишите заголовок сайта</title> <meta name="description" content="Описание сайта"> <meta name="keywords" content="Ключевые слова сайта"> <meta name="author" content="SergeyChunkevich.com"> <!-- иконка для сайта --> <link rel="shortcut icon" href="favicon.ico"> <!-- CSS --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <!-- Это для старого осла, чтобы он понял HTML5 теги --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <!--===== ШАПКА САЙТА =====--> <div role="banner"> <header> <!-- логотип --> <a href="#">Логотип</a> <!-- меню --> <nav role="navigation"> <ul> <li><a href="#">Страница 1</a></li> <li><a href="#">Страница 2</a></li> <li><a href="#">Страница 3</a></li> </ul> </nav> </header> </div> <!--===== КОНТЕНТ =====--> <div> <main role="main"> <!-- блок 1 | .
.. -->
<section>
<header>
<h2></h2>
</header>
<article>
<h4></h4>
<p></p>
</article>
</section>
<!-- блок 2 | ... -->
<section>
...
</section>
</main>
</div>
<!--===== ПОДВАЛ САЙТА =====-->
<div role="contentinfo">
<footer>
<p></p>
<small>Copyright © <time datetime="2015">2015</time></small>
</footer>
</div>
</body>
</html>
Базовый CSS файл:
@charset "utf-8";
/*=====================================================
* Название проекта
Автор: ...
Copyright (c) 2015 ...
=====================================================*/
/* БАЗОВЫЕ НАСТРОЙКИ
-----------------------------------------------------*/
html, body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
}
body {
background: ;
}
/* ШАПКА САЙТА
-----------------------------------------------------*/
#header-container {
}
#header-container header {
}
#header-container . logo {
}
#header-container nav {
}
#header-container ul {
}
#header-container li {
}
#header-container li a {
}
#header-container li a:hover {
}
/* КОНТЕНТ
-----------------------------------------------------*/
#main-container {
}
#main-container main {
}
#main-container section {
}
#main-container section header {
}
/* ПОДВАЛ САЙТА
-----------------------------------------------------*/
#footer-container {
}
#footer-container footer {
}
#footer-container p {
}
#footer-container small {
}
/* МОБ. НАСТРОЙКИ
-----------------------------------------------------*/
@media only screen and (max-width: 479px) {
}
@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 768px) {
}
@media only screen and (min-width: 1024px) {
}
@media only screen and (min-width: 1140px) {
}
logo {
}
#header-container nav {
}
#header-container ul {
}
#header-container li {
}
#header-container li a {
}
#header-container li a:hover {
}
/* КОНТЕНТ
-----------------------------------------------------*/
#main-container {
}
#main-container main {
}
#main-container section {
}
#main-container section header {
}
/* ПОДВАЛ САЙТА
-----------------------------------------------------*/
#footer-container {
}
#footer-container footer {
}
#footer-container p {
}
#footer-container small {
}
/* МОБ. НАСТРОЙКИ
-----------------------------------------------------*/
@media only screen and (max-width: 479px) {
}
@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 768px) {
}
@media only screen and (min-width: 1024px) {
}
@media only screen and (min-width: 1140px) {
}
Поделиться или сохранить:
— HTML: язык гипертекстовой разметки
Устарело: Использование этой функции больше не рекомендуется.
Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе исключения или может быть сохранен только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.
HTML-элемент определяет определенную область, в которой может отображаться другой HTML-документ. Фрейм должен использоваться в пределах .
Использование элемента не рекомендуется из-за определенных недостатков, таких как проблемы с производительностью и отсутствие доступа для пользователей с программами чтения с экрана. Вместо элемента может быть предпочтительнее