HTML
Z MiS
Obsah |
HTML
Podrobnější materiály: http://www.tvorba-webu.cz/html/
Princip jazyka HTML
- textové soubory, doplněné o formátování
- pojmy:
- tag (značka): otvírací, zavírací
- element
- entita
- atribut
- Jak se jazyk HTML vyvíjel?
Základní elementy
-
h1,h2,... -
p, (br) -
hr -
imga jeho atributy-
src... cesta k obrázku -
width... změna velikosti (ale skutečné rozlišení se nemění, stahuje se pořád obrázek v původní velikosti) -
alt... popis obrázku, který se zobrazí po najetí myší nad obrázek, nebo když se obrázek nepodaří zobrazit (vhodné i kvůli čtečkám webu pro zrakově handicapované)
-
-
a... hypertextový odkaz-
href... URL adresa odkazu
-
Příklad:
<h1>Jižní Amerika</h1>
<p>Jižní Amerika je zajímavý
<a href="http://cs.wikipedia.org/wiki/Kontinent">kontinent</a>.
</p>
<p>
<img src="amerika.jpg" alt="Jižní Amerika" />
</p>
Tabulky a seznamy
- Tabulky
-
table... ohraničení celé tabulky, -
tr... řádek tabulky -
td... buňka tabulky v řádku. -
th... buňka tabulky, která je součástí hlavičky tabulky (bude zvýrazněná).
<table> <tr><th>Id</th><th>Jméno</th><th>Počet bodů</th></tr> <tr><th>1</th><td>František Novák</td><td>15</td></tr> <table>
- Seznamy s odrážkami/číslované
-
ulresp.ol... ohraničení seznamu (začátek a konec) -
li... jedna položka seznamu, zobrazí se buď s odrážkou (uvnitř elementuul) nebo číslem (uvnitř elementuol).
<ul> <li>Úkol první: zapište text</li> <li>Úkol druhý: <ol> <li>Přeložte program</li> <li>Spusťte ho!</li> <ol> </li> <ul>
Struktura stránky
-
html- Celá stránka by měla být zahrnuta do jednoho elementu HTML.
-
head- Hlavička stránky. Informace zde uvedené popisují blíže stránku, ale na stránce se nezobrazují.
- Příklady informací: způsob kódování národních znaků, titulek stránky, odkaz na soubor s kaskádovými styly, popis stránky,....
- Více o položkách v hlavičce stránky.
-
body- Zde píšeme samotný obsah stránky, který se má zobrazit.
<html>
<head>
<meta charset="windows-1250">
<meta name="description" content="Web nejlepší cestovní kanceláře v ČR">
<title>Cestovní kancelář Leť-tam!</title>
<link rel="stylesheet" type="text/css" href="styly.css" />
</head>
<body>
... Zobrazitelný text stránky...
</body>
</html>
Kaskádové styly (CSS)
Podrobnější materiály: http://www.tvorba-webu.cz/css/
Soubor se styly
Do hlavičky HTML souboru (element <head>) musíme doplnit odkaz na soubor se styly:
<link rel="stylesheet" type="text/css" href="nazev_souboru.css" />
Základny formátování
Stylu můžeme nastavovat různé vlastnosti. Jejich výčet najdete na webu, nejběžnější uvádíme:
-
color: barva textu -
background-color: barva pozadí -
margin,padding: vlastnosti okrajů odstavce, obrázku atd. -
font-weight: tučné písmo -
font-style: kurzíva -
text-align: zarovnání textu (na střed, do bloku, vlevo, vpravo) -
text-indent: odsazení prvního řádku odstavce
Příklad:
h2 {
color: blue;
background-color: lightblue;
border: solid 2px blue;
text-align: center;
}
Vlastní styly
- Označení textu, na který se aplikuje styl (v HTML)
- Elementy:
spanadiv - V otvírací značce doplníme atribut
classs odkazem na název stylu.
- Popis stylu (v CSS)
- vlastní styl uvozujeme tečkou.
HTML soubor: index.html
<p> Text, ve kterém je <span class="OdbornyTermin">odborný termín<span>. A druhý <span class="OdbornyTermin">pojem</span> je také odborný termín. </p>
CSS soubor: styl.css
.OdbornyTermin {
font-style: italic;
color: lime;
}
Výsledek (v prohlížeči):
Text, ve kterém je odborný termín. A druhý pojem je také odborný termín.
Další zdroje
Rozdělení stránky na oddíly
Vlastnosti v kaskádových stylech
-
float: plovoucí objekt: vlevo, vpravo, na středu -
width: šířka bloku -
height: výška bloku
Vlastnosti přiřazujeme speciálním stylům, uvozeným znakem #.
Na tyto styly se odkazujeme pomocí atributu id.
HTML soubor: index.html
<div id="Menu"> Položka 1
Položka 2 </div> <p>Text text text...</p>
CSS soubor: styl.css
#Menu {
float: left;
width: 100px;
background-color: yellow;
}
Výsledek (v prohlížeči):
Položka 1
Položka 2
Text text text...Položka 2
Publikování stránek
- Viz stánka Webhosting
Praktické
- Užitečné nástroje
- Časté chyby
Cvičení
Podrobnější zdroje
- GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <http://www.tvorba-webu.cz>.
