Webdesign Tutorial - Kapitel 3: Enkel sidlayout (XHTML)

I denna webdesign-tutorial kommer jag att knyta ihop färdigheterna från min XHTML-tutorial och min CSS-tutorial och gå igenom hela processen kring hur man bygger en egen hemsida helt själv från grunden. Vi ska börja med att bygga upp en väldigt enkel sid-mall. När vi är färdiga kommer den att se ut såhär (klicka för att förstora):



Ser kanske inte alltför flashigt ut, eller hur? Det beror på att sidan inte använder några bilder. Jodå du hörde rätt, sidlayouten ovan är skapad med enbart HTML- och CSS-kod.

Oroa dig inte, vi kommer att gå igenom grafik och snyggare design senare, jag bara börjar lite lätt med att välja en design som det endast krävs en text-editor och en webbläsare för att skapa. Vi börjar med XHTML-koden!

Om du vill haka på och bygga den här layouten själv, öppna då en enkel text-editor som t.ex. Notepad och skapa två tomma filer: en döps till "exempel.css" och den andra till "exempel.html". För det här kapitlet kommer vi dock bara att behöva html-filen.



1. Dokumentets "Head"

Vårt dokument kommer som du troligen vet att behöva innehålla de obligatoriska avdelningarna <head> och <body>, och vi ska börja med "head"-området. Just nu kommer vi för enkelhets skull endast att arbeta med teckenkodningen Latin-1 som oftast är default, så vi ska börja med en <meta>-tagg som talar om detta för webbläsaren så att den tolkar texten rätt:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Min sida</title>
  </head>
</html>

Som du ser så smög jag även in taggen <title>, som sätter sidans titel (mer specifikt texten i webbläsarens namnrad) till "Min sida". Innehållet i <title>-taggen är också den text som kommer att visas som en klickbar länk på resultatsidorna i de flesta sökmotorer som t.ex. Google, etc.

OK, vi behöver faktiskt inte lägga till något mer i <head>-avdelningen just nu, så vi nöjer oss med ovanstående och går vidare.



2. Dokumentets "Body"

I dokumentets body lägger vi allt som ska bli en synlig del av vår webbsajt, det som besökarna ser i sin webbläsare när de anländer på sidan. Eftersom HTML-kod följer en "parent - child"-ordning, betyder detta att vi i grunden måste tänka på det som att vi bygger vår sida från utsidan och inåt.

I praktiska termer betyder detta att vi börjar med bakgrunds-ytan, sedan det område inom vilket huvud-innehållet av vår sajt kommer att ligga, och sedan finare och finare detaljer ända tills vi når text-innehållet som (åtminstone i de flesta fall) motsvarar den sista, innersta nivån.

Taggen <body> är obligatorisk, så vi skriver ut den först. Sedan, inuti den, ska vi sätta upp en <div>-tagg som en allmän behållare för hela sajten. Ungefär som en stor påse som allt annat bekvämt får plats i. Vi döper den till "container":

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Min sida</title>
  </head>
  <body>
    <div id="container">
    </div>
  </body>
</html>

Sådär, då ska vi börja fylla behållaren med resten av sidan. Generellt sett så vill man oftast ha några fler <div>-element att dela upp sidan i olika sektioner med, så att den blir lättare att uppdatera och ändra om så behövs. Vi ska strukturera upp vår sida i "loggan" högst upp, "menyn" för navigationen under den, följt av "innehållet" där vår rubrik och brödtext hamnar och "sidfoten" allra längst ner för en kort copyright-rad och en enkel kontakt-länk.



3. Bodyns logga

Nu när vår huvud-behållare är på plats, ska vi börja gå "nerför" sidans struktur och därmed sätter vi ut loggan först - ett <div>-element som vi kallar just "logga". Den innehåller bara lite enkel text, men observera att det finns en skillnad i textstorlek mellan "Min sida" och "v1.0".

Detta hanterar vi genom att först lägga till "Min sida" ensamt innanför <div>'en "logga" (som sköter formateringen av den texten) och sedan lägger vi till ett <span> runt texten "v1.0", kopplad till en klass som vi kallar "versionText" och som vi kommer att använda för att ändra storleken där.

När vi lagt in ovanstående, ser vår XHTML-kod ut såhär:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Min sida</title>
  </head>
  <body>
    <div id="container">
      <div id="logga">
        Min sida
        <span class="versionText">v1.0</span>
      </div>
    </div>
  </body>
</html>

Dags att fortsätta till navigationen, som också råkar vara den mest avancerade biten av vår sida.



4. Bodyns Meny

För vår enkla navigations-meny har jag bara valt ut några godtyckliga ord som kandidater till vad man kanske skulle vilja ha på sin sida, som en "Om"-sida, en "Blogg", svar på några vanliga frågor ("FAQ") och en "Kontakt"-sida. Vi vet ju att länkar skapas genom att placera ankar-taggar (<a>) runt orden vi vill länka, så varför skall då detta vara en sådan avancerad historia?

