Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание html тегов из примера
1.
- эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Любая html страница имеет следующую структуру:
...
Заголовочные теги
...
...
Тело страницы
...
2.
- между этими тегами заключается весь видимый контент страницы.
4.
- между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег
часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег
</p>
<p>Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body>
и </body>
).</p>
<p>5. <center></center>
- эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.</p>
<p>6. <h1></h1>
- это один из класса тегов заголовочных тегов <h1>..<h6>
, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".</p>
Примечание
<p>эти теги имеют большой вес в ранжировании сайта , поэтому ими необходимо пользоваться аккуратно и с умом.</p>
<p>При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег <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>И переводится, как «язык разметки гипертекста». Гипертекст – это специальный метод навигации по интернет-страницам, реализованный в виде гипертекстовых ссылок. Нажимая по этим ссылкам, вы можете с легкость перемещаться по структуре сайта. Переходы при этом происходят не линейно, т.е. у вас всегда есть возможность переходить на любую страницу сайта, ссылка на которую видна в данный момент. </p><p>Под разметкой понимаются некоторые правила и свойства, которыми наделены элементы страницы. Они реализованы в виде так называемых тегов. Например, чтобы указать, что определенный текст на странице должен располагаться по ее центру, его можно пометить с помощью тега center. Увидеть HTML-код конкретной страницы можно через его контекстное меню. Например, для доступа к этому коду в браузере Firefox необходимо нажать правой кнопкой в пределах страницы и выбрать пункт «Исходный код страницы». </p><h2>Как работает HTML-код?</h2>HTML-код представляет собой набор коротких тегов, с содержащимися в них элементами страницы. Весь этот код хранится в файле с расширением.html или.htm. При открытии такого файла в браузере код интерпретируется им, а в окне программы выдается страница в готовом виде. Зная язык разметки HTML, создать собственную страницу может практически любой человек.<h2>Какие бывают теги?</h2>Теги представляют собой отдельные конструкции внутри HTML-кода. Это обычный текст заключенный внутрь угловых скобок «». Теги вы можете увидеть в HTML-коде практически любой страницы. Сами по себе теги на страницах не отображаются, на них выводится конкретный элемент, который закодирован с помощью тегов. Например, если на странице присутствует картинка, значит ее HTML код содержит в себе тег img.<h2>Ограничения HTML</h2>Несмотря на то что HTML код позволяет построить довольно качественную гипертекстовую страницу, он имеет свои ограничения. Страницы, содержащие исключительно такой код являются статичными, т.е. в них отсутствует динамика, специальные эффекты и другие возможности. Но они могут быть привнесены с помощью других языков, например Java Script. Подавляющее большинство современных сайтов создаются с использованием дополнительных языков, которые делают их более живыми и интерактивными.
<p>Каждая веб-страница имеет общую структуру основных кодов html. Давайте и рассмотрим самые основные html-коды страниц сайта</p>
<p>Html-код самого простого сайта (веб-страницы):
</p>
<p><b><span><!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»><br>
<HTML><br>
<HEAD><br>
<TITLE>
</span>
</b><span>Название
</span><span>страницы
</span><span><b>
Текст
страницы
