1. Första sidan (HTML)

  • Vad är en HTML-fil?
  • Hur man redigerar en HTML-fil
  • HTML-element och -taggar
  • Rubriker och stycken
  • Länkar
  • Bilder
  • Några element till
  • Referenser


Vad är en HTML-fil?

En enkel websida är inget mer än en fil. En HTML-fil har filtillägget:

.html
(eller .htm)

Startsidan i en mapp har alltid namnet

index.html


Hur man redigerar en HTML-fil

En HTML-fil är en textfil. Det betyder att du kan editera den med en textredigerare, t.ex. gedit (linux) eller notepad (windows). Det finns även mer avancerade textredigerare som är avsedda för just programmering, men mer om dem senare. Tillsvidare klarar vi oss med ovannämnda.

Skapa en index-fil i en ny mapp.
Öppna filen med textredigeraren.


HTML-element och -taggar (tags)

HTML-filens struktur ser ut som följer:

<html>
    <head>
    </head>

    <body>
    </body>
</html>

Filen består av ett HTML-element som har en öppningstag <html> (opening tag) och en stängningstag </html> (closing tag).
Inne i <html></html> elementet finns <head></head> och <body></body> elementen, som båda är obligatoriska i en HTML-fil.

Börja editera din index.html fil med att skriva in html, head och body elementen som i exemplet ovan.

Du kan nu också öppna din websida i en webläsare (t.ex. firefox). Du borde då se en tom vit sida.

Allt innehåll som vi ska visa på vår sida läggs in i <body></body> elementet. Head elementet lämnar vi tomt tillsvidare.

Pröva skriv in någonting i body elementet. T.ex.

...
    <body>
    Hello world!
    </body>
...

Spara filen i redigeraren och ladda om sidan (refresh) i webläsaren.

Du borde nu se ändringarna på sidan.


Rubriker och stycken

Vi är nu redo att börja skapa innehåll på vår sida.

Vi börjar med en rubrik och ett stycke:

...
    <body>
    <h1>Rubriken kommer här</h1>
    <p>Det här är ett stycke. Det engelska ordet för
stycke är paragraph.</p>
    </body>
...

Rubriken är inne i ett <h1>-element (vad står H för?) och stycket i ett <p>-element.

Lägg till en rubrik och två textstycken på din sida.

Vad gör <h2>,<h3> och <h4>-element?

Rubrik och stycke är bara början.
HTML-språket har element för alla de viktigaste typerna av innehåll som används i dokument.

Pröva vad följande element gör:

  • <strong></strong>
  • <em></em>
  • <small></small>

Länkar

Att kunna länka till andra sidor hör till de grundläggande egenskaperna på en sida. En länk görs med hjälp av <a>-elementet. Här ser du ett exempel:

...
<a href="http://www.nettisetti.com">Till framsidan</a>
...

href="http://www.nettisetti.com" specificerar vart länken ska leda.
Till framsidan, dvs. det som står mellan taggarna är den text som visas på sidan.

Notera att href="" skrivs inne i själva <a>-taggen. Det är meningen. href=""-delen kallas då för ett av taggens attribut.

Gör länkar på din sida. Du kan pröva göra länkar till t.ex.

  • google
  • din facebook-sida
  • skolans hemsida
  • wikipediasidan för något ämne som intresserar dig

Bilder

För att visa upp en bild på sidan måste vi ha en bildfil i samma mapp som vår websida (eller i någon mapp under den). Om bilden heter t.ex. bild.jpg ser HTML-koden för att visa upp bilden ut såhär:

..
<img src="bild.jpg" alt="En bild">
..

src="bild.jpg" specificerar bildkällan (source), dvs. varifrån bilden plockas.
alt="En bild" är en alternativ text som visas istället för bilden om bilden inte går att ladda eller inte finns.

<img>-taggen har två attribut: src och alt.
Notera också att <img>-taggen inte har någon stängningstag!

Lägg in en bild på din sida. Börja med att hitta en lämplig bild, ladda ner den, och lägg den i mappen med din websida.

Du kan justera storleken på bilden med hjälp av width- eller height-attributen. Mera om det i del 2.


Några element till

Det finns flera viktiga HTML-element som vi inte har gått igenom här.
<div>- och <span>-elementen har med layout att göra, och vi återkommer till dem i del 2.

Andra element som det är värt att bekanta sig med är:

  • <br /> radbyte (ingen skilld stängningstag)
  • <ul></ul> Lista
  • <ol></ol> Numrerad lista
  • <li></li> Ett listelement (används inne i en lista eller numrerad lista)
  • <table></table> tabell
  • <th></th> tabellrubrik (används inne i table)
  • <tr></tr> tabellrad (används inne i table)

I referenserna nedan hittar du exempel på hur man använder dem.


Referenser

html.net har en tutorial som går lite mer på djupet än denna. Många bra exempel där.
w3schools referenslista på alla HTML-element (tags) och deras attribut. Sidan har också en hel del annat intressant.
This entry was posted in Tutorial. Bookmark the permalink.

Comments are closed.