ZNAČKOVACÍ JAZYK HTML Úvod do ICT, 14. října 2024 HTML JE … … zkratka od HyperText Markup Language … esence webových stránek … hojně využíváno také jinde – např. pro formátování e-mailových zpráv – jako konverzní formát jiných dokumentů – pro zachycení formátování fragmentů textů v DB … ve skutečnosti vlastně docela jednoduché ZNAČKA (TAG) V HTML • • •

Příklad jednoduchého odstavce textu s tučným zvýrazněním a kurzívou.
A také s koncem řádku.

Příklad jednoduchého odstavce textu s tučným zvýrazněním a kurzívou. A také s koncem řádku. ZÁKLADNÍ ZNAČKY •

až

– nadpisy 1. až 6. úrovně •

,
– odstavec, nový řádek • , – zvýraznění, kurzíva • , – silné zvýraznění, tučný řez • 

,  – předformátovaný text, kód
•  a  – subskript a superskript
• 
 – horizontální čára
SLOŽITĚJŠÍ STRUKTURY
• 
     – nečíslovaný seznam
• 
       – číslovaný seznam
• 
    1.  – zapouzdřená položka seznamu
•  – tabulka
•  – řádek tabulky
• 
       – buňka tabulky
•  – buňka tabulky s významem záhlaví
VÝČTOVÉ SEZNAMY

        

      • pšenice
        • 

      • žito
        • 

      • ječmen
        • 

      

        

      1. přišel
        2. 

      2. viděl
        3. 

      3. zvítězil
        4. 

      
• pšenice
• žito
• ječmen
1. přišel
2. viděl
3. zvítězil
TABULKY

      

      
Pohlaví
Počet

      

      
muž
73

      

      
žena
45

      

      
Pohlaví Počet
muž 73
žena 45
POZOR NA CHYBY V ZÁPISU
• takto překřížené značky
• značky do sebe musí být „správně“ zanořené, tj. ukončovací
značka vnořené značky nemůže být až za ukončovací značkou
nadřazené značky
• 
        
text na nepovoleném místě

      1. položka seznamu
        2. 

      
• obsah může být jen v položkách seznamu a buňkách tabulky
ZNAČKY S ATRIBUTY
•  – odkaz (kotva – anchor)
• href – atribut pro specifikaci cílové adresy
Dokument najdete zde.
Dokument najdete zde.
•  – vložení obrázku
• src – atribut specifikace zdroje obrázku
• alt – atribut pro (alternativní) textový popis obrázku
Mrkněte na pejsek.
Mrkněte na .
GLOBÁLNÍ ATRIBUTY
• style – definice stylu
• červený – červený
• class – třída elementu
• slouží zejména k jednotné definici stylu více elementů
• id – identifikátor elementu
• lze se odkazovat na konkrétní jeden prvek uvnitř dokumentu
• title – vysvětlivka prvku, např. u zkratek či odkazů
• lang – specifikace jazyka obsahu elementu
MOŽNOSTI KASKÁDOVÝCH STYLŮ
• Barvy
red, green, blue, #FF00AD, rgb(0,225,23)
• Jednotky absolutní
cm, mm, in, px, pt, pc
• Jednotky relativní
%, em, ex, ch, rem, vw, vh, vmin, vmax
• Fonty
serif, sans-serif, monospace, cursive, fantasy
KASKÁDOVÉ STYLY …
… definují vzhled webových stránek:
– barvy
– písmo
– rozestupy
– ohraničení
– tok prvků na stránce
– viditelnost prvků
– pozice
– a mnoho dalšího
p {
font-family: Arial;
font-size: smaller;
text-align: justify;
border: 1px solid blue;
margin: 2ex 0px;
width: 75%;
}
STRUKTURA DOKUMENTU HTML


Název





      Nadpis
      

      Nějaký text
      


Navíc se doporučuje
začínat dokument
speciální značkou:

DALŠÍ NÁLEŽITOSTI HTML
• formuláře
• 
      
• entity
• < > &   – < > & a nedělitelná mezera
• sémantické značky
•