Modul 30. Klasser i CSS og meta tags til søgemaskiner

Modul-30.-Klasser-i-CSS-og-soegemaskineoptimering-1Download

30.1 Klasser

Sæt nedenstående kode ind i en editor hos W3 schools og se, hvordan det virker!

  • Hvordan kan man se, når der er tale om at lave en klasse (modsat styling af et tag)
  • Hvilke fordele opnår vi ved at kombinere klasser med styling af tags
  • Hvordan får man en klasse til at virke på et tag
  • Tilføj klassen red til <h1>-tagget, så overskriften bliver rød 
<!DOCTYPE html>
<html>
<head>
<style>
body{
	background-color: lightcyan;
}
p{
	color: darkgreen;
        font-size: 20px;
}
.red{
	color: red;
}
.high{
	font-size: 30px;
}
</style>
</head>
<body>

<h1>Demo of the .class selector</h1>
<p>My name is Donald.</p>
<p class="red high">I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p class="red">My best friend is Mickey.</p>
</body>
</html>

30.2 Prøv selv at lave klasser

Lav en kopi af sitet her i Web Lab https://studio.code.org/projects/weblab/fBHKQZSjjtgATB7sN9F0mfp_tcmJX73rwb4AHJG5HKw/edit.

På side 2 skal du lave en række ting:

  • Af en eller anden grund virker stylingen ikke på side 2. Sørg for, at de virker. Tip: Der er noget galt i <head> sektionen
  • Lav et returlink til forsiden
  • Løs nedenstående opgaver vha. klasser på side 2
    • AGF spiller i mørkeblåt og hvidt. Sørg for at overskriften til AGF er 50px høj og mørkeblå og at brødteksten er hviiiiiie
    • Randers er vi knapt så glade for. I hvert fald ikke, hvis man er AGF fan. Sørg for at overskriften er 10 px høj og brødteksten 5px høj. Ikke højere end det, gerne mindre
    • OB spiller i blåt og hvidt. Overskriften OB skal være med blå farve og brødteksten hvid lige som AGF
    • Sønderjyske har vist rigeligt at gøre med at forsøge at vende tilbage til superligaen. Så dem lader vi være
    • Vejle spiller i rødt. Brødteksten skal være rød.
  • Bonusopgave. Hvis vi nu siger, at “Side 2” som den eneste side skal have orange baggrund. Hvordan kan vi løse det. Tip: Brug igen klasser.

30.3 Indsæt meta tags

Du kan se meta tags hos W3schools her: https://www.w3schools.com/tags/default.asp.

Åben din hjemmeopgave til i dag. Lav en liste over mindst 10 søgeord, som du ønsker at blive fundet på. Når du har lavet en liste, så skal følgende overholdes.

  • Alle sider skal have en titel, og titlen skal helst indeholde søgeordet
  • Kun 1 <h1> overskrift pr side, men lige så mange <h2> og <h3>, som man har lyst til
  • Du skal sætte meta-tags ind i <head> området, se https://www.w3schools.com/tags/tag_meta.asp.
    • Du skal som mimimum have en meta description. Meta description skal være forskellige på de enkelte sider, men de skal indeholde min 1 – 2 af dine søgeord. Sørg for, at søgeordene står først i teksten
      • Keywords er frivillige, da Google ikke vægter det mere
      • Hvis du allerede nu er en selvfed CSS-haj lige som mig, hvilket jeg håber, så sæt også en author-meta tag ind med dit navn

30.4 Styleguide

Se styleguiden igennem i lærebogen på https://bliv-klogere.ibc.dk/index.php/laerebog-til-del-5-hjemmesider-kapitel-15-17/#172_Styleguide.

Hvis du vil læse mere, så har W3schools har en styleguide under HTML (1) > HTML Style guide (2). https://www.w3schools.com/html/html5_syntax.asp.

30.5 Afsluttende opgave. Et modesite

2 HHX studerende, Hans HTML og Cindy CSS er blevet kontaktet af Signe Smart, som ønsker at sælge et tøj online. Det drejer sig om tøj til fitness, men tøjet kunne bruges og se smart ud udenfor fitness lokalet, både i fritiden og på arbejdet. I første omgang skal der bare laves et site, som præsenter tøjet. Mærket hedder “Free-fit”.

Hans og Cindy lover at lave et forslag til en hjemmeside med som minimum 4 sider. En forside, en side til herremode, en side til damemode og en side til kontaktoplysninger

Krav til løsningen

Bemærk: Fokus er på layout og at tingene virker, ikke så meget på tekstindholdet.

Hvis du vil tjene ekstra point i din besvarelse, kan du lave ekstraopgaver. De første ekstraopgaver er de letteste. Du kan finde eksempler på alle ekstraopgaver her: https://studio.code.org/projects/weblab/H4hAs1Rh4h4pGJJZk3MTe996p–Ga8Yrd4YUogZ7eUE/edit

Ekstraopgave 1

Sæt en horizontal navbar ind og få den til at virke. Kik hos W3schools: https://www.w3schools.com/css/css_navbar.asp.

Ekstraopgave 2. En responsiv hjemmeside

Responsivt design ud fra W3schools’s eksempel https://www.w3schools.com/html/html_responsive.asp

Ekstraopgave 3. Den virkeligt professionelle hjemmeside

Kan du lave det her eller bare komme halv i mål, så tæller det ret så højt. Til gengæld laver du en super flot hjemmeside. https://www.w3schools.com/css/css_website_layout.asp