Od provozovatele projektu Rychlost.CZ

Co je HTML a CSS - Začínáme s HTML

vydáno: 17.08.2016, seriál: Začínáme s HTML | komentářů: 0

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.

HTML

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 .

 

Trocha historie 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.

 

Koncepce

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.

 

 

Ukázka:
HTML
<a href="http://nekam.neco" title="Odkaz" target="_blank">Text odkazu</a>
Použité tagy: <a>

CSS

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>

Trocha historie CSS

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.

 

Koncepce

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.

Ukázka:
CSS
p {
text-align: left;
font-size: 16px;
font-family: Arial;
color: #000;
text-tranform: uppercase;
}
Použité vlastnosti: text-align, font-size, font-family, color

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í.

Zobrazit ukázku
Ukázka:
CSS
.modry {
font-size: 16px;
color: #0000ff;
}
#zeleny {
font-size: 16px;
color: #00ff00;
}
Použité vlastnosti: font-size, color
HTML
<!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>
Použité tagy: <html>, <head>, <meta>, <title>, <body>, <p>