HTML урок 3
В прошлом уроке мы разобрали, что теги div – «блочные элемент», а span – «строчный элемент». Прежде чем мы рассмотрим другие теги, рассмотрим же, для чего создавался HTML.
Представьте ученых, которые публикуют свои научные статьи и документацию. И захотели они хранить свои статьи не на жестком диске, а в интернете. И чтобы текст имел хоть какой-нибудь приличный стилизованный вид, придумали теги.
Тег p – отображает параграфы, h1,h2,h3 – соответственно заголовок, подзаголовок, подподзаголовок (или заголовок первого, второго и третьего уровня), а – ссылка на источник, другой документ или на место в статье, img – картинка.
Помимо общего оформления текста, также понадобилось оформление отдельных букв, слов и словосочетаний. Появились теги b – для выделения их жирным, u – подчеркивать текст, i – курсив и т.д.
Всё! В этом был весь смысл HTML – оформления текста + ссылки.
Это потом набежали программисты, добавили в HTML кнопки и поля ввода, а потом набежали дизайнеры, придумали выпадающее меню, навигацию, фоновые картинки, слайдшоу, всплывающую рекламу… (Да-да даже до сих пор в html нет готовый тегов для выпадающего меню, табов, выпадающих панелей, и других вполне привычных вещей, как под разработкой других приложений, типа WPF, Android Studio). Итак, разобрались теперь быстро пробежим по тегам.
Блочные элементы:
<p></p> - тег параграфа, имеющий отступы сверху и снизу (16px в Chrome/Y). Возникает вопрос. А почему не обозначать параграф клавишей «Enter», как например, в том же Word. Если же вы попробуете добавить Enter в тексте, то HTML его просто проигнорирует. Дело в том, что в HTML Enter мы используем для того, чтобы текст удобно отображался в редакторе кода, а не в браузере.
Все теги имеют уже предустановленные по умолчанию стили в браузере. Для того, чтобы их увидеть, нажмите клавишу «F12», выберите кнопку со стрелочкой, и наведите на интересующий вас фрагмент в браузере. (У меня Yandex браузер, просто мне однажды понадобились плагины и с Firefox и Chrome, и Opera).
Тут, конечно же тема ближе к стилям, так что объясню поверхностно. Мы видим, что по умолчанию текст имеет цвет #000000, шрифт 16px и отступы сверху и снизу по 16px; И тянется тег “p” на всю ширину браузера, что подтверждает, что он блочный элемент.
Теги с <h1></h1> по <h6></h6> - заголовки с 1 по 6 уровень.
Строчные элементы:
<b> - Делает текст жирным. <strong> - выделяет текст жирным. А в чем разница? Словом, раньше не было нормального стандарта, в одном браузере текст делался жирным тегом b, в другом strong. Потом тег b как бы устарел и начали советовать использовать только тег strong, и в дальнейшем хотели вообще избавиться от устаревших тегов. А что же тогда делать с сайтами, которые были созданы в начале 90-х? Поэтому в HTML5 решили эту проблему следующим образом. Вы можете использовать оба тега, но тег strong предпочтителен.
<s>, <del> - зачеркивает текст.
<i> <em> - выделяет текст курсивом.
<small> - делает текст меньшим размером.
<mark> - выделяет текст маркером. (В Y – желтым цветом)
<sub> <sup> - помещает текст над и под строкой. К примеру, всякие химические формулы H2O, или указания степени.
<a href="content.html">Учебник по HTML5</a> - отображает ссылку для перехода на другую веб-страницу или место в документе. href – определяет адрес ссылки.
<img src="les.png" width=”200” alt="Лес" /> - изображение картинки леса. src – путь к файлу, width – ширина в пикселях, alt – альтернативный текст вместо изображения, если вдруг не будет найден файл.
Оформление HTML разметки:
HTML оформляют следующим образом. Если тег находится внутри родительского тега, то он отделяется от него клавишей Tab или 4-мя пробелами. Закрывающий тег, если он родительский, находится на одном уровне с открывающимся. Это очень удобно, сравните.
Следующий урок будет практическим – мы напишем статью.