Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание html тегов из примера
1.
- эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Любая html страница имеет следующую структуру:
...
Заголовочные теги
...
...
Тело страницы
...
2.
- между этими тегами заключается весь видимый контент страницы.
4.
- между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег
часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег
</p>
<p>Теперь перейдем к тегам, которые находятся в теле <a href="/players/grafika-na-web-stranice-v-html-grafika-na-web-stranicah-predstavlenie-grafiki-na-web.html">html страницы</a> (внутри <body>
и </body>
).</p>
<p>5. <center></center>
- эти теги выравнивают все, что находится внутри них по центру. В <a href="/graphics/kak-razblokirovat-aifon-5-s-zabyl-v-kakih-sluchayah-mozhno-primenyat-dannyi.html">данном случае</a> центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.</p>
<p>6. <h1></h1>
- это один из класса тегов заголовочных тегов <h1>..<h6>
, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример <a href="/utilities/chto-takoe-html-struktura-dokumenta-html-sozdanie-dokumenta.html">создания html</a> страницы".</p>
Примечание
<p>эти теги имеют большой вес в ранжировании сайта , поэтому ими необходимо пользоваться аккуратно и с умом.</p>
<p>При составлении html-кода нужно придерживаться <a href="/optimization/blog-o-kompyuterah-i-internet-tehnologiyah-v-obshchem-sluchae-pravilo.html">простого правила</a>: сначала должен идти заголовочный тег <h1>
, а дальше могут идти уже <h2>
, <h3>
и т.д. Главное, чтобы не было сначала <h2>
, потом <h1>
, потом <h3>
и т.п. Должна быть строгая иерархия. Заголовков <h2>
, <h3>
и т.п. может быть много.</p>
<p>7. <br/>
- это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.</p>
<p>8. <span><img src='https://i0.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy>
</span> - это одиночный тег, который выводит изображение.</p>
<ul><li>src
- обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
<br><u>Примечание
</u>:
<ul><li>Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL ;</li>
<li>Не забудьте указать расширение изображения. Например, .jpg
, .gif
, .jpeg
.</li>
</ul></li>
<li>alt
или title
- в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта , особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.</li>
</ul><p>9. <font></font>
- эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.</p>
<p>Примечание:
- аналогичный тег.</p>
<p>Есть также свойство CSS font , в котором можно задавать все эти параметры.</p>
<p>10.
- выделить жирным. Все, что заключено между <b>
и </b>
будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>
.</p>
<p>Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.</p>
<p>Думаете, как создать HTML-страницу? Для этого нужно потратить несколько часов, и вы будете знать А создать свою первую страницу сможете за 5 минут.</p><p>HTML расшифровывается как HyperText Markup Language. В переводе это означает "язык гипертекстовой разметки". Важно понимать, что HTML - это не язык программирования, а именно разметки сайта.</p><p>Все современные браузеры умеют распознавать его. Затем они отображают информацию в удобном виде для пользователя, как заранее было задумано автором.</p><p>В этом языке используются специальные теги. Каждый тег выполняет свою функцию. Их очень много. В идеале нужно выучить все. Но для начинающего базовых знаний вполне достаточно.</p><h2>Основы HTML</h2><p>Перед тем как создать HTML-страницу, нужно знать, из чего она состоит. В этом языке есть два понятия: элемент и тег.</p><p>Для того чтобы указать, где этот элемент начинается и закрывается, используются открывающий и закрывающий тег. Выглядит это так.</p><p><i><открывающий тег>содержимое</закрывающий тег>
</i></p><p>Как видите, открывающий и закрывающий тег отличаются только "/".</p><p>Весь HTML-документ представляет собой набор этих элементов. Существуют определенные требования к структуре документа. Всё содержимое страницы должно находиться между двумя тегами <html> и </html>. Когда вы будете писать код, возьмите себе за привычку сразу проставлять открывающийся и закрывающийся тег.</p><p>Также запомните, что структура языка HTML имеет свою иерархию. Иначе она называется вложенность. является самым главным, поскольку все остальные находятся внутри его.</p><p>У HTML есть два <a href="/utilities/css-dochernie-selektory-tehniki-raboty-s-dom-roditelskie-dochernie-i-sosednie.html">дочерних элемента</a>:</p><ul><li><head> ... </head>;</li><li><body> .. </body>.</li>
</ul><p>В блоке HEAD указывается различная служебная информация. Эта информация в браузер не выводится. Например, указания для разработчиков, для любых программ, для роботов и многое другое.</p><p>Самое главное - здесь нет контента.</p><p>В разделе BODY указывается содержание документа, которое будет отображено пользователю.</p><p>Учитесь сразу делать открытые и закрытые теги, поскольку может быть и по 10 вложенных элементов. Кроме этого, для удобства рекомендуется вложенные теги делать с отступом. Например, вот так.</p><p><i><html>
</i></p><p><i><head>
</i></p><p><i></head>
</i></p><p><i><body>
</i></p><p><i></body>
</i></p><p><i></html>
</i></p><p>Так делают, чтобы равные по значимости теги были на одном уровне, а дочерние - "внутри". Так намного удобнее для восприятия и поиска нужного куска кода. Иначе можно запутаться. Но для экономия места именно и body можно делать без отступов. Так поступают, чтобы у всех остальных не было лишнего отступа. Всё остальное желательно отделять.</p><h2>Как создать простую страницу на HTML</h2><p>Для написания кода вам нужен какой-нибудь редактор. Их очень много. Популярными являются Notepad++ и <a href="/multimedia/dreamweaver-sozdanie-stranicy-na-osnove-shablona-illyustrirovannyi.html">Adobe Dreamweaver</a>. Также можно использовать и блокнот.</p><p>Вот так выглядит редактор Notepad++.</p><p>Это очень <a href="/optimization/tekstovyi-redaktor-bred-udobnyi-internet-magazin-programmnogo-obespecheniya-dlya-windows-klyuchevye-oso.html">удобный редактор</a> и при этом бесплатный. Вышеуказанный Adobe Dreamweaver является платным. Отличие редакторов, предназначенных для написания от блокнота - в том, что специальные теги подсвечиваются. Если он не подсветился, значит, вы написали неправильно.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1321479.jpg' width="100%" loading=lazy></p><p>Для того чтобы подсветка соответствовала языку, ее нужно указать в настройках.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1321477.jpg' width="100%" loading=lazy></p><p>Давайте рассмотрим, как создать страницу HTML в блокноте. То есть закончим техническую часть и потом непосредственно перейдем к изучению тегов.</p><h2>Как создать веб-страницу в блокноте HTML</h2><p>Для начала откройте блокнот.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43047/1321476.jpg' width="100%" loading=lazy></p><p>Затем наберите в нем то, что указано на следующем скриншоте.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/43047/1321475.jpg' width="100%" loading=lazy></p><p>Привыкайте писать руками, а не просто копировать. Когда вы пишите руками, вы лучше запоминаете всю базу тегов.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/43047/1321474.jpg' width="100%" loading=lazy></p><p>После этого файл можно открывать в браузере и любоваться результатом. Теперь вам должно быть понятно, как создать веб-страницу в блокноте HTML.</p><h2>Всемирный консорциум W3C</h2><p>Существует такая организация, как W3С, которая разрабатывает и внедряет все стандарты для интернета. Все браузеры подчиняются этим стандартам и обрабатывают разметки (коды) страниц согласно этим правилам.</p><p>На официальном сайте разработчиков языка HTML можно найти таблицу со всеми тегами и правилами их использования. В рамках данной статьи мы рассматриваем самые основные.</p><p>Вы можете подумать, какие могут быть правила? Все описанные теги имеют свою рекомендацию. Их несколько:</p><ul><li>Необязательный тег.</li><li>Запретный.</li><li>Пустой тег.</li><li>Устаревший</li><li>Утерянный.</li>
</ul><h2>Теги в HTML</h2><p>Перед тем как создать HTML-страницу, нужно разобраться с тем, что должно быть в служебной части HEAD.</p><p>В области HEAD есть как обязательные, так и необязательные теги. К <a href="/internet/kakoi-atribut-yavlyaetsya-obyazatelnym-tega-img-izobrazheniya-v-html.html">обязательному тегу</a> относится заголовок. Он обозначается <title>Заголовок. Он присваивается всему документу. И то, что вы видите в результатах поисковой
системе Google, - это тег title.
Перейдем к разделу BODY. Существуют элементы, которые отображаются в браузере, а есть и неотображаемые. Например, комментарии не отображаются пользователю. Их можно использовать для заметок или же для подсказки другим сотрудникам, если вы работаете в команде.
Обозначается они как
Всё, что находится между , расценивается программой именно так. Обратите внимание, что нельзя вложить тег-комментарий в другой тег-комментарий. Поскольку как только вы откроете .
Пример такой вложенности:
продолжение первого комментария -->
Результатом в браузере будет следующее
продолжение первого комментария -->
А вот кусок
не будет виден. Второй открывающийся тег
