For å gjøre en første test i redigeringsprogrammet du velger, opprett en ny fil. Hvis du bruker Windows-editor, kan du åpne den via Start>Alle programmer>Tilbehør>Editor.
Deretter velger du File>Save as. Det viktige her er feltet File type.
Her må du definitivt velge All files. I filnavnfeltet legger du deretter inn index.htm. Nå kan du lagre filen på ønsket sted. Dette er filen du nå jobber med, din første HTML-fil, selv om den for øyeblikket er tom. Dette vil endre seg snart.
Hvis du bruker Dreamweaver, bør du sette opp at du vil opprette en HTML-fil direkte ved oppstart av programmet.
HTML-grunnstrukturen
Før du begynner med HTML-grunnstrukturen, en viktig melding om bruken av semantikk innenfor denne serien - og også i HTML-verdenen. For det er lett å misforstå begrepene etikett og element igjen og igjen. Et eksempel:
<a href="news.htm">Til nyhetene</a>
Denne syntaksen viser et a-element, nemlig <a href="news.htm">Til nyhetene</a>. Dette elementet består av en åpnende a-tag, altså <a> eller fullstendig <a href="news.htm">, elementinnholdet Til nyhetene og den avsluttende a-taggen </a>. I tillegg har elementet a attributtet href med attributtverdien news.htm.
Det forrige eksempelet viser en hyperkobling-definisjon i HTML via elementet a. Dette elementet a blir uthevet av den åpnende <a>- og den avsluttende </a>-taggen. Så du kan se at det ikke er så vanskelig å bruke element- og etikettnavnene riktig.
Men nå begynner vi. Åpne den tidligere lagrede HTML-filen i redigeringsprogrammet. Ethvert HTML-dokument har en bestemt grunnstruktur.
Først her er nevnte struktur i all sin prakt:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Hva betyr nå de enkelte oppføringene? Vi starter med den såkalte dokumenttyp-deklarasjonen.
<!DOCTYPE html>
Gjennom en slik dokumenttyp-deklarasjon gir du nettleseren som senere vil vise nettstedet ditt, beskjed om hvilken HTML-standard du bruker. I dette tilfellet er det HTML5. Hvis du derimot skulle bruke HTML 4.01, ville DOCTYPE-angivelsen se slik ut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Akkurat dette med dokumenttyp-deklarasjon skaper forvirring blant HTML-nybegynnere, fordi det er mange forskjellige varianter. Det er faktisk enkelt: Forestill deg en dokumenttyp-deklarasjon som en slags byggbeskrivelse som beskriver hvilke elementer som kan være inkludert i et dokument.
Jeg anbefaler generelt en kort HTML5-angivelse.
<!DOCTYPE html>
Moderne nettlesere gjenkjenner den og viser sidene der den brukes i standardmodus. Men da bør du faktisk bare definere slike HTML-elementer som er tillatt i HTML5. Mer om det senere.
Vi fortsetter med html-elementet.
<html lang="de"> … </html>
Dette elementet omslutter dokumentet. Det som skiller seg ut er attributtet lang. Gjennom dette oppgis språket som brukes i dokumentet. Her er noen lang-forkortelser for den tyskspråklige regionen.
• de – Tysk (standard)
• de-ch – Tysk (Sveits)
• de-at – Tysk (Østerrike)
• de-lu – Tysk (Luxembourg)
• de-li – Tysk (Liechtenstein)
• en – Engelsk (Karibiske øyer)
Det finnes enda flere forskjellige lang-forkortelser for engelsk.
• en-us – Engelsk (USA)
• en-gb – Engelsk (Storbritannia)
• en-au – Engelsk (Australia)
• en-ca – Engelsk (Canada)
• en-nz – Engelsk (New Zealand)
• en-ie – Engelsk (Ireland)
• en-z – Engelsk (South Africa)
• en-jm – Engelsk (Jamaica)
• en – Engelsk (Karibiske øyer)
Det er opp til deg om du vil bruke tosifrede forkortelser som de, gb etc., eller om du heller vil bruke de sammensatte forkortelsene som ble vist tidligere. Jeg foretrekker de tosifrede.
Innenfor head-elementet forventes dokumentets hoderegisterdata.
<head> … </head>
Metadata høres kanskje litt tungt ut, men er raskt forklart. Her legger man blant annet inn ting som beskriver dokumentet nærmere. Dette kan for eksempel være tittelen og skrifttypen som brukes. Her kan også skript og stiler inkluderes, samt generell metadata defineres. Mer om dette kommer senere.
Viktigst er title-elementet.
<title>Veiledninger for bildebehandling med Photoshop, webdesign og fotografering - PSD-Tutorials.de </title>
Dette definerer tittelen som trengs på mange forskjellige steder.
• I nettleserens tittellinje.
• Når det settes bokmerker i nettleseren.
• Og selvfølgelig spiller tittelen en viktig rolle når det kommer til søkemotoroptimalisering.
Dere ser altså hvor viktig tittelen er. Velg en kort og presis tittel.
For en grundig beskrivelse av siden kan metaopplysninger brukes. Mer informasjon om dette kommer senere.
Neste steg er den brukte skrifttypen.
<meta charset="UTF-8" />
Dette er viktig informasjon for nettleserne. Kun på denne måten vet de hvordan tegnene skal kodes for å vises korrekt. Kun ved bruk av riktig skrifttype vil for eksempel æ, ø og å vises riktig. Normalt sett angis UTF-8 her.
Nå går vi videre til selve innholdet på nettsiden, altså det som besøkende faktisk ser. Alt dette defineres i body-elementet.
<body> … </body>
For demonstrasjonsformål kan dere enkelt legge til følgende mellom åpnings- og lukkes <body>-tag:
<h1>PSD-Tutorials.de</h1>
Dokumentet bør deretter se slik ut:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Eksempel på HTML5 struktur - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Lagre endringene og åpne filen i en nettleser.
Som dere ser, vises PSD-Tutorials.de nå faktisk. Dere har dermed opprettet deres første egendefinerte HTML-dokument.
