torsdag 28. juni 2012

HTML programmering Del III

Tredje blogg om å lage hjemmesider med HTML. Sist gang sa eg at eg skulle snakke om linking.
Og det skal vi!

Men før vi skal lære å linke må vi ha noe å linke til.
Og det gjør vi i 2 steg.

Steg 1
Finn en side på nettet du bruker mye. Ta vare på linken.

Steg 2
Lag en ny side (følg samme oppskrift som før)
Lagre den i den mappen vi allerede har lagret og kall den side2.html

Fra forrige gang så vår hjemmeside slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
<H2>OVERSKRIFT MED H2</H2>
<H3>OVERSKRIFT MED H3</H3>
<H4>OVERSKRIFT MED H4</H4>
<H5>OVERSKRIFT MED H5</H5>
<H6>OVERSKRIFT MED H6</H6>
<br />
<p>Her setter vi inn "brødteksten" vår! </p>
</BODY>
</HTML>

Den endrer vi til slik:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<br />
<H2>Mine egne sider:</H2>
</BODY>
</HTML>

Lagre den og åpne den i nettleseren din.

Som min link fra nettet velger eg en norsk nettavis som eg bruker mye: vg.no
Denne setter eg inn under linker fra nettet. Da vil siden vår bli seende slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
</BODY>
</HTML>

Som du kanskje ser har eg satt inn linjen:
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>

Og da er det på tide med en liten forklaring. Dele den opp litt.
Det som står rett etter a href er linken til stedet du vil linke til.

Target=blank forteller nettleseren at du vil åpne siden i et nytt vindu.
Har du ikke denne med vil den nye siden overskrive den du allerede bruker.

Det som står i klamme bak title er det som vil komme opp om noen beveger musen over.

Og det aller siste som står rett før </a><br> er det som stå som en link på siden din.

Men vi hadde en side til. Kanskje vi skal få laget linken til den også.
Under "Mine egne sider:" legger du til følgende linje:

<a href="side2.html">Side2</a>

Da ser siden vår slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
<a href="side2.html">Side2</a>
</BODY>
</HTML>

Som du ser er den litt annerledes.
Lagre siden din og prøv den i en nettleser.

Om du har gjort det rett skal du få opp begge linkene.
Siden fra nettet du valgte å linke til skal komme opp i nytt bilde om du klikker på det og
din egen side vil komme opp i samme vindu som du har siden din i. Og med mindre du har laget
noe på side2.html vil den komme opp blank.

No har vi lært overskrifter, tekst og linker.
Neste gang er vi klare for å legge til bilder!

Tips! Kanskje du kan ta mobilen/kameraet ditt ut en tur og ta noen bilder.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

Ingen kommentarer:

Legg inn en kommentar