1 – Min första HTML

I denna första övningen skriver vi ett CV som en egen hemsida. Vi börjar enkelt och bygger vidare under övningarna. Du kommer lära dig om rubriker, bilder och vilka program som är bra att använda.

Nu kör vi!

Vad är HTML?

HTML är språket på internet. Det finns många olika tekniker (som t.ex. JavaScript, CSS och PHP) men all Internetprogrammering kommer i slutändan ner till HTML. Oavsett vad du vill göra med dina webb och Internet-kunskaper är HTML en viktig byggsten och återkommer i alla de andra teknikerna. Ha tålamod! Allt blir enklare och faller på plats snabbare om du lär dig det ordentligt från början.

Vad är en hemsida? Och hur skriver man HTML?

HTML är inget magiskt. Du kommer snart att göra din första HTML. Du sparar en fil på din dator som du kan öppna i webbläsaren. På samma sätt som du skulle öppnat en fil du skriver i Microsoft Word eller Google Docs. En skillnad är att en hemsida är sparad på Internet så att sökvägen istället för att peka till din hårddisk pekar till en plats på Internet där filen är sparad.

En HTML-fil är en text-fil där man med programmeringsspråket HTML markerar ut olika delar av dokumentet att få olika egenskaper. Markeringerna gör man med hjälp av HTML-taggar.

cv-html-webblasare

HTML-taggar

Tänk att du vill skriva en text där ett ord ska vara i fet stil. I ett ordbehandlingsprogram (t.ex. Microsoft Word eller Google Docs) skulle man markerat ordet och sedan tryckt på knappen fetstil. I HTML skriver man istället en HTML-tag runt ordet man vill ska vara i fet stil.

<strong>fet stil</strong>

En HTML-tag börjar alltid med ett mindre-än-tecken < sedan kommer ett ord som beskriver vad det är taggen gör och sedan ett större-än-tecken >. Där efter kommer själva innehållet (t.ex. texten som ska vara fet) och sist kommer taggen igen. I sluttaggen skriver man även ett snedstreck / för att visa att taggen tar slut här.

Jag tänker mig det som att HTML-taggarna kapslar in orden som ska var fet-stil. Man markerar för webbläsaren vad i texten som ska se ut på olika sätt.

Det finns många olika HTML-taggar. För att skapa rubriker använder man taggen <h1>Min rubrik</h1> och för att skriva en underrubrik <h2>Min underrubrik</h2>.

Du måste inte lära dig alla taggar utantill. Det finns ingen mening att lära sig alla eller gå igenom alla. De ändrar sig och är lätta att slå upp. Försök istället skapa en förståelse och en känsla för hur man skulle göra olika saker i HTML.

Rubriker och underrubriker

För att markera rubriker finns det olika taggar beroende på nivå (storlek) på rubriken. En huvudrubrik markeras med <h1> , underrubriker med <h2> ,under-under rubriker med <h3>. Ju högre siffra desto mindre storlek på rubriken.

Tänk H som i Header!

Stycken och mjuka radbrytningar

Normalt när du skriver ett stycke trycker du ofta enter två gånger för att göra mellanrummet nedåt till nästa stycke. Tanken är egentligen att man trycker enter en gång och att ordbehandlingsprogrammet sedan har satt avståndet för luft runt din text så att det känns som lagom mycket. Det som händer när man trycker enter två gånger är att man lägger in två mjuka radbrytningar istället för att markera ut det som ett stycke.

I HTML skiljer man på stycken och radbrytningar.

<p>Ett stycke</p> och ett mjukt radbryt<br>

Här dyker även en ny sak upp. Titta noga på taggen <br>. Den har ingen sluttag. Det finns vissa taggar som inte har något slut. (Det fungerar att skriva med sluttaggen också <br></br> men det är helt meningslöst. Ingenting händer mellan start och slut-tag.)

Tänk Paragraph för stycke och BReak för mjukt radbryt

Textformatering

Text markeras efter hur viktig den är. Det finns tre vanliga nivåer; vanlig text, betonad text och starkt betonad text. <strong>starkt betonad text</strong> och <em>betonad text</em>. Normal text markeras inte.

Strong betyder stark och em står för ordet EMphasis som betyder eftertryck

