Html og css - en introduksjon

31.08-2006@22:39:18 av Siv

HTML - hypertext markup language

En webside er et dokument bestående av tekst, bilder, video, audio og koblinger til andre dokumenter. Disse dokumentene lagres på en datamaskin og vises gjennom en nettleser.

En nettleser tolker dokumentet og presenterer det for en bruker. Når vi skal lage websider bruker vi som oftes HTML. HTML - hypertext markup language er et markupspråk som er utviklet for å enkelt kunne lage dokumenter som skal vises ved hjelp av en nettleser på Internett (WWW). Språket er en videreutvikling av SGML, men siden SGML er et stort og omfattende og lite oversiktlig ble HTML introdusert for å forenkle arbeidet med å lage dokumenter for Internett. HTML er standardisert av World Wide Web Consortium (W3C - http://w3c.org).

HTML-dokumentet lages ved hjelp av koder eller html-tags, som brukes til å vise innholdet i websiden, formatere tekst og strukturerer innhold samt gi muligheter til å navigere til andre dokumenter ved hjelp av hyperlenker (lenker). HTML har fast definerte tagger som tolkes av nettleseren på forskjellig vis. En tagg er en slags kodesnutt byttet opp av < og > og en tekst som gir visse egenskaper i midten. Eksempel på dette er taggen for paragraph; (avsnitt) <p>. HTML kan også integrere andre html-filer eller andre filtyper som film- lyd-, bilde- og tekstfiler. HTML-dokumenter lagres som "filnavn".html. Man bør unngå særnorske bokstaver som æ, ø og å samt holde seg til små bokstavtyper.

Imidlertid har moderne designere gått mer og mer bort ifra HTML og istedet bruker xHTML. xHTML skiller seg fra HTML på noen vesentlige punkter, eksempelvis at formatering og innhold skal separeres, at alle tagnavn skal lagres med små bokstaver og at alle attributter må omsluttes av " anførselstegn). xHTML er dessuten ikke et markupspråk slik som HTML, men et metaspråk- direkte utviklet fra SGML og XML.

Verktøy

Når man skal utvikle nettsider trenger man et sett av verktøy. For å lage selve siden trenger man en teksteditor. Her kan Notepad, som følger med operativsystemet Windows, brukes, eller hvis man er Linux-bruker kan Vim være et alternativ. Andre alternativer er TextPad fra Helios Software Solutions. Enhver teksteditor kan i prinsippet brukes, og teksteditorer finnes i både betal- og gratisversjoner. I en teksteditor må alt hardkodes. Et annet alternativ til en teksteditor er en wysiwyg-editor (What You See Is What You Get), en editor som ved hjelp av et grafisk grensesnitt lar en webdesigner lage html-sider ved å trykke på knapper og ved å velge fra dialogbokser. Eksempel på slike editorer er Dreamweaver fra Macromedia, Front Page fra Microsoft, Cute HTML fra Globalscape og open source-programmet Bluefish fra Bluefish.
Lenker til editorer:

I tillegg til en editor trenger man gjerne et billedredigeringsprogram. Et godt program lar en lage knapper, bannere og annen webgrafikk i tillegg til at en kan editere bilder. Billedbehandlingsprogram finnes også i mange versjoner, noen gratis og noen kommersielle. Et gratis billedbehandling sprogram er Gimp, som er open source. Av betalprogrammer kan Paint Shop Pro fra Jasc Software være et alternativ. Prismessig ligger dette langt
lavere enn proffverktøyet Adobe Photoshop fra Adobe.
Lenker til billedbehandlingsprogrammer:

Til sist trenger man et program som kan overføre filer fra lokal maskin til en server. Et slikt filoverføringsprogram kan enten bruke ftp-protokoll eller hvis servermaskinen har spesielle sikkerhetskrav og krever kryptert overføring kan man bruke en SSH-klient. Eksempel på en gratis ftp-klient er Flash FXP, for SSH- Secure Shell Client fra SSH Communication Security Corp. Sistnevnte er gratis i bruk til ikke-kommersielle formål.
Lenker til filoverføringsklienter:

Nettlesere

Det finnes et stort antall nettlesere (browser) som igjen finnes i mange versjoner. De mest brukte nettleserene er Microsofts Internet Explorer (IE) og Netscape Navigator, som i 2001 hadde en markedsandel på 95% (Niederst, 2001) Andre nettlesere er Mozilla, Firefox, Opera og Lynx. Opera er en norskutviklet nettleser og finnes både i gratis- og betal-versjoner, mens Lynx er en textbrowser, som ofte brukes av blinde. De fleste nettlesere kan lastes ned gratis fra nettet. Lenker til nettlesere:

Webvert og url'er

For at en nettside skal kunne vises på Internett på det publiseres på en datamaskin som har installert webserver-programvare. Har man en bredbåndsleverandør som tillater inngående webtrafikk og en bredbåndslinje som alltid er aktiv er det mulig å ha nettstedet tilgjengelig for verden hjemmefra. For mange er ikke dette et alternativ, og da er det mulig å betale et firma for å tilgjengeliggjøre sidene. Det finnes mange leverandører for webhotell i verden, hvor det er stor forskjell på priser og tjenester som tilbyes. Noen leverandører har støtte for dynamiske websider og websider med koblinger til databaser, mens andre tilbyr kun mulighet for rene html-sider. Når man skal velge webhotell er det viktig å tenke på hvilket behov man har. Skal man ikke tilby dynamiske websider, eksempelvis skrevet i php eller asp, eller hvis man ikke skal ha koblinger til databaser er det ikke nødvendig å betale ekstra for slike tjenester. I slike tilfeller kan en gratis vert være tilstrekkelig. To nettsteder som tilbyr gratis webhotell er start.no og home.no. Skal man derimot ha en nettbutikk eller stiller strenge krav til sikkerhet må man velge en leverandør som tilbyr dette.

Når websidene er lagret på et webhotell er det ønskelig å få besøkende. Alle datamaskiner som er tilgjengelig på nett har en egen ip-adresse som består av fire grupper med tall fra 0 til 255. Denne ip-adressen kan brukes for å finne en nettside på Internett. Det er derimot vanskelig å huske tallrekker og da er en url (Unified Resource Locator) løsningen. En url er en peker til en ip-adresse, og forteller nettleseren hvilken ip-adresse url'en tilhører. Eksempelvis kan url'en cenit.no peke mot ip-adressen 217.2.254.0. Skal man ha siden min hjemme på egen maskin og ikke har en statisk ip-adresse kan man bruke en dynDNS-tjener. DynDNS er et program som kommuniserer med maskin min og sjekker om ip-adressen min har endret seg. Hvis den har oppdaterer den pekeren fra url'en til den nye ip-adressen.

Standarder

Om hvilken nettleser eller plattform brukere som skal besøke sidene vi lager aner vi ingenting om. HTML-tagger finnes i stort antall. Noen vises korrekt i IE, andre kun i Netscape Navigator. For at vi skal være sikker på å ikke ekskludere enkelte brukere eller lage nettsider som ser merkelige ut i forskjellige nettlesere er det fornuftig å holde meg til HTML- eller xHTML-standarden gitt av W3C. Denne standarden inneholder et sett med tagger som får omtrentlig samme resultat uavhengig av brukerens nettleser. Når man skal utvikle et nettsted skal sidene helst validere, dvs inneholde korrekt HTML- eller xHTML-kode. Dette er ikke et definitivt krav, kun ønskelig. Det finnes flere gratis valideringstjenester på nett, hvor W3C har laget en. Denne finnes på http://validator.w3.org/

Doctype

For at et html-dokument kan validere må det inneholde en doctype-deklarasjon. Doctypedeklarasjonen sier noe om hvilken dtd (document type defintion) dokumentet bruker. En standard doctype-deklarasjon for html 4.01 er slik:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Denne doctypen forteller at dokumentet er av typen HTML og at det brukes HTML 4.01-standarden. Videre viser den lenke til W3Cs dtd loose. En dtd (Document Type Definition) beskriver strukturen i dokumenter og hvilke elementer dokumentet må ha, kan ha og hvilken rekkefølge disse opptrer. Det finnes ulike typer dtd’er, for xHTML transitional ser den slik ut:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Filstruktur

Når man skal lage et nettsted oppretter man en rotkatalog. Alle filer som skal være en del av nettstedet kan ligge under denne rotkatalogen rett under roten. Imidlertid kan det være hensiktsmessig å opprette underkataloger og kategorisere filer i disse underkatalogene. Det kan være lurt å ha en katalog for css-filer, bildefiler, mediafiler og tekstfiler.

Hvordan lage hjemmesider i HTML

Av en eller annen grunn er hvordan setningen "Hello World" skal skrives ut når en nybegynner lærer seg et nytt programmeringsspråk eller som her, markupspråk. HMTL er ikke et programmeringsspråk, siden kodene (taggene) ikke trenger å kompileres, slik det gjør i ekte programmerings-språk, for eksempel java eller C#.

Som sagt kan man bruke notepad for å skrive HTML eller xHTML-dokumenter. Koden nedenfor kan kopieres og limes inn i et tomt dokument, som lagres som for eksempel html_dokument.html. Formen på dette html-dokumenter med frasen "Hello World" er slik:


< html>
	< head>
		< title>
                    Mitt første HTML-dokument < /title>
	< /head>
	< body>
		Hello World
	< /body>
< /html>

Ovenfor vises det minimum av tagger et (x)HTML-dokument må inneholde. I denne nettsiden ser vi at hele dokumentet starter med taggen < html>. Dette taggen forteller nettleseren at det er et HTML-dokument som følger, og da vet nettleseren hvordan dokumentet skal tolkes og presenteres for brukeren. Html-taggen omslutter hele dokumentet. Etter html-taggen følger < head> -taggen. Inne i head-taggen har dokumentet her en tittel, her "mitt første HTML-dokument". Dette er teksten som vises i tittellinjen i nettleseren når siden vises. Head-taggen kan inneholde flere tagger. Disse er metatagger, og hva metatagger er kommer vi tilbake til litt senere. Videre avsluttes head-taggen med < /head> En tagg avsluttes med en slash (/) og taggnavn på taggen som skal avsluttes (eks < /head>). Den første taggen som ble åpnet var html-taggen. Denne er også den siste som lukkes. Videre fulgte head-taggen, så titletaggen og for at head-taggen skal kunne avsluttes må title-taggen lukkes først. Dette kalles korrekt nøsting av tagger.

Etter head-taggen følger body-taggen. Alt innhold på websiden skrives mellom < body> og < /body> Hvordan denne enkle siden blir seende ut i en nettleser ser du nedenfor.

Hjemmeside i html

Det finnes mange tagger i html, hvor noen beskriver struktur og noen beskriver formatering. Struktur-tagger er for eksempel div-tagger, span og table-tagger mens tagger som beskriver formatering kan være < p> - som beskriver avsnitt, <br> (eller <br /> for xHTML) som lager linjeskift og < font> som beskriver skrift og skrifttyper.

Kommentarer

Noen ganger er det ønskelig å skrive kommentarer til websiden man holder på å lage. Dette kan gjøres slik;

<!--
Dette er en kommentar
–>

Alt som står mellom <!– og –> blir ignorert av nettleseren. Det kan være hensiktsmessig å kommentere koden sin slik at den også er forståelig etter en tid.

Nøsting

Alle tagger som er av typen container, dvs de har en åpningstag og en sluttagg (som html, body mfl) må nøstes riktig for å få valid html-kode. I praksis vil det si at den sist åpnede taggen er den som lukkes først. Eksempel på dette er denne koden:


< html>
	< head>
		< title>  Mitt første HTML-dokument < /title>
	< /head>
	< body>
		Hello World
	< /body>
< /html>

Her ser vi at den første taggen som åpnes er html-taggen. Denne er også den siste som lukkes. Deretter åpnes head-taggen, så titletaggen og for at head-taggen skal kunne avsluttes må title-taggen lukkes først.

Metatagger

Inne i head-taggen kan man skrive metatagger. Metatagger inneholder informasjon om websiden. Metatagger er ikke obliatorisk, men brukes av mange søkemotorer for å indeksere innholdet av siden.(Gjøre den tilgjengelig for søk på for eksempel Google.com, Yahoo.com osv) To viktige metataggene er "keywords" og "description". Keywords inneholder ord som beskriver innholdet av nettsiden. Eksempelvis kan en metatagg for keywords være slik:
< meta name="keywords" content="html, metatagger, webdesign, tagger" >
Når websiden er indeksert kan en bruker som søker på for eksempel Google.com etter ordet metatagg få opp min side i trefflisten. Videre er metataggen "description". Denne er en tekstlig beskrivelse av innholdet i nettsiden i hele setninger, og er på formen
< meta name="description"
content="UiB-student skriver en blogg som inneholder bloggposter om html,
webdesign, koding av html-dokumenter og mye mye mer. Velkommen! " >

Når en bruker søker på for eksempel metatagger og søkemotoren returnerer min nettside vil noen søkemotorer og vise metataggen description, slik at en bruker lettere kan vurdere relevans av siden i forhold til hans informasjonbehov.

Overskrifter

For å skille overskrifter fra brødtekst brukes taggen h. Denne er etterfulgt av et tall fra en til seks. Nedenfor vises illustrasjon av de forskjellige størrelsene.

Formateringer

På samme måte som i en teksteditor kan man endre hvordan en tekst vises. Eksempel på dette kan være med fet skrifttype, understrekninger, super- og subskrift og kursiv. Siden vi skal kode struktur i dokumentet vårt skal vi bruke em (emphasize) når det er noe vi vil fremheve og strong når det er noe vi vil ha i fete typer. I eldre litteratur vil det ofte stå at taggen for fet skrifttype er <b> (er nå erstattet med <strong>) og <i> for kursiv. Denne er nå <em>. Understrekninger bruker taggen <u>, subskrift er <sub> , superskrift er <sub> .Alle disse lukkes..
Eksempel på forskjellige tekstformateringer vises under:

Lenker

Ved hjelp av hyperlenker kan en bruker navigere fra et dokument til et annet eller mellom forskjellige steder i samme dokument. En hyperlenke kan enten være tekstlig eller for eksempel et bilde. Hvis en tekst brukes om lenke bør ikke lenketeksten være for lang. Mange nettsteder bruker lenketekst "les her". Slike lenketekster bør unngåes og teksten bør helst være beskrivende for den neste sidens innhold. Taggen for lenker i HTML er a for anchor. A-taggen har attributtene href, som angir url (adresse) til dokumentet det lenkes til, videre skal det ha et title-attributt for å validere. Title-attributtet vises som en gul lapp når cursor beveger seg over lenken. Dette attributtet kan inneholde informasjon om den koblede siden, som for eksempel tittelen på websiden og detaljer om hva slags informasjon som finnes på den koblede siden. Videre har a-taggen noen valgfrie attributt. En av de er target, som angir hvordan det nye dokumentet skal åpnes. Er target="blank" åpnes den lenkede siden i nytt vindu.

For en bruker på nett er det viktig å vite hvor han er, hvor han har vært og hvor det er mulig å navigere. Som standard er lenker som ikke er besøkt blå mens besøkte lenker er enten røde eller lilla. Det er mulig å definere sine egne farger på hyperlenker, og da er det viktig å gjøre brukeren klar over hva som er lenker, hvilke som er besøkte og hvilke som ikke er det.

Eksempel på a-taggen i bruk:
<a href="last_page.html" title="Den siste siden på Internett. Anbefales hvis du er lei surfing" target="_blank">Den siste siden på internett</a>

Hvordan dette vises i en nettleser illustreres under:

Et bilde kan også være lenke. Da må img-taggen plasseres innenfor a-taggen slik:
<a href="bildeside.htm" title=" " ><img src="images/mitt_bilde.jpg"
alt=" billedlenke"></a>
På illustrasjonen over ser vi at mitt_bilde.jpg er blitt lenke ved at bildet har fått en blå kantlinje rundt. I dette tilfellet er det obligatoriske title-attributtet i a-taggen tom, mens bildets alt-tagg har fått verdi.Det skilles mellom absolutte og relative lenker. En absolutt lenker er hvor hele dokumentstien eller url er oppgitt. Hvis jeg skal lenke til et annet nettsted bruker jeg absolutte url'er, eksempel slik:
<a href="http://www.vg.no" title="Lenke til VG sine sider" >VG</a>

Bilder

Et HTML-dokument kan inneholde bilder av typene jpg, gif og png.Hvilken filtype som er hensiktsmessig er avhengig av innhold i bildet. For et detaljert bilde med stort fargespekter kan jpg-formater være passende. Denne filtypen får større filstørrelse enn bilder av typen gif, og tar dermed lenger tid å laste. For bilder med få farger og jevne fargeflater, for eksempel logoer og ikoner kan gif-filformatet være passende. Gif kan vise opptil 256 ulike farger. Filstørrelsen blir relativt liten og filene er dermed kjappe å laste. Gif-formatet kan også vises med transparent bakgrunn, og være av typen interlaced. Interlaced vil si at filen lastes litt og litt og blir gradvis klarere. Ved å bruke interlaced gif-filer kan brukeren få et overblikk om bildets innhold før filen er ferdig lastet. Png (uttales ping) har ikke støtte hos alle nettlesere. Png kan vise like mange farger som jpg, men filstørrelsen blir større enn tilsvarende fil i jpg-format.

Når man skal sette inn et bilde i et html-dokument bruker man taggen img. Videre spesifiseres kilden til bildefilen. Img-taggen skal også ha attributtet alt for at sidene skal validere i henhold til W3C-standarden. Alt-attributtet viser en alternativ når cursor holdes over bildets plassholder, eller som tekst for brukere som ikke ønsker å se bilder på websider. Videre kan img-taggen ha attributter height og width, som bestemmer henholdsvis høyde og bredde av bildet. Imidlertid er det fornuftig å bruke et billedredigeringsprogram for å endre størrelsen på
bilder, fordi trass i at bildet ved hjelp av height- og width-attributter kan fremstå som av passende størrelse kan filen som lastes fremdeles være stor. Dette gir da høyere nedlastingshastighet. Attributtene vspace og hspace angir hvor langt fra bildekantene teksten skal plasseres,(i css brukes padding og margin) og align angir hvordan teksten skal flyte rundt bildet.

Eksempel på en img-tag:
<img src="images/mitt_bilde.gif" alt="Bilde av meg" height="200" width="100" hspace="20" vspace="10">

Bruk av img-taggen og demonstrasjon av alt-attributtet vises nedenfor:

Tabeller

Tabeller har blitt brukt til å strukturere innhold og bestemme plassering av elementer i en webside og også til tabellens egentlige formål - å vise tabelldata. Taggen for tabeller er table. Denne taggen oppretter en tom tabell uten rader og kolonner. Rader opprettes med tr, kolonner med td. Skal man definere tabelloverskrifter kan man bruke taggen th, som midtstiller teksten og gjør denne til fete typer. Inne i td-taggen skrives tabellens innhold. Det er mulig å lage kolonner som strekker seg over flere kolonner ved å bruke attributtene colspan="et antall kolonner" på samme måte som man kan få en rad til
å strekke seg over flere rader ved å bruke attributtet rowspan. Tabeller kan ha attributtet border, som angir bredden på kantlinjer på tabellen. Syntaksen for en tabell er:


<table border="1> >
<tr>
		<th>Tabellinnhold</th>
		<th>Mer tabellinnhold</th>
	</tr>
	<tr>
		<td colspan="2" >Celle som strekker seg over to kolonner</td>
	</tr>
	<tr>
		<td rowspan="2">Denne cellen går over to rader</td>
		<td>Mer tabellinnhold</td>
	</tr>
	<tr>
		<td>Mer tabellinnhold</td>
	</tr>
	<tr>
		<td>Tabellinnhold</td>
		<td>Mer tabellinnhold</td>
	</tr>
</table>

Denne tabellen er illustrert nedenfor.

Skjemaer

Det er mulig å lage skjemaer i et html-dokument, og ved å ta i bruk enten epost eller serverside scriptingspråk er det mulig å behandle slike data. Eksempel på et skjema som kan være relevant er registreringsskjemaer eller spørreundersøkelser på nett. Et skjema opprettes ved hjelp av form-taggen. Denne avsluttes. Deretter må man legge til rette for brukerinnput. Dette gjøres ved hjelp av taggen input. For innskriving av tekst er attributtet text, mens andre kan være password, radio og checkbox. Det er også mulig å vise nedtrekslister som lar en bruker velge mellom forhåndsdefinerte alternativer. Til dette brukes taggene select og option. For å kunne sende skjemaet må metoden for å overføre dataene bestemmes. Alternativene her er post og get. For å kunne sende skjemaet av gårde må man også ha en knapp for å sende. Denne lages med input type submit. Knapp som nullstiller skjemaet igjen er input type reset. Attributtet value bestemmer tekst på knappene. Det finnes flere input typer enn disse, og de kan du lese mer om her Et skjema kan se slik ut:

CSS - cascading style sheet

er en teknikk som gir en webdesigner mulighet til å skille innhold fra presentasjon i et html- eller xHTML-dokument. I et HTML-dokument kan man definere formatering for elementer direkte i HTML-koden. Dette er en løsning som gir mye kode, siden eksempelvis font-color, font-size og text-alignment må oppgies for hver gang vi vil endre disse. Mye kode gir høyere nedlastingshastighet. Løsningen er å bruke css (Cascading Style Sheet). CSS- dokumentet er en mal for hvordan websidene skal se ut, og ved å skille innhold og formatering vil vi få mer oversiktlig kode samt at endringer gjøres enklere. Ved å bruke css som dokumentmal for et nettsted kan man (når man bruker et eksternt stilark) endre kode i css- filen og endringen gjenspeiles i hele nettstedet. Delingen mellom innhold og formatering fører også til at websider lastes hurtigere av nettlesere, noe som gir økonomisk gevinst for en bedrift i form av enklere vedlikehold, mindre krav til båndbredde osv. CSS-dokumenter lagres som "filnavn".css og for å skrive css-dokumenter trenger man en teksteditor, som for eksempel NotePad

En css-regel består av en selector (taggen som vi vil endre), et attributt og en verdi. Det er også mulig å definere sine egne selectorer, da enten av typen class eller id. Et id-element må være unikt i et dokument mens et class-element kan opptre flere ganger. Syntaksen for en css-regel er selektor { attributt: verdi } hvor selector kan for eksempel være font-taggen, attributtet kan være color og verdien kan eksempelvis være blue.

Det finnes tre måter å lage stylesheet på, 1) Internt stylesheet 2) Inline stylesheet innenfor en tagg og 3) eksternt stylesheet.

