Основные понятия html программирования

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>

Для форматирования используется следующий набор тегов:

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

Источник

Основы HTML

HTML (HyperText Markup Language) — язык разметки гипертекста — предназначен для создания Web-страниц.
Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.

HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.

HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-броузер на компьютере пользователя Интернета.
HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

Даже, если вы не собираетесь в дальнейшем редактировать «вручную» текст HTML (предполагая использовать графические редакторы), знание языка HTML даст вам возможность как лучше использовать эти средства, так и увеличит ваши шансы сделать HTML-документ более доступным и «читаемым» при просмотре броузерами разных фирм.

• Тег (tag). Тег HTML это компонент, который командует Web- броузеру выполнить определенную задачу типа создания абзаца или вставки изображения.
• Атрибут (или аргумент ). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.
• Значение . Значения присваиваются атрибутам и определяют вносимые изменения. Например, если для тега используется атрибут выравнивания, то можно указать значение этого атрибута. Значения могут быть текстовыми, типа left или right , а также числовыми, как например ширина и высота изображения, где значения определяют размер изображения в пикселях.

Теги представляют собой зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком больше).
Закрытие тега отличается от открытия только наличием символа ‘/’.

Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом , и мы хотим применить его к словам «Это мой текст».
HTML-последовательность кодов и собственно текста будет выглядеть так:

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

Первое правило HTML: закрывайте все, что вы открыли!
НО! Из этого правила, как и из всех остальных, существуют исключения.

HTML- программа должна начинаться тегом и заканчиваться тегом

. (здесь будут другие теги программы)

HTML- программы состоят из двух основных частей: заголовка и тела. Заголовок ограничивается парой тегов и , а тело — парой тегов и .

В результате HTML- программа выглядит следующим образом:

. (здесь будут другие теги тела программы)

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

Тогда программа принимает следующий вид:

. (здесь будут другие теги тела программы)

Некоторые авторы, пишущие об языке HTML, советуют записывать теги прописными буквами, другие — используют строчные. Редактор HTML — Allaire HomeSite 4.5.1, например использует по умолчанию нижний регистр для записи тегов. При создании моих страниц использовались оба варианта написания тегов. Как видите, допустимо и то и другое. Современные броузеры допускают запись тегов в любом регистре.
Уже позднее я узнала, что нельзя делать категоричные заявления по этому вопросу. Существуют теги и атрибуты «чуствительные» к написанию прописными или строчными буквами. Это регламентируется стандартами языка HTML, определенными Консорциумом W3C.
Обращайтесь к первоисточнику!
Хорошее знание технического английского обязательно!

При написании HTML-программ возникает необходимость вставки комментариев — поясняющих текстов, которые невидны при загрузки документа в броузер. Для этой цели служит тег . Все, что заключено между символами и > считается комментарием и не отображается в броузере. Еще один тег, который очень важен в HTML-программе, но так же не предназначается для отображения какого-либо объекта в броузере — тег . Этот тег служит специальным целям, а именно — указания языка, на котором написан документ, его кодовой страницы, ключевых слов, используемых поисковыми системами для классификации этого документа и т.п. Теги обычно вставляются в HTML-программу на заключительном этапе создания Web-страницы —публикации. Для вставки в HTML-программу фрагмента программ, написанных на языке JavaScript или Viual Basic Script сценариев используют теги и .
Возврат в начало страницы Возврат на главную страницу сайта

      Основная часть документа