Webteknologi - Opgaver modul 2

Opgave 1 - En simpel web-server

Du skal ikke snydes for at nyde dine flotte html-sider fra sidst serveret fra en rigtig web-server. Den nemmeste måde at installer en simpel web-server på er via værktøjet npm.

Du skal bruge en web-server der hedder live-server. Du kan installere den ved at bruge følgende kommando i terminalen:

$ npm install -g live-server

Herefter kan du starte serveren op i den folder du står i ved at bruge kommandoen:

$ live-server

Serveren har den smarte feature, at den automatisk reloader browseren når en af filerne bliver ændret. Smart!

Du stopper serveren igen med CTRL + c.

Se om dine HTML-dokumenter ser ud som de skal, når du besøger dem igennem live-server med din browser. Prøv at lave ændringer i HTML’en, gem ændringerne, og se at browseren selv loader siden med de nye ændringer.

Opgave 2 - CSS

Find igen din HTML fra lektion 1. Lav gerne en ny kopi så du stadig har den udgave du lavede sidst. Tilføj nu noget CSS. Skriv det i en fil der hedder styles.css, og link den ind i dine html-dokumenter. Du linker den ind ved at tilføje følgende under <head>:

<link rel="stylesheet" href="styles.css">

Prøv at se hvor mange af disse du kan løse ved at skrive noget CSS:

  1. Dine overskrifter skal have ændret farve.
  2. Din tabel skal have et baggrundsbillede.
  3. Din side skal have en ny baggrundsfarve.
  4. Du skal ændre den farve der kommer, når musen holdes over et link.
  5. Der skal laves en farvet kant omkring dine billeder.
  6. Lav en tyk margin omkring hele din body så indholdet ikke står for tæt på kanten af browseren.
  7. Giv dine billeder en skyggeeffekt langs kanten.
  8. Vælg nogle nye fonte på dine overskrifter.
  9. Lav en “linær gradient baggrund” på din body der løber fra højre hjørne i toppen og mod venstre hjørne i bunden.

Find selv på flere!

Slut af med af fremvise dine kreative påfund til din studiegruppe.

Opgave 3 - Classes og ids

Lav en CSS class der definerer en fancy baggrundsfarve og eventuelt andre effekter. Sæt classen på rundt omkring i dine tags og verificer at ændringerne slår igennem på siden.

Giv en af dine p-tags en unik id. Lav en style til din unikke id med CSS, fx en ny baggrund, og verificer at kun det specifikke element får din nye style. Andre p-tags skal fortsat have den style de havde før.

Opgave 4 - SVG-billeder

Du skal nu lave billeder med SVG.

For eksempler på de mange muligheder med SVG, kig her: https://www.w3schools.com/graphics/svg_intro.asp (brug menuen til venstre for at navigere i eksemplerne).

Til en start skal du prøve at lave følgende figurer med SVG. De behøver ikke ligne helt præcist 🙂

Kunstværker

Opgave 5 - SVG-kunst

Lav nu et kunstværk med SVG efter eget valg. Når alle i studiegruppen er færdige, skal i stemme om hvilket værk, I bedst kan lide.