HTML kód základy

Zobraziť detaily

Prírodné vedy » Informatika

Vytlačiť Uložiť

Autor: diana
Typ práce: Referát

Dátum: 30.09.2014
Jazyk: Slovenčina

Rozsah: 1 248 slov
Počet zobrazení: 5 465

Tlačení: 440
Uložení: 450

HTML (HyperText MarkUp Language)

Web stránky sú informačné dokumenty, ktoré môžu obsahovať text, grafiku, zvuk, video, animáciu a 3D grafiku, môžu obsahovať aj odkazy na iné dokumenty.

V roku 1989 vo švajčiarskom výskumnom stredisku CERN (Európske laboratórium pre nukleárny výskum) v Ženeve definoval Tim Berners-Lee hypertextový systém pre CERN. O rok neskôr napísal Tim Berners-Lee prvý program pre tvorbu hypertextových stránok, ktoré nazval „World-Wide Web“.
Základom WWW stránok prezentovaných na Internete sú dokumenty založené na báze jazyka HTML (textový značkový jazyk)

Dokument vo formáte HTML je v podstate súbor textového typu (ASCII), text je doplnený špeciálnymi značkami (tagy), ktoré špecifikujú príkazy jazyka (môžu byť párové a nepárové).
Súbory so stránkami HTML (XHTML ) mávajú príponu HTML alebo HTM (štandardom je prípona HTML, príponu HTM používa iba Microsoft). Každý adresár na Internete by mal obsahovať súbor INDEX.HTML – prehliadač ho bude považovať za východzí a načíta ho prednostne.
Stránky HTML môžeme vytvárať:

- priamo písaním textu zdrojového kódu (napr. v textovom editore PSPad)
- pomocou špecializovaného softwéru – editorov HTML napr.: MS Front Page, NVU, KompoZer, Adobe Dreamweaver, a iné
- môžeme ich konvertovať z dokumentov iných typov

Poznámka 2: Jazyk XHTML má oproti HTML prísnejšie pravidlá, má aj viac možnosti upravenia www stránky.

Značky (Tagy)
Dokument jazyka (X)HTML sa skladá predovšetkým zo značiek (tagov). Značka označuje časť dokumentu, čím mu dáva význam, t.j. hovorí prehliadaču napríklad: toto je odstavec.
Značky sa zapisujú párovo, t.j.:
- značka otváracia – hovoríme prehliadaču, kde označená časť začína
- značka uzatváracia – hovoríme prehliadaču, že tu označená časť končí

Zápis: <značka>
Obsah značky – text
</značka>

Poznáme aj nepárové značky. Zápis: <značka /> (pred lomítkom je medzera)

Poznámka 1: značky obyčajne píšeme malými písmenami, ale pre prehľadnosť sú v texte.
Štruktúra dokumentu HTML
<!DOCTYPE .... > – deklarácia dokumentu html (je stále rovnaká)
<HTML>
<HEAD>
<TITLE> Názov stránky </TITLE>
</HEAD>
<BODY>

Vlastný obsah WWW stránky

</BODY>
</HTML>

dokument je uzavretý medzi značkami <HTML> a </HTML>, hlavičku ohraničujú značky <HEAD> a </HEAD>, telo dokumentu je medzi značkami <BODY> a </BODY>

Príkazom TITLE sa zobrazuje text, ktorý bude umiestnený na titulnej lište okna umiestňuje sa do hlavičky
Formát: <TITLE> text </TITLE>

Príkaz BODY
plní dve funkcie:

- uzatvára do seba celú vlastnú stránku
- definuje vlastnosti stránky

syntax:
<BODY background=“...“ bgcolor=“...“ text=“...“ link=“...“ vlink=“...“ alink=“...“ LEFTMARGIN=“nn“ TOPMARGIN=“nn“ >
......vlastný obsah stránky.....
</BODY>
BACKGROUND – obsahuje meno súboru, ktorý vyplní pozadie stránky, najčastejšie sa používa GIF, JPG (JPEG)
BGCOLOR – farba pozadia stránky
TEXT – základná farba textu (implicitne je čierna)
LINK – farba ešte nenavštíveného odkazu
VLINK – farba navštíveného odkazu, implicitne modrá, hex. 800080
ALINK – farba aktuálneho odkazu t.j. sfarbenie odkazu v okamihu, keď sa na odkaz klikne myšou, implicitne hex. FF0000
LEFTMARGIN – udáva koľko pixelov od ľavého a pravého okraja začína zobrazenie stránky
TOPMARGIN – udáva koľko pixelov od horného a dolného okraja začína zobrazenie stránky

