HTML kód základy

Ostatné » Informatika

Autor: diana
Typ práce: Referát
Dátum: 30.09.2014
Jazyk: Slovenčina
Rozsah: 1 248 slov
Počet zobrazení: 3 670
Tlačení: 307
Uložení: 322
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 ULMENU a DIR
 
Číslované zoznamy
 
<OL type=”nnn”>  kde n znamená:
<LI> prvá položka </LI>
veľké písmená
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
Oboduj prácu: 10 9 8 7 6 5 4 3 2 1

Kľúčové slová

Vyhľadaj ďalšie vhodné študentské práce pre tieto kľúčové slová:

#html #informatika #hypertext #zalozenie web stranky #webové služby #nový odstavec #vytvorenie web stranky #html 5 #xhtml #znacka #taliančina základy


Odporúčame

Ostatné » Informatika

:: KATEGÓRIE – Referáty, ťaháky, maturita:

0.046