Html

U studentů se předpokládá základní znalost html v rozsahu, popsaném v pátém cvičení předmětu ZPP (předchůdce PPS - v PPS je nyní požadovaný rozsah větší, původní cvičení ZPP naleznete zde). Pro naše potřeby nebude nic složitějšího třeba, veškerý kód, který budeme (např. v php) chtít použít, si nejprve vyzkoušíme ve vhodném editoru (v současné době doporučuji nvu, který je k dispozici zdarma), a pak použijeme v rámci php programů. I nvu dělá nežádoucí zásahy do kódu, proto je mnohdy vhodnější pracovat v poznámkovém bloku, například v učebnách je dostupný Notepad++, ještě vhodnější je PSpad. Wysiwyg editory jsou k dispozici dokonce i v on-line verzi, zkuste najít "html online editor", ale těmi lze editovat jen úseky textu.

Jako učebnici doporučuji stránky, jejichž autorem je ing. Jiří Kosek. Podotýkám, že tento autor netrvá na použití xhtml, raději má volnou syntaxi, například nepíše ani </p> a </td>. U našich studentů je to jedno, zápočet dávám já.

Použití stylů

S odvoláním na posledně uvedenou literaturu, kde je uveden následující příklad: (upraveno)

<HTML>
 <HEAD>
 <TITLE>Titulek stránky</TITLE>
 <LINK REL=STYLESHEET TYPE="text/css"
 HREF="http://iat.fs.cvut.cz/stranky.css">
<STYLE TYPE="text/css">
 @import url("http://style.com/zakladni.css")
 H1 { color: blue }
 </STYLE>
</HEAD>
<BODY>
<H1>Nadpis je krásně modrý</H1>
<P STYLE="color: green">Ekologický paragraf je zelený.</P>
 </BODY>
</HTML>

Základní definici stylu nejlépe odpovídá fialově zvýrazněná možnost. V tom případě je uvnitř hlavičky celá vypsána, tj. mezi značkami <head> a </head> je mezi značkami <STYLE TYPE="text/css"> a </STYLE> uvedena řádek po řádce definice stylů jednotlivých prvků, vždy ve tvaru

název-prvku { vlastnost : hodnota; vlastnost : hodnota; ... }

Název prvku je například h1, h2, p, a, td, body a jiné html značky. Pokud potřebujeme vytvořit nějaký další, musíme použít označení oddílu, značku "DIV", nebo "SPAN" ("span" při použití nezpůsobí formátování, takže jej lze využít i jen na části slov). Ty mají vlastnost třída, kterou můžeme připojit za toto označení pomocí tečky, například nadefinujeme novou třídu zvyraznit se žlutým pozadím:

span.zvyraznit { background-color : yellow }

Část textu (někde v těle dokumentu) pak můžeme označit značkou span s uvedením nově zavedené třídy:

<span class="zvyraznit">Označený text</span>

Styly se často používají pro sjednocení vzhledu dokumentů. Za tím účelem se ukládají do samostatných souborů. Ty si můžeme připojit buď pomocí direktivy @import, která na dané místo definice stylů vloží soubor (jako by zde byl celý napsán - odpovídá direktivě "include" v programovacích jazycích), nebo častěji se umisťují v samostatném souboru (modrá ukázka):

<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/super
.css">

css soubory bývají uváděny relativně, často jsou ve stejném adresáři, jako daný soubor (pak se nemusí vypisovat cesta).

in-line definice

-uvnitř vhodného prvku použijeme parametr style=, který obsahuje jméno vlastnosti a přiřazení její hodnoty (ve výše uvedené ukázce provedeno zeleně). Zkuste například nepodtržený hypertextový odkaz:

<a style="text-decoration:none" href="http://www.w3schools.com/css/css_text.asp">W3 School</a> - ukázka viz text o tři řádky níže.

Pokud potřebujeme upravit obecný kousek textu, například pozadí jednoho slova, můžeme opět použít tag span:

<span style="background-color : yellow">zvýrazněný text</span> ... zvýrazněný text

Další ukázky naleznete například na W3 School.


Vhodná pomůcka pro zadání následujícího samostatného úkolu: příklady stránek ukázka1a, ukázka1b a k nim stylesheet (pravé tlačítko, uložit soubor jako...).

