Značky, tagy používané v XHTML 1.0 Strict

02.04.2011 19:15

K tomu, aby ste vytvorili funkčný web, nepotrebujete poznať všetky značky jazyka XHTML. V predchádzajúcom článku Z čoho sa skladá XHTML dokument ste sa už stretli s niektorými značkami. My si dnes predstavíme tie základné.

Najskôr si v editore PSPad otvorme náš známy dokument prvy-pokus.html. Všetko si poctivo precvičujte. Niet nad to, keď vidím čo a ako funguje.

`html`

Štandardná značka, ktorou začína aj končí každý XHTML dokument.

Príklad použitia značky `<html>`

Príkladom použitia tejto značky je nami vytvorený dokument prvy-pokus.html.

`head`

Značka <head> vymedzuje hlavičku dokumentu, ktorá obsahuje dôležité informácie o stránke. S výnimkou značky <title> je obsah hlavičky dôležitý najmä pre internetové prehliadače.

Príklad použitia značky `<head>`

Príkladom použitia tejto značky je nami vytvorený dokument prvy-pokus.html. A samozrejme si všimnite aj ukážku zdrojového kódu, ktorú sme uviedli v predchádzajúcom článku Z čoho sa skladá XHTML dokument.

`title`

Nesmierne dôležitá značka, ktorá predstavuje titulok stránky, názov webovej stránky. Zobrazuje sa v hornej ľavej časti prehliadača a tiež je to prvá informácia, ktorú vidí potenciálny čitateľ vo výsledkoch vyhľadávania.

Príklad použitia značky `<title>`

V zdrojovom kóde zmeňte titulok stránky napr. nasledovne: (samozrejme vhodné bude použiť vlastný názov)

<title>Moja prvá webová stránka</title>

Opäť si v internetovom prehliadači pozrite výsledok.

`link`

Slúži na prepojenie webovej stránky s iným súborom.Najčastejšie sa využíva pre načítanie externého štýlu CSS. Praktickú ukážku si ukážeme neskôr, keď budeme vedieť trochu viac o kaskádových štýloch.

Príklad použitia značky `<link>`

`meta`

Štandarná značka, ktorá v sebe nesie informácie, ktoré určí dizajnér a ktoré sú väčšinou indexované aj vyhľadávačmi. Pomocou nich sa napr. nastavuje jazyk dokumentu, kódovanie, informácia o autorovi, o tom či stránka má alebo nemá byť indexovaná vyhľadávačmi a pod.

Niekoľko príkladov použitia značky `<meta>`

`body`

Do tejto značky patrí všetok obsah, ktorý je viditeľný a určený pre užívateľov. V predošlom článku sme do tela stránky napr. umiestnili vetu Ahoj kamarát!. Samozrejme môžete túto minivetu zmeniť.

Príklad použitia značky `<body>`

<body>Ahoj kamarát! Dnes je super deň, za chvíľu vytvorím svoj prvý web.</body>

A dostávame sa k značkám, ktoré sú potrebné pre správnu štruktúru webu.

`p`

Značka pre blok textu, odstavec. Charakteristická je automatickým zalomením po uzavretí. Odstavce sú navzájom odsadené, medzery za a pred odsekom je možné elegantne nastaviť pomocou CSS.

Príklad použitia značky `<p>`

<p>Ahoj kamarát! Dnes je super deň, za chvíľu vytvorím svoj prvý web.</p><p>Vidíte? Ukončujúcou značkou sa text zalomil. A teraz tu napíšte alebo skopírujte nejaký text, aby ste videli, že obidva odstavce sú od seba skutočne odsadené.</p>

`br`

Značka, ktorá je nepárová a slúži na zalomenie textu. Pozorne sledujte, čo sa stane s naším textom.

Príklad použitia značky `<>`

<p>Ahoj kamarát!<br />Dnes je super deň,<br />za chvíľu vytvorím svoj prvý web.</p><p>Vidíte?<br /><br /><br /><br />Štyrikrát použitá značka br.</p>

`table`

Základná značka, pomocou ktorej dokážeme vytvárať tabuľky.

`tr`

Základná značka, ktorá umožňuje tvorbu riadkov tabuľky.

`td`

Základná značka umožňujúca tvorbu jednotlivých buniek tabuľky.

Príklad použitia značiek `<table> <tr> <td>`

<table>
<tr>
<td>P.č.</td>
<td>Meno a priezvisko</td>
<td>Trieda</td>
</tr>
<tr>
<td>1.</td>
<td>Peter Veselý</td>
<td>II.A</td>
</tr>
</table>

Zdá sa vám, že tej tabuľke niečo chýba? Je to len ukážka, viac o tvorbe tabuliek sa dozviete v samostatnom článku venovanom práve tabuľkám.

`img`