Et eksternt stilark hentes inn i html-dokumentet med å legge til følgende linje i head-taggen: <link rel="stylesheet" type="text/css" href="sti/min_stil.css">.

Fordelen med eksterne stilark er at man kan benytte samme stilark til mange forskjellige HTML-dokumenter, og endringer gjort i stilarket gjenspeiles i dem alle. Hvis man bare skal lage en nettside er det ikke nødvendig med et eksternt stilark, men man kan lage et internt stilark. Internt stilark defineres i head-taggen i HTML-dokumentet med taggen style. Siden gamle nettlesere ikke har støtte for css legger vi til en kommentar slik at disse eldre nettleserene oppfatter dette som en kommentar og ignorerer dette.

En intern stylesheetdeklarasjon kan brukes slik:
<style type="text/css">
<!–
p { text-align: justify }
–>
</style>

Et inline stilark defineres innenfor den taggen man vil skal endres. Eksempel kan være en p-tagg, hvor man vil at skriften skal være courier, fet og tolvpunkts og tekstjustering skal være høyrejustert. Da kan man definere dette direkte i p-taggen, eksempelvis slik: <p style="font-face:courier; font-size:12pt; text-align:right">
Stilark opererer med presendens (dvs rekkefølgen de er gyldig i) Høyest presendens har inline stylesheet, dernest følger interne stilark, eksterne stilark, brukerdefinert visning og til sist browser default. Et inline stilark kan brukes hvis man har et element som alltid skal være likt med unntak av ett sted. I stedet for å definere en helt ny css-regel kan man overstyre den eksisterende med en inline stilregel.

