Forberedelse
- Læs kapitel 5 og 6 til og med afsnit 6.4 kort igennem. Der er meget læsestof, men det meste vil være repetition for dig
- Repeter evt. HTML og CSS ved at se videoer: Informatik B > Videoer > Videoer 4. HTML og CSS kode
- Installer Visual Studio Code. Findes enten på skolens fælles center for download eller direkte hos Microsoft: https://code.visualstudio.com/download
Formål
- Repetere HTML og CMS
- Repetere grundlæggende principper for at skrive kode
- Arbejde med en ny editor, Visual Studio Code
Fælles gennemgang
Fra sidst
- Evt. afrunding på brugbarhed: Forklar ord som brugervenlighed, brugbarhed, usability og user experience
- Hvordan kan man involvere brugerne
Lektien til denne gang
Inden vi går i gang: På C-niveauet har jeg brugt en ret simpel editor i øvelserne, Atom editoren. På B-niveauet kommer vi til at arbejde med en top-professionel editor, “Visual Studio Code”. Microsoft har en kæmpe editor, Visual Studio, der kan alt muligt, og som koster spidsen af en jetjager. Der findes en mini gratis udgave, Visual Studio Code, som fint dækker vores behov. Den virker til både PC; Mac og Linux.
- Hvad karakteriserer fontend kode
- Hvad er HTML
- Hvad er CSS
- Giv et eksempel på, hvordan man skriver HTML
- Hvad er et “site”, “en hjemmeside” og en “side”
- Hvordan bygger vi en god struktur op. Forklar ud fra princippet om “separation of concerns”. Se nedenstående billede
- Ekstra: Hvad er et semantisk tag
Øvelser
Inden du går i gang: Du kan finde mange svar til de første par opgaver ved at se mine videoer. De findes på Informatik B > Videoer > Videoer 4. HTML og CSS kode. Du behøves ikke at se videoer om Atom editoren
11.1 Basis teori omkring HTML
- Hvad bruger vi HTML og CSS til, og hvordan arbejder de sammen
- Nævn 4 vigtige regler for at kode HTML
- Hvad er site, hjemmeside og side for noget
- Hvad vil det sige, at tags kan være åbne eller lukkede. Giv eksempler
- Hvad er separation of concerns, og hvad bruger vi det til
- Hvordan vil du bygge din filstruktur op uden separation of concerns og med separation of concerns
11.2. Forklar koden
- Forklar, hvorfor filen herunder absolut skal hedde index.html
- Hvad bruger vi hhv. <head> og <body> til
- Hvad er et semantisk tag
- Hvad er meta tags for noget
- Hvad laver sætningen med meta UTF
- Forklar de øvrige tags så godt, som du kan
Resultatet ser i øvrigt sådan ud:
11.3 Basis CSS teori
- Hvad er CSS og hvad bruger vi det til
- Hvorfor kan man sammenligne CSS med en stylist
- Hvilke 3 steder kan vi placere CSS
- Hvilke af de 3 steder bruger vi, hvis sitet skal være professionelt
- – og hvilke kan vi finde på at bruge, hvis vi skal udvikle
- Tip: Se alle 3 muligheder hos https://www.w3schools.com/css/css_howto.asp
- Vis hvordan man kan prøve CSS af direkte i en browser. Du kan både bruge Safari, Chrome og Firefox. Lige netop her anbefaler jeg Chrome, ellers bryder jeg mig ikke om den
- Til koden i opgave 11.2 er der et stylesheet. Forklar koden så godt, som du kan
11.4 I gang med Visual Studio Code
Inden du går i gang: Opgave 11.4 og 11.5 skal løses individuelt. Snak endelig sammen, men I skal alle hver især prøve at få Visual Studio Code til at virke.
Nu kan vi ikke udskyde det længere. Vi skal i gang med Visual Studio Code. Du vil nok ikke føle den store forskel fra Atom (hvis du har arbejdet i den), måske bortset fra, at Visual Studio Code er mere hjælpsom.
Du skal gennemføre videoen herunder og lave et simpelt website i Visual Studio Code med bare 1 html fil.
- Hvad får vi ud af at lave en mappe fra start til vores .html filer?
- Hvad betyder den hvide prik, der nogle gange dukker op ud for filnavnet, og hvorfor er den vigtig
Her er den hvide prik:
Her er selve videoen:
11.5 Tabeller
Lav en ny html fil i Visual Studio Code, og kald den “tabel.html”. Indsæt koden nedenfor. Jeg har hentet koden hos https://www.w3schools.com/html/html_tables.asp. På samme side kan du finde stort set al den hjælp, du har brug for i forhold til opgaven: Gør følgende:
- Ret overskriften, så det bliver til <h1> frem for <h2>
- Fjern de sidste 3 rækker fra den tabel, du ser i browseren
- Gem dit arbejde
- Kopier koden over i en ny fil, f.eks. tabel1.html
- Ret tabellen, så den yderste søjle til højre forsvinder
- Ret teksten i tabellen, så der kommer en ny række under “Alfreds Futterkiste” der hedder: “Oppe i høyfjellet” som ejes af “Odd Fjellabe”
- Gem tabel1.html
- Tag en kopi af koden og gem koden i en fil, f.eks. tabel2.html
- Lav en tykkere kant på tabellen og få en anden farve end grå til at gå igen i hver 2. række
- Ekstra opgave: Prøv at se, om du kan slå 2 celler sammen både vandret og lodret. Tip: Brug attributten “colspan” og “rowspan”
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>11.6 Eksternt stylesheet
- Du skal arbejde videre med en af dine filer fra sidste opgave, f.eks. tabel1.html
- Lav et eksternt stylesheet og placer det i en for sig. Kald mappen for “styles” og din css fil for “myStyles.css”
- Læg følgende kode i dit eksterne stylesheet
h1, h2, td {
color: red;
}- Få det til at virke, så tags som <h1>, <h2> og <td> får rød farve
- Ekstra: .Få alt css koden ud af html-filen og over i dit eksterne stylesheet. Sørg for, at hele CSS koden stadigvæk virker
Tip: Du kan få hjælp fra nedenstående video. Bær over med hendes lidt sjove engelske 🙂
11.7 Dit eget lille site
Lav dit eget lille site som vist under videoerne i vejledningen: Informatik B > Videoer > Videoer 4 HTML og CSS kode. I videoen arbejder vi med Sydfyn, men du må godt lave et andet emne. Bare du har de ting, som videoerne fortæller om. Links, overskriver, iframe med video, tabel og punktopstilling. Du skal også have et eksternt stylesheet.