Koder relatert til kodedisplay, sitater og lister

Denne artikkelen forklarer koder relatert til kodedisplay, sitater og lister.

Dette forklarer hvordan man skriver kildekode, sitater, merknader og lister i HTML.

YouTube Video

Tagger relatert til kodevisning

<code>-tagg

1Inline code example: <code>let x = 10;</code>

• <code>-taggen er et inline-element som brukes til å indikere kode eller programutdrag i et HTML-dokument.
• Som standard vises det med en monospace-skrifttype, som forbedrer lesbarheten av koden.

<pre>-tagg

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• <pre>-taggen brukes til å vise tekst i sitt opprinnelige format i et HTML-dokument. Ved å bruke denne taggen bevares mellomrom og linjeskift i teksten, slik at den originale formateringen opprettholdes. Det brukes hovedsakelig til å vise innhold som må beholde formateringen, som programkode, poesi eller tekstkunst.

    function hello() {
        console.log("Hello, world!");
    }
    

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• I <pre>-taggen bevares mellomrom, så hvis det er et mellomrom før avslutningstaggen, vil en tom linje vises på slutten, som i dette eksempelet.

<samp>-tagg

1Sample system output: <samp>Error: Invalid input.</samp>

• <samp>-taggen er en HTML-kode som brukes til å representere utdata fra et dataprogram. Den brukes til å indikere utdata eller meldinger fra et program eller system.

<kbd>-tagg

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• <kbd>-taggen er en HTML-kode som brukes til å representere brukerinput. Den brukes til å indikere tastatur- eller kommandoinput, for eksempel snarveier.

<var>-tagg

1Variable example: <var>x</var> = 5;

• <var>-taggen brukes til å representere variabler i et program eller en ligning. Den brukes til å fremheve variabelnavn eller variabler i matematiske formler.

Tagger brukt for sitater, etc.

<blockquote>-tagg

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• <blockquote>-taggen brukes til å representere lange sitater eller tekst fra andre kilder, og vises vanligvis som et blokkelement.

<q>-tagg

1This is a short quote: <q>Short quote example.</q>

• <q>-taggen er et inline-element som brukes til å representere korte sitater. Denne taggen kan brukes til å markere en del av en tekst eller en setning som et sitat. Tekst innkapslet i en <q>-tag vises vanligvis med anførselstegn. <q>-taggen kan også være nestet. I dette tilfellet brukes vanligvis forskjellige typer anførselstegn for det indre sitatet.

<cite>-tag

1Reference to a book: <cite>The Great Gatsby</cite>

• <cite>-taggen er et inline-element som brukes til å indikere kilden til et sitat eller en referanse. Det brukes hovedsakelig til å indikere kilden til et arbeid, som titler på verk, artikler, papirer, nettsider eller bøker.

<address>-tag

1<address>123 Main Street, Springfield, USA</address>

• <address>-taggen brukes til å representere kontaktinformasjon relatert til forfatteren eller eieren av et dokument eller en seksjon. Denne taggen inneholder vanligvis e-postadresser, telefonnumre, fysiske adresser og lignende informasjon.

Taggen <time>

1<time datetime="2024-12-04">December 4, 2024</time>

• Taggen <time> brukes til å representere et spesifikt tidspunkt, en varighet eller en gjentakende tid. Denne taggen kan inkludere datoer og tider for å gi semantisk mening til dokumentet.

Taggen <data>

1<data value="2024">Current Year</data>

• Taggen <data> brukes til å knytte menneskelesbart innhold til maskinlesbare verdier. Denne taggen er nyttig for å merke data på en måte som enkelt kan behandles av programmer.

<details> og <summary>-tagger

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• <details>-taggen lager en sammenleggbar og utvidbar widget. Ved å bruke den sammen med <summary>-taggen kan du lage en klikkbar seksjon for å vise mer informasjon, ofte brukt til interaktive skjermer som 'Les mer'.

Tagger brukt for listevisning

<ul>-tag

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• Dette er en tagg som brukes til å lage uordnede lister. Hvert element i listen defineres med <li>-taggen. Som standard vises en svart prikk foran hvert listeelement.

<ol>-tag

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• Denne taggen brukes til å lage en ordnet liste. Hvert element i listen defineres med <li>-taggen. Som standard vises tall for å angi rekkefølgen på elementene.

<dl>-tag

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>

• Denne taggen brukes til å lage en liste med par som består av termer og definisjoner, eller navn og detaljer. Listeelementene defineres med <dt>- og <dd>-taggene. Begrepet eller navnet skrives i <dt>-taggen, og definisjonen eller forklaringen skrives i <dd>-taggen.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video