Selektor

Den enkleste måten å definere css-regler på er å endre visningsmåten for html-tagger. Eksempel kan være overskriftene h1 til h6. Hvis jeg vil at h1 skal være blå og h4, h5 og h6 skal være lilla må jeg lage regler som sier dette. For h1 deklarerer jeg at color skal være blå slik: h1{ color:blue } mens jeg kan gruppere elementer som skal ha samme egenskaper adskilt med komma, slik jeg gjør med overskrifter h4 til h6: h4, h5, h6 { color: purple }

Vi kan også definere våre egne selektorer. Eksempelvis ønsker vi å flere steder vise tekst med veldig liten skrift og gul skriftfarge. Da kan vi lage en klasse (class) som vi kan kalle "liten". En klassedeklarasjon starter med . (punktum) slik:


.liten{
	font-size:0.75em;
	color:yellow
}

Her ser vi at klassen "liten" har skriftstørrelse 0.75em. Em er en relativ måleenhet som angir en tekststørrelse lik bredden av bokstaven stor M av gjeldende fonttype. Andre måleenheter er ex, som angir tekststørrelse relativt til høyden for bokstaven x i gjendende skrifttype. Denne er omtrent halvparten så stor som em. Videre har vi px, som angir skriftstørrelse i absolutt størrelse. Det er ikke god praksis å angi absolutte størrelser siden en bruker av forskjellige årsaker ønsker å forstørre eller forminske teksten på siden, og når denne er oppgitt i absolutte størrelser er ikke dette mulig. Vi kan også bruke % (prosent), som angir hvor stor skriftstørrelsen skal være i forhold til gjeldende skrifttype.

