Základy HTML a CSS
Značkovací jazyk HTML se skládá z tagů uzavřených v ostrých (špičatých) závorkách < >. Dělají se tak, že stiskneme pravý alt a , nebo . nad ním. Pan učitel nám dovolil nepamatovat si je, a tak se můžeme koukat na internetové stránky Jakpsatweb.cz
Pokud si v programu PSPad otevřeme nový HTLM dokument (Soubor > Nový..) Zobrazí se nám níže uvedený text. Pokusím se vám vysvětlit, co jednotlivé značky znamenají.
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | - Toto je DOCTYPE, deklarujeme ním typ dokumentu. Je více možných variant, v současné době je aktuální hlavně |
| <html> | - Počáteční značka HTML dokumentu. |
| <head> | - Hlavička, zapisují se do ní informace, které nebudou ve výsledné stránce vidět, například styly, skripty, metatagy... |
| <meta http-equiv="content-type" content="text/html; charset=windows-1250"> | - Metatag určující použité kódování. například: windows-1250, UTF-8, iso-8859-2. |
| <meta name="generator" content="PSPad editor, www.pspad.com"> | - Metatag informující o použitém editoru. |
| <title>title> | - Mezi tyto tagy vkládáme název (titulek) stránky, uživateli se zobrazí na záložce v prohlížeči. |
| </head> | - Konec Hlavičky |
| <body> | - Tělo dokumentu |
| Nějaký obsah | - Sem píšeme vše, co chceme, aby se zobrazilo. |
| </body> | - Konec těla |
| </html> | - Konec HTML dokumentu |
Formátovací značky
Všechy tyto tagy jsou párové, to znamená, že začínají i končí. Výjimku tvoří tag <br>. Před koncovým tagem je lomítko (/) př.: <h1>Text nadpisu prví úrovně</h1>
| <h1> <h2> <h3> . . . <h6> | 6 úrovní nadpisů. |
| <p> | Odstavec |
| <b> | Tučně |
| <u> | Podtržení |
| <i> | Kurzíva |
| <br> | Zalomení řádku, nepárový tag |
Styly (CSS)
Styly se používají k formátování textu.
Kam je psát?
Přímo v textu k formátovacímu tagu pomocí atributu style="". Př.: <p style="color: blue">.
Do hlavičky stránky (<head></head>) mezi tagy <style> a </style>.
Pomocí externího souboru - to se nás netýká.
Zápis do hlavičky:
Při zápisu do hlavičky napíšeme nejprve tag, který chceme naformátovat (např.: h1) poté mezi složené závorky {} zapíšeme vlastnosti. Pokud zadáme více vlastností, oddělíme je středníkem (;)
Př.:<style>
h1 {color: blue}
p {color: black}
</style>
Pokud budeme chtít naformátovat jen kousek textu můžeme použít tagy <span></span> nebo <div></div>
Statistika