Kodning

Sider

Alt Kodning

KODE TIL FORSIDE

<!DOCTYPE html>

<head>

<title>Kultur.cafee.oskar</title>

</head>

<body>

<h1 id="kultur">KULTUR</h1>

<h2 id="cafee">CAFEE</h2>

<h3 id="oskar">Oskar</h3>

</div>

<p id="indhold"><a href="Indhold.html">Indhold</a></p>

</div>

</div>

<p id="indhold">Program</p>

</div>

</body>

</html>

#kultur{

margin: 0px

text-align: center;

font-size: 150px;

font-family: fantasy;

color: red;

}

#cafee{

margin: 0px;

text-align: center;

font-size: 100px;

font-family: fantasy;

color: red;

}

#oskar{

margin: 0px;

text-align: center;

font-size: 75px;

font-family: fantasy;

color: red;

}

#top{

background-color: black;

margin: -10px

}

.text-wrapper {

display: inline-block; /* Makes the div wrap around the text */

padding: 10px; /* Optional: adds some space around the text */

border: 5px solid black; /* Optional: adds a border for visibility */

margin: 15px;

width: 100px;

text-align: center;

background-color: red;

margin-left: 200px;

}

#indhold{

font-family: fantasy;

font-size: 25px

}

#site{

background-color: dodgerblue;

margin: -10px;

height: 600px;

}

#tilbage{

margin: 0px

SIDER 1

}

.text-wrapper {

display: inline-block; /* Makes the div wrap around the text */

padding: 1px; /* Optional: adds some space around the text */

border: 2px solid black; /* Optional: adds a border for visibility */

}

KODE INFO SIDE

<!DOCTYPE html><html lang="da"><head>    <meta charset="UTF-8" />    <title>Kulturcafé Oskar</title>    <style>        body {            background-color: #ecf0f1;             font-family: Arial, sans-serif;            margin: 0;            padding: 0;        }
        /* Logoet i toppen */        .logo {            display: block;            margin: 50px auto 0 auto; /* Centrerer og giver luft fra toppen */            width: 300px; /* Juster størrelsen her */            height: auto;        }
        h1 {            font-size: 80px;            text-align: center;            margin-top: 40px;            color: #2c3e50;        }
        #indhold {            max-width: 800px;            margin: 50px auto;            text-align: center;            line-height: 1.6;            color: #34495e;            font-size: 18px;        }
        h2 {            font-size: 32px;            color: #2c3e50;            margin-top: 50px;        }
        .kontakt, .bestyrelse {            margin-top: 30px;        }
        .kontakt p, .bestyrelse p {            margin: 5px 0;        }    </style></head><body>        <img src="logo-oskar.png" alt="Kulturcafé Oskar logo" class="logo">
        <h1>Velkommen til Kulturcafé Oskar</h1>
    <div id="indhold">        <h2>Om Kulturcafé Oskar</h2>        <p>            Kulturcafé Oskar er et unikt spillested i historiske rammer. Her kan du opleve levende musik,            intime koncerter, rock shows og danseaftener med nøje udvalgte kunstnere i professionelt lyd- og lys setup.        </p>        <p>            Vi samarbejder med lokale foreninger som Søby Ungdomsprojekt, teater og danseskole,            og stedet drives af frivillige ildsjæle med passion for musik og fællesskab.            Oskar er en nonprofit forening med ca. 40 medlemmer og støtte fra lokale virksomheder,            Søby Kommune og fonde.        </p>
        <div class="kontakt">            <h2>Kontakt</h2>            <p><strong>Adresse:</strong> Kingosvej 5, 4321 Søby</p>            <p><strong>Telefon:</strong> xxxxxxxx</p>            <p><strong>Mail:</strong> xxxxxx@gmail.com</p>        </div>
        <div class="bestyrelse">            <h2>Bestyrelse</h2>            <p><strong>Formand:</strong> Poul Frederiksen – Tlf.: xxxxxxxx – xxxxx@gmail.com</p>            <p><strong>Bent Poulsen</strong> – Tlf.: xxxxxxxx – Bent.Poulsen@kulturcafeoskar.dk</p>            <p><strong>Bo Hansen</strong> – Tlf.: xxxxxxxx – bo.Hansen@kulturcafeoskar.dk</p>            <p><strong>Poul-Jørgen Larsen</strong> – Tlf.: xxxxxxxx – xxxxxxx@gmail.com</p>            <p><strong>Kristian Hansen</strong> – Tlf.: xxxxxxxx – xxxxxxxx@gmail.com</p>        </div>    </div></body></html>

Hvad har jeg lært?

I dette projekt har jeg lært at lave en simpel hjemmeside ved hjælp af HTML og CSS.

HTML – Struktur

HTML bruges til at opbygge selve indholdet på hjemmesiden.
Jeg har lært at bruge:

<!DOCTYPE html> til at fortælle browseren, at det er et HTML-dokument
<html>, <head> og <body> til at skabe grundstrukturen
<h1>, <h2>, <h3> til overskrifter i forskellige størrelser
<p> til almindelig tekst
<a href="..."> til at lave links til andre sider
<div> til at opdele siden i sektioner

Jeg har også brugt id-navne til at kunne style bestemte elementer.

CSS – Design og udseende

CSS bruger jeg til at style min hjemmeside.

Jeg har lært at:

Ændre tekst-størrelse og farver (font-size, color)
Bruge forskellige skrifttyper (font-family)
Placere ting centreret på siden (text-align: center)
Lave baggrundsfarver (background-color)
Bruge margin og padding for at lave afstand og luft omkring elementer
Lave rammer omkring tekstbokse (border)
Bruge display: inline-block til at sætte bokse ved siden af hinanden

Jeg har også lavet en layout-sektion med divs, og brugt id og class, så jeg kan ændre udseendet på specifikke elementer.

Generel forståelse

Jeg har fået bedre forståelse for:

Hvordan HTML og CSS arbejder sammen
Hvordan man strukturerer en hjemmeside
Hvordan man laver en menu og link til andre sider
Hvordan man styrer farver, størrelse og placering af tekst og elementer