En id-selektor deklareres ved å skrive # (firkant, skigard) foran. Id kan som sagt kun brukes på unike elementer i et html-dokument. Blokk-elementer er div- og p-tagger. Disse genererer en rektangulær elementboks som beskriver hvor stor plass elementet skal ha. Plassering av disse elementene kan være absolutt (absolute), relativ (relative), statisk (static) eller fast (fixed). Attributter for posisjonering er "margin" og "padding", mens bredde og høyde settes av respektiv "width" og "height". Høyden bestemmes etter størrelsen på innholdet, hvis man skal angi en fast størrelse kan man bruke min-height:verdi. Dette støtter ikke IE. Elementer med relativ plassering posisjoneres etter hvor elementet ville vært plassert hvis det hadde fulgt vanlige float-regler.

Bakgrunnselementer

Man kan spesifisere en bakgrunnsfarge eller et bakgrunnsbilde i css. Dette kan være gyldig for både body-, div eller p-tagger. Bakgrunnsfarge bruker attributtet background-color mens bakgrunnsbilde bruker attributtet background-image etterfulgt av en url til kildefilen. For bakgrunnsbilde kan man spesifisere hvordan bildet skal vises, enten som repeat, no-repeat, repeat-x eller repeat-y.

Sammenslåing av elementer.

