Html 5

В прошлом уроке мы разобрали, что теги 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-мя пробелами. Закрывающий тег, если он родительский, находится на одном уровне с открывающимся. Это очень удобно, сравните.

Следующий урок будет практическим – мы напишем статью.

Урок 1

Зачем нужны эти уроки, если по HTML их тьма? Ну, во-первых, я пытаюсь писать так, как другие не пишут, а во-вторых у меня есть план: написать материал HTML+CSS+Bootstrap+C#+SQL+.Core.

До этого я писал HTML-уроки, но они не отличались от других уроков. Но в один день у меня возник мысль написал уроки в данном формате. Поехали.

Как создать Web-страницу? Откройте стандартный блокнот. Напишите туда любой текст. А затем выберите «Файл-Сохранить как…». И напишите «Имя_файла.html». Всё, вы создали веб-страницу, теперь двойной клик по ней откроет браузер с вашим текстом.

Конечно, так веб-страницы не создаются, это просто пример того, что для создания веб-страниц не нужны специальные программы. Структура же веб-документа может выглядеть следующим образом.

<!DOCTYPE html> - указывает нам на то, что мы имеем дело c HTML5. (До этого был HTML4)

<html></html> - эти теги указывают на начало и конец html документа. Яркий аналог тегов – кавычки в предложениях. Когда они открываются, начинается прямая речь, когда закрываются, заканчивается прямая речь. Также и теги: они тоже открываются и закрываются, указывая начало и конец содержимого в них.

<head></head> - В них содержатся данные, скрытые от глаз пользователя (кроме title). Они содержат важная техническая информация для обработки страницы браузером: всякие ссылки на стили, иногда скрипты, различные мета-теги.

<title></title> - Когда мы открываем веб-страницу, появляется вкладка в браузере. Он отображает тот текст на вкладке, который указан в тегах title.

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

Конечно, можно создавать веб-страницы в блокноте, но согласитесь, когда есть подсветка текста и подсказки тегов, это намного облегчает работу. Для себя я выделил два таких редактора: notepad++ и visual studio code.

Урок 2. div и span.

Считаю их самыми важными тегами в веб-документах, с помощью которых (со стилями соответственно) можно заменить почти все другие теги (кроме специфических тегов, вроде тегов <img>,<a>, тут без них никак не обойтись).

В данном уроке, для их объяснения, нам не обойтись без стилей, таких как:

background-color: red; - указывает цвет фона тега.

width: 200px; - указывает ширину тега в 200 пикселей.

Итак, что из себя представляет тег «div»?

Представьте себе прямоугольник с шириной, равной ширине браузера (если он вложен в тег body, иначе равен ширине родительского тега) и высотой, равной высоте контента внутри него (картинки, текст, другой блок). Конечно, высоту и ширину div можно будет менять, но по умолчанию он действует так. Даже если мы явно зададим двум тегам такую ширину, что они оба смогут поместить по ширине браузера, то (по умолчанию) все равно второй div будет начинаться с новой строки. Это называется “блочным элементом” html.

Тег «span» также представляет собой прямоугольник с шириной и высотой контента внутри. Мы не можем задать ему произвольную высоту и ширину, без толку. А теперь покажем разницу между ними на данном примере. Это называется “строчным элементом” html.

Стили тегам задаются в первом открывающемся теге, и начинается он со слова style=””. Далее внутри кавычек перечисляются свойства стилей, разделенных “;”.

Хоть мы и div и span задали одинаковую ширину, span же проигнорировал заданную ширину, и взял ширину текста.

Внутри тега div могут находится любые теги (div, span и тд), а внутри тега span желательно только строчные элементы (другие span и т.д.)

Привет, а вот и я. Поделюсь своими первыми успехами. С помощью видео - урока я познакомился с различными тегами. Я сделал две странички, одна про рецепт бананового печенья, а вторая про стих о Шалтае - Болтае.

У меня возникли некоторые трудности с добавлением картинки на страницу, тобишь с помощью тега <img>, но, с помощью дополнительных интернет ресурсов я разобрался как правильно вставлять и редактировать картинку на сайте. К посту я прикладываю два скриншота с сайтов и исходные коды к каждому из них.

Спасибо за чтение, увидимся завтра.

P.S. Мне не понравилось что на страничке с стихом про Шалтая - Болтая много свободного  места, но я не знаю как его чем то закрывать.

Исходный код для страничке о стихе про Шалтая - Болтая.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>шалтай-болтай для пикабу</title>

</head>

<body style="background-color: #FDD9B5">

<h1>ШАЛТАЙ-БОЛТАЙ.</h1>

<img src="photo/egg.jpg" width="400" height="300">

<p>Стих про <b>Шалтая-Болтая.</b><br>

<big>Шалтай-Болтай</big><br>

<em>Сидел</em> на стене.<br>

<small>Шалтай-Болтай</small><br>

<em>Свалился</em> во сне.</p>

</body>

</html>

Исходный код к страничке о рецепте бананового печенья.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>рецепт печенья для пикабу</title>

</head>

<body style= "background-color: #7366BD">

<h1>Быстрый рецепт домашнего печенья</h1>

<img src="photo/bananlol.jpg" alt="">

<p>Что делать если захотелось сладенького к чаю, в этом нам

поможет быстрый рецепт домашнего печенья.</p>

<p>Ингредиенты:</p>

<ul>

<li>2 больших старых банана</li>

<li>стакан геркулеса</li>

<li>орехи</li>

<li>изюм</li>

<li>шоколад</li>

</li>корица (по желанию)</li>

</ul>

<hr>

<h3>Приготовление домашнего печенья</h3>

<img src="photo/banan.jpg" alt="banan">

<p>Для начала нужно хорошенько размять подготовленные и очищенные

бананы с овсянкой, а после чего премешать.</p>

<p>Готовить при температуре 350 ⁰C, предварительно смазав

лист для выпечки маслом, 15 минут.</p>

</body>

</html>

А вот и скриншоты страничек: