Fysikums webb- och mediakurser

WEBB- OCH DATABASPROGRAMMERING

INLÄMNINGSUPPGIFT 7

Uppgiften är obligatorisk.

Byt bakgrundsfärg med länkar

På webbsidor brukar ju all text vanligtvis återges i svart medan bakgrunden är vit. Du ska göra en webbsida där besökaren själv kan välja vilken kombination av text- och bakgrundsfärg som ska användas.

På din webbsida ska det finnas ett antal länkar med färgnamn. Samtliga länkar ska peka tillbaka till samma sida, så att man alltså helt enkelt laddar om sidan när man klickar på vilkensomhelst av länkarna. Varje länktext ska vara en kombination av en textfärg och en bakgrundsfärg. När en besökare sedan klickar på någon av länkarna ska webbsidans bakgrund och all färg ändras till de färger som framgår av länken.

Varje länk med färgval ska kompletteras med två namn-datapar som innehåller information om dels den textfärg och dels den bakgrundsfärg som ska väljas med länken. I början av sidans kod ska finnas ett PHP-avsnitt som läser av de två medskickade färgvärdena i vektorn $_REQUEST[].

Färg på bakgrund och text styrs inte av HTML utan med webbsidetekniken stilmallar. (Den aktuella standarden för webbsidesstilmallar har beteckningen CSS - Cascading Style Sheets.) Denna teknik ligger iochförsig utanför ramarna för kursen, men du kan lösa inlämningsuppgiften utan djupare kunskaper om CSS med följande kodexempel. Allt hänger på ett extra attribut style i HTML-sidesavsnittet head. I huvudavsnittet står vanligtvis bara sidans titel i elementet title, kanske så här:

<html>
  <head>
    <title>Färgvalssidan<title>
  </head>
  <body>
    ...här kommer all kod för webbsidan...
  </body>
</html>

Om vi bara fokuserar på head-avsnittet så kan det kompletteras med ett element style som innehåller stilinformation för sidan. Vi är intresserade av stilegenskaperna color (för textfärg) och background-color (för bakgrundstext). Färgerna ska gälla för hela sidan, så vi knyter stilreglerna till det HTML-element body som innehåller hela webbsidan. Så här blir det för grön text mot gul bakgrund:

<head>
  <title>Färgvalssidan<title>
  <style type='text/css'>
    body
    {
      color: green;
      background-color: yellow;
    }
  </style>
</head>

Komplettera alltså HTML-koden i din sida med stilavsnittet, men byt ut färgerna i exemplet ovan mot de värden som skickats med från länkarna till PHP-vektorn $_REQUEST[].

Tips

Se till att de par av text- och bakgrundsfärger är tillräckligt olika så att texten kan läsas utan problem.

Färger kan anges antingen som något av det fåtal engelska färgnamn som finns definierade, som t.ex black, red, teal eller maroon. Lite mer kryptiskt men mer flexibelt är det att ange färger som RGB-koder, som kan se ut som t.ex #003366 eller #e0a012. Se listan över 216 av de miljontals RGB-koderna på internet.physto.se/resurser/216rgb för inspiration.

Om du väljer blå eller lila bakgrund kan det bli svårt att se länkarna, som ju vanligtvis har någon av dessa färger. Då kan du specificera en tredje färg, förutom text- och bakgrundsfärgerna, nämligen en lämpligt vald länkfärg. För att ändra färgen för obesökta länkar (vanligtvis blåa) lägger du till följande stilregler jämte regeln för body:

a:link
{
color: silver;
}

Motsvarande stilegenskap för besökta länkar är a:visited. Kolla gärna vad stilegenskapen a:hover har för funktion!