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

    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 článek.

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

    Základní struktura HTML webové stránky

    Pár otázek na začátek:
    Jak se tvoří webové stránky?
    Webové stránky se tvoří s pomocí HTML, CSS a JavaScriptu, ale zde vás naučím jen základy HTML a CSS.
    Co je HTML?
    HTML je zkratka pro HyperText Markup Language, i když pro nezasvěcené to může znamenat i HaTMatiLka ]:-).
    Co je CSS?
    Pomocí CSS se upravují barvy, rámečky, pozadí atd.
    Jak vypadá HTML kód?
    Ukázka je na hlavním obrázku u článku. V prohlížeči na počítači si můžete zobrazit kód libovolné stránky (třeba i této) stisknutím klávesové zkratky Ctrl+U.
    Naučíš mě ho tvořit?
    Ano, hned jdeme na to(!)

    Tvorba webové stránky s pomocí HTML:

    Přípravné práce:
    Než začnete tvořit webovou stránku, musíte si rozmyslet, co tam bude, kde a jak.
    Doporučuji utvořit mapu vašich webových stránek, kde bude znázorněno, z jaké stránky na jakou bude odkaz.
    Samotná tvorba webové stránky
    Začněte kostrou, kterou si tady odsud opíšete, a pak můžeme jít dále!
    Ta kostra je zde:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Název stránky</title>
    </head>
    <body>
    Obsah stránek
    </body>

    Poznámka: tag obsahující / je tag ukončující.
    O tagu <title> si něco řekneme v příštím článku.

    Pak můžeme přidat CSS styl, který vložíme takto:

    A to buď interním vstupem:
    <title>Název stránky</title>
    <style>
    Váš CSS styl
    </style>

    A nebo externím:
    <link rel="stylesheet" href=" (adresa stylů CSS) " type="text/css">

    Jak se tvoří CSS, to vás naučím později.
    Teď se zaměříme na základy HTML, kterými jsou tagy <h1> a <p>.
    Tag <h1> vytvoří nadpis 1. úrovně a tag <p> vytvoří odstavec.
    Příklad:

    <body>
    <h1>Můj krásný nadpis</h1>
    <p>Nějaký text...</p>
    </body>

    Tag <h1> má více úrovní, přesněji <h1> - <h6>.
    Víte, jak se v HTML dělá tučné písmo?
    Jednoduše, pomocí tagu <b>! A kurzíva pomocí tagu <i>, a písmo škrtnete pomocí tagu <s>.

    Ukázka:

    <b>toto bude tučně</b>
    <i>toto bude kurzívou</i>
    <s>toto bude škrtnuté</s>

    A nakonec si uděláme seznamy:
    Seznamů jsou 2 druhy: číslovaný a nečíslovaný.
    Zde je kostra číslovaného seznamu:

    <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ol>

    Nečíslovaný seznam by vypadal skoro stejně, akorát bychom vyměnili <ol> a </ol> za <ul> a </ul>. Mezi tagy <li> a </li> pak budete vkládat obsah seznamu.

    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í: www.alik.cz/n/programovani-s-sipinem

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

    Diskuse k článku  (8)

    Příspěvek z 29. listopadu 2019 v 18:20.
    Pralinka2 v něm napsal:

    No ještě jeden podobný článek od jiného autora už je napsaný a v dohledné době asi bude zařazen k vydání.

    Příspěvek z 29. listopadu 2019 v 18:13.
    ultron01 v něm napsal:

    Plánuju napsat do Alíkovin podobný článek, ale ten bude na pokračování.

    Příspěvek z 18. listopadu 2019 ve 21:29.
    Julian v něm napsala:

    Super, sice HTML asi nebudu nikdy rozumět, ale kdybych byla víc počítačově nadaná, tak bych tomu určitě porozuměla. :-D