Данный конспект содержит основную информацию о языке разметки HTML: что такое HTML, зачем он нужен, как используется. Также кратко описана струтктура HTML-документа, список основных тегов с описанием их назначения, перечень параметров данных тегов.
HTML, он же HyperText Markup Languge - язык разметки гипертекста, используется для описания структуры содержимого веб-страниц, а именно, расположения элементов друг относительно друга, их внешнего представлния, их функций. Элементами веб-страницы могут быть заголовок, боковое меню, окошко поиска, странички с контентом, встроенное видео и т.д. HTML Определяет, как они будут отображаться (шрифт, размер, используемые стили), как они будут расположены на странице, как они будут взаимодействовать (ссылки, выпадающие списки, зависимые поля). Для красивого отображения элементов в HTML и страницы в целом обычно используеттся CSS (Cascading Style Sheets) - документ описания стилей. Также в веб-страницы можно встраивать динамические элементы, например, браузерные игры, перемещаемые пользовалелем окошки, кнопки со сложным поведением и т.д. Все это становится возможным благодаря использованию скриптов, написанных на JavaScript, которые также явно указываются в HTML-документе.
Окончательный облик страницы формируется браузером после парсинга HTML-документа, описывающего эту страницу. В зависимости от браузера разные стили могут отображаться по-разному, а определенные элементы могут не поддерживатся некоторыми (обычно старыми или Explorer) браузерами. Все это надо учитывать при формировании HTML-документа.
Обычно HTML-разметка страницы содержится в файле index.html.
HTML документ состоит из тегов. HTML не чувствителен к регистру в имени тегов!
Теги бывают с содержимым: <head>Содержимое</head> и пустыми: <br>.
Теги можно вкладывать друг в друга:
<html>
<head>
Информация в head
</head>
</head>Внутри тега можно задавать параметры или, что то же самое, атрибуты: <section class="main">
Каждый HTML документ начинается с тега-декларации <!DOCTYPE html>. Таким образом браузер понимает, что он читает именно HTML. Далее идет корневой тег , в который вложены все остальные теги - <html></html>. В нем находятся два тега <head></head> и <body></body>. Первый нужен для хранения метаинформации, которая не отображается на странице: заголовка, скриптов, стилей и т.д.. Второй используется для описания видимых частей страницы.
<!DOCTYPE html>
<html>
<head>
Информация в head
</head>
<body>
Информация в body
</body>
</html>| Тег | С содержимым | Описание |
|---|---|---|
<!DOCTYPE html> |
нет | Тег-декларация документа |
<html> |
да | Корневой тег |
<head> |
да | Тег для метаинформанции |
<body> |
да | Определяет тело документа (видимую область) |
Тег <head> используется для описания метаинформации о веб странице (информация об информации). Эта информация не видна пользователю, а используется браузерами и поисковыми движками.
Один из наиболее важных тегов, используемых в <head> это незакрывающийся <meta>.
С его помощью можно задать используемую кодировку, добавить описание страницы, ключевые слова для поисковиков, имя автора.
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">Для того, чтобы сделать веб-страницу адаптивной, т.е. чтобы она подстраивалась под разменры экрана устройства, нужно использовать viewport. Этот параметр обязательно надо добавлять для всех страниц (если конечно хотите сделать веб-страницу пригодной для использования в 2019+ году :-)).
<meta name="viewport" content="width=device-width, initial-scale=1.0">Внутри <head> можно задавать внутрениие стили для документа:
<style>
header {
text-allign: center;
}
</style>И внешние стили:
<link rel="stylesheet" href="mystyle.css">Также внутри <head> обычно указываются срипты:
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>Еще один тег - <base> - используется для указания основного URL страницы, относительно которого разрешаются все остальные URL на странице:
<base href="https://www.w3schools.com/images/" target="_blank">HTML5 предоставляет набор тегов для удобной разметки стандартной структуры большинства страниц
<body>
<header>
<nav>
Navigation
</nav>
</header>
<section>
<main>
<article>
Article
</article>
<article>
Article
</article>
</main>
<aside>
Aside element
</aside>
</section>
<footer>
Footer
</footer>
</body>Текст в HTML обычно помещают в заголовках:
<h1>
Заголовок первого уровня
</h1>
<h6>
Заголовок шестого уровня
</h6>в параграфах:
<p>
Какая-нибудь статья
</p>
<pre>
Какая-нибудь статья с сохранением переносов строк и пробелов
</pre>в цитатах:
<blockquote site="http://twitter.com">
"Самое трудное в жизни - засунуть одеяло в пододеяльник" - Джейсон Стетхем
</blockquote>и как код:
<code>
html,body {
padding: 0;
height: 100%;
margin: 0px;
overflow: hidden;
}</code>Для форматирования используется следующий набор тегов:
| Тег | Описание |
|---|---|
<a> |
Ссылка куда-нибудь - подчеркивание и другой цвет |
<b> |
Bold |
<i> |
Italics |
<em> |
Italics with emphasis |
<strong> |
Bold with emphasis |
<mark> |
Bold with emphasis |
<br> |
Переход на другую строку |
<q></q> |
Кавычки |
<table class="styled">
<tr>
<th colspan="3">Spanning 3 Columns</th>
</tr>
<tr>
<td rowspan="3">Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<!-- rowspan -->
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<!-- rowspan -->
<td>Table Data</td>
<td>Table Data</td>
</tr>
</table><table class="styled">
<colgroup>
<col style="background-color: blueviolet;">
</colgroup>
<colgroup>
<col style="background-color: #f4e767;" span="2">
</colgroup>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>Johnny.doe@gmail.com</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>i_heart_johnny@gmail.com</td>
</tr>
</tbody>
</table>| Тег | Самые важные атрибуты | Описание |
|---|---|---|
<h1> - <h6> |
? | Заголовки разных уровней |
<p> |
style (CSS cстиль), title (заголовок параграфа) | Параграф |
</pre> |
style (CSS cстиль), title (заголовок параграфа) | Аналог параграфа, сохраняет пробелы и переносы строк |
<a> |
href (куда ссылается) | Ссылка куда-нибудь |
<img> |
src, alt (альтернатива картинке, напр. текстовое описание), width, heigth | Картинка |
<button> |
? | Кнопка |
<ul> |
? | Unordered list |
<ol> |
? | Ordered list |
<li> |
? | List item |
<br> |
? | Переход на другую строку |
<hr> |
? | Horizontal row (разделитель текста) |