HTML - hypertext markup language

En webside er et dokument bestående av tekst, bilder, video, audio og koblinger til andre dokumenter. Disse dokumentene lagres på en datamaskin og vises gjennom en nettleser.

I blokkelementer kan man, når det gjelder kantlinjer (border), marger (margin), padding (og flere) kan man deklarere enkeltverdier for henholdsvis topp, høyre, bunn og venstre. I et div-element kan marger kan eksempelvis deklareres slik:


div {
	margin-right: 2%;
	margin-left: 10%;
	margin-top: 2%;
	margin-bottom: 5%
}

En enklere måte er å slå alle disse sammen under betegnelsen maring og oppgi verdier for henholdsvis top, right, bottom og left slik:
div { margin: 2% 2% 5% 10% }
Dette gir mindre kode. Det samme kan gjøres med alle attributter for bakgrunn (background), kantlinjer og flere. Hvis man skal ha kantlinjer rundt hele elementet og disse skal være like spesifiseres verdier for henholdsvis tykkelse, type og farge. Eksempel er border: thin solid red som gir en tynn, heltrukket rød kantlinje rundt hele elementet.

Dette var introduksjon til html-programmering og css.
For ytterligere lesing om html anbefales disse lenkene:

For ytterligere lesing om css anbefales disse lenkene:

Permanent lenke til posten | RSS på kommentarer

Legg igjen en kommentar