Uppgifter

Uppgift 1

Skapa ett korrekt HTML-dokument och ladda upp det via FTP

  1. Om du inte har gjort det: Ladda ned Brackets från brackets.io och installera den på din dator.

  2. Hämta och installera FileZilla från filezilla-project.org om du inte har gjort det. Det är klienten du ska ha, inte servern.

  3. Skapa en ny mapp i "Dokument" på din dator. Döp den nya mappen till WEBWEU01 (kursens namn).

    Allt du gör inom den här kursen ska du förvara i den mappen (naturligtvis kan du göra undermappar, så många du behöver).

  4. Öppna Brackets

  5. I Brackets, öppna den nya mappen WEBWEU01 (Arkiv → Öppna mapp...).

  6. Skapa ett nytt HTML5-dokument. för att det ska gå snabbare finns det en mall du kan kopiera här på sidan. Det finns också insticksprogram till Brackets som har färdiga mallar, till exempel "New Html5 Document" av Yasin Kuyu. Du kan hämta insticksprogram till Brackets genom att klicka på "legobiten" till höger i Brackets (under blixten). Det finns massor av instick som lägger till nya funktioner till programmet.

  7. Döp ditt nya dokument till index.html och spara det (i mappen WEBWEU01)

  8. Lägg till en <h1>-rubrik högst upp på sidan. Rubriken ska vara ditt namn. I mitt fall skulle det alltså bli: <h1>Niklas Park</h1>.

  9. Efter rubriken, lägg till ett stycke text (<p>) som kan fungera som en kort välkomsttext till din sajt.

  10. Efter välkomsttexten, lägg till en länk (<a>)till Danderyds gymnasiums hemsida (http://www.dagy.danderyd.se). Du får länka till någon annan sajt än Danderyds gymnasium om du vill, men länken ska fungera!

  11. Lägg slutligen till en bild (img) på sidan. Gärna en bild på dig själv, men du kan ta någon annan bild du tycker om i stället. Bilder på webben kan vara i .jpg, .png eller .gif-format. Själva bildfilen lägger du i samma mapp som index.html (WEBWEU01). Om bilden ligger i samma mapp som HTML-dokumentet som ska visa den, blir adressen till den nämligen bara själva namnet på bildfilen. Enkelt att skriva. Tänk bara på att namnet på bildfilen inte ska innehålla några mellanslag eller konstiga tecken (som å, ä eller ö), däremot går det bra med bindestreck eller understreck i filnamn. Glöm inte alt-texten! Bilden får vara maximalt 500 pixlar bred (width="500").

  12. Öppna FileZilla

  13. Lägg till kursservern i FileZillas platshanterare, så har du den lätt tillgänglig och behöver inte skriva in alla uppgifter varje gång du ska ansluta.

    Just nu är uppgifterna:

    Värd: niklaspark.se
    Port: Lämna blankt (du behöver inte skriva någonting eftersom servern använder FTP:s standardport, 21)
    Protokoll: FTP - Filöverföringsprotokoll
    Kryptering: Använd explicit FTP över TLS om tillgängligt
    Inloggningstyp: Normal
    Användare: elev@niklaspark.se
    Lösenord: elev2015

    Under fliken "avancerat" rekommenderar jag att du lägger till din WEBWEU01-mapp som "Standardkatalog (lokal)", på så sätt kommer den mappen öppnas automatiskt när du ansluter till servern med hjälp av platshanteraren.

    Dessa uppgifter kommer att ändras senare, du kommer att få en egen inloggning med ett eget hemligt lösenord.

  14. Klicka på "Anslut"

  15. Skapa en ny katalog på serversidan i Filezilla, döp denna till ditt namn (utan åäö, mellanslag och sådant) och gå in i den.

  16. Kopiera över index.html och bildfilen från den vänstra, klientsidan till den högra, serversidan. Du kan bara dra filerna från vänster till höger.

  17. Nu är din webbsajt ute på webben!

Det finns självklart många olika kodeditorer förutom Brackets, och många FTP-klienter förutom FileZilla. De flesta av dessa fungerar bra. Du får använda någonting annat om du vill, men Brackets och FileZilla är båda bra, pålitliga program som finns till både OSX och Windows.

om du vill se hur jag gjorde, kan du öppna min exempelsida. Om du högerklickar eller tvåfingerklickar på den kan du i de flesta webbläsare öppna källkoden och läsa sidans kod (i Safari måste du aktivera utvecklarmenyn i inställningarna för att du ska kunna göra det).

HTML5-mall

<!DOCTYPE html>
   <html>
   <head>
      <title>Untitled Document</title>
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
   </head>
   <body>
   </body>
</html>

Uppgift 2

Gör ett dokument fullt av listor

Skapa ett nytt HTML-dokument. I detta ska du visa exempel på listor och tabeller (För att visa att du kan).

  1. Skapa en ny mapp i WEBWEU01-mappen, döp mappen till listor

  2. Skapa ett nytt HTML5-dokument i mappen listor. Döp dokumentet till listor.html.

  3. I listor.html ska följande finnas med:

  4. Enkla listor

    1. En onumrerad lista med valfritt innehåll
    2. En numrerad lista med valfritt innehåll
    3. En definitionslista/beskrivninslista som förklarar några valfria begrepp
    4. En onumrerad lista med tre (text-)länkar
    5. En numrerad lista med tre bilder
    6. En onumrerad lista med tre bilder som är länkar
  5. Nästlade listor

    • En numrerad lista i en onumrerad
    • En definitionslista som innehåller en numrerad och en onumrerad lista på <dd>-nivå
  6. Kopiera mappen (katalogen) "listor" till din mapp på servern via FTP. Skapa en länk till listor.html från din förstasida, index.html.

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Om du har glömt någonting finns all nödvändig information för att du ska klara uppgiften här på kurssajten.

Uppgift 3

Grundläggande tabeller

Skapa ett nytt HTML-dokument. I detta ska du visa exempel på tabeller.

  1. Skapa en ny mapp i WEBWEU01-mappen, döp mappen till tabeller

  2. Skapa ett nytt HTML5-dokument i mappen listor. Döp dokumentet till index.html.

  3. I index.html ska följande finnas med:

    1. Minst tre rader
    2. Minst tre kolumner
    3. <caption>
    4. <thead>
    5. <tfoot>
    6. <tbody>

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Om du har glömt någonting finns all nödvändig information för att du ska klara uppgiften här på kurssajten.

Uppgift 4

Kopiera en tabellstruktur efter en bild

Öppna filen du gjorde i förra uppgiften, index i mappen tabeller. Skriv en ny <h2>-rubrik för tabell 2.

Efter den nya rubriken ska du återskapa tabellen som visas nedan.

Kantlinjerna är gjorda genom att attributet border till elementet <table> har fått värdet 1 ( <table border="1">).

Bilden finns på http://niklaspark.se/webweu01/img/spiderman-11.gif

färgerna är red, green och blue.

  • Utgå från tabellen på bilden och gör en likadan.
  • Tabellen ska ha en <caption>
  • Tabellen ska ha <thead>, <tfoot> och <tbody>
  • Kopiera den nya versionen av dokumentet till ditt serverkonto via FTP.
Tabellexempel

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Om du har glömt någonting finns all nödvändig information för att du ska klara uppgiften här på kurssajten.

Uppgift 5

Grundläggande CSS

Skapa ett nytt HTML-dokument, med namnet cssuppgift_1.html. Dokumentet ska innehålla en <h1>-rubrik, Tre stycken med vanlig text (<p>) och minst en länk.

Skapa en extern stilmall med namnet cssuppgift_1.css och länka till denna från cssuppgift_1.html

  • Gör sidans bakgrund ljusblå
  • Gör all text till ett sans-serif-typsnitt (font).
  • Gör rubriken rosa och understruken
  • Gör länken röd

Ladda upp dokumenten på ditt serverkonto via FTP. Skapa en länk till cssuppgift_1.html från index.html.

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Du får använda webben som resurs och surfa efter lösningar.

Uppgift 6

Grundläggande layout med CSS

Skapa ett nytt HTML-dokument, med namnet cssuppgift_2.html. Dokumentet ska innehålla en <h1>-rubrik, Tre stycken med vanlig text (<p>) och minst en länk.

Skapa en extern stilmall med namnet cssuppgift_2.css och länka till denna från cssuppgift_2.html

Dokumentet ska vara utformat efter följande:

  • Överst ska det vara en ruta som motsvarar bannern som brukar ligga överst på webbsidor.
  • Nedanför denna ska det finnas ett block för huvudinnehållet på sidan
  • Till vänster om huvudinnehållet ska det finnas en mindre ruta som motsvarar vänstermenyn som ofta förekommer på webbsajter
  • Nedanför huvudinnehållet ska det finnas en ruta som motsvarar sidfoten
  • Huvudinnehållet och vänstermenyn tillsammans får inte vara bredare än 950 pixlar
  • Alla delar ovan ska ha någon bakgrundsfärg
  • Alla delar ovan ska ha någon typ av kantlinje
  • Mellan alla delar ska det vara ett avstånd på 20 pixlar
  • Du behöver inte fylla delarna med något textinnehåll om du inte har lust eller hinner
  • Du kan behöva innesluta vissa <div>-ar i andra <div>-ar för att underlätta arbetet, men det beror på hur du väljer att lösa uppgiften

Ladda upp dokumenten på ditt serverkonto via FTP. Skapa en länk till cssuppgift_2.html från index.html.

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Du får använda webben som resurs och surfa efter lösningar. Huvuddelen av det du behöver kunna finns dock här på sajten.

Uppgift 7

Z-index, pseudoklasser och synlighet

Skapa ett nytt HTML-dokument, med namnet cssuppgift_3.html.

Skapa en extern stilmall med namnet cssuppgift_3.css och länka till denna från cssuppgift_3.html

Dokumentet ska vara utformat efter följande:

  • Skapa tre delvis överlappande lådor med olika bakgrundsfärg.
  • Låt den låda som ligger i mitten i HTML-koden ligga överst av de tre
  • Låt den låda som ligger först i HTML-koden byta färg och hamna överst när muspekaren befinner sig över den
  • Försök få en av lådorna att försvinna när muspekaren befinner sig över den.
    • Skriv i din HTML, en kommentar där du förklarar din lösning
    • OM din lösning inte fungerar förklarar du i kommentaren varför den inte fungerar

    Ladda upp dokumenten på ditt serverkonto via FTP. Skapa en länk till cssuppgift_3.html från index.html.

    Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

    Du får använda webben som resurs och surfa efter lösningar. Huvuddelen av det du behöver kunna finns dock här på sajten.

Uppgift 8

Mobilanpassa en webbsajt med CSS

Kopiera den HTML och CSS du gjorde till uppgift 5 och spara kopior av koden som cssuppgift_4.html och cssuppgift_4.css

Gör en mobilanpassning av sidan så att den ser uppenbart annorlunda ut på mobiltelefoner än på datorns bildskärm.

Lägg, någonstans på sidan, till texten "Mobilversion" på ett sådant sätt att den inte visas på större skärmar än mobiler

Ladda upp dokumenten på ditt serverkonto via FTP. Skapa en länk till cssuppgift_4.html från index.html.

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Du får använda webben som resurs och surfa efter lösningar. Huvuddelen av det du behöver kunna finns dock här på sajten.

Uppgift 9

Variabler och arrayer i JavaScript

Skapa ett nytt HTML-dokument, som du döper till index.html. Lägg detta tillsammans med eventuella .css och .js-dokument i en mapp som du döper till jsuppgift_1.

Gör följande:

  • Gör en numerisk array med valfritt innehåll
  • Gör en associativ array med valfritt innehåll
  • Gör en nästlad array: En associativ array som innehåller numeriska arrayer
  • Gör tre knappar som öppnar varsin alertruta som hämtar data från de tre arrayerna ovan
  • Bonus!: Få en associativ array i en associativ array att fungera med alertruta. Berätta i kommentarerna hur du gjorde.

Ladda upp dokumenten på ditt serverkonto via FTP. Skapa en länk till jsuppgift_1 från index.html.

Dokumenten ska vara korrekta. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Du får använda webben som resurs och surfa efter lösningar. Huvuddelen av det du behöver kunna finns dock här på sajten.

Uppgift 9

Skapa ett enkelt mailto-formulär

Uppgiften går ut på att skapa ett formulär som skriver ett e-postmeddelande. Just det här exemplet använder sig av användarens dators mailprogram för att skicka mailet. I de flesta verkliga fall används dock serverscript för att skicka brev från webbsidor, kolla gärna exempel. Det som skulle ändras i ett sådant fall är framför allt värdena till attributen action och method i <form>-taggen.

Du kan utgå från exemplet nedan:

<form action="mailto:you@yourdomain" method="get" enctype="text/plain">
   <p>Name: <input type="text" name="name" /></p>
   <p>Email: <input type="text" name="email" /></p>
   <p>Comments:<br />
   <textarea cols="30" rows="20" name="comments"></textarea></p>
   <p><input type="submit" name="submit" value="Send" />
   <input type="reset" name="reset" value="Clear Form" /></p>
</form>

Läs om hur formulär fungerar på W3Schools, läs på samma ställe om de olika element ett formulär kan innehålla och annat om formulär. Kolla menyn till höger så kommer du se en egen menyavdelning för formulär.

Du kommer upptäcka att du kan få konstiga tecken i mailet, det beror på att get innebär att innehållet i formuläret skickas som en URL. I en URL kodas "konstiga" tecken annorlunda än i vanlig HTML.

Det går också att bygga ut mailto: på massor av sätt. Testa!