Första ansatsen till en webbsida

Då börjar vi med att göra vår första webbsida. Här kan du se källkoden till standardstrukturen på en webbsida med förenklat innehåll.

Studera källkoden för webbsidan nedan och använd den för att skapa din första webbsida i filen me.html.

<!doctype html>
<html lang="sv">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>En sida om mig | Kursen webtec</title>
    <meta name="description" content="Min webbsida i kursen webtec">
</head>
<body>
    <header>
        <img src="img/leaf.png" alt="Logotyp">
        <p>Här kan jag placera en fin header till webbsidan.</p>
    </header>

    <nav>
        <ul>
            <li><a href="me.html">Me</a></li>
            <li><a href="report.html">Redovisa</a></li>
            <li><a href="about.html">Om</a></li>
        </ul>
    </nav>

    <div class="wrap">
        <main>
            <h1>Om Mig Själv</h1>
            <p>Här kommer snart min egen fina me-sida.</p>
            <img src="img/me.png" width="300" class="me" alt="Bild på mig">
        </main>
    </div>

    <footer>
        <hr>
        <p>Denna sidan är Copyright &copy; av mig.</p>
    </footer>

    <script type="module" src="js/hello.js"></script>
</body>
</html>

Öppna nu webbsidan i din webbläsare via din webbserver. Glöm inte att starta din webbserver som finns i din utvecklingsmiljö.

# Gå till roten av ditt kursrepo
npm run dev

Det kan se ut så här när du ser webbsidan i din webbläsare.

Image description — Bild: Visa alla filer som ligger på webbplatsen.

Webbsidan består så här långt av html-kod med ett par bilder. Den inkluderar även en tom stylesheet och en tom fil ämnad för js-kod.

Låt oss detaljstudera ett par av de HTML-element som används i sidan.

HTML element för html, head och body

Låt oss titta på ett par av de grundläggande elementen i en html-sida.

<!doctype html>
<html lang="sv">

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <script type="module" src="js/hello.js"></script>
</body>

</html>

doctype talar om för webbläsaren att dokumentet är av typen HTML5, vilket är standarden för moderna webbplatser.

<html lang="sv"> är roten i html-dokumentet och här säger vi att sidans innehåll är på svenska vilket hjälper sökmotorer och skärmläsare.

<head> innehåller så kallad meta information om sidan. De element som finns här syns inte direkt i webbsidan men hjälper till med dess utformning och tolkning.

<link rel="stylesheet" inkluderar en extern stylesheet som hittas på den länken som anges.

<body> är sidans huvudsakliga innehåll och det som visas i webbläsaren.

<script> inkluderar ett externt javascript.

Element i `<head>`

Låt oss titta mer i detalj på de element som ligger inuti <head>elementet.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>En sida om mig | Kursen webtec</title>
  <meta name="description" content="Min webbsida i kursen webtec">
</head>

<meta charset="utf-8"> ställer in UTF-8 som teckenkodning för att stödja de flesta språk och specialtecken.

<meta name="viewport" gör att sidan anpassar sig till olika skärmstorlekar, vilket är viktigt för mobilvänlighet.

<title> text som visas i webbläsarens flik och används av sökmotorer.

<meta name="description" är en kort beskrivning som sökmotorer och sociala medier kan visa.

En favicon till webbplatsen

En webbplats kan ha en favicon, en liten bild som visas tillsammans med webbplatsens titel uppe i webbläsarens flik.

Det är något vi kan lägga till i sidans <head>-del med följande konstruktion.

    <link rel="shortcut icon" href="favicon.ico"/>

Om vi inte placerar en sådan konstruktion så kommer webbläsaren ändå försöka ladda bilden /favicon.ico från webbplatsen, som ett default beteende.

Bild: I fliken visas sidans favicon och titel.

Formatet för en favicon är vanligen filformatet ICO, men de flesta webbläsare klarar även vanliga PNG-bilder.

Första ansatsen till en webbsida

HTML element för html, head och body

Element i <head>

En favicon till webbplatsen

Element i `<head>`