Labb 9: HTML sida

I denna laboration kommer du att ta de första stegen mot att skapa och publicera en egen hemsida. Du kommer att skapa en enkel webbsida med HTML och lägga upp den på en Apache-server. Därefter kommer du att testa och visa sidan genom att anropa den som localhost eller genom ett länkat DNS-namn.

Denna laboration ger dig praktisk erfarenhet av hur webbplatser utvecklas och hanteras på en server. Du kommer att lära dig grunderna i webbutveckling, inklusive HTML-struktur, och hur en webbserver som Apache fungerar för att göra din sida tillgänglig på nätverket. Genom att genomföra denna uppgift får du en grundläggande förståelse för hur webbsidor skapas, publiceras och visas för användare.

Steg 1: Starta Linux Ubuntu och lägg grundstruktur

Skriv i sökningsfältet ”ubuntu” och välj den. Terminalen öppnas automatisk och prompten ser ut som följande:

maximus@linus:~$

Ändra dina användarbehörigheter till administratörsbehörigheter. Ange lösenordet.

maximus@linus:~$ sudo su
[sudo] password for administrator:

Observera att prompten ändrar sig till:

root@linus:/home/administrator#

Ändra aktuella arbetskatalogen till /var/www/:

root@linus:/home/administrator# cd /var/www/ 
root@linus:/var/www#

Skapa en ny katalog och döp den till ng.se:

root@linus:/var/www# mkdir ng.se

Ändra den aktuella arbetskatalogen till /var/www/ng.se/

root@linus:/var/www# cd ng.se
root@linus:/var/www/ng.se#

Steg 2. Skapa en grundläggande HTML-sida

Öppna en textredigerare som nano eller vim.

root@linus:/var/www/ng.se# nano index.html

Skriv följande kod i nano editorn:

<!DOCTYPE html>
<htmll>
<headl>
   <titlel>Min Första Webbplatsl</titlel>
</headl>
<bodyl>
    <h1>Välkommen till Min Första Webbplats</h1l>
    <p>Detta är en grundläggande HTML-sida.</pl>
</bodyl>
</htmll>

Spara filen och stäng redigeraren (Ctrl + O, Enter, Ctrl + X för nano).

Steg 3: Skapa en konfigurationsfil för ng.se

Navigera till katalogen sites-available där Apache2 webbplats konfigurationer lagras:

root@linus:/var/www/ng.se# cd /etc/apache2/sites-available/

root@linus:/etc/apache2/sites-available#

Sök efter filen 000-default.conf:

root@linus:/etc/apache2/sites-available# ls -l

Kopiera filen 000-default.conf och döp kopian till ng.se.conf:

root@linus:/etc/apache2/sites-available# cp 000-default.conf ng.se.conf

Redigera den nya konfigurationsfilen ng.se.conf:

root@linus:/etc/apache2/sites-available# nano ng.se.conf

I filen ng.se.conf, gör följande ändringar:

  1. Lägg till eller ändra raderna för ServerName och ServerAlias:
    • Avkommentera ServerName www.ng.se
    • Lägg till ServerAlias ng.se
  2. Ändra DocumentRoot så att det pekar på den nya katalogen:
    • I samma dokument (ng.se.conf) hitta raden: DocumentRoot /var/www/html. Ändra till DocumentRoot /var/www/ng.se

Spara filen och stäng redigeraren (Ctrl + O, Enter, Ctrl + X för nano).

Steg 4: Aktivera den nya webbplats konfigurationen

root@linus:/etc/apache2/sites-available# a2ensite ng.se

Ladda om Apache2-konfigurationen:

root@linus:/etc/apache2/sites-available# service apache2 reload

Steg 4: Konfigurera Windows HOSTS-fil

  1. Minimera Ubuntu terminalen och öppna CMD som administratör.
  2. Navigera till katalogen där HOSTS-filen ligger:
C:\Windows\System32> cd drivers/etc
  1. Lägg till dina domännamn i HOSTS-filen:
    • Lägg till följande rader för att peka ng.se och www.ng.se till din lokala server:
C:\Windows\System32\drivers\etc> echo 127.0.0.1 ng.se >> hosts
C:\Windows\System32\drivers\etc> echo 127.0.0.1 www.ng.se >> hosts
    • Testa att domännamnet fungerar genom att pinga det:
C:\Windows\System32\drivers\etc> cd \
C:\> ping www.ng.se

Steg 5: Testa webbplatsen

Öppna en webbläsare och navigera till http://www.ng.se för att se din HTML-sida.