Práca s textom

Nadpisy

HTML definuje šesť úrovní preddefinovaných nadpisov označených ako H1 až H6
H1 ja najväčší, H6 najmenší (veľmi sa nepoužíva)
Formát:
<H1> vložený nadpis </H1>
...
<H6> vložený nadpis </H6>

nadpis môžeme aj zarovnávať
ALIGN=”LEFT/CENTER/RIGHT/JUSTIFY”
Zarovnať môžeme vľavo/na stred/vpravo/na oba okraje stránky

napr. <H1 ALIGN=”CENTER”> nadpis je vycentrovaný </H1>

Formátovanie textu

Text bez formátovacích charakteristík sa nastavuje ako (base font), základným písmom je Times Roman (patkové písmo)

<STRONG> text </STRONG> tučné písmo
<I> text </I> kurzíva
<U> text </U> podčiarknuté písmo
<STRIKE> text </STRIKE> preškrtnuté písmo
<SUB> text </SUB> dolný index
<SUP> text </SUP> horný index

<BR /> slúži k zalomeniu riadka, je to nepárový tag

<P> text </P> slúži na vytvorenie odstavca

<P ALIGN=”LEFT/CENTER/RIGHT”> text </P> - zarovnanie odstavca

FONT mení veľkosť, farbu a font písma

<FONT [SIZE="x"] [COLOR="#RRGGBB"] [FACE="font"]> text </FONT>
SIZE=”0..7“ veľkosť písma
COLOR=”red” farba písma červená
FACE=”Arial” názov fontu

Veľkosť písma môže byť zadaná absolútne alebo relatívne. Absolútna veľkosť je číslo v rozmedzí od 1 až 7. Prednastavená veľkosť normálneho písma je 3. Relatívna veľkosť je číslo začínajúce plus alebo mínus a vzťahuje sa k veľkosti písma zadaného tagom (značkou) <BASEFONT>. Pokiaľ nie je uvedený vzťahuje sa k normálnej veľkosti písma.
Pr.: <FONT SIZE=”+2”>písmo zväčšené o dve úrovne </FONT>

Farba písma:
AQUA (jasná tmavozelená) BLACK (čierna)
BLUE (modrá) FUCHSIA (anilínová červená)
GRAY (sivá) GREEN (zelená)
LIME (citrónová zelená) MAROON (gaštanová)
NAVY (tmavá modrá) OLIVE (olivová)
PURPLE (purpurová) RED (červená)
SILVER (strieborná) TEAL (tmavá modrozelená)
WHITE (biela) YELLOW (žltá)

Odkazy a obrázky

Vloženia hypertextového odkazu

Používa sa párová značka: <A> text </A> s parametrom href=“....“
Definuje odkaz na iný dokument, alebo na inú časť toho istého dokumentu, na obrázok, alebo E mail.

<A href=”URL_adresa dokumentu” NAME=”interný odkaz” TITLE=”popis stránky” TARGET=”meno okna”> zobrazený text </A>

Pr:
<A href=http://www.svcmi.sk/index.html> skok na stránku zoznam </A>
<A href=”mailto:meno@pocitac.sk”> napíš mi! </A>
<A href=”#začiatok”> skok na začiatok </A>
v tomto prípade musí byť vložené niekde v dokumente <A NAME=“začiatok”</A>

Vloženie obrázka

Na vloženie obrázka sa používa nepárová značka <IMG> s parametrom SRC=“...“

Napr.:

<IMG src=”obr1.gif”> obrázok umiestnený priamo v adresári v ktorom je
aktuálny dokument
<IMG src=“../gifs/obr2.gif“> obrázok umiestnený v adresári gifs vrátane celej
cesty
<IMG src=”http://www.cpress.sk/gifs/obr3.gif obrázok zadaný s celou URL
adresou
Ďalšie parametre:
ALIGN="top/middle/bottom/left/right" zarovnanie obrázka hore/na stred /dole/vľavo/vpravo
HEIGHT=”celé kladné číslo” výška obrázku v pixeloch
WIDTH=”celé kladné číslo šírka obrázku v pixeloch
BORDER=”celé kladné číslo” šírka rámčeka okolo obrázka
HSPACE=” celé kladné číslo“ voľný priestor v pixeloch po ľavej a pravej strane obrázku
VSPACE=”celé kladné číslo“ voľný priestor v pixeloch nad a pod obrázkom
ALT=”text” text, ktorý bude zobrazený po načítaní obrázka

Nečíslované zoznamy

Jednoduchý zoznam vytvoríme pomocou
<UL type=“nnn“> n môže byť: disk
<LI> prvá položka </LI> square
... circle ...
<LI> n tá položka </LI>

</UL>
podobné príkazy ako UL sú MENU a DIR

Číslované zoznamy

<OL type=”nnn”> kde n znamená:
<LI> prvá položka </LI>
A veľké písmená
a malé písmená
<LI> n tá položka I rímske číslice
</OL> I malé rímske číslice
1 latinské číslice

ak potrebujeme k definovanému pojmu uviesť aj jeho vysvetlenie používame

<DL>
<DT> pojem 1 <DD> vysvetlenie pojmu 1
<DT>pojem 2 <DD> vysvetlenie pojmu 2
</DL>

TABUĽKY

<TABLE ALIGN=”LEFT/CENTER/RIGHT” BACKGROUND=”url” BGCOLOR=”farba” BORDERCOLOR=”farba” BORDER=”n” CELLPADDING=”n” CELLSPACING=”n” FRAME=”frame-type” RULES=”rule-style” WIDTH=”n”>
vlastný obsah tabuľky
</TABLE>

BORDER - určuje šírku rámčeka tabuľky v pixeloch, ak nie je definovaný nemá tabuľka rámček
BORDERCOLOR – farba rámčeka
CELLPADDING – vzdialenosť medzi okrajom bunky a jej obsahom
CELLSPACING – určuje vzdialenosť medzi bunkami
FRAME – určuje ako vyzerá vonkajší rámček
VOID – odstraňuje vonkajšie rámčeky
ABOVE – zobrazí rámček iba nad horným okrajom celej tabuľky
BELLOW - zobrazí rámček pod dolným okrajom tabuľky
HSIDES – nad a pod tabuľkou
VSIDES – vľavo a vpravo od tabuľky
LHS – vľavo od tabuľky
RHS – vpravo od tabuľky
RULES – určuje, ktoré vnútorné rámčeky sa zobrazia
NONE – odstráni všetky vnútorné
BASIC – zobrazí vodorovné čiary medzi hlavičkou, telom a pätou
ROWS - zobrazí vodorovné čiary medzi všetkými riadkami
COLS - zobrazí vodorovné čiary medzi všetkými stĺpcami
WIDTH – určuje šírku tabuľky v pixeloch, alebo v percentách veľkosti okna

Riadky tabuľky

<TR ALIGN=”LEFT/CENTER/RIGHT” BGCOLOR=”farba” BORDERCOLOR=”farba” NOWRAP VALIGN=”MIDDLE/TOP/BOTTOM/BASELINE”>
vlastný obsah riadku
</TR>

NOWRAP – určuje, že texty tabuľky nebudú zalomené v riadkoch (nebudú viacriadkové texty), funguje iba vtedy, ak nie je zadaná fixná šírka tabuľky parametrom WIDTH
VALIGN – určuje zvislé zarovnanie textu

Bunky tabuľky <TD> text1</TD>

Vodorovná čiara

Na čiaru sa používa tag <HR />
parametre, napr.: size=50%
size=700 px

Napr.: <hr size=90% />

Jednotlivé príkazy si pozrite na web stránke Kira-testovací web.html