Tja, egentligen är det inte det, men det är dock lite mer komplicerat än en vanlig webb-länk pga CSS-formateringen vi vill använda oss av. Menyn skapas bäst genom att strukturera våra länkar som en oordnad lista (<ul>). Att göra på detta vis har blivit en accepterad norm inom modern webdesign, inte bara för att menyerna får en prydlig struktur utan också för att det är är semantiskt vettigt. En meny är ju trots allt oftast en lista av olika länkar, så det är mest logiskt att bygga det så.

Vi stoppar in vår länk-lista i en <div> som heter "meny", såhär:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Min sida</title>
  </head>
  <body>
    <div id="container">
      <div id="logga">
        Min sida
        <span class="versionText">v1.0</span>
      </div>
      <div id="meny">
        <ul>
          <li><a href="">Om</a></li>
          <li><a href="">Blogg</a></li>
          <li><a href="">FAQ</a></li>
          <li><a href="">Kontakt</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Eftersom vi bara ska göra en sidmall och inte bygga en komplett webbsajt bryr vi oss inte om att skriva in något särskilt i href=""-delen av länkarna.



5. Bodyns innehåll

Innehålls-delen är den enklaste biten - allt vi behöver för mitt exempel ovan är en rubrik och några små stycken med text. Eftersom den slumpade "Lorem Ipsum"-texten jag använder är lite lång och vår kod också börjar breda ut sig lite, tar jag bara med de fem första orden i varje paragraf-tagg följt av några små punkter.

Vi ska också skapa en ny <div> för innehållet, som vi döper till "innehall".

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Min sida</title>
  </head>
  <body>
    <div id="container">
      <div id="logga">
        Min sida
        <span class="versionText">v1.0</span>
      </div>
      <div id="meny">
        <ul>
          <li><a href="">Om</a></li>
          <li><a href="">Blogg</a></li>
          <li><a href="">FAQ</a></li>
          <li><a href="">Kontakt</a></li>
        </ul>
      </div>
      <div id="innehall">
        <h1>Välkommen till min sida</h1>
        <p>
          Lorem ipsum dolor sit amet ...
        </p>
        <p>
          Nullam diam ipsum, tincidunt ut ...
        </p>
        <p>
          Proin <a href="http://www.lipsum.com/">vulputate</a> semper velit ...
        </p>
      </div>
    </div>
  </body>
</html>

Jag har också inkluderat en länk till http://www.lipsum.com/ vilket är sidan som genererade den slumpade "Lorem Ipsum"-texten. Jag ville bara ha en länk att formatera i innehållet också utöver länkarna uppe i menyn. Ordet "vulputate" valdes eftersom jag tyckte det var konstigast.

Det enda vi har kvar av XHTML-delen nu är sidfoten!



6. Bodyns sidfot

Vid första anblicken ser inte sidfoten särskilt svår ut heller - en kort textrad på ena sidan och en länk på den andra. Men, vänta nu, hur lägger vi dem åt både vänster och höger på samma gång?

Som du kanske redan vet, är detta inte möjligt. Vad vi därför måste göra istället, är att använda en metod där vi skapar två <div>-element och "floatar" dem - en till vänster, den andra till höger. Även om detta låter konstigt just nu, kommer det att bli mer begripligt när vi börjar med CSS-koden.

Då ska vi bara lägga in en "sidfot"-<div> med våra två meddelande <div>'ar och avsluta XHTML'en:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Min sida</title>
  </head>
  <body>
    <div id="container">
      <div id="logga">
        Min sida
        <span class="versionText">v1.0</span>
      </div>
      <div id="meny">
        <ul>
          <li><a href="">Om</a></li>
          <li><a href="">Blogg</a></li>
          <li><a href="">FAQ</a></li>
          <li><a href="">Kontakt</a></li>
        </ul>
      </div>
      <div id="innehall">
        <h1>Välkommen till min sida</h1>
        <p>
          Lorem ipsum dolor sit amet ...
        </p>
        <p>
          Nullam diam ipsum, tincidunt ut ...
        </p>
        <p>
          Proin <a href="http://www.lipsum.com/">vulputate</a> semper velit ...
        </p>
      </div>
      <div id="sidfot">
        <div id="nereVanster">Copyright ©2008 Mig själv</div>
        <div id="nereHoger"><a href="mailto:jag@mindoman">jag@mindoman</a></div>
      </div>
    </div>
  </body>
</html>

Jag kallade bara de "floatade" <div>'arna för "nereVanster" och "nereHoger" även om man förstås antagligen kan hitta på lite mer semantiskt korrekta ord för dem.



Sådärja, då är vår XHTML-kod komplett. Undrar vad som skulle hända om vi öppnade den i vår webbläsare i det här skedet? Tja, lite beroende på din webbläsares inställningar, så skulle det se ut någonting såhär (bilden är beskuren där texten försvinner ut i högerkanten):



Även om vi fått ut vårt meddelande, så ser det helt klart inte så skojigt ut utan CSS'en. Så i nästa kapitel ska vi börja titta på hur vi gör för att lägga till den!





< Tidigare: Introduktion

robert@eagleowl.se 026-16 13 61 www.eagleowl.se
©2018 EagleOwl