Tekst og billeder

Vigtige tags

Herunder er de vigtigste tags nævnt.

  • <h1> - <h6>  -   overskrifter
  • <p>  -   brødtekst/paragraffer
  • <a>  -   henvisninger
  • <img>  -   billeder

Overskrifter og brødtekst

De to mest almindelige former for tekst er overskrifter og brødtekst.

Der er indbygget 6 niveauer af overskrifter i HTML5, der som udgangspunkt blot får en mindre skriftstørrelse jo lavere niveau den er på. <h1> er det højeste niveau og man kan gå ned til <h6>.

Brødtekst pakkes ind i <p> tags. Se f.eks. nedestående kode:

	<h1>Overskrift</h1>
	
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ac nisi a sagittis. Pellentesque fringilla quis turpis vitae congue. Integer vel eleifend ex. Quisque ultricies tempor sem a facilisis.</p>
	
<h2>Under-overskrift</h2>
	
<p>Duis eu quam a augue commodo lobortis. Nulla quis justo ac nulla venenatis finibus. Nam non vestibulum lectus. Nunc nec sapien scelerisque, egestas felis at, suscipit elit.</p>
	
<h3>Under-under-overskrift</h3>
	
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ac nisi a sagittis. Pellentesque fringilla quis turpis vitae congue. Integer vel eleifend ex.</p>

Ovenstående kode ser ud som følger:

Vrøvleteksten i eksemplet er Lorem Ipsum, og er blvet anvendt af typografer siden 1500-tallet. Du kan finde mere om den her: http://da.lipsum.com/.

Se eksempel med overskrifter og brødtekst: html_eksempel_overskrifter_og_broedtekst.html

Henvisninger (links)

En af styrkerne ved HTML5 er, at man kan skabe forbindelse mellem dokumenterne. Det gør man ved at anvende <a>. Se eksemplet herunder, hvor der indsættes en henvisning. Når man klikker på det vil google.com åbnes i den samme fane man står i:

	
<a href="http:\\www.google.com">google.com</a>
	

Se resultatet:   google.com - Samme vindue

<a> kan sættes op så henvisningen bliver åbnet i en anden tab, ved at man tilføjer attributten target="_blank"

	
<a href="http:\\www.google.com" target="_blank">google.com</a>
	

Se resultatet:   google.com - i ny tab

Vil man lave et download link tilføjer man download til <a>.

	
<a href="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" download>HTML5 logo</a>
	

Se resultatet:   Download HTML5 logo

Billeder

For at vise billeder anvender man <img>. For at opfylde HTML5 skal den indeholde både src="" og alt="" attributten. I eksemplet herunder åbnes HTML5 logoet fra https://www.w3.org/html/logo/:

	
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="HTML5 logo" />
	
Se resultatet - original billede 512x512px



HTML5 logo

For at kontrollere størrelsen på billedet indsættes attributten height="" eller width="" i <img>. Browseren vil automatisk tilpasse billedets proportioner, når man kun vælger den ene.

Eksempel med width=""

	
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="HTML5 logo" width="200px"/>
	
Se resultatet med width="200px".



HTML5 logo

Eksempel med height=""

	
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="HTML5 logo" height="300px"/>
	
Se resultatet med height="300px".



HTML5 logo

Det er vigtigt at man nøjes med at sætte enten width eller height. Hvis man ikke får sat de rette forhold "vrider" man billedet i stykker

	
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="HTML5 logo" width="800" height="100px"/>
	
Se resultatet med width="800" og height="100px".



HTML5 logo

Billedformater

Når man arbejder med websider bør man grundlæggende anvende følgende 3 billedformater: png, jpg og svg. Herunder er en kort beskrivelse af hvert af formaterne inklusiv et eksempeludsnit af HTML5-logoet https://www.w3.org/html/logo/downloads/HTML5_Logo.svg. Grunden til at der er valgt et svg billede som udgangspunkt er, for at vise de resultater man får ved at gemme i formaterne

png - Portable Network Graphics

Udsnit af HTML5 logo i png format.

Grafiktype: Pixelbaseret, med mulighed for usynlig baggrund

Kompression: Ja (non-destruktiv - mister ikke data)

Velegnet til:

  • Billeder med få farver
  • Ikoner og grafik
  • Screenshots af tekst
  • Illustrationer hvor skarpe linier er vigtige
  • Billeder der ikke må miste data ved komprimering

Beskrivelse:

png er skabt til internettet og bør anvendes i de tilfælde der står ovenfor. Hvis det drejer sig om illustrationer kan man gemme dem i en større opløsning end den som skal vises og derved kan browseren tegne illutrationen skarpere. En anden stor fordel er, at man kan lave en usynlig baggrund og derved lade bagrunden danne baggrund for ens illustration.

Hvis det er almindelige billeder bør man gemme dem i jpg med mindre det er vigtigt at der ikke sker datatab.

Læs mere: https://da.wikipedia.org/wiki/Portable_Network_Graphics

jpg - Joint Photographic Experts Group

Udsnit af HTML5 logo i jpg format.

Grafiktype: Pixelbaseret, ingen usynlig baggrund

Kompression: Ja (destruktiv - mister data)

Velegnet til:

  • Billeder med mange farver

jpg er formatet man skal anvende til billeder der skal vises på en hjemmeside, med mindre det er vigtigt at der ikke sker datatab.

Læs mere: https://da.wikipedia.org/wiki/JPEG

svg - Scalable Vector Graphics

Udsnit af HTML5 logo i svg format.

Grafiktype: Vektorbaseret, med mulighed for usynlig baggrund

Kompression: Nej

Velegnet til:

  • Stregtegninger
  • Illustrationer
  • Vektorbaseret grafik
  • Tegninger og illustrationer der skal skaleres

svg er udviklet af World Wide Web Consortium til at kunne vise vektorbaseret grafik. Fordelen ved vektorbaseret grafik er, at det kan skaleres både op og ned uden at billedkvaliteten forringes.

Derudover kan man indlejre både tekst og grafik i svg-filer.

Læs mere: https://da.wikipedia.org/wiki/Scalable_Vector_Graphics

Samenligning af formaterne

Herunder er der et eksempel på hvordan jpg, png og svg bliver når man anvender formaterne. Til eksemplerne har jeg anvendt et udsnit af HTML5-logoet https://www.w3.org/html/logo/downloads/HTML5_Logo.svg, som jeg har gemt i henholdsvis jpg og png. Ved disse to billeder vil der være en forklaring på de konsekvenser der er ved at gemme i formaterne

jpg  - 1,4 kB

png  - 18,2 kB

svg  - 5,6 kB