Wikibooks

Basis webdesign med XHTML og CSS/Visuelle tags

< Basis webdesign med XHTML og CSS

Nu har du lært hvordan man laver grudstrukturen, overskrifter og afsnit. Men en viktig ting er at lave links, for alt på din hjemmeside kan ikke stå på en side. Med links kan du let få brugen over på en anden side. Billeder er også tit en vigtig del af en hjemme side. Begge ting kan du lære her.

Attributter redigér

Før vi begynder med det sjove skal du lære om attributter. De bruges til at give dit tag ekstra informationer ud over kommandoen. Prøv at lave dette dokument: 

<p title="Hello word!">Dette er det første afsnit. Der står Hello word når man holder over det.</p>
<p>Dette er det andet afsnit.</p>

Det kommer til at se sådan ud en browser:

Dette er det første afsnit. Der står Hello word når man holder over det.

Dette er det andet afsnit.


Her bruger vi altså attributeten "title" og sætter den til at være "Hello Word!". Nu ved browseren at paragraph'ens (som p'et står for) title er Hello Word! og de fleste browser skriver titlen på et element når man holder over det.

Links redigér

Der er meget sjælden at alt det du vil have på hele din hjemmeside er praktisk at have i en HTML-fil, derfor kan du lave flere filer. Men hvis brugeren af din hjemmeside ikke skal taste en ny adresse ind i browersen hele tiden, må du lave et link. Hvis noget skal være et link skal du bruge kommandoen "a". Men browseren skal vide hvad den nye adresse er og der skal du bruge en abbuiteten "href". Dette er et link til wikipedia: 

<a href="http://www.wikipedia.org">Gå til wikipedia.</a>

Det vil se sådan ud i en browser:
<a href="http://www.wikipedia.org">Gå til wikipedia.</a>
Husk at slutte kommandoen med "</a>", når teksten ikke skal være link mere. Husk at skrive hele URL (Uniform Resource Locatr), alså med "http://".

Tip:

Skriv noget relavan i dine links. Ikke klik her men hellere noget i stil med "se siden med svømme resultater". Så ved brugeren hvad den går ind til.

Mellem dine egne side redigér

Hvis du vil lave et link til en af dine egne sider kan det gøres lettere. For hvis du bare skriver et filnavn i href attributen, vil linket blive til den fil i den mappe du er i nu. Eksempel, sådan er dine filer organiseret:

  • Side1.html
  • Side2.html
  • Undermappe
    • Side1_i_undermappe.html
    • Side2_i_undermappe.html
  • Side3.html
  • Side4.html

et link på Side3.html til Side1.html, vil se sådan ud: 

<a href="Side1.html">Teksten med link.</a>

et link på Side2.html til Side2_i_undermappe.html, vil se sådan ud: 

<a href="Undermappe/Side2_i_undermappe.html">Teksten med link.</a>

og tilbage 

<a href="../Side2.html">Teksten med link.</a>

Title redigér

Du kan også lave en titel til et link. Det kunne se sådan ud: 

<a href="Undermappe/Side1_i_undermappe.html" title="Læs mere om historien på denne side">Teksten med link.</a>

Billeder redigér

Det er ikke særlig svært at sætte et billede ind på din side, du skal bare bruge <img> taget. Men browseren skal også have et billede at vide, det fortæller du den med "scr" attributen, det skal du gøre lige som med et link. Da der ikke kan være tekst i et billede kan du ikke skrive noget i taget. Så du skal lukke det med det samme, det gøres sådan <img />, for <img></img> = <img />. Her er så et eksempel:

Sådan kunne dinne filer være orginasiseret:

  • Side1.html
  • Billeder
    • Mig.png
    • Far.png
  • Side2.html

et billede af dig på Side1.html, skal laves sådan: 

<img scr="Billeder/mig.png" />

et billede af din far på Side2.html, skal laves sådan: 

<img scr="Billeder/far.png" />

Lige som links kan gå til filer uden for din server, kan billeder også have en fuld URL i "scr" attributet

Billede som link redigér

Billeder kan godt være et link det gøres sådan: 

<a href="side1.html" title="Gå til forsiden"><img scr="img/forside.gif" /></a>


Næste kapitel: Basis webdesign med XHTML og CSS/Lav din CSS fil.
Hentet fra "https://da.wikibooks.org/w/index.php?title=Basis_webdesign_med_XHTML_og_CSS/Visuelle_tags&oldid=11271"