i- ovo je nešto poput servisnih tehničkih informacija. Uzmite oznaku kao primjer je naslov. Čemu služi, pitate se?</p>
<p>Otvorite preglednik i pogledajte vrh svih naredbenih redaka (naime, naslov prozora) ... Jeste li vidjeli?</p>
<p>Element <b>GLAVA</b>(označeno <head>i</head>) postavlja se neposredno ispred tijela <i>HTML dokument</i>, koji je definiran oznakama <body>i</body> ()
.</p>
<p>Između oznaka <head>i</head> može uključivati sljedeće komponente:</p>
<p><b>GLAVA</b>- definira početak i kraj elementa unutar kojeg se nalaze svi servisni podaci namijenjeni pregledniku.</p>
<p><b>TITULA</b>- označava naziv dokumenta (Internet stranice), koji se prikazuje u prozoru preglednika (preglednika). Može se specificirati, ali ne više od jednom.</p>
<b>baza</b><i> —
</i> definira osnovnu adresu s koje se naknadno broje relativne veze unutar vašeg dokumenta. Nema završnu oznaku</>. Istovremeno, ovdje je obavezan trenutak prisutnost barem jednog od parametara (atributa): <ul><li><b><i>HREF</i>
</b> — <span>definira osnovnu adresu (URL) internetske stranice;</span></li>
<li><i><b>CILJ</b>
</i>
— <span>definira okvir (njegov naziv) koji će se prema zadanim postavkama koristiti u hipervezama</span>.</li>
</ul><p><i>Primjer.</i>
</p>
<p><b><HEAD><br></b><i><!-- Пускай браузер думает, что он находится по адресу: -->
</i><b><br>
<BASE HREF="http://сайт"><br>
<TITLE>Izrada stranice
... golova-head-html-pages.html">Popis
...
STIL- služi za umetanje kaskadnog stilskog lista u dokument CSS (kaskadni stilski list).
Ima sljedeće atribute:
TIP
— definira MIME tip stilskog lista koji će se integrirati. Je obavezan atribut i obično ima vrijednosttekst/css
.
TITULA — specificira naziv kaskadne tablice stilova. Postaje potrebno ako planirate koristiti nekoliko pravila u jednom dokumentu. STIL. U tom slučaju, preglednik će biti prisiljen pitati koja će od predloženih stela biti primjenjiva na dokument. Svi moderni preglednici zanemaruju ovaj atribut - ne možete ga koristiti.
Primjer.
Korištenje CSS stilskog lista
VEZA- definira odnos vašeg dokumenta s drugim objektima. Nema završnu oznaku.
Atributi
HREF- definira URL dokumenta (Internet stranice).
REL- određuje kako je dokument povezan s objektom, što je definirano parametrom HREF. Može imati sljedeće vrijednosti:
stilski list- pokazuje na datoteku koja sadrži CSS stilski list. Preglednik će preuzeti css datoteku s adrese navedene u HREF parametru i zatim je primijeniti na dokument.
Dom- pokazuje na glavnu stranicu stranice.
toc, contents - pokažite na datoteku koja sadrži sadržaj dokumenta.
indeks- pokazuje na datoteku koja sadrži informacije za indeksiranje dokumenta.
glosar- pokazuje na datoteku koja sadrži popis pojmova koji se odnose na dokument.
autorsko pravo- pokazuje na stranicu stranice koja pruža informacije o autorskim pravima, njegovim kreatorima itd.
gore, roditelj- pokazuje na "roditeljsku" stranicu (stranica koja je jedan korak iznad svih stranica).
dijete- označava "podređenu" stranicu (stranica koja je jedan korak ispod određene).
Sljedeći- pokazuje na sljedeću stranicu.
prethodni- pokazuje na prethodnu stranicu.
zadnji, kraj- pokazuje na posljednju stranicu.
prvi- pokazuje na prvu stranicu.
Pomozite- pokazuje na stranicu s nagovještajem.
TIP- definira MIME tip za objekt naveden u HREF parametru.
Primjeri.
DIV element
podne
META- služi za umetanje meta-podataka. Ova oznaka omogućuje umetanje raznih korisnih tehničkih informacija u element HEAD, koji na kraju neće biti vidljiv korisniku, ali će ga preglednik prepoznati. Takve informacije su jednostavno neophodne za ispravno indeksiranje stranica web stranice od strane robota za pretraživanje (o njima ćemo govoriti kada dođe pravi trenutak na treningu). Nema završnu oznaku.
Ima sljedeće atribute:
IME- Određuje naziv metapodataka. Postoji veliki broj unaprijed definiranih naziva.
HTTP Ekviv- Određuje naziv metapodataka. Gotovo je identičan parametru NAME, s jednom razlikom: koristi se samo kada postoji potreba za prosljeđivanjem dodatnih informacija u http zaglavlje.
SADRŽAJ- Dodjeljuje vrijednost metapodacima navedenim u parametru NAME (ili HTTP-EQUIV).
A sada primjer.
...
Meta oznake u html-u je skupina posebnih oznaka koje se nalaze između oznaka
i. Iz naziva je odmah jasno da se nalaze na početku koda.
Oznake naslova obavljaju dva važna zadatka:
Prijavite informacije o html stranici pregledniku;
Prijavite informacije tražilicama o određenoj html stranici;
Značajka oznaka naslova je da nisu vizualno vidljive korisniku (iznimka je oznaka
, što se može vidjeti na kartici stranice preglednika). Sve oznake zaglavlja nisu obavezne, ali to ne znači da nisu potrebne.</p>
<p>Ove oznake se mogu podijeliti u 4 grupe.</p>
<ul><li>Označiti <title>
oznake
oznake
Označiti
Pogledajmo svaku grupu pojedinačno.
1. Oznaka
- Naslov stranice. Ovo je jedina oznaka glave koja je vidljiva korisnicima. Od velike je važnosti za tražilice u smislu SEO-a. Upravo se ovaj naslov stranice prikazuje u izlazu kada su navedeni nazivi stranica.
...
<span>Naslov stranice</span>
...
Kompetentno sastavite
za početnika nije lako, jer morate uzeti u obzir nekoliko nijansi. Idealna naslovna oznaka trebala bi biti privlačna korisnicima i sadržavati ključne fraze za tražilice. Ova oznaka ne bi trebala biti duga, jer bi tražilice to mogle shvatiti kao neželjenu poštu. Ova oznaka mora biti jedinstvena za svaku stranicu!</p>
<h2>2. Oznake <meta></h2>
<p><meta>- to su skupina servisnih oznaka koje sadrže informacije o stranici. Razmotrimo svaki od njih zasebno.</p>
<h3>2.1. Meta Content-Type</h3>
<p>Sintaksa za ovaj atribut je:</p>
<blockquote><head
>
...
<meta
http-equiv
="Content-Type
" content
="text/html; charset=UTF-8
">
...
</head
>
</blockquote>
<p>Ova oznaka određuje kodiranje stranice. Konkretna vrijednost je zapisana kroz atribut skupa znakova. U ovom slučaju, kodiranje je windows-1251. Većina web stranica koristi UTF-8 kodiranje.</p>
<p>Ako se kodiranje web-mjesta i određene html stranice (ili u bazi podataka) ne podudaraju, tada se stranica može prikazati kroz hijeroglife u nekim preglednicima.</p>
<h3>2.2. meta opis</h3>
<blockquote><head
>
...
<meta
name
="description
" content
="<span>Opis stranice</span>">
...
</head
>
</blockquote>
<p>Atribut content sadrži opis stranice. Najčešće se ovaj opis koristi kao isječak za tražilicu. Opis nije obavezna oznaka. Na primjer, Yandex tražilica određuje isječak prema vlastitom nahođenju, dok Google koristi ovaj opis i prikazuje ga onako kako je napisan.</p>
<h3>2.3. meta ključne riječi</h3>
<blockquote><head
>
...
<meta
name
="keywords
" content
="ключевые слова
">
...
</head
>
</blockquote>
<p>Ova oznaka izaziva mnogo rasprava o tome je li uopće potrebna. Tražilice ne tvrde da su te ključne riječi na neki način uključene u rangiranje stranice.</p>
<p>Atribut sadržaja navodi ključne riječi. Malo je vjerojatno da će to drastično utjecati na promociju stranice, ali uz neke kontroverzne točke može utjecati na vas u vašu korist. Ključne riječi moraju biti odvojene zarezima. Nemojte pisati ključne riječi koje nisu na stranici. Možete pročitati više o ključnim riječima.</p>
<h3>2.4. Meta osvježenje</h3>
<blockquote><head
>
...
<meta
http-equiv
="refresh
" content
="1;http://site.ru/
">
...
</head
>
</blockquote>
<p>Postoji mnogo drugih meta tagova, ali one nisu važne ni za preglednike ni za tražilice, pa ih nema smisla koristiti.</p>
<h3>2.5. Meta okvir za prikaz</h3>
<blockquote><head
>
...
<meta
name
="Viewport
" content
="width=device-width
">
...
</head
>
</blockquote>
<h3>3.3. Veza rel=Alternativna</h3>
<blockquote><head
>
...
<link
rel
="alternate
" type
="application/rss+xml
" title
="<span>(!LANG:Naziv RSS feeda</span>" href
="URL-ленты
">
...
!}</head
>
</blockquote>
<h2>4. Označite ‹script›</script></h2>
<p><script></script>- povezivanje java-datoteka sa skriptama.</p>
<blockquote><head
>
...
<script
type
="text/javascript
" src
="javafile.js
"></script
>
...
</head
>
</blockquote>
<p>В атрибуте src указывается расположение подключаемых java-файлов. Используется для уменьшения кода на странице, а также в случае, если какие-то ява функции необходимо использовать при открытии страницы. Также это ускоряет загрузку страницы, т.к. браузеры обычно кэшируют скрипты.</p>
<p>Уважаемый читатель, мы рассмотрели заголовочные теги html документа. Теперь Вы лучше ориентируетесь в оптимизации сайта и в составлении грамотного кода.</p>
<p>Здравствуйте, уважаемые читатели блога ! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов... И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке - <b><html>, <head> и <body>
</b>. Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — , поэтому затрагивать его мы не будем.</p>
<p>В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.</p>
<p>И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги <html>, <head> и <body> ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:</p>
<p><img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Dobavlyaem-tegi.png' height="157" width="156" loading=lazy loading=lazy></p>
<p>А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом <b>HTML-документе.
</b></p>
<h3>Функции тега <html></h3>
Итак, тег <html> является <b>контейнерным
</b> (). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги <head> и <body>). Открывающий тег <html> идет сразу после декларации Doctype, а закрывающий </html> стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.
<p>Теоретически, он и сам может понять что и как. Ведь ? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.</p>
<p>Даже учитывая то, что функция данного тега лишь в <b>обозначении границ содержимого
</b>, он имеет свои атрибуты (которые сейчас либо не используются вообще, либо используются крайне редко). В разных источниках указываются отличные друг от друга атрибуты, поэтому не осмелюсь выдвигать правильную версию.</p>
<p>Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом:</p>
<p><img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Atribut-Title.png' align="center" height="141" width="354" loading=lazy loading=lazy></p>
<p>А вот что вы увидите, наведя курсор на документ с данным содержимым:</p>
<p><img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Rezultat-atributa.png' height="98" width="202" loading=lazy loading=lazy></p>
<p>Предпочтительнее использовать атрибут title не в теге <html>, а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее.</p>
<h3>Функция тега <head></h3>
И следующим на очереди идет <b>тег <head>
</b>. В нем содержится вся техническая информация о странице, которая служит для помощи браузеру и поисковым системам. Тег является контейнерным и следует сразу после <html>, только в отличии от последнего, закрывающий тег </head> стоит не в конце документа, а перед открывающим тегом <body>.
<p>Какую же информацию можно увидеть в <head>? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для <b>поисковых систем и браузеров
</b>. Единственное, что вы хоть как-то можете увидеть это тег <title>, который отвечает за заголовок окна веб-страницы. Вот пример:</p>
<p><img src='https://i0.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>Текст после иконки и есть содержание тега <title>. А теперь рассмотрим содержание <head>, которое мы увидеть не можем, но которое является очень важной частью <b>создания и продвижения сайта.
</b>В первую очередь это строка</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</p><p>Это мета-тег отвечающий за <b>тип содержимого страницы
</b> (Content-Type). В данном случае, это html код в кодировке UTF-8 (content="text/html; charset=UTF-8"). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега <link>. Он указывает на связь с внешним документом. Например, строка</p><p>
<link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" />
</p><p>указывает на то, что подключен (rel="stylesheet") файл с (type="text/css"), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать <b>каскадные таблицы стилей
</b>.</p>
<p>Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с ) — наличие тегов описания, ключевых слов и canonical. Я использую <b>плагин All in One SEO Pack
</b>, поэтому они и присутствуют в пределах <head>.</p>
<p>Видно, что она состоит из трех основных секций.</p>
<ul><li><b><html>
</b>
– корень любого HTML документа, в котором располагаются все остальные секции (данный тег должен быть в единственном экземпляре, и должен присутствовать на каждой странице).</li>
<li><b><head>
</b>
– заголовок в котором прописывается служебная информация и инструкции браузеру, по отображению контента.</li>
<li><b><body>
</b>
– основная секция в которой находится контент, то есть вся полезная информация (текст, картинки, видео). Помимо контента, в этой секции расположена сетка сайта, либо его макет – описано местоположения основных разделов сайта, таких как: шапка, подвал, главное меню, боковые колонки, и т.д.</li>
</ul><p>Тег <html>
ничем особым не отличается, кроме того, что это есть корневой элемент – контейнер для всех остальных блоков. Поэтому приступим к более детальному рассмотрению секции <head>
.</p>
<p>Элементы данной секции напрямую не показываются на веб странице. Единственный тег из данной секции, который будет отображать информацию – это тег <title>
. В теге <title>
, секции <head>
, прописывается заголовок веб-страницы этот текст будет выведен в строке заголовка окна браузера.</p><p>
<html>
<head>
<title>Заголовок, будет выведен в строке заголовка браузера
