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>




Přidal: Tonda 16. 11. 2011
Zobrazit podrobnosti

Podrobnosti

Počet slov: 318
Zhlédnuto: 1818 krát