HTML elementer eksisterer i mange former og versioner.
Alt det du ser foran dig ligenu, farverne, tekst, billeder, knapper, links og ja stort set ALT er skabt af html elementer.
Et element i HTML er med til at præciserer det specifike område af din hjemmeside.
Et element består af 3 basale områder:
- <p> åbnings paragraf tag
- Elementets indhold – paragraf ord
- </p> – tagget som lukker elementet
Alle hjemmesider kræver 4 nødvendige elementer for at kunne vises.
<html> – <head> – <title> – og <body> elementet.
Info om <html> elementet
<html> tagget starter og slutter enhver side.
Den grundlæggende mening med dette tag er at indkapsle alt html koden man ønsker at benytte til sin hjemmeside. Husk at afslutte dit html element ved at benytte luknings tagget </html> i bunden af alle dine sider.
Hvis du ikke allerede har åbnet dit tekstredigeringsværktøj som f.eks. notepad eller TextEdit anbefaler jeg at du gør det nu.
HTML KODEN
<html>
</html>
Gem nu din fil ved at vælge gem-som eller på engelsk save-as-type. Vælg alle filer eller all files i drop down menuen og gem din fil med navnet “index.html”. (Selvfølgelig uden gåseøjne”.
Gennemgå venligst at du har gjort det jeg har sagt korrekt før du vælger at gemme filen.
Når du er sikker på det er gjort så vælger du save eller gem som og placerer filen hvor du nu ønsker den.
Hvis du derefter lokaliserer filen og åbner den vil du nu kigge på din allerførste blanke hvide html side.
HEAD elementet
Er næste skridt på vejen til at skabe din egen hjemmeside.
I head afsnittet indsætter man alt den kode man ikke ønsker at webbrowseren skal udprinte til brugeren.
Det er blandt andet også her at man benytter sit <title>tag</title> der indikerer sidens overskrift.
Det vil jeg komme nærmere ind på i nogen af de senere artikler som vil blive publiceret i denne blog.
For at indsætte <head> tagget i din kode bør du igen åbne din notepad eller textedit editor og åbne den index.html fil som du allerede har gemt på computeren. Din kode skulle gerne se sådan her ud indtil videre:
<html>
</html>
Hvis du indsætter dit <head> tag i koden skal det placeres imellem de to html tags.
Din kode skulle derfor gerne se sådan her ud i din tekst editor:
<html>
<head>
</head>
</html>
Hvis du gemmer din fil og prøver at åbne den i din browser vil du bemærke at der stadig ikke er nogen ændring fra før. Du får stadig kun vist en blank hvid side.
Title elementet – din overskrift
<title> tagget benyttes til at indkapsle din hjemmesides overskrift. Overskriften vil så blive vist i toppen af din browser. Dit title tag skal ligesom alle andre elementer både have en start og en slut attribute.
Det vil sige at hvis du igen åbner din fil i tekst editoren så skal du indsætte title tagget på følgende måde:
<html>
<head>
<title>Min første hjemmeside</title>
</head>
</html>
Hvis du lægger nøje mærke til koden vil du bemærke at vi har indsat <title> elementet i vores hovedasfsnit imellem de to head attributer. Hvis du nu gemmer siden og igen prøver at åbne den i din browser vil du kunne bemærke at der er sket en lille ændring i din side. Oppe i din browsers navigationsbar vil du se teksten du har påført i dit title tag. Nu ved brugeren der besøger din side at han er kommet til “min første hjemmeside”.
Body afsnittet – Din hjemmesides krop
<body> elementet er der hvor ALT det som at dine besøgende skal se placeres.
Alt kode i <body> afsnittet vil være det som er synligt for din hjemmesides besøgende.
Jeg vil ikke gå for dybt ind i det her i denne artikel men vil beskrive det nærmere i de efterfølgende publiceringer jeg laver.
Hvis du nu vælger at åbne din fil i din tekst editor og nu tilføjer body afsnittet til din side.
Når det er sket skulle din kode gerne se sådan her ud:
<html>
<head>
<title>Min første hjemmeside</title>
</head>
<body>
Det her er min første hjemmeside
</body>
</html>
Gem nu filen ligesom du har gjort så mange gange før og åben derefter i din browser.
Nu ser du faktisk din allerførste kodede hjemmeside som du selv har skabt med dine egne hænder.
Tags: al-haqent.com, Artikler, attributer, by, elementer, elements, Gratis, hjemme, hjemmeside, html, hyper, kode, language, markup, php, programmering, side, site, step, teamearners.dk, text, tutorials, web, web2business.dk, website
