Oppsummering

Hvis du har vært igjennom alle HTML-sidene i Nybegynner-veiledningen bør du være en nokså kompetent HTML-skribent. Faktisk kan det hende du er bedre enn de fleste!

Denne kodeblokken inkorporerer alt vi har sett så langt:

<!DOCTYPE html>
<html>

<head>
  <title>Min første webside</title>
</head>

<body>
  <h1>Min første webside</h1>

  <h2>Hva dette er</h2>
  <p>En enkel side satt sammen ved bruk av HTML.
    <em>Jeg sa en enkel side satt sammen ved bruk av HTML.</em> 
    En enkel side satt sammen ved bruk av HTML. 
    En enkel side satt sammen ved bruk av HTML.
    En enkel side satt sammen ved bruk av HTML.
  </p>

  <h2>Hvorfor dette er</h2>
  <ul>
    <li>For å lære HTML</li>
    <li>
      For å skryte
      <ol>
        <li>Til sjefen min</li>
        <li>Til vennene mine</li>
        <li>Til kattene mine</li>
        <li>Til den lille snakkende anden i hjernen min</li>
      </ol>
    </li>
    <li>Fordi jeg har blitt forelsket i datamaskinen min, og vil gi den litt HTML-elskov</li>
  </ul>

  <h2>Hvor du finner mer</h2>
  <p><a href="https://progging.no">Progging</a></p>
  
  <h3>En tilfeldig tabell</h3>
  <table>
    <tr>
        <td>Rad 1, celle 1</td>
        <td>Rad 1, celle 2</td>
        <td>Rad 1, celle 3</td>
    </tr>
    <tr>
        <td>Rad 2, celle 1</td>
        <td>Rad 2, celle 2</td>
        <td>Rad 2, celle 3</td>
    </tr>
    <tr>
        <td>Rad 3, celle 1</td>
        <td>Rad 3, celle 2</td>
        <td>Rad 3, celle 3</td>
    </tr>
    <tr>
        <td>Rad 4, celle 1</td>
        <td>Rad 4, celle 2</td>
        <td>Rad 4, celle 3</td>
    </tr>
  </table>

  <h3>Et tilfeldig skjema</h3>
  <p><strong>Advarsel:</strong>Det ser bra ut, men funker pokker ikke.</p>
  <form action="skript.php" method="post">
    <p>Navn:</p>
    <p><input type="text" name="navn" value="Ditt navn"</p>
  
    <p>Dyreart</p>
    <p><input name="dyreart"></p>
    <!-- Husk: type="text" er ikke et krav -->

    <p>Kommentarer</p>
    <p>
      <textarea name="kommentarer" rows="5" cols="20">
        Dine kommentarer
      </textarea>
    </p>

    <p>Er du:</p>
    <p><input type="radio" name="kjonn" value="mann"> Mann</p>
    <p><input type="radio" name="kjonn" value="kvinne"> Kvinne</p>
    <p><input type="radio" name="kjonn" value="tvekjonnet"> Tvekjønnet</p>
    <p><input type="radio" name="kjonn" value="intetkjonn"> Intetkjønn</p>

    <p><input type="submit"></p>

  </form>
</body>

</html>

Der har vi søkk og snøre. Lagre fila, og lek med den. Flytt på ting, legg til mer, fjern noe – ødelegg det, og se om du får fikset det igjen. Prøv å lage noe lignende helt fra bunn – det er den beste måten å forstå hvordan alt henger sammen.

Når du er fornøyd med det kan du rykke videre til CSS, hvor vi skal få all denne HTML’en til å se pen ut.