Zkuste si: Stáhněte si tři výše uvedené soubory do svého adresáře a k html souborům připojte soubor s kaskádovými styly (to je ten třetí). Vyzkoušejte si zvýraznění vybraných slov pomocí značky "span" a jedno náhodné slovo (jiné?) označte pruhem nad (text-decoration: overline).


Ještě zbývá citace ze stránek PPS:

 

Lokálně deklarované styly

Styl můžete kromě připojení z css souboru napsat i přímo tam, kde se použije. Výhodou je, že pak se nemusí nijak jmenovat. Dva příklady použití:

čára nad textem:

<p style="text-decoration : overline;">
Tady nad tím textem je pruh.
</p>

odstranění případného podtržení u hypertextového odkazu:

<a href="#styly" style="text-decoration : none;">
Tento odkaz není podtržen</a>

Pro obarvení několika písmenek musíme text k obarvení nějak označit. Na to nám slouží značka <span>, která jinak neznamená vůbec nic (používá se k pojmenování úseku textu, například kvůli programování v javascriptu, viz stránku předmětu Programování pro web - výše právě na této stránce, doplněno). Změňme barvu textu:

Normální text, <span style="color : red">červený text</span>, normální text.

Barvu ovšem změní i <font color="red">. "Zvýraznění" textu:

Normální text, <span style="background-color: yellow">zvýrazněný text</span>.<br>

Ještě vyzkoušet:

Tady nad tím textem je pruh.

Tento odkaz není podtržen.

Normální text, červený text, normální text, zvýrazněný text.

 


Okraje u tabulek

Pokud nám nevyhovují standardní typy, musíme opět použít parametr "style=...". Příklad tabulky, u které jsou jen některé okraje rámečků, je na serveru diplomky.fs.cvut.cz - vzhledem k dočasnosti stránek cituji:

<td align="right" 
STYLE="font-size:90%; border-left: 1px dashed #333333; border-bottom: 2px dotted #990099;">

Parametry lze použít v rámci elementů <tr>, ale zejména <td>. Zmíněná buňka bude mít čárkovaný tmavě šedý (odstín #333333) levý okraj a tečkovaný dolní okraj fialové barvy tloušťky 2 pixely:

To je ta buňka

Nastavit druh čáry lze například u:

Pořadí parametrů v tomto případě je:

tlouštka    styl    barva

Zkuste si do vyhledávače zadat několik klíčových slov a jistě najdete i význam dalších, například border-width-left, border-color, margin, margin-left, padding-top, ...   (slova, obsahující pomlčku, je vhodné při vyhledávání zadávat v uvozovkách, protože pomlčka znamená "najít jen stránky, které neobsahují zadané slovo").

 

Absolutní umístění objektu

Občas potřebujeme umístit například logo firmy na konkrétní místo. Můžeme toho dosáhnout přidáním parametru style, například:

style="position: absolute; left: 333px; top: 1px"

Umísťujeme levý horní roh (např. obrázku či tabulky). Lze umístit i část textu, oddělíme-li jej uzavřením do tagu "DIV". Zbytek stránky pak bude náš objekt obtékat. Pokud by se měly dva prvky (např. obrázky) překrývat, je třeba, aby jeden byl přesunut do jiné logické vrstvy - to by způsobilo například nastavení z-indexu:

<span style="position: absolute;z-index: 1">

Tím lze umístit například někam na stránku na pozadí logo (klasický obrázek na pozadí by se opakoval, což není vždy žádoucí). Prvky se stejným z-indexem se samozřejmě vzájemně vyhýbají (obtékají).

Poznámka: obdobných efektů lze dosáhnout použitím javascriptu.

Poznámka: http://www.jakpsatweb.cz/favicon.html - jak si přidat ikonku.

Poznámka. title

Titulek elementu, doplňková informace. V dnešních prohlížečích se zobrazuje ve žluté bublině při přejíždění elementu myší (to dříve šlo jenom atributem alt u obrázků). To je hezké zvláště u odkazů:

<a href="http://www.jakpsatweb.cz/" title="o tvorbě, údržbě a zlepšování internetových stránek">Jak psát web</a>