Značka, ktorá je nepárová a slúži na vkladanie obrázkov do webovej stránky. Aj tejto značke sa budeme venovať samostatne v článku Vkladanie obrázkov, preto len jednoduchá ukážka.
Do priečinku, v ktorom je umiestnený váš súbor prvy-pokus.html skopírujte ľubovoľný obrázok. V nasledovnom kóde namiesto nazovobrazku.jpg samozrejme napíšte názov vášho obrázku.

Príklad použitia značky `<img>`

`a`

Základná značka pre tvorbu odkazov na stránky, dokumenty, obrázky... Viac v samostatnom článku Tvorba odkazov.

Príklad použitia značky `<a>`

<a href="https://www.rz-nabytok.sk/" title="Lacný nábytok = rz-nabytok.sk">Lacný nábytok</a>

`div`

Táto značka je dôležitá predovšetkým pre CSS. Predstaviť si ju môžeme ako časť stránky, napr. obdĺžnik, do ktorého môžeme umiestniť všetko, vrátane ďalších značiek div. Zohráva nesmiernu úlohu pri návrhu webu, pri vytváraní samotného vzhľadu webovej stránky a jej prvkov. Používať ju budeme v okamihu, keď sa naučíme základy CSS.Je to bloková značka, čiže dochádza k zalomeniu riadka.

Príklad použitia značky `<div>`

<div>
Tu môžete napísať ľubovoľný text v odseku. Môžete vložiť obrázok <img src="nazovobrazku.jpg" alt="" title="" /> Alebo hocičo iné.
</div>
<div>
Všimnite si, že použitím ďalšej značky <code>div</code> došlo k zalomeniu riadka.
</div>

`span`

Značka, ktorá sa podobne ako div používa na pridelenie štýlu konkrétnemu obsahu. Rozdiel je v tom,že span je riadková značka, čiže nedochádza k zalomeniu riadka.

Príklad použitia značky `<>`

<p>
<span style="color:red">Tu je červený text</span> a tu bude <span style="color:blue;">modrý text</span>.
</p>

Ďalšie značky si budeme predstavovať neskôr, keď budeme ovládať aspoň základy CSS a zároveň sa začneme zaoberať aj formulármi a ich spracovaním pomocou JavaScriptu. Kompletný zoznam značiek nájdete na stránke https://www.w3schools.com/tags/default.asp.

V ďalšom článku sa dozviete čo sú a načo slúžia parametre jednotlivých prvkov.

Štítky:

xhtml | tagy | prvky

—————

Späť

Aj TY to dokážeš! Stačí len nabrať odvahu.Aj TY to dokážeš! Stačí len nabrať odvahu.

Značky, tagy používané v XHTML 1.0 Strict

`html`

Príklad použitia značky `<html>`

`head`

Príklad použitia značky `<head>`

`title`

Príklad použitia značky `<title>`

`link`

Príklad použitia značky `<link>`

`meta`

Niekoľko príkladov použitia značky `<meta>`

`body`

Príklad použitia značky `<body>`

`p`

Príklad použitia značky `<p>`

`br`

Príklad použitia značky `<>`

`table`

`tr`

`td`

Príklad použitia značiek `<table> <tr> <td>`

`img`

Príklad použitia značky `<img>`

`a`

Príklad použitia značky `<a>`

`div`

Príklad použitia značky `<div>`

`span`

Príklad použitia značky `<>`

Štítky:

Menu

Novinky

Vytvorme jednoduchý web - HTML&CSS

Spustili sme webovú prezentáciu o tvorbe webu

Aj TY to dokážeš! Stačí len nabrať odvahu.Aj TY to dokážeš! Stačí len nabrať odvahu.

Značky, tagy používané v XHTML 1.0 Strict

html

Príklad použitia značky <html>

head

Príklad použitia značky <head>

title

Príklad použitia značky <title>

link

Príklad použitia značky <link>

meta

Niekoľko príkladov použitia značky <meta>

body

Príklad použitia značky <body>

p

Príklad použitia značky <p>

br

Príklad použitia značky <>

table

tr

td

Príklad použitia značiek <table> <tr> <td>

img

Príklad použitia značky <img>

a

Príklad použitia značky <a>

div

Príklad použitia značky <div>

span

Príklad použitia značky <>

Štítky:

Menu

Novinky

Vytvorme jednoduchý web - HTML&CSS

Spustili sme webovú prezentáciu o tvorbe webu

`html`

Príklad použitia značky `<html>`

`head`

Príklad použitia značky `<head>`

`title`

Príklad použitia značky `<title>`

`link`

Príklad použitia značky `<link>`

`meta`

Niekoľko príkladov použitia značky `<meta>`

`body`

Príklad použitia značky `<body>`

`p`

Príklad použitia značky `<p>`

`br`

Príklad použitia značky `<>`

`table`

`tr`

`td`

Príklad použitia značiek `<table> <tr> <td>`

`img`

Príklad použitia značky `<img>`

`a`

Príklad použitia značky `<a>`

`div`

Príklad použitia značky `<div>`

`span`

Príklad použitia značky `<>`