Svet-Stranek.cz
TORRENO "PC"
TORRENO

HTML-pár rad:

HTML-pár rad

první pŘ Základ  HTML

<html>
  <head>
    <title>Má první stránka</title>
  </head>

  <body>
    Moje první html stránka.
    A nějaké další texty.
  </body>
</html>



Tento příklad si můžete zobrazit v prohlížeči. Ty barvičky jsou jen pro lepší pochopení, nehrají žádnou roli. Co znamenají jednotlivé tagy:

<html>
začíná dokument
</html>
končí dokument
<head> a </head>
začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé důležité údaje, například
<title> a </title>,
vymezující název dokumentu (může se lišit od jména souboru)
<body>
Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým začíná vlastní tělo dokumentu (angl. body = tělo).

Tímto příkladem jsem popsal základní strukturu dokumentu. Výše uvedené tagy by měl obsahovat každý html soubor.

Jestli si chcete hrát s HTML stránkou, je dobrý nápad zkopírovat si výše uvedený kód do nějakého souboru k sobě na disk a provádět experimenty.

Druhý příklad - změna vzhledu

<html>
<head>
  <title>Má druhá stránka</title>
</head>
<body>
  <h1>Nadpis</h1>
  <p>Odstavec s <b>tučným textem</b>, s <i>kurzivou</i>.
  <span style="color: red;">Červený text.</span></p>
  <h2>Nadpis druhé úrovně</h2>
  <p>Odstavec s <i><b>tučnou kurzivou. </b></i><br>
  Text po zalomení řádku patří do téhož odstavce.</p>
</body>
</html>

Také tento příklad si můžete zobrazit v prohlížeči. Už je to dost složité, ale od toho máte mozek.

V příkladu jistě vidíte strukturu, která je společná s prvním příkladem. Vyskytují se tu ale nové tagy:


Písmo:
< b >tučné< /b >
< i >kurzíva< /i >
< u >podtržené< /u >
< strike >přeškrtnuté< /strike >
< sup >horní index< /sup >

< center >zarovnání textu nebo obrázku na střed< /center >
< br >nový řádek
< p >odstavec
< hr >oddělující čára

Barva:
< FONT COLOR =" aqua " >aqua< /FONT >
< FONT COLOR =" deepskyblue " >deepskyblue< /FONT >
< FONT COLOR =" blue " >modrá< /FONT >
< FONT COLOR =" red " >červená< /FONT >
< FONT COLOR =" firebrick " >firebrick< /FONT >
< FONT COLOR =" maroon " >maroon< /FONT >
< FONT COLOR =" palegreen " >palegreen< /FONT >
< FONT COLOR =" mediumseagreen " >mediumseagreen< /FONT >
< FONT COLOR =" green " >zelená< /FONT >
< FONT COLOR =" hotpink " >hotpink< /FONT >
< FONT COLOR =" pink " >růžová< /FONT >
< FONT COLOR =" yellow " >žlutá< /FONT >
< FONT COLOR =" gold " >zlatá< /FONT >
< FONT COLOR =" khaki " >khaki< /FONT >
< FONT COLOR=" orange " >oranžová< /FONT >
< FONT COLOR=" chocolate " >čokoládová< /FONT >
< FONT COLOR=" peru " >peru /FONT >
< FONT COLOR=" fuchsia " >fialová< /FONT >
< FONT COLOR=" blueviolet " >blueviolet< /FONT >
- světlejší barvu vytvoříme když před název barvy přidáme light
(např.lightgreen -světle zelená )
- tmavší barvu vytvoříme když před název barvy přidáme dark
(např.darkgreen - tmavě zelená )

Styly:
< FONT FACE= " comic sans ms " >comic sans ms< /FONT >
< FONT FACE= " times new roman " >times new roman< /FONT >
< FONT FACE= " thickhead " >thickhead< /FONT >
< FONT FACE= " arial " >arial < /FONT >
< FONT FACE= " monotype corsiva " >monotype corsiva< /FONT >
< FONT FACE= " impact " >impact< /FONT >
< FONT FACE= " script " >script< /FONT >
< FONT FACE= " black chancery " >black chancery< /FONT >
< FONT FACE= " ms sans serif " >ms sans serif< /FONT >
< FONT FACE= " ms serif " >ms serif< /FONT >

Velikost:
< font size= " 1 " >1< /font >
< font size= " 2 " >2< /font >
< font size= " 3 " >3< /font >
< font size= " 4 " >4< /font >
< font size= " 5 " >5< /font >
< font size= " 6 " >6< /font >
< font size= " 7 " >7< /font >

Jezdící text:
< marquee > pohyblivý text doleva< /marquee >

pohyblivý text doleva
< marquee direction= " right " > pohyblivý text doprava< /marquee >
pohyblivý text doprava
< marquee behavior= " alternate " > pohyblivý text tam a zpět< /marquee >
pohyblivý text tam a zpět
< marquee direction= " down " > pohyblivý text dolů< /marquee >
pohyblivý text dolů
< marquee direction= " up " > pohyblivý text nahorů< /marquee >
pohyblivý text nahorů

< marquee bgcolor= " yellow " > pohyblivý text s pozadím< /marquee >
pohyblivý text s pozadím

Obrázky:
< img src= " ...URL... " >
URL- je adresa obrázku,kterou zjistíme,když klikneme
pravým tlačítkem na myši na obrázek a zvolíme vlastnosti.
adresu pak doplníme místo ...URL...
< img src= " http://www.sirmi.ic.cz/19.gif " >

Šedivý obrázek:
< img src= " http://www.sirmi.ic.cz/19.gif " style= " filter:Gray " >
Prostorový efekt:
< img src= " http://www.sirmi.ic.cz/19.gif " style= " filter:xray " >
Průhledný obrázek:
< img src= " http://www.sirmi.ic.cz/19.gif " style= " filter:alpha(opacity=20) " >
Otočený vertikálně:
< img src= " http://www.sirmi.ic.cz/19.gif " style= " filter:flipV " >
Otočený horizontálně:
< img src= " http://www.sirmi.ic.cz/19.gif " style= " filter:flipH " >
Popis obrázku:
(text kaos se objeví po najetí kurzoru myši na obrázek)
< img src= " http://www.sirmi.ic.cz/19.gif " alt= " kaos " > kaos
Obrázek v rámečku:
< img src= " http://www.sirmi.ic.cz/19.gif " border= " 2 " >
Jezdící obrázek:
< marquee >< img src= " http://www.sirmi.ic.cz/19.gif " >< /marquee >


Jezdící obrázek tam a zpět:
< marquee behavior= " alternate " >< img src= " http://www.sirmi.ic.cz/19.gif " >< /marquee >
Jezdící obrázek s pozadím:
< marquee bgcolor= " yellow " > < img src= " http://www.sirmi.ic.cz/19.gif " >< /marquee >
Odkazy:
< a href= " ..název stránky.... " >text< /a >

< a href= " http://seznam.cz " >seznam.cz< /a > seznam.cz
Otevření v novém okně:
< a href= " http://seznam.cz " target= " _blank" >seznam.cz< /a > seznam.cz
Mail:
< a href= " mailto:tvujmail@seznam.cz " > mail< /a > mail
Pozadí:
< body style = " background-color:pink " >

Tapeta:
< body style= " background-image : url ( ' ...URL... ' ) " >
URL-zjistíme stejně jako u obrázku ve vlastnostech tapety.

Písnička:
< bgsound src= " ...URL... " loop= " -1 " >
URL-zjistíme stejně jako u obrázku a u tapety.

návštěvníků stránky
celkem37 199