1

Profil herce

pohodička

Vytvořte HTML stránku s profilem herce Rowana Atkinsona jen za použití běžných HTML tagů, podle vzoru. Smyslem tohoto úkolu je si zopakovat psaní HTML kódu, nikoliv vytvořit skvostnou stránku.

Text stránky můžete vykopírovat přímo ze vzorové stránky. Jako zdroj dalších informací můžete použít Wikipedii. Stránka bude rozdělena na tyto části.

Hlavička

  • Obrázek herce. Můžete si jej stáhnout z tohoto odkazu.
  • Nadpis (použijte tag <h1>)
  • Popis s původem a povoláním pod obrázkem.
  • Menu s očíslovaným seznamem (použijte tag <ol>). Každá položka představuje odkaz, který vede k přislušnému nadpisu, který je značen pomocí id
<a href="#obecneUdaje">Obecné údaje</a>
<a href="#zivot">Život</a>
<a href="#odkazy">Odkazy</a>

Obsah

  • Část 1: Obecné údaje

    • Zde použijeme HTML tabulku, kde budou údaje:

    • Pro nadpis použijte tag <h2>, který obsahuje atribut id="obecneUdaje"

      Celé jméno Rowan Sebastian Atkinson
      Narození 6. ledna 1955, Spojené království Consett, Anglie
      Aktivní roky 1978 - dosud
      Hlavní žánr komedie
  • Část 2: Život

    • Pro nadpis použijte tag <h2>, který obsahuje atribut id="zivot"
    • obsahuje text dostupný na vzorové stránce v odstavcích (použijte tagy <p>).
  • Část 3: Odkazy a zdroje

    • Pro nadpis použijte tag <h2>
    • Obsahuje nečíslovaný seznam (tag <ul>) s odkazy, které po kliku otevřou stránku na nové záložce, pomocí atributu target="_blank"
    • Článek Rowana Atkinsona z Wikipedie
    • Oficiální youtube kanál Mr. Beana

Patička s údaji o stránce

  • Pro nadpis použijte tag <h2>
  • Zde napište své jméno a datum vytvoření stránky a další vhodné infromace 😊

Doporučení:

Pro konec řádku a prázdný řádek zatím můžete použít tag <br>

2

Nastylovaný profil herce

pohodička

Použijte HTML strukturu stránky s profilem herce Rowana Atkinsona na zdrojove adrese vzoru nebo použijte váš výsledek z předchozího cvičení. Kód zkopírujte do svého vlastního nového HTML souboru.

Proveďte následující úpravy:

  • Obrázku přiřaďte id: profilePicture.
  • Obrázku přiřaďte třídu: round.
  • Vytvořte si na disku soubor CSS a nalinkujte ho k vašemu HTML souboru.
  • Vytvořte v tomto CSS souboru pravidlo pro id: profilePicture šířku 300px a rámeček elementu o šířce 10px tmavě modré barvy.
width: 300px;
border: 10px solid darkblue;
  • Vytvořte v tomto CSS souboru třídu round s pravidlem pro zakulacení na kolečko:
border-radius: 50%;
  • Výsledek bude pak vypadat takto.