Заголовок моей первой страницы (во вкладке браузера)

Язык система языка html

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML).

Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Язык HTML до 5-й версии определялся как приложение SGML (стандартного обобщённого языка разметки по стандарту ISO 8879). Спецификации HTML5 формулируются в терминах DOM (объектной модели документа).

Язык XHTML является более строгим вариантом HTML, он следует синтаксису XML и является приложением языка XML в области разметки гипертекста. Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

Тег это базовый элемент языка HTML. То есть HTML состоит именно из тегов и для того чтобы учить HTML, достаточно изучить основные теги, которые чаще всего используются. Если сравнивать с примером из реальной жизни, то тег в HTML — это как кирпич для дома. Кирпич это основной элемент, который используется для строительства дома. То же самое и в HTML, тег это базовый элемент для создания html страницы. С помощью тега мы указываем браузеру, как правильно отобразить содержание html страницы. Тег – это символ разметки, имеющий имя и атрибут. Имя — это строка, состоящая из букв, цифр, строчек и тире (не более 72 символов) Атрибут – это конструкция вида: имя атрибута = значение. Теги пишутся в треугольных скобках &lt…..>

Существует два типа тегов это парные теги и одинарные теги:
• Парные теги это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега.
Примеры: &lthtml> и &lt/html>; &lttitle> и &lt/title>; &lthead> и &lthead>; &ltbody> и &lt/body>; &ltp> и &lt/p>;
• Одинарные теги это теги, которые не имею закрывающего тега.
Примеры одинарных тегов: &ltbr/>. &lthr/>

У html страницы есть базовая структура. Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE.
Вот как выглядит базовый каркас html страницы:

В начале страницы, перед тегом html всегда указываем DOCTYPE, то есть тип документа. Каждая html страница начинается с тега &lthtml> и заканчивается тегом &lt/html> и состоит из заголовка &lthead>&lt/head> и тела &ltbody>&lt/body>. Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:
• Мета теги. Главные из них это мета-тег кодировки, через которого указываем кодировку страницы (&ltmeta http-equiv=»Content-type» content=»text/html; charset=utf-8″/>), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords).
• Заголовок страницы, который указывается внутри тега &lttitle>&lt/title>. Этот заголовок отображается во вкладке браузера.
• Блок с внутренними стилями. &ltstyle type=”text/css”> Внутренние стили. &lt/style>
• Одинарный тег &ltlink/>, через которого подключаем внешние файлы.
• А также блок &ltscriptsrc=»https://tct.ru/upload/elekt_uchebnik/HTMLCSS/data/library.js» type=»text/javascript»> &lt/script> в котором пишутся различные скрипты JavaScript.

Внутри тега &ltbody>&lt/body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере. Имена тегов можно писать в любом регистре, то есть если напишем &ltBODY>, &ltbOdY>,&ltBody> или &ltbody>, то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть &ltbody>.

Когда Вы пишете любой текст на странице, будь это просто абзац или небольшая поясняющая строка под изображением, необходимо этот текст помещать внутрь тега &ltp> &lt/p>.

Моя первая HTML страница
Напечатайте следующий текст:
&lthtml>
&lthead>
&lttitle>Это заголовок страницы&lt/title>
&lt/head>
&ltbody>
&lth1>Здравствуйте!&lt/h1>
&ltp>Это моя первая страница HTML. &ltb>Этот текст выводится жирным шрифтом.&lt/b>&lt/p>
&lt/body>
&lt/html>
Сохраните файл в своей собственной папке под именем page1.html

Коротко об элементах HTML

&lthtml>
&lthead>
&lttitle>Это заголовок страницы&lt/title>
&lt/head>
&ltbody>
&lth1>Здравствуйте!&lt/h1>
&ltp>Это моя первая страница HTML.
&ltb>Этот текст выводится жирным шрифтом.&lt/b>&lt/p>
&lt/body>
&lt/html>

Сохраните файл под именем page2.html

&lthtml>
&ltbody>
&ltp>Это параграф 1.&lt/p>
&ltp>Это параграф 2.&lt/p>
&ltp>Это параграф 3.&lt/p>
&lt/body>
&lt/html>

Сохраните файл под именем 3p.html

Источник

• Предок. Предком называют элемент который содержит в себе другие. То есть, исходя из рисунка можно сказать что это предок для всех тегов, а является предком для , и . Аналогично это предок по отношению к и

  .

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

  .

Тут все довольно просто. Это нужно запомнить и знать. Теперь вы знаете основы HTML.

Расшифровка и перевод тегов

Когда я начинал изучать HTML, я задавался вопросом: как запомнить теги? Самым простым вариантом для меня стал перевод тегов. То есть, каждый HTML-тег это означает что-то на английском языке или это сокращение какого-то английского слова. Давайте разберемся с тегами которые уже нам известны.

Тег	Значение	Перевод
	Hyper Text Markup Language	Язык гипертекстовой разметки
	Head	Голова (документа)
	Body	Тело (документа)
	Title	Название, заголовок
	Heading 1…6	Заголовок с 1 по 6 уровень
	Paragraph	Параграф
	Link	Ссылка
	Style	Стиль

Как это работает?

Теперь у вас есть общее понимание о том, что такое HTML. Возникает вопрос, а как это вообще работает?

Работает это так. Мы пишем HTML-код и сохраняем его с расширением HTML. Наша операционная система (Windows или Linux) понимает что файл с таким расширением нужно открывать при помощи браузера.

Браузер открывает файл и читает (интерпретирует) наш код в виде дерева (DOM) в соответствии с определенными правилами.

После того как браузер «прочитал» и интерпретировал наш код он отображает его нам в привычном виде — в виде текста, таблиц, изображений, ссылок, списков и других элементов.

Элемент DOCTYPE

В конце об элементе DOCTYPE. Почему в конце, а не в начале? В самоучителе для начинающих я не придаю этому тегу особое значение, не не могу не упомянуть о нем.

DOCTYPE задает тип документа. Обычно это html. Указывать тип документа нужно в самом его начале.

      
Заголовок страницы в браузере
 
Любой тест, обычно это Hello World!
  

При помощи этого тега мы даем понять браузеру что мы используем именно HTML код. Возникает вопрос, а что, в HTML-документе может быть другой код? Вообще да, документ может быть XML, но пока об этом думать рано. Нужно знать следующее.

Тип документа зависит от того, какие теги в нем используются и есть три типа синтаксиса. Если вы используете все новые теги, то есть теги HTML5 (на момент написания статьи) то достаточно указать .

Для строгого типа указываем:

Более старые версии HTML сейчас практически не используются.

На этом все, теперь вы знаете основы HTML.

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник