Modul 09. Masser af CSS

Indholdsfortegnelse

Inden du går i gang

Øvelserne baseres på W3schools. Derfor er det en god idé at have W3schools åben under øvelserne https://www.w3schools.com/.

9.1 Fantastiske farver

Her er et helt fantastisk billede af et helt fantastisk fodboldhold: Hvad er farvekoden for holdets trøjer og bukser, og hvordan vil du finde farvekoden? TIP. Snak sammen om I kan finde en pipette /color picker på nettet, evt. til at installere som et add-on til jeres browser. Jeg bruger selv ColorZilla. PS: Hvis I absolut vil, så tag et tilsvarende farveprøve på Randers FC’s hold, bare I mindst tager 2 farveprøver

Inde på https://color.adobe.com/create/color-wheel finder du eksempler på farvesammensætninger. Tag koden og prøv minimum 3 farver fra samme farvefamilie af på en af dine tidligere sider. Giv f.eks. Sådan så f.eks. baggrunden har en af farverne, <h1> har en anden og <p> har en 3. Tip: Kik gerne hos W3schools: https://www.w3schools.com/css/css_text.asp

9.2 Fra W3’s buffet

Forudsætninger for at løse opgaven: https://www.w3schools.com/css/default.asp fra og med punkterne Comment til og med punktet Box model.

Vi skal i opgaven prøve at lege lidt. Emnet er skolens LAN-party. Sid spredt 2 og 2. I skal lave hver jeres side. Farver, indhold og billeder bestemmer du. God humor er tilladt, men lav det ikke alt for for plat. Du skal minimum have 2 sider, men flere sider tilladt. Du er velkommen til at tage udgangspunkt i de plakater, der hænger på skolen.

Betingelser: Du skal bruge styling af, som det er vist på https://www.w3schools.com/css/default.asp fra og med punkterne Comment til og med punktet Box model. Punktet Outline er frivilligt.

Du skal have både <h1> og <p> tags på alle sider.
Skrifttypen overalt skal være verdana. Tip: Du kan nøjes med at style på et enkelt tag, det er ikke nødvendigt at style på <h1>, <p> osv. separat.
Din overskrift skal være 30 px høj generelt. Men på forsiden skal den være 40 px. Løs problemet vha. en klasse og lav en kort kommentar i koden, der forklarer, hvordan klassen virker
Baggrundsfarven hvid er ikke tilladt, find på noget andet
Vis, at du kan indsætte et billede efter eget valg som baggrund ud fra en styling
Du skal have en tabel, men en 2 x 2 tabel er nok. Bemærk at du kan bruge en tabel til at placere billeder med. Har du brug for, at billederne har en bestemt størrelse, så kontakt mig
Billeder og stylesheets skal placeres i hver sin seperate mappe
Anvend round borders på f.eks. <p> tags: https://www.w3schools.com/css/css_border.asp
Der skal være billeder på alle sider
Styl dine billeder, så de starter 10px fra venstre. Brug egenskaben margin til dette
Giv din overskrift <h1>40 px padding. Hvad gør det ved overskriftens udseende?
Vis, at du vha. en klasse kan centrere et af dine billeder, så det står midt på siden. Tip: Brug text-align
Generelt skal siden have en styling, så alle elementer starter 20 px inde uanset hvad. Lav en sådan styling
Bonusopgave 1. Vis, at du kan anvende Outline i praksis
Bonusopgave 2: Leg løs med mulighederne 🙂

9.3 Inspektøren (fælles øvelse)

Ingen forudsætninger, du skal bare trænes i inspektøren … som findes nok på alle browsere:

Åben et tilfældigt website i Visual Studio
Kopier koden nedenfor ind i et nyt html-dokument i Visual Studio
Se det i en browser
Brug inspektor til at justere CSS koden
Gå tilbage i dokumentet og gennemfør rettelserne
Tjek at rettelserne virker
I en af linjerne ses en kode “<p class=”green fat”>Lidt brødtekst 2.</p>”. Prøv at forklare, hvordan den virker
Bonusopgave: Brug CSS til at gøre siden så flippet som overhovedet mulig. Du må kun bruge CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
  font-family: arial;
}

h1 {
  color: navy;
  margin-left: 20px;
  }
h2{
  font-size: 20px;
}
p{
  color: orange;
  font-size: 40px;
  font-family: georgia;
}
.green{
  color: green;
}
.fat{
  font-weight: bold;
  font-size: 24px;
  font-style: italic;
}
</style>
</head>
<body>

