Содержание

Элементы HTML

То, что Вы видите в настоящий момент на экране монитора, это элементы интерфейса и контента – содержания веб-страницы, оформленные в определенном дизайне и предназначенные для Вас – пользователя.

Щелкните правой кнопкой мыши в любом месте веб-страницы. Откроется окно контекстного меню с перечнем команд. Внизу меню найдите команду – Просмотр кода страницы. Щёлкните по ней и откроется «обратная» сторона веб-страницы, которую Вы сейчас смотрите: вся в непонятных текстах, написанных английским шрифтом и какими-то значками. Это «обратная» сторона веб-страницы, написанная HTML5. Элементы видимого и нужного Вам контента – информационный текст, фото, таблицы – напрямую связаны с элементами HTML, которые не отражаются на экране монитора.

Запомните порядок действий, необходимых для просмотра кода веб-страницы в браузере. Я еще неоднократно буду предлагать Вам это сделать.

Элементы HTML – это основные структурные единицы веб-страницы – тэги. С их помощью воспроизводятся элементы контента, отображаемые на экране монитора. Тэги – символы HTML, которые формируют его язык.

Теги – это знаки алфавита или слова английского языка, заключенные в угловые скобки <>. Например: <body>, <article>, <p>, <h1>, <figure>, <audio>, br. Это или полное английское слово – <body>, <article>, <figure>, <audio>, или сокращение: <p> – параграф, <br> – разрыв (от англ.) – break.

Тегов около сотни. Наиболее употребляемые при кодировании веб-страницы теги, нужно запомнить. Остальные, необходимость использования которых возникнет в процессе написания страницы, найдете в приложении этих материалов или в интернете.

Теги бывают двух видов: парные и одиночные. Парные теги состоят из открывающего и закрывающего тега, например: <p> Пишем нужный текст </p>. Символ "/" – правый слеш после открывающей угловой скобки указывает на то, что это закрывающий тег.

Одиночные теги состоят только из открывающего тега, например: <br>. Их всего 16.

Теги могут быть написаны как прописными, так и строчными буквами: <BODY> означает то же самое, что и < body>. Но, рекомендуется использовать строчные.

Блочные и строчные теги.

Все теги делят на две группы:

- теги отражающие блочные элементы (block);

- теги отражающие строчные элементы (inline).

Блочные элементы по умолчанию отображается на веб-странице в виде прямоугольника, отсюда и название. При отображении браузер автоматически добавляет разрыв строки до и после блочного элемента. Блок занимает всю доступную ширину веб-страницы, а его высота устанавливается браузером автоматически, исходя из объема его содержимого. Текст, сами блоки, фото и рисунки внутри блочных элементов по умолчанию выравниваются по левому краю. Подробнее о специфики блоков будет дальше.

То, что Вы видите в данный момент на экране вашего монитора, отражает блочную структуру веб-страницы. Текст, который Вы читаете – размещен в блоке – <section> справа, слева, где отражено текущее время – блок <aside>. Внизу где написано – Империя духу – блок <footer>.

Запомните! Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.

Строчные элементы используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого. В отличии от блочных элементов браузер не добавляет разрыв строки до и после строчного элемента, поэтому, если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую строку при необходимости. В большинстве случаев внутрь строчных элементов допустимо помещать другие строчные элементы.

С этого текста начните запоминать теги по названию и их английское написание. Это самые необходимые. Они позволят Вам начать кодирование первой веб-страницы.

Необходимо запомнить:

<!doctype> Объявляет тип веб-страницы и предоставляет основную информацию для браузера — ее язык и версию.

<body></body> Тег предназначен для хранения содержимого (контента) веб-страницы, отображаемого в окне браузера.

<html></html> Сообщает браузеру, что это HTML-документ. Данный тег является контейнером для всех остальных элементов веб-страницы,включая теги head и body.

<head></head> Тег предназначен для хранения элементов, задача которых — помочь браузеру и поисковым системам в работе с информацией, размещенной на веб-странице: краткое описания сайта, ключевые слова текста и др. данные.

<title></title> Определяет заголовок HTML-документа. Тег не отображается на веб-странице, но название страницы отражается на вкладке браузера. Разрешается использовать только один <title> на веб-странице и размещать его в контейнере <head>.

<h1></h1>, <h2></h2>, <h3></h3>, <h4</h4>, <h5></h5>, <h6></h6> (от англ. heading). Заголовки отличаются один от одного размером шрифта. Самый крупный – <h1>, самый мелкий – <h6>

<p></p> (от англ. paragraph). Текстовый абзац. Тег <p> является блочным, всегда начинается с новой строки. Можно использовать без закрывающего тега. Считается, что конец абзаца совпадает с началом следующего абзаца или другого блочного элемента. Абзацы текста, идущие друг за другом, разделяются между собой пустым пространством. Величиной разрыва между абзацами можно управлять с помощью стилей CSS.

Если Вы решили изучать веб-дизайн, откажитесь от искушения использовать специальные, тотально навороченные и автоматизированные редакторы HTML кодов. Пишите в доступном и бесплатном редакторе – Notepad++. Это поможет вам быстрее приобрести необходимые навыки в ручной кодировке и в тоже время заставит более тщательно разобраться с материалом. Это будет полезным, даже если Вы со временем перейдете на другие редакторы.

Как работать в Notepad++, Вы можете узнать из материалов размешенных на этом же сайте, (смотрите: Тэхна → Лічбавыя тэхналогіі → Праграмы). Все примеры текстов, связанных с изучением HTML5 и CSS будут писаться в этой программе. Советы по кодировке веб-страниц будут даваться исходя из возможностей Notepad++.

 

... да пачатку старонкі