Skip to content

html-overview.md

Latest commit

 

History

History
385 lines (287 loc) · 6.93 KB

html-overview.md

File metadata and controls

385 lines (287 loc) · 6.93 KB

← Tilbake til meny (markdown)

Oversikt

Alle tags du trenger i denne workshopen.


Generelle tags

Tag Forklaring
<h1> Tittel. (eksempel)
<div> En boks som tar hele raden. (eksempel)
<span> En boks som kun tar den plassen den trenger. (eksempel) (1)
<p> En boks med større mellomrom. (eksempel)
<img> Sette inn et bilde. (eksempel)
<a> Link til annen nettside eller overskrift. (eksempel)
<table> Tabell. (eksempel)
<ul> Usortert liste. (eksempel)
<ol> Sortert liste. (eksempel)

(1) OBS: span vil vanligvis ikke bry seg om margins eller padding.


Tags i skjema

Tag Forklaring
<label> Label, setter navn på andre input-felter (eksempel)
<input type="text"/> Input felt. (eksempel)
<input type="number"/> Input felt for tall. (eksempel)
<input type="radio"/> Radioknapp. (eksempel)
<input type="checkbox"/> Checkbox. (eksempel)
<textarea> Et inputfelt som kan ta flere linjer tekst. (eksempel)
<select> Et felt der du får en dropdown av valg. (eksempel)
<button> Enkel knapp. (eksempel)

Merk at skjemaelementene kan spesifisere enda mer i detalj enn hva vi har gjort her. Disse eksemplene er minimalistiske og godt nok til å lage enkle skjemaer.



Eksempler:


Tittel:

<h1>Tittel</h1>

Tittel





Div:

<div>Vanlig boks som tar hele raden</div>
Vanlig boks som tar hele raden




Span:

<span>Vanlig boks som tar minst mulig plass</span>

Vanlig boks som tar minst mulig plass





Paragraf:

<p>En paragraf med margin rundt seg</p>

En paragraf med margin rundt seg

En annen paragraf for å demonstrere at det er mellomrom mellom.





Bilde:

<img src="https://media.snl.no/media/68927/standard_rosenflamingo_i_flukt.jpg" width="300" />





Link:

<a href="https://www.vg.no/">Link til VG</a>

Link til VG





Tabell:

<table>
    <!-- Header -->
    <thead>
        <tr>
            <th>Kolonne 1</th>
            <th>Kolonne 2</th>
            <th>Kolonne 3</th>
        </tr>
    </thead>

    <!-- Rader -->
    <tbody>
        <tr>
            <td>Celle 1</td>
            <td>Celle 2</td>
            <td>Celle 3</td>
        </tr>
        <tr>
            <td>Celle 4</td>
            <td>Celle 5</td>
            <td>Celle 6</td>
        </tr>
    </tbody>
</table>
Kolonne 1 Kolonne 2 Kolonne 3
Celle 1 Celle 2 Celle 3
Celle 4 Celle 5 Celle 6




Usortert liste:

<ul>
    <li>Kaffe</li>
    <li>Te</li>
    <li>Melk</li>
</ul>
  • Kaffe
  • Te
  • Melk




Sortert liste:

<ol>
    <li>Kaffe</li>
    <li>Te</li>
    <li>Melk</li>
</ol>
  1. Kaffe
  2. Te
  3. Melk




Label

<label>Fornavn</label>

Fornavn





Input:

Obs, denne funker ikke i Github.

<input placeholder="Søk..." value="Eksempel" />




Tall:

Obs, denne funker ikke i Github.

<input type="number" />




Radioknapp

Samme gruppenavn gjør at bare én kan være valgt av gangen.

Obs, denne funker ikke i Github.

<input id="radioknapp-1" name="gruppe" type="radio" />
<label for="radioknapp-1">Knapp 1</label>

<input id="radioknapp-2" name="gruppe" type="radio" />
<label for="radioknapp-2">Knapp 2</label>

<input id="radioknapp-3" name="gruppe" type="radio" />
<label for="radioknapp-3">Knapp 3</label>
Knapp 1 Knapp 2 Knapp 3



Checkbox

Obs, denne funker ikke i Github.

<input id="checkbox-knapp" type="checkbox" />

<label for="checkbox-knapp">Knapp</label>
Knapp 1



Tekstboks

Obs, denne funker ikke i Github.

<textarea>Litt om meg</textarea>
<textarea>Litt om meg</textarea>



Dropdown

Obs, denne funker ikke i Github.

<label for="farger">Farger:</label>
<select id="farger">
    <option>Rød</option>
    <option>Grønn</option>
    <option>Blå</option>
</select>

Farger: Rød Grønn Blå



Knapp:

Denne inkluderer javascript for litt funksjonalitet.

Obs, denne funker ikke i Github.

<button type="button" onclick="alert('Hei til deg også')">Klikk for å hilse</button>
Klikk for å hilse