0106 sidor jag gillar

I mappen webbutveckling gör du en ny mapp

  0106-sidor-jag-gillar

Öppna Notepad++ och lägg till filerna

  start.html
  min-stil.css

i den mapp du nyss skapade.

Leta reda på tre hemsidor som du gillar. Låt det ta maximalt tio minuter. Tag en skärmdump (fn + print screen) av var och en av sidorna.

Öppna var och en av bilderna i ett bildredigeringsprogram, till exempel Paint.

  1. Beskär bilderna så att oönskade delar försvinner.

  2. Ändra storleken så att bilderna blir lagom breda, till exempel 960 pixlar.

  3. Spara bilderna i mappen du nyss gjorde. Använd enbart a-z, 0 - 9 och - i filnamnen. Spara som png eller jpeg. Jpeg används för fotografier och png annars i detta fall.

start.html

Kopiera html-kod från en tidigare uppgift.

Infoga de tre bilderna.

  1. Skriv en kort motivering under var och en av bilderna. Berätta varför du gillar respektive hemsida.

  2. Länka till hemsidan.

  3. Egenskaperna width och height bör sättas till bildens faktiska bredd och höjd i pixlar. Detta för att sidan ska laddas snabbare. Tips nedan.

min-stil.css

Stila på valfritt sätt. Försök att få det snyggt. Använd padding, margin och border.

Visa för din lärare när du är klar.

Ladda upp till webbhotellet

Logga in.

Lägg till mappen

  0106-sidor-jag-gillar

i mappen public_html. Den heter nog så.

Öppna mappen du just skapade och ladda upp filerna

  start.html
  min-stil.css
  bildfilerna (3 stycken)

Gå in på hemsidan och kolla att det ser ut som det ska.

Tips

  <!-- bild med HTML5-taggar -->
  <figure>
      <img src="filnamn" width="100" height="70" />
      <figcaption>
          bildtext
      </figcaption>
  </figure>

  <!-- länk -->
  <a href="webbadress">länktext</a>

Länkar:

Mer om figure på MDN