 |
| 2. | Indhold | ||||
 |
2.1 | Den Første Hjemmeside | |||
|
2.1.1 | Hjemmesidens Struktur | |||
|
2.1.2 | HTML-elementet | |||
|
2.1.3 | Headeren | |||
|
2.1.4 | Kroppen | |||
|
2.1.5 | Kommentarer | |||
|
2.1.6 | Den Færdige Side | |||
|
2.2 | Overskrifter og Afsnit | |||
|
2.2.1 | Overskrifter | |||
|
2.2.2 | Afsnit | |||
|
2.3 | Et lidt Større Eksempel | |||
Alle hjemmesider på Internet består af de samme dele, uanset hvor komplicerede de ser ud:
Først og fremmest skal vi fortælle browseren, at det drejer sig om et HTML-dokument. Det gør vi med HTML-elementet, der indledes med tag'et <HTML>, der altid står først i dokumentet, og afsluttes med tag'et </HTML>, der altid står til sidst. Dette er derfor et fuldgyldigt HTML-dokument:
<HTML> <!-- Dette er blot en kommentar --> </HTML>
selv om det kun indeholder en kommentar. Den vises forøvrigt slet ikke i browseren, så det er ret begrænset, hvad vi får at se på skærmen.
Der er nogle få attributter knyttet til HTML-elementet, som du kan bruge til at fortælle browseren lidt mere om dit HTML-dokument.
Hjemmesidens header står først i dokumentet, og den bruges til de overordnede oplysninger. Det meste af denne information vises dog ikke direkte i browseren, selv om noget af det kan have stor indflydelse på, hvordan browseren viser hjemmesiden.
Header-elementet indledes med tag'et <HEAD> og afsluttes med </HEAD>, og alt mellem de to tags er headerinformation - logisk nok.
Der er dog én header-oplysning, der altid bliver vist: dokumentets titel. Den vises i browserens titelbjælke, ligesom den også udskrives på hver eneste side, når du printer hjemmesiden.
Man angiver titlen i TITLE-elementet:
<TITLE>Dette er dokumentets titel</TITLE>
Det er valgfrit, om man vil anvende <HEAD> tags'ene. Der er dog enkelte elementer, der skal stå i header-elementet. Desuden giver det en god struktur i dine HTML-dokumenter, så det er en god ide at anvende dem alligevel.
Der er selvfølgelig også knyttet nogle attributter til HEAD-elementet.
Læs desuden afsnittet "Mere om HTML-headeren".
Den tredje bestanddel, der findes i ethvert HTML-dokument, er dokumentets krop. Det er kroppen, der vises i browservinduet og dermed den, der bestemmer hjemmesidens indhold.
Kroppens indhold står mellem de to tags <BODY> og </BODY>, der dog er valgfrie i HTML 4.0, da browseren viser alt, der ikke er header-information. Men brug dem alligevel for strukturens skyld.
Bemærk: HTML-dokumenter, der indeholder en rammedefinition, indeholder ingen <BODY>-tags.. Læs mere herom i afsnittet "Rammer".
Der findes en række attributter og hændelser, du kan bruge sammen med BODY-elementet.
Alle farveangivelser er på formen:
hvor rr, gg og bb er hexadecimale værdier mellem 0 og 255 for henholdsvis rød, grøn og blå. Ren blå angives således med:
Der findes dog en række faste farver, der kan angives ved navn:
| Black | Maroon | Green | Olive | Navy | Purple | Teal | Silver |
| Gray | Red | Lime | Yellow | Blue | Fuchsia | Aqua | White |
så ren blå opnås også med:
Nu vi er ved farverne, vil jeg lige gøre opmærksom på den såkaldte "Netscape-palette" over "websikre" farver - farver der vises korrekt uanset browser og platform. Den består af 216 farver sammensat af værdierne 0, 51 (hex 33), 102 (hex 66), 153 (hex 99), 204 (hex CC) og 255 (hex FF) for hver af de tre farver rød, grøn og blå. Hvis det er vigtigt at hjemmesiden altid er vist med korrekte farver, skal du holde dig til disse 216.
Som du så i det første eksempel, kan du indsætte kommentarer i HTML-dokumentet. Kommentarer vises som nævnt ikke i browseren, men kan naturligvis ses i editoren. De er derfor velegnede til at skabe overblik i et dokument, men anvendes også til at skjule visse dele af dokumentet såsom script-kode for ældre browsere, så de ikke viser denne ved et uheld. For det ser altså ikke specielt kønt ud.
En kommentar indledes med <!-- og afsluttes med -->:
<!-- Dette er en kommentar -->
Bemærk: Visse browsere som Internet Explorer og Netscape Navigator accepterer <! som startkode og > som slutkode for kommentarer.
Alt dette vil vi nu anvende til at lave den første, enkle hjemmeside, der er opbygget således:
<HTML> <HEAD> <!-- Denne sektion indeholder dokumentets header --> <TITLE>Min Første Hjemmeside</TITLE> </HEAD> <BODY> <!-- Her følger så dokumentets krop --> Dette er min første hjemmeside. </BODY> </HTML>
Denne enkle side viser teksten "Dette er min første hjemmeside." i browservinduet, mens titlen er "Min Første Hjemmeside". Læg mærke til, at de to kommentarer ikke vises i browseren.
Nu kunne man fristes til blot at sætte tekst ind i sit HTML-dokument og tro, at den hellige grav er velforvaret. Men desværre ser virkeligheden anderledes ud, da browseren er indrettet til at se bort fra al den formatering, man kan lave i en almindelig editor. Således vil den dele linierne, hvor det passer bedst med browservinduets bredde, og erstatte alle linieskift med mellemrum, ligesom alle mellemrum i starten eller slutningen af en linie udelades. Det samme sker med overskydende mellemrum (to eller flere) mellem ord.
Det medfører, at teksten i dokumentet:
<HTML> <HEAD> <TITLE>Denne Tekst Rodes Sammen</TITLE> </HEAD> <BODY>
Den Forsvundne Dagbog.
Vinden blæste kold og bidende gennem den tomme gade, mens regnens dråber faldt tungt mod
ruden i mit beskedne kontor. Sam er navnet. Sam Billings, privatdetektiv. Lidet anede jeg, at
jeg inden der var gået fem minutter ville blive involveret i en sag, der ville ændre mit liv
for altid.
Lyden af døren i forkontoret der gik fortalte, at ikke alle indbyggere i den regnvåde millionby havde søgt ly for uvejrets rasen. Trin bevægede sig hen over forkontorets gulv. Trin fra høje hæle. Det var altså en kvinde. Kvinder havde aldrig bragt mig andet end besvær, og denne kvinde ville sikkert ikke være nogen undtagelse.
Så stod hun i døren til mit kontor. Selv mens hun stod der i den grå regnfrakke og slog sin paraply sammen, kunne man se, at hun havde klasse - rigtig klasse. Allerede da burde jeg have været på vagt, da kvinder af hendes slags aldrig kom til denne del af byen. Men hun havde et ansigt, der kunne få selv alarmen i Fort Knox til at forstumme.
</BODY> </HTML>
vil blive rodet sammen i et stort, samlet afsnit uden overskrift og afsnitsinddeling. Særdeles uinteressant! Det er derfor nødvendigt med nogle elementer, der kan formatere teksten med overskrifter og afsnit.
HTML indeholder en række elementer der kan lave overskrifter i seks størrelser, hvor H1 giver den største overskrift, mens H6 giver den mindste. Alle overskriftstags har et tilsvarende sluttag. Både start- og sluttag er påkrævede.
Følgende udsnit af et HTML-dokument viser de seks overskrifter
<H1>Dette er overskrift 1</H1> <H2>Dette er overskrift 2</H2> <H3>Dette er overskrift 3</H3> <H4>Dette er overskrift 4</H4> <H5>Dette er overskrift 5</H5> <H6>Dette er overskrift 6</H6>
Som det ses, når man betragter siden i sin browser, står hver overskrift på en linie for sig selv. Det ses også, at de to mindste overskrifter er mindre end den almindelige tekst. Man bør derfor nok holde sig til <H1> til <H4>.
Hvad der derimod ikke ses så tydeligt i browseren er, at browserne laver lidt luft lige over og under overskriften, så den skiller sig lidt ud fra den almindelige tekst.
På samme måde er der et element, der definerer et tekstafsnit: <P> med sluttag'et </P>. Når browseren møder dette element, begynder den teksten på en ny linie, ligesom den laver en halv til en hel linies afstand over og under tekstafsnittet.
Ved hjælp af overskrifts- og afsnitselementer kan vi nu give kriminalhistorien ovenfor et mere indbydende udseende:
<HTML> <HEAD> <TITLE>Overskrifter og Afsnit</TITLE> </HEAD> <BODY>
<H2>Den Forsvundne Dagbog.</H2>
<P>Vinden blæste kold og bidende gennem den tomme gade, mens regnens dråber faldt
tungt mod ruden i mit beskedne kontor. Sam er navnet. Sam Billings, privatdetektiv. Lidet
anede jeg, at jeg inden der var gået fem minutter ville blive involveret i en sag, der ville
ændre mit liv for altid.</P>
<P>Lyden af døren i forkontoret der gik fortalte, at ikke alle indbyggere i den regnvåde millionby havde søgt ly for uvejrets rasen. Trin bevægede sig hen over forkontorets gulv. Trin fra høje hæle. Det var altså en kvinde. Kvinder havde aldrig bragt mig andet end besvær, og denne kvinde ville sikkert ikke være nogen undtagelse.</P>
<P>Så stod hun i døren til mit kontor. Selv mens hun stod der i den grå regnfrakke og slog sin paraply sammen, kunne man se, at hun havde klasse - rigtig klasse. Allerede da burde jeg have været på vagt, da kvinder af hendes slags aldrig kom til denne del af byen. Men hun havde et ansigt, der kunne få selv alarmen i Fort Knox til at forstumme.</P>
</BODY> </HTML>
Og det er jo straks en helt anden historie. Jeg kan næsten heller ikke vente, til den bliver filmatiseret. Måske med Kevin Spacey i hovedrollen, nu da vi ikke har Humphrey Bogart længere.
Overskrifter og afsnit har en række fælles attributter og hændelser.
Efter denne korte indføring i det mest grundlæggende af HTML er det tid til et lidt større eksempel. Det gør også brug af attributter, hvilket jeg hidtil bevidst har undgået for at holde eksemplerne så enkle som muligt. Nogle af de anvendte attributter er under afvikling i HTML 4.0, men de anvendes alligevel i eksemplet, da det er for tidligt at introducere typografiark på nuværende tidspunkt.
<HTML> <HEAD> <TITLE>Et lidt Større Eksempel</TITLE> </HEAD> <BODY bgcolor="Red" Text="White" title="Lyntog gennem Tiderne"> <H1 align="center">De Danske Lyntog</H1>
<P align="left" title="De Første Lyntog">De allerførste lyntog blev taget i brug samtidigt med Lillebæltsbroen i maj 1935 som et led i en større trafikrevolution, der skulle revolutionere togforbindelserne mellem landsdelene. Selve lyntoget var et motorvognstog med en motorvogn med førerplads i hver ende og en mellemvogn imellem. Hver motorvogn indeholdt desuden en 2 klasse salon, ligesom en motorvogn i hvert sæt havde restaurant, hvor der kunne indtages små retter og forfriskninger, mens den anden havde et bagagerum. Mellemvognen havde en 2. klasse kupe i hver ende samt seks 1. klasse kupeer. Disse trevognssæt suppleredes senere af fire firvognssæt opbygget efter samme mønster med en ekstra mellemvogn med 2. klasse salon.</P>
<P align="center" title= "MA-lyntogene">I tresserne erstattedes disse lyntog af nye motortog efter tysk forbillede. De nye lyntog bestod af i alt otte vogne med en motorvogn i hver ende. Af hensyn til storebæltsfærgerne kunne disse lyntog deles i to halvtog på hver fire vogne. Hvert halvtog bestod således af en motorvogn, en 1. klasse kupevogn, en mellemvogn og en styrevogn med 2. klassesalon. Mellemvognen i det ene halvtog indeholdt en 2. klasse salon samt restauration med bar, mens den i det andet halvtog kun indeholdt en 2. klasse salon. Disse nye lyntog blev renoveret og ombygget midt i firserne, samtidigt med at de blev malet sølvfarvede, hvorefter de desuden blev kendt som "Sølvpilene".</P>
<P title="IC-3" align="right">Sidste skud på stammen af lyntog på danske skinner er de populære IC-3 tog, der har førerplads i hver ende og, som navnet antyder, består af tre vogne, hvoraf den ene ydervogn har en 1. klasse salon samt 2. klasse hvilepladser, mellemvogen har en 2. klasse salon og den sidste ydervogn har en 2. klasse salon, men desuden er indrettet med legeområde til børnene. IC-3 anvendes både til Intercitytog samt i deciderede lyntogsløb med højere hastigheder og færre stop.</P>
</BODY> </HTML>
I dette eksempel ændrer attributterne bgcolor og text i BODY-elementet baggrundsfarven til rød med hvid tekstfarve. Indrømmet, jeg blev lidt national der, men det har en mening, da også teksten handler om noget dansk. Attributten title definerer en lille "hjælpetekst", der vises, når markøren har hvilet over et neutralt sted på siden i et par sekunder.
Dernæst følger overskriften, som centreres på siden med attributten align. Ligesom alle andre steder i eksemplet står dens værdi i gåseøjne. Dette er kun strengt nødvendigt, når værdien består af flere ord med mellemrum imellem, da mellemrum også anvendes til at skille attributterne ad. Til gengæld gør det HTML-dokumentet nemmere at læse for forfatteren, når han eller hun skal foretage ændringer.
I hvert af de tre afsnit ændres tekstens justering på siden med attributten align, idet første afsnit er venstrejusteret - hvilket er default, hvis der ikke angives noget - andet afsnit er centreret, mens det sidste er højrejusteret.
Hvert afsnit er desuden forsynet med en lille hjælpetekst med attributten title. Den gør det muligt for den, der læser hjemmesiden, at finde f.eks. afsnittet om MA-lyntogene ved blot at køre markøren hen over teksten uden at skulle læse det hele først.
Læg desuden mærke til attributternes rækkefølge i sidste afsnit, hvor title kommer før align. Det er for at vise, at attributternes rækkefølge er ligegyldig.
|
|
|
|
|
