Alík

  • Alíkoviny
  • Klubovna
  • Hry
  • Nástěnky
  • Soutěže
  • Vtipy
  • Poradna
  • Copak hledáme:
    Kde hledáme: Přihlášení uživatelé mají lepší možnosti hledání.
    Jsi tu poprvé?

    Alíkovina

    Šipínova miniškola HTML 2. díl

    vydáno  •  Internet

    Při projíždění dotazů v poradně na téma HTML jsem narazil na odkaz na Alíkovu miniškolu HTML. Měla více dílů a dívala se na HTML jinak než já. Proto je zde tento pokračování mé miniškoly. Dnes si probereme tvorbu tabulky a základy CSS (cascading style sheets).

    Ukázka HTML kódu, © šipín

    Tvorba webové stránky s pomocí HTML:

    Zaprvé, vytvoříme si tabulku.
    Tabulka má taky svou kostru, a tou je:

    <table>
    <tr>
    <th></th><th></th><th></th><th></th>
    </tr>
    <tr>
    <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
    <td></td><td></td><td></td><td></td>
    </tr>
    </table>

    Vysvětlivky:
    <table>=tabulka
    <tr>=řádek
    <th>hlavní data
    <td>=ostatní data

    Také můžete odkazovat na jiné WWW stránky, nebo na místa na své, případně kotvu, ale o tom v dalším díle...
    <a href=“ (adresa odkazu) “> (text odkazu) </a>

    A ještě si něco povíme o tzv. nicnedělajících tagách.
    Jsou to <span> a <div>. Možná se tedy ptáte, na co jsou tedy tyto tagy? Odpověď je jednoduchá. Na označování textu. Pokud obalíte nějaký element tagem (například) <div>, můžete mu pak přidat identifikátor nebo třídu. To jsou pro vás nové pojmy, že? Pojďme si je tedy vysvětlit.

    Identifikátory a třídy

    Jaký je mezi nimi rozdíl? Identifikátory mohou označit pouze jeden prvek na stránce a má značku (v CSS) #, zatímco třída může označovat libovolný počet prvků a má značku . . Jak ji tedy zapíšeme? Dáme si příklad:
    <div class=“nejaka-znacka“>
    <a id=“nejake-id" href=“nejaky-odkaz">Nějaký text</a>
    </div>
    A jak vidíte, použili jsme jak identifikátor (id), i třídu (class).
    Nyní se však už po hlavě vrhneme do CSS!

    Krátký úvod do CSS

    CSS (Cascading Style Sheets) je soubor s příponou .css a můžete pomocí něj upravovat vzhled vaší webové stránky.

    #hlavicka{
    width: 200px;
    height: 450px;
    }
    třeba říká, že element s identifikátorem hlavicka bude 200 pixelů široký a 450 pixelů vysoký. Všiměte si, že používám identifikátor a jeho značku #, a znamená to, že někde v textu webové stránky označuji nějaký tag s identifikátorem hlavicka.

    Takže, začneme tím, že si nastavíme barvu pozadí třeba na modro:
    body {background-color: blue}
    nebo
    body {background-color: #0000FF}
    Také si můžeme upravit barvu písma:
    #text {color: blue}
    Dále se podíváme na celkově úpravu textu, takže vlastnosti:

    • text-align
    • font-size
    • font-family

    Je jich sice mnohem víc, ale nás budou zatím zajímat pouze tyto.
    První (text-align) zarovnává text. Můžete ho zarovnat na:

    • střed (center)
    • spodek (bottom)
    • vršek (top)
    • pravo (right)
    • levo (left)(konec)

    Dále tu máme font-size, tím nastavujeme velikost textu. Hodnotu můžeme zadat ve dvou tvarech:

    • násobení původní HTML velikosti (značka em)
    • velikost v pixelech (značka px)

    A jako poslední tu máme font- family. Nastavuje se tím font, my si tu uvedeme pouze dva základní: sans a sans-serif. První je patkové a druhé bezpatkové písmo.

    Děkuji, že jste tento článek dočetli až do konce, a doufám, že se vám líbil!

    Pokud budete vědět něco víc, pište do diskuze a podívejte se na mou nástěnku o programování.

    Související Alíkovina:

    Autor: (14 let)
    » přejít do diskuse

    Diskuse k článku  (4)

    Příspěvek z 3. září v 16:55.
    ultron01 v něm napsal:

    Myšoňka - v HTML ani v CSS se neprogramuje... jen tak pro přesnost...

    Programovací jazyk je například Perl nebo Python - ale je jich ještě dost dalších...

    Příspěvek z 3. září v 8:13.
    Myšoňka v něm napsal:

    Pro mě nic nového, ale neuškodí si zopakovat základy, že? Každopádně, myslím, že pro nového člověka, někoho kdo nikdy neprogramoval, to byl celkem velký objem dat. Možná bych to příště rozložila do dvou článků a trochu víc cestou vysvětlovala. Ale jinak moc super a pět tlapek si zaslouží! <3

    Příspěvek z 2. září v 18:25, upravený po 3 minutách.
    ultron01 v něm napsal:

    Dobré - sice nějaké věci z HTM a CSS stylů, které byly uvedené v tomhle článku znám - ale něco jsem PŘEKVAPIVĚ nevěděl...

    Jen tak dál!