29.2. - tvorba webových stránek 1

29.02.2012 11:50

V dalších několika hodinách si vyzkoušíme, jaké je to vytvářet webové (internetové) stránky. Naše stránky budou celkem jednoduché a nebudeme toho potřebovat k jejich vytváření přílliš mnoho vědět. To ale neznamená, že nemůžou být pěkné.

Profesionální stránky, které patří například nějaké velké firmě, vytváří několik speciálně zaměřených lidí. Jeden vytváři grafiku, druhý programuje, třetí zodpovídá za obsah... My se to pokusíme zvládnout společně vše najednou :)

Ukázka základního způsobu tvorby webových stránek

V začátcích internetu se webové stránky vytvářely pouze zápisem HTML kódu. HTML je značkovací jazyk. To znamená, že se do textu vpisují značky, které mají speciální význam. Text s HTML značkou může vypadat například takto:

  • Mám <b> sílu </b>. Už ji nemám.

V tomto textu je značka <b>, která znamená, že nasledující text bude napsán zvýrazněným písmem. Další značka </b> je ukončovací. Text za ní bude tedy zase písmem normálním. Kdybychom tento text vložili do internetové stránky, zobrazil by se následovně:

  • Mám sílu. Už ji nemám.

Hranaté závorky tedy vymezují značku "b" , což je zkratka z angl. "bold" - česky tučný nebo výrazný. Hranaté závorky můžeme psát na české klávesnici pomocí klávesové zkratky "pravá klávesa Alt + ?" a "pravá klávesa Alt + :".

HTML stránka může obsahovat mnoho různých značek. Některé značky ve stránce dokonce být musí. Jsou to značky:

  • <html>  ... umisťuje se na úplný začátek a konec souboru
  • <head> ... "hlavička", do které se píše doplňující popis stránky o autorovi apod. 
  • <body> ... "tělo" obsahuje vše, co se má na stránce zobrazit (nadpisy, texty, obrázky...)

Mezi další značky patří:

  • <h1> ... hlavní nadpis
  • <h2>, <h3> ... další nadpisy
  • <p> ... vymezení odstavce textu
  • <b> ... zvýrazněné písmo
  • mnoho dalších

Některé značky jsou složitější, protože se v nich zapisuje odkaz na jiný soubor:

  • <a href="stranka.html"> ... značka odkazuje na stránku uvedenou v uvozovkách
  • <img src="obrazek.jpg"> ... značka umožňuje vložit do stránky obrázek uvedený v uvozovkách

Odkazy

Jednoduchý HTML soubor, který si můžeme zkoušet upravovat (uložte si jej v počítači a otevřete pomocí textoveho editoru - např. poznámkový blok):

Stránky věnované vytváření webu pomocí HTML. Pro zvídavé je zde podrobný popis mnoha HTML značek:

Zpět