semyonnaumov / gist:b5a0631b2f34437f7928093c52fafa46
Данный конспект содержит основную информацию о языке разметки HTML: что такое HTML, зачем он нужен, как используется. Также кратко описана струтктура HTML-документа, список основных тегов с описанием их назначения, перечень параметров данных тегов.
HTML, он же HyperText Markup Languge — язык разметки гипертекста, используется для описания структуры содержимого веб-страниц, а именно, расположения элементов друг относительно друга, их внешнего представлния, их функций. Элементами веб-страницы могут быть заголовок, боковое меню, окошко поиска, странички с контентом, встроенное видео и т.д. HTML Определяет, как они будут отображаться (шрифт, размер, используемые стили), как они будут расположены на странице, как они будут взаимодействовать (ссылки, выпадающие списки, зависимые поля). Для красивого отображения элементов в HTML и страницы в целом обычно используеттся CSS (Cascading Style Sheets) — документ описания стилей. Также в веб-страницы можно встраивать динамические элементы, например, браузерные игры, перемещаемые пользовалелем окошки, кнопки со сложным поведением и т.д. Все это становится возможным благодаря использованию скриптов, написанных на JavaScript, которые также явно указываются в HTML-документе.
Окончательный облик страницы формируется браузером после парсинга HTML-документа, описывающего эту страницу. В зависимости от браузера разные стили могут отображаться по-разному, а определенные элементы могут не поддерживатся некоторыми (обычно старыми или Explorer) браузерами. Все это надо учитывать при формировании HTML-документа.
Обычно HTML-разметка страницы содержится в файле index.html .
HTML документ состоит из тегов. HTML не чувствителен к регистру в имени тегов!
Теги бывают с содержимым:
Содержимое и пустыми:. Теги можно вкладывать друг в друга:
html> head> Информация в head head> head> Внутри тега можно задавать параметры или, что то же самое, атрибуты:
Каждый HTML документ начинается с тега-декларации . Таким образом браузер понимает, что он читает именно HTML. Далее идет корневой тег , в который вложены все остальные теги — . В нем находятся два тега и . Первый нужен для хранения метаинформации, которая не отображается на странице: заголовка, скриптов, стилей и т.д.. Второй используется для описания видимых частей страницы.
> html> head> Информация в head head> body> Информация в body body> html>
| Тег | С содержимым | Описание |
|---|---|---|
| нет | Тег-декларация документа | |
| да | Корневой тег | |
| да | Тег для метаинформанции | |
| да | Определяет тело документа (видимую область) |
Тег используется для описания метаинформации о веб странице (информация об информации). Эта информация не видна пользователю, а используется браузерами и поисковыми движками.
Один из наиболее важных тегов, используемых в это незакрывающийся . С его помощью можно задать используемую кодировку, добавить описание страницы, ключевые слова для поисковиков, имя автора.
meta charset pl-s">UTF-8"> meta name pl-s">description" content pl-s">Free Web tutorials"> meta name pl-s">keywords" content pl-s">HTML,CSS,XML,JavaScript"> meta name pl-s">author" content pl-s">John Doe">
Для того, чтобы сделать веб-страницу адаптивной, т.е. чтобы она подстраивалась под разменры экрана устройства, нужно использовать viewport . Этот параметр обязательно надо добавлять для всех страниц (если конечно хотите сделать веб-страницу пригодной для использования в 2019+ году :-)).
meta name pl-s">viewport" content pl-s">width=device-width, initial-scale=1.0">
Внутри можно задавать внутрениие стили для документа:
style> header < text-allign: center; > style> link rel pl-s">stylesheet" href pl-s">mystyle.css">
Также внутри обычно указываются срипты:
script> function myFunction document.getElementById("demo").innerHTML = "Hello JavaScript!"; > script> Еще один тег — — используется для указания основного URL страницы, относительно которого разрешаются все остальные URL на странице:
base href pl-s">https://www.w3schools.com/images/" target pl-s">_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 pl-s">http://twitter.com"> "Самое трудное в жизни - засунуть одеяло в пододеяльник" - Джейсон Стетхем blockquote>
Для форматирования используется следующий набор тегов:
| Тег | Описание |
|---|---|
| Ссылка куда-нибудь — подчеркивание и другой цвет | |
| Bold | |
| Italics | |
| Italics with emphasis | |
| Bold with emphasis | |
| Bold with emphasis | |
| Переход на другую строку | |
| Кавычки |
table class pl-s">styled"> tr> th colspan pl-s">3">Spanning 3 Columnsth> tr> tr> td rowspan pl-s">3">Table Datatd> td>Table Datatd> td>Table Datatd> tr> tr> td>Table Datatd> td>Table Datatd> tr> tr> td>Table Datatd> td>Table Datatd> tr> table>
table class pl-s">styled"> colgroup> col style pl-s">background-color: blueviolet;"> colgroup> colgroup> col style pl-s">background-color: #f4e767;" span pl-s">2"> colgroup> thead> tr> th>First Nameth> th>Last Nameth> th>Emailth> tr> thead> tbody> tr> td>Johntd> td>Doetd> td>Johnny.doe@gmail.comtd> tr> tr> td>Janetd> td>Doetd> td>i_heart_johnny@gmail.comtd> tr> tbody> table>
Более детальное описание структуры HTML
| Тег | Самые важные атрибуты | Описание |
|---|---|---|
| — | ? | Заголовки разных уровней |
| style (CSS cстиль), title (заголовок параграфа) | Параграф | style (CSS cстиль), title (заголовок параграфа) | Аналог параграфа, сохраняет пробелы и переносы строк |
| href (куда ссылается) | Ссылка куда-нибудь | |
| src, alt (альтернатива картинке, напр. текстовое описание), width, heigth | Картинка | |
| ? | Кнопка | |
| ? | Unordered list | |
| ? | Ordered list | |
| ? | List item | |
| ? | Переход на другую строку | |
| ? | Horizontal row (разделитель текста) |
22. Язык html, назначение, основные структуры языка.
Публикация во всемирной паутине (WWW – World Wide Web) реализуется в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может зарегистрироваться на сайте, заполнить анкету и т. д.
Обычно сайт имеет титульную страницу (страница с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-странички). Гиперссылки имеются и на других Web-страницах сайта, что позволяет посетителю свободно перемещаться по сайту.
Web-сайты обычно являются мультимедийными, т. к. на них кроме текста есть иллюстрации, анимация, звуковая и видеоинформация.
Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты (изменение страницы по алгоритму).
2) Создание Web-сайтов реализуется с использованием языка гипертекстовой разметки – HTML (HyperText Markup Language).
HTML – набор команд(тэгов), вставляемых в текст WWW-страницы и определяющих форматирование абзацев, вид шрифта, ссылки на внешние файлы и другие страницы.
Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер (например, Internet Explorer) при загрузке Web-страницы представляет её на экране в том виде, который задаётся тэгами.
Основными достоинствами HTML-документов являются:
-малый информационный объём;
-возможность просмотра на ПК, оснащенных различными операционными системами.
3) Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Создаваемая Web-страничка сохраняется с расширением .htm (.html) в Блокноте, затем запускается в браузере IE через меню Файл/Открыть. Если вам необходимо редактировать страничку, то пользуйтесь командой главного меню IE – Вид/В виде HTML (открывается Блокнот для редактирования). Не забудьте сохранить изменения в Html-коде Web-страницы и только затем возвращайтесь в браузер для её просмотра, использовав команду Вид/Обновить ().
2. Основные понятия языка html
Дескриптор (тэг) – основной элемент кодирования, принятый в стандарте HTML. Практически всё зависит от дескрипторов, они служат для привлечения внимания к определённым словам в документе, тем самым, давая понять браузеру, что нужно выделить, где отобразить графику и где находятся гиперссылки. Тэг заключается в угловые скобки (<>). Тэги могут быть одиночными или парными. Для парных обязательно наличие открывающего тега
Контейнер – это дескрипторная пара, состоящая из открывающего и закрывающего дескрипторов (тэгов)
Элемент HTML-документа – это контейнер вместе с его содержимым.
! Тэги могут записываться в любом регистре (прописными или строчными буквами)
3. НАЧАЛО СОЗДАНИЯ WEB-САЙТА. СТРУКТУРА WEB-СТРАНИЦЫ
Для создания Web-сайта необходимо:
-разработать проект сайта (определить, сколько web-страниц будет входить в сайт, какова будет их тематика, и как они будут связаны между собой);
-подготовить папку (электронную), в которой будут храниться все материалы;
-желательно файлы рисунков поместить в отдельную папку, находящуюся внутри основной;
-титульную Web-страничку обычно сохраняют с именем index.htm или welcome.htm.
Создание структуры Web-страницы:
Всё содержимое файла Интернет-страницы заключается в контейнер …, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать.
Типичная Интернет-страница состоит из двух частей: заголовка (HEAD) и тела (BODY). Эту базовую структуру в простейшем виде можно наглядно показать следующим образом:
начало контейнера HTML-документа
начало контейнера заголовка
начало контейнера строки – названия страницы
конец контейнера строки – названия страницы
конец контейнера заголовка
начало контейнера тела страницы
… тело (всё содержимое) страницы
конец контейнера тела страницы
конец контейнера HTML-документа
указанная вами строка-название будет выводиться в заголовке окна браузера, когда данная страничка будет в нём просматриваться, а также (уже после размещения страницы в Интернете) в списках, выдаваемых поисковыми серверами.
— такой полутэг используется для добавления комментариев на страничке, т. е. для полезных пояснений, которые не показываются в браузере.