<h1>Overskrift</h1>
<p>Lidt brødtekst 1.</p>
<h2>Under-overskrift</h2>
<p class="green fat">Lidt brødtekst 2.</p>
<p>Lidt brødtekst 3.</p>

</body>
</html>

9.4 Navigation

Forudsætninger for at løse opgaven: Du kan hente alle informationer i bogen under https://koder.systime.dk i kapitlet Navigationsdesign.

Inden du går i gang. Opgaven her er nem at gennemføre men forståelsen er svær. Men den lærer dig dels at lave en flot menu, dels kommer du meget langt ned i, hvordan man arbejder med CSS.

I https://koder.systime.dk løs de første 2 opgaver i kapitlet Navigationsdesign (1). Den første opgave er vist herunder (2). Du kan snyde og copy-paste, men det lærer du ikke noget af.
Tag dig tiden og lad især den første opgave folde sig ud, så du lærer gennem praktisk arbejde, hvordan den ikke helt nemme styling af menuer kan være.
Sæt en kommentar ind over hvert nyt punkt, du sætter ind. Kommentaren skal fortælle, hvad koden gør. En kommentar i CSS ser sådan ud: /* min kommentar */
Test af i en browser efter hvert punkt.

Tag dig tiden til at forstå koden og spørg undervejs, hvis du er i tvivl. Hvordan virker f.eks. koden “ul li a{ ….}”
Undervejs anvend inspektoren og prøv at rette i koden direkte på skærmen.
Bonusopgave: Sammen med en makker brug 3 minutter på at studere, hvordan de har lavet en topmenu hos W3Schools. Det kan du se på https://www.w3schools.com/howto/howto_js_topnav.asp. Hvad er forskellene/lighederne
Bonusopgave. Prøv at indsætte og manipulere med en menu fra W3Schools
Når du er færdig: Gå videre med opgave 9.4

9.5 Prøv selv

Forudsætninger for at løse opgaven: Løst opgave 9.3 samt det, der står om menuer på W3schools: Forudsætninger for at løse opgaven:

Lav menuen om på dit site fra opgave 7.1, så menuen på alle dine sider er en vandret bar med styling. Du bestemmer selv ambitionsniveauet, men som minimum skal du have en bar, der svarer til resultatet i den forrige opgave 9.3 Navigation.
Bonusopgave 1: Vis, at du kan anvende klasser i din css
Bonusopgave 2: Kik ind på https://www.w3schools.com/howto/default.asp og prøv det af, som du selv synes er mest spændende.

9.6 Styling af link

Forudsætninger for at løse opgaven: Tip: https://www.w3schools.com/css/css_pseudo_classes.asp

Du skal nu style dine link med CSS, så de alle får en anden farve end de er født med. F.eks. kan du style dem grøn … med mindre, at du hader Viborg. Tip: https://www.w3schools.com/css/css_pseudo_classes.asp

9.7 Styling af link med et tvist

Forudsætninger for at løse opgaven: https://www.w3schools.com/css/css_pseudo_classes.asp evt. https://www.w3schools.com/html/html_links.asp og https://www.w3schools.com/html/html_links_bookmarks.asp

Nederst i opgaven her finder du noget kode. Start med at kopiere koden i opgaven ind i en ny html-fil i Visual studio. Til en forandring er det ok at lave stylingen i toppen, dvs. du behøves ikke at lave et eksternt stylesheet … men du må godt :-). Bemærk at det er en one-page web, som er populære som visitkort og virker godt på mobiltelefoner.

Selve opgaven:

Undersøg siden. Hvordan bærer man sig ad med at linke op og ned af siden.
Når du har fundet ud af hvordan: Hvad er relationen til klasser og id i den måde, man får navigationen til at fungere på?
Hvad gør den lille stump CSS i toppen? Prøv at se, om W3Schools kan give dig et svar, ellers søg generelt på nettet.
Menuen i toppen skal styles, så farven på link altid er mørkeblå. Link’sne må ikke være understreget (TiP. Søg på “text-decoration”). Når du hover over, så skal linket blive rødt og skriften fed. Test af og forklar, hvorfor det er en rigtig dårlig ide med fed skrift :-).
Alle andre link skal være mørkegrønne men også blive røde, når musen hover over. Heller ikke her skal der være understregning af link
Bonusopgave: Pep siden op med fede farver, billeder, videoer … Men det skal stadig være en “onepage”.
Bonusopgave: På egen hånd undersøg disse 2 link. De viser, hvordan man kan lave små animationer med CSS. Det skal siges, at der er masser af andre muligheder for animationer i CSS og især javaScript
- https://www.w3schools.com/css/css3_animations.asp
- https://www.w3schools.com/cssref/css3_pr_animation.php

