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>