Skapa en ny fil för en första test i redigeraren efter ditt val. Om du använder Windows-redigeraren, öppna den via Start>Alla program>Tillbehör>Redigerare.
Välj sedan Arkiv>Spara som. Avgörande är fältet Filtyp.
Här måste inställningen vara Alla filer. I fältet Filnamn skriver du sedan index.htm. Nu kan du spara filen på önskad plats. Detta är filen du nu kommer att arbeta med, din första HTML-fil som för närvarande dock är tom. Det kommer snart att ändras.
Om du använder Dreamweaver, rekommenderas att du direkt vid programstart anger att du vill skapa en HTML-fil.
Det grundläggande HTML-skelettet
Innan vi börjar med det grundläggande HTML-skelettet, en viktig anmärkning om semantiken som används inom denna serie - och även inom HTML-världen. Ni kommer ständigt att stöta på begreppen Tag och Element, som tyvärr ofta tolkas fel. Ett exempel:
<a href="news.htm">Till nyheterna</a>
Denna syntax visar ett a-element, nämligen <a href="news.htm">Till nyheterna</a>. Detta element består av en öppnande a-tag, alltså <a> eller fullständigt <a href="news.htm">, elementinnehållet Till nyheterna och den avslutande a-taggen </a>. Dessutom har elementet a attributet href med attributvärdet news.htm.
Det tidigare exemplet visar en hyperlänksdefinition i HTML via elementet a. Detta element a utmärks av den öppnande <a>-taggen och den avslutande </a>-taggen. Så ni ser, det är inte så svårt att använda termerna Element och Tag korrekt.
Men nu kör vi igång. Öppna den tidigare sparade HTML-filen i din redigerare. Varje HTML-dokument har en viss grundstruktur.
Här är först det nämnda skelettet i all sin prakt:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Vad betyder nu de enskilda posterna? Vi börjar med den så kallade dokumenttypdeklarationen.
<!DOCTYPE html>
Genom en sådan dokumenttypdeklaration meddelar du webbläsaren som senare kommer att visa din webbplats vilken HTML-standard du använder. I detta fall handlar det om HTML5. Om du däremot skulle använda HTML 4.01 skulle DOCTYPE-angivelsen se ut så här:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Speciellt ämnet dokumenttypdeklaration förvirrar nybörjare inom HTML, eftersom det finns många olika varianter av det. Men egentligen är det ganska enkelt: Tänk på en dokumenttypdeklaration som en slags bygganvisning där det beskrivs vilka element som får finnas i ett dokument.
Jag rekommenderar generellt att du anger HTML5 kortfattat.
<!DOCTYPE html>
Moderna webbläsare känner igen den och visar sidor där den används i standardläge. Men då bör du vara säker på att bara definiera HTML-element som är tillåtna i HTML5. Mer om det senare.
Vi fortsätter med html-elementet.
<html lang="de"> … </html>
Detta element omsluter dokumentet. En sak som sticker ut är attributet lang. Här anges vilket språk som används i dokumentet. Här är några lang-förkortningar för den tysktalande regionen.
• de – Tyska (Standard)
• de-ch – Tyska (Schweiz)
• de-at – Tyska (Österrike)
• de-lu – Tyska (Luxemburg)
• de-li – Tyska (Liechtenstein)
• de-li – Tyska (Liechtenstein)
Det finns förresten fler olika lang-förkortningar för engelska.
• en-us – Engelska (USA)
• en-gb – Engelska (Storbritannien)
• en-au – Engelska (Australien)
• en-ca – Engelska (Kanada)
• en-nz – Engelska (Nya Zeeland)
• en-ie – Engelska (Irland)
• en-z – Engelska (Sydafrika)
• en-jm – Engelska (Jamaica)
• en – Engelska (Karibien)
Om ni väljer att använda tvåbokstavsförkortningar som de, gb osv. eller om ni föredrar de sammansatta förkortningarna som tidigare nämnts är upp till er. Jag föredrar de tvåbokstavliga.
Inom head-elementet förväntas dokumentets metadata.
<head> … </head>
Huvuddata låter något otympligt, men är snabbt förklarat. Det inkluderar saker som närmare beskriver dokumentet, såsom titeln och vilken teckensnitt som används. Här kan även skript och stilmallar inkorporeras samt allmänna metadatabeskrivningar definieras. Men mer om det senare.
Det viktigaste är title-elementet.
<title>Handledningar för bildredigering med Photoshop, webbdesign & fotografi - PSD-Tutorials.de </title>
Genom detta definierar man titeln som behövs på olika platser.
• I webbläsarens titelrad.
• När ett bokmärke läggs till i webbläsaren.
• Titeln spelar också en viktig roll för sökmotoroptimering.
Ni ser alltså hur viktig titeln är. Välj en kort och träffsäker titel.
För en utförlig beskrivning av sidan kan metataggar användas. Mer information om det följer.
Nästa steg är den använda teckensnittet.
<meta charset="UTF-8" />
Denna information är viktig för webbläsarna. Endast så vet de hur tecknen ska kodas för att visas korrekt. Endast genom att ange rätt teckensnitt kan t.ex. åäö och specialtecken visas korrekt. Normalt sett anges UTF-8 här.
Nu går vi över till själva innehållet på webbplatsen, det som besökare faktiskt ser. Allt detta definieras inom body-elementet.
<body> … </body>
För demonstrationsändamål kan ni lägga till följande mellan öppnande och stängande <body>-taggar:
<h1>PSD-Tutorials.de</h1>
Dokumentet ska sedan se ut på följande sätt:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Exempel på HTML5 grundstruktur - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Spara ändringarna och öppna filen i en webbläsare.
Som ni ser visas PSD-Tutorials.de nu faktiskt. Ni har skapat ert första egna HTML-dokument.