Her kommer koden. Lad dig ikke skræmme af, at der er meget kode. Jeg var nødt til at lave en masse fyldtekst for at få siden til at blive lang nok.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>One page web</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
    </style>
</head>
<body>
    <h1 id="top">Eksempel på OnePage web</h1>
    <p>OnePage web er ret simpelt. Det består ganske enkelt kun af en enkelt side.</p>
    <p>Det betyder ikke, at siden ikke kan være lang. Men det betyder, at når man linker, så scroller man op og ned af siden frem for at skifte til en ny side</p>
    <p>Lad os prøve det af i praksis. Her har jeg taget geografi som eksempel</p>
    <ul>
        <li><a href="#Danmark">Danmark</a></li>
        <li><a href="#Sverige">Sverige</a></li>
        <li><a href="#Norge">Norge</a></li>
    </ul>
    <h2 id="Danmark">Danmark</h2>
    <p>Danmark er et ret så lille land. Især i forhold til andre lande. Heldigvis er vi ligeglade, når vi bare banker de andre lande i fodbold</p>
    <p>Du kan hente fyldtekst ved at søge på "lorem ibsum", så får du fyldtekst på latin. Det er bare sjovere at søge på <a href="" target="_blank">https://baconipsum.com/</a>"bacon ibsum" i stedet</p>
    <p>Bacon ipsum dolor amet pork chop buffalo cupim ham hock chuck meatball ground round ball tip landjaeger jerky short loin tongue cow. Doner meatball pork belly, leberkas ham hock tail frankfurter t-bone pastrami. Pastrami kielbasa shank, beef ribs venison ribeye turkey meatloaf. Pastrami turducken cow rump, tri-tip prosciutto pork belly. Frankfurter swine turducken, capicola biltong tenderloin turkey pork loin. Rump meatloaf ham hock beef. Sirloin biltong capicola, tenderloin jowl kevin ham hock strip steak leberkas.</p>
    <p>Capicola beef shank tongue porchetta pork loin. Chuck pork loin meatloaf sausage meatball andouille shankle short ribs turducken hamburger pancetta boudin cupim. Tenderloin chuck rump chicken cupim. Pork capicola andouille biltong beef sausage t-bone. Ham hock corned beef landjaeger t-bone tenderloin pastrami ham, brisket fatback turducken ball tip turkey chislic capicola. Corned beef meatball meatloaf pastrami ham hock pork belly porchetta pork shank strip steak.</p>
    <p>Burgdoggen tri-tip salami, cow brisket pork loin shoulder. Frankfurter t-bone burgdoggen prosciutto beef ribs pork loin shank buffalo turkey spare ribs hamburger leberkas bresaola filet mignon short loin. Pancetta burgdoggen porchetta cupim ball tip sausage drumstick short loin hamburger flank pig kielbasa pork belly beef. Prosciutto ham salami landjaeger, ribeye hamburger chuck. Venison short ribs swine chislic ham hock. Meatloaf sirloin beef tenderloin bacon chislic jowl tail tongue shank pig shankle filet mignon.</p>
    <p>Jowl kevin meatloaf rump hamburger, tenderloin ham pork belly. Ham hock burgdoggen chuck, rump pancetta sausage tenderloin. Picanha sirloin chuck jowl ham beef ribs pork burgdoggen beef doner kevin chicken shank. Corned beef capicola boudin strip steak tri-tip jerky cupim hamburger chicken pork turducken.

    <p>Chislic kielbasa cupim beef, bresaola turducken shank chuck sausage tongue short ribs strip steak capicola ball tip. Fatback shank bresaola chuck pig pork chop spare ribs picanha jowl ball tip beef corned beef ground round. Shank ribeye tongue beef ribs landjaeger short loin salami, bresaola chicken. Buffalo bresaola rump turducken alcatra short ribs venison jowl shank jerky tri-tip beef turkey. Pancetta tri-tip boudin meatball flank landjaeger pig.</p>
    </p>
    <p>Gå til <a href="#top">toppen</a> af siden</p>
    <h2 id="Sverige">Sverige</h2>
    <p>Ak ja: Sverige. Fyldt med myg og svenskere, og så spiller deres landshold i nogle ualmindeligt grimme farver helt lige som deres flag. Enkelte uheldige danske klubber gør det samme, men de ligger så også i Malmø Vest også kaldet "Pestegnen". De skulle tage at lære noget ordentligt dansk i stedet for den mærkelige dialekt, som de taler. </p>
    <p>Du kan hente fyldtekst ved at søge på "lorem ibsum", så får du fyldtekst på latin. Det er bare sjovere at søge på <a href="" target="_blank">https://baconipsum.com/</a>"bacon ibsum" i stedet</p>
    <p>Bacon ipsum dolor amet pork chop buffalo cupim ham hock chuck meatball ground round ball tip landjaeger jerky short loin tongue cow. Doner meatball pork belly, leberkas ham hock tail frankfurter t-bone pastrami. Pastrami kielbasa shank, beef ribs venison ribeye turkey meatloaf. Pastrami turducken cow rump, tri-tip prosciutto pork belly. Frankfurter swine turducken, capicola biltong tenderloin turkey pork loin. Rump meatloaf ham hock beef. Sirloin biltong capicola, tenderloin jowl kevin ham hock strip steak leberkas.</p>
    <p>Gå til <a href="#top">toppen</a> af siden</p>
    <h2 id="Norge">Norge</h2>
    <p>Norge ligger heldigvis så langt væk, så man ikke kan se det. Lad være med at tage cyklen med, for de har nogle ret så syge bakker. Det er i øvrigt farligt at cykle der pga. de vilde dyr. De har både geder (og gedeost, hold dig fra det), rensdyr og fjeldaber. Især fjeldaberne er farlige og svære at forstå. Til gengæld er landet ret dyrt.</p>
    <p>Du kan hente fyldtekst ved at søge på "lorem ibsum", så får du fyldtekst på latin. Det er bare sjovere at søge på <a href="" target="_blank">https://baconipsum.com/</a>"bacon ibsum" i stedet</p>
    <p>Bacon ipsum dolor amet pork chop buffalo cupim ham hock chuck meatball ground round ball tip landjaeger jerky short loin tongue cow. Doner meatball pork belly, leberkas ham hock tail frankfurter t-bone pastrami. Pastrami kielbasa shank, beef ribs venison ribeye turkey meatloaf. Pastrami turducken cow rump, tri-tip prosciutto pork belly. Frankfurter swine turducken, capicola biltong tenderloin turkey pork loin. Rump meatloaf ham hock beef. Sirloin biltong capicola, tenderloin jowl kevin ham hock strip steak leberkas.</p>
    <p>Capicola beef shank tongue porchetta pork loin. Chuck pork loin meatloaf sausage meatball andouille shankle short ribs turducken hamburger pancetta boudin cupim. Tenderloin chuck rump chicken cupim. Pork capicola andouille biltong beef sausage t-bone. Ham hock corned beef landjaeger t-bone tenderloin pastrami ham, brisket fatback turducken ball tip turkey chislic capicola. Corned beef meatball meatloaf pastrami ham hock pork belly porchetta pork shank strip steak.</p>
    <p>Burgdoggen tri-tip salami, cow brisket pork loin shoulder. Frankfurter t-bone burgdoggen prosciutto beef ribs pork loin shank buffalo turkey spare ribs hamburger leberkas bresaola filet mignon short loin. Pancetta burgdoggen porchetta cupim ball tip sausage drumstick short loin hamburger flank pig kielbasa pork belly beef. Prosciutto ham salami landjaeger, ribeye hamburger chuck. Venison short ribs swine chislic ham hock. Meatloaf sirloin beef tenderloin bacon chislic jowl tail tongue shank pig shankle filet mignon.</p>
    <p>Jowl kevin meatloaf rump hamburger, tenderloin ham pork belly. Ham hock burgdoggen chuck, rump pancetta sausage tenderloin. Picanha sirloin chuck jowl ham beef ribs pork burgdoggen beef doner kevin chicken shank. Corned beef capicola boudin strip steak tri-tip jerky cupim hamburger chicken pork turducken.</p>

    <p>Chislic kielbasa cupim beef, bresaola turducken shank chuck sausage tongue short ribs strip steak capicola ball tip. Fatback shank bresaola chuck pig pork chop spare ribs picanha jowl ball tip beef corned beef ground round. Shank ribeye tongue beef ribs landjaeger short loin salami, bresaola chicken. Buffalo bresaola rump turducken alcatra short ribs venison jowl shank jerky tri-tip beef turkey. Pancetta tri-tip boudin meatball flank landjaeger pig.</p>
    <p>Gå til <a href="#top">toppen</a> af siden</p>
</body>
</html>

Bliv-klogere

Undervisningsmateriale til HHX og HTX