Det går faktist att använda taggarna <i>italic betyder kursiv</i> och <b>bold betyder fet</b> men anledningen att det är rätt att använda <strong> och <em> är för att de inte sätter någon formatering. Utan bara en sorts text. Skillnaden är liten så försök bara komma ihåg det.

Bilder

Texten sparas i själva HTML-dokumentet men bilder länkas istället in i dokumentet. HTML-filen behöver då ha adressen till bilden.

Vinterjogg Göteborg 2015

För att länka in en bild används taggen <img> och precis som med taggen <br> behövs inget avslut. Adressen till bilden lägger vi in i attributet src.

<img src="min-bild.jpg">

Förutom adressen måste även bilder ha ett attribut som visas om bilden av någon anledning inte går att visa. Bildfilen kanske har blivit borttagen? Eller är i fel format? Eller kanske en blind besökare får bilden uppläst för sig? Dessutom läser sökmotorerna in den texten för att se vad som är på bilden. Ta för vana att skriva några ord som beskriver vad som är på bilden.

<img src="min-bild.jpg" alt="Min bildbeskrivning">

Att tänka HTML

Fokusera inte på att memorera alla olika taggar. Det kommer efter hand. Försök istället börja tänka HTML. Om ni vill skapa en klickbar länk i ert dokument så sök efter html link på Google och se hur du markerar det i din text. Vill du skriva en fysisk adress kan du söka efter html address. Nästan alltid finns det ett tänkt sätt att göra olika saker.

Det finns många fördelar med att använda rätt HTML-element för rätt sak men framförallt får ni en hel del formatering av text gratis. Även om ni senare vill andra utseendet så har ni en bra grund.

Skriv ett HTML-dokument

För att skriva ett HTML-dokument behöver man några saker till som berättar för webbläsaren att det är HTML. Dels behöver man ett verktyg att skriva HTML i och så behöver man några rader kod i början av dokumentet.

Program för att skriva HTML

Du behöver bara ett vanligt textprogram för att skriva HTML. Jag rekommenderar dig att använda textprogrammet Brackets men det finns andra.

Ladda hem och installera Brackets.

Enkel HTML-mall

Den enklaste mallen för ett HTML-dokument finns här. Vi kommer lägga till fler saker efterhand i mallen men börja så här.

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>Ditt innehåll här</p>
  </body>
</html>

OBS! Alla dina egna HTML-taggar ska ligga mellan <body> och </body>!

Skriv av den till din egen fil. Kopiera den inte utan ta tillfället i akt att försöka känna igen de första olika taggarna.

Ett förslag är att du gör en mapp på din dator för varje övning. Så har du kvar de gamla dokumenten som referens senare. Ta för vana att hålla ordning på dina filer. Du kommer behöva det.

Det finns väldigt många olika taggar för att formatera text. Experimentera med några av dem på W3Schools.

Övning #1

Utgå från det du lärt dig och skapa ett HTML-dokument. Utgå från mallen.

Uppgiften är att skapa ditt CV. Ta för vana att göra så verkligt du kan. Det är då du stöter på de verkliga frågorna och problemen. Behöver du inspiration till ditt CV finns det flera sidor (tex hos Arbetsförmedlingen) att börja läsa.

Experimentera och var nyfiken!

Gör minst följande (och gärna mer)

  • Skriv minst ett stycke med några ord som är fet-markerade
  • Skriv minst 3 olika rubriker
  • Skriv några ord kursiva
  • Lägg in en bild i ditt dokument

Övning #2

När du är klar gör en (ny) liknande hemsida fast skriv istället en artikel om midsommar-festen, påsk, jul, kräftskivan, ditt favoritfotbollslag, första badet eller vad som helst du gillar.

Du behöver lite text, kanske en bild, rubriker, fet-text kanske kursiv text. Använd min snö-bild eller leta upp en egen bild. Försök vara så kreativ och nyfiken du kan 🙂

Svara sedan på följande frågor (för din egen skull)

  • Vad är skillnaden på <br> och <p>?
  • Hur gör man radbrytningar i HTML?
  • Vad är skillnaden mellan taggarna <em> och <strong>?
  • Vilka program kan man använda för att skriva HTML?

Ett svar på “1 – Min första HTML”

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *