torsdag 21. juni 2012

HTML programmering Del II

Sist blogg laget vi en blank html-side. Kanskje ikke så veldig spennende, men eg ga en utfordring om å legge inn tittel og overskrift. Slik eg har gjort her:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
</BODY>
</HTML

Om du ikke allerede har gjort dette så kan du ta og oppdatere index.html som vi laget i forrige blogg og åpne denne på nytt i en nettleser. En liten merknad: Der finnes mange forskjellige nettlesere, og du vil sikkert lese at eg viser til de 5 store.
Da snakker eg om følgende 5: Internet Explorer, Firefox, Opera, Chrome, og Safari. Om du bruker noen av disse må du selv følge med at du har siste versjon.

La oss gå litt videre.
I den siste versjonen av vår html-side la vi inn taggen <H1>. Gjør no det samme med <H2> til og med <H6>. Lagre filen og se resultatet.
Da vil filen din se 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>
</BODY>
</HTML>

Som du ser og kanskje har tenkt over så plasseres alt til venstre.
Det er fordi vi enda ikke har sagt noe om plassering og venstresiden er default/standard plassering.
Plassering av tekst, farger, skrifttyper og alle andre grafiske justeringer gjør vi med CSS (Cascading Style Sheets), noe eg skal omtale senere.
Grunnen til at vi skal bruke CSS er fordi vi da kan lage 1 fil som vi henviser til fra html siden vår og sette 1 standard for alle de andre sidene vi lager. Ikke tenk mer på dette foreløpig ;)

Vi går litt videre.

Taggene fra <H1> til <H6> omtalte vi som overskrifts tagger.
For "brødtekst" eller avsnitt kan vi bruke noe som heter <p> eller paragraph.

<!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>

Om du no sjekker siden vår i en nettleser vil du se at "brødteksten" er større enn <H6> taggen.
Skriftstørrelse er også noe vi skal se på siden.

Tenker vi setter en foreløpig sluttstrek der.
Om du har lyst å kjøre litt på og ikke vente på neste blogginnlegg kan http://www.w3schools.com/html5/default.asp anbefales å ta en kikk på.

Neste gang skriver eg om å lage linker på siden, en vesentlig årsak til at internett har blitt så stort. Om du ikke har tenkt å lage en stor side for
et firma, men mer som et verktøy for deg selv, er linker til andre sider ofte en stor hjelp.

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