Toto je 21. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Toto je 21. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
V dnešním díle se podíváme na to, co je vlastně HTML a co CSS, stručnou historii HTML a CSS spolu se základním vysvětlením struktury.
Jazyk HTML neboli Hypertext Markup Language - hypertextový značkovací jazyk slouží pro tvorbu www stránek. Strukturu tvoří tzv. HTML tagy. HTML soubory mají koncovku .html .
V roce 1989 spolupracovali Tims Berners-Lee a Robert Cailliau na informačním systému pro CERN. Vzhledem ke složitosti doposud používaného řešení byl navržen jazyk HTML a protokol HTTP. Zároveň byl napsán první prohlížeč s názvem WorldWideWeb. První verze HTML pochází z roku 1991. První prohlížeče přichází o rok později a nepodporují grafický režim. V roce 1993 přichází verze 2.0 a přichází první grafický prohlížeč. V roce 1994 přichází Netscape. V roce 1996 se oficiálně objevuje verze 3.2 ( doplněná verze 2.0 o tabulky ) a na scénu přichází prohlížeč od Microsoftu MSIE. Roku 1997 vychází verze HTML 4.0. Jendá se o verzi 3.2 + rozšíření tabulek, obsahuje rámy, formuláře a CSS. V roce 1999 přichází verze 4.1.
Jazyk HTML je množina značek ( tagů ) a jejích vlastností. Mezi značky se vkládá obsah a značky tento obsah dle atributů formátují. Názvy značek a jejich vlastností se uzavírají mezi úhlové závorky <>. Většina značek musí být označena začátkem a koncem ( uzavřením prvku ). Ukončení se zapisuje </tag> . Např.: <i>Text pro formátování</i> - text by byl kurzívou. Některé značky jsou ovšem nepárové jako např.: <br> - odřádkování.
Klasickým příkladem pro tag s atributy je odkaz.
<a href="http://nekam.neco" title="Odkaz" target="_blank">Text odkazu</a>
Cascading style sheet jsou styly, které pomáhají ve formátování webových stránek. Styly lze psát jak do externího souboru, tak i do hlavičky HTML. Kvůli přehlednosti je více než žádoucí mít CSS styly psané v externím souboru s příponou .css .
Pro napojení externích css použijeme:
<head><link rel='stylesheet' href='styles.css' type='text/css'></head>
První návrh CSS vznikl v roce 1994, CSS 1 bylo vydáno v roce 1996. CSS 1 se omezoval na písma a barvy. První podpora CSS 1 byla Internet Explorerem verze 3 z roku 1996. Praktická podpora CSS v prohlížečích přichází až kolem roku 1998 a to včetně pozicování. CSS 2 se ustanovila kolem roku 2000. V roce 2001 přichází CSS 3. Verze 3 přináší spoustu novinek a to např.: transformace, přechody, animace. Dále doplňuje příkazy pro pozadí, border a mnohé další funkce.
Definice kaskádových stylů se skládá z několika různých pravidel. Každé pravidlo obsahuje selector a blok deklarací a takový blok obsahuje deklarace oddělené středníkem. Deklarace se pak skládá z vlastnosti a hodnoty. Vlastnost je od hodnoty oddělená dvojtečkou. V případě, že chcete zvýšit význam zápisu deklarace, lze použít !important.
p {text-align: left;font-size: 16px;font-family: Arial;color: #000;text-tranform: uppercase;}
CSS zformátuje dle zápisu text. V případě, že chceme napsat jiný styl pro odstavec, využijeme buď třídu a nebo id. Id se používá pro elementy, které se v těle webu již neopakují. Třídy naopak pro elementy které se opakují.
.modry {font-size: 16px;color: #0000ff;}#zeleny {font-size: 16px;color: #00ff00;}
<!DOCTYPE html><html lang="cs-CZ"><head><meta charset="utf-8"><title>CSS</title></head><body><p class="modry">Text opakující se modrý.</p><p id="zeleny">Text neopakující se zelený.</p><p class="modry">Text opakující se modrý.</p></body></html>
