[ACC-Logo]

Hur man skapar web-sidor

[ACC Hemsida] [Hjälp] [Information] [Sök] [Index]

[The same information in English]


Vad är en web-sida?

En web-sida lagras i en speciell sorts fil, en s.k. "html-fil". html-filer kan skapas i näst intill vilket program som helst som man kan använda för att redigera textfiler. Det finns dessutom många program som är till för att skapa html-filer. Fördelen med dessa program är att de är relativt lättanvända. Nackdelen är att de oftast inte gör helt rätt när de genererar själva html-filen. Det rekommenderade sättet att skapa web-sidor är att skapa sina html-filer i en vanlig texteditor typ vi, pico, Anteckningar i Windows 95 eller liknande.

En html-fil innehåller en massa olika styrkoder som bestämmer hur sidan skall se ut när man tittar på den med en nätbläddrare. Dessa styrkoder kallas "html-tags" (eller "html-taggar" på svenska). Man behöver inte lära sig mer än 10 stycken för att kunna skapa en enkel web-sida.

Lägga upp en web-sida hos ACC

Om du skapar din web-sida hemma, eller på en dator som inte hör till ACC men som är Internetansluten, måste du lägga upp filen som innehåller web-sidan på ditt ACC-konto. Detta görs med SFTP. Se vår hjälpsida om filöverföring för mer information.

Det är naturligtvis enklast att skapa sidorna "på plats", med en editor som finns på systemet. Då slipper man krångla med SFTP. För mer information om detta tillvägagångssätt hänvisar vi till våra sidor om inloggning och texteditorn pico.

När du skapat en web-sida och vill att den skall finnas på ditt ACC-konto, måste du placera filen/filerna som sidan består av på ett speciellt ställe. Detta är i katalogen ~/public_html på ditt konto hos ACC (tecknet "~" betyder "hemkatalog"). Katalogen ~/public_html skapas med kommandot
mkdir ~/public_html. Allt som du lägger i den katalogen kommer att vara publikt på http://www.acc.umu.se/~ditt-användarnamn.

För att webservern skall kunna skicka ut din sida till folk som vill se den, måste du göra katalogen allmänt läsbar. Detta görs med nedanstående kommando:
chmod 755 ~/public_html

Den fil som innehåller din hemsida måste dessutom ha ett speciellt namn, index.html, detta för att webservern skall veta vilken sida som skall visas om du har flera filer som innehåller olika web-sidor. Även filerna måste vara allmänt läsbara, och filer görs allmänt läsbara med kommandot
chmod 644 filnamn
där filnamn såklart byts ut mot namnet på filen du vill göra allmänt läsbar.

Känner du dig osäker så kan du alltid använda kommandot "fixchmod", som automatiskt ordnar åtkomsträttigheterna på dina web-sidor. På det sättet slipper du använda chmod-kommandot. Det är bara att skriva fixchmod så sköter det resten.

Lite större eller mer avancerade sidor

Om din sida blir väldigt stor, bör du dela upp den i flera mindre sidor. Detta görs helt enkelt genom att man skapar flera olika html-filer, som innehåller de olika sidorna. Filen som innehåller huvudsidan skall fortfarande heta index.html, och från den får du länka till de övriga filerna. Se då till att ge filerna vettiga namn, som t.ex. jag.html, links.html o.s.v....

Du kan även skapa en struktur på dina sidor genom att lägga dem i olika kataloger beroende på vilken sorts sida det är. Till exempel kan du lägga alla dina länk-sidor i katalogen ~/public_html/links/ och dina Spice-Girls-sidor i katalogen ~/public_html/spicegirls/ o.s.v.... Huvud-länk-sidan bör då ligga i filen index.html i länk-katalogen, så att webservern hittar den. En sida med länkar till dina vänners hemsidor kan heta friends.html och ligga i länk-katalogen. O.s.v....

cgi-scripts

Har du ett cgi-script som du vill skall köras någon gång, till exempel för en gästbok eller en räknare som räknar antalet besök din sida får, skall det scriptet ligga i katalogen ~/public_html eller en underkatalog till ~/public_html. cgi-script måste vara körbara, och detta ordnas med kommandot
chmod 755 scriptnamn.cgi
där scriptnamn.cgi såklart byts ut mot namnet på filen som innehåller cgi-scriptet.
Kommandot fixchmod tar även hand om detta, ifall du tycker det verkar för krångligt att använda chmod-kommandot.

Hur gör man då för att få ett cgi-script att köras då någon tittar på en web-sida? Det är faktiskt ganska enkelt. Lägg in följande rad på lämpligt ställe i html-filen:
<!--#include virtual="scriptnamn.cgi"-->
så kommer scriptnamn.cgi att köras då någon tittar på web-sidan, och eventuell text eller html-kod som produceras kommer att hamna i web-sidan. Ett kort exempel:
Denna sida har besökts <!--#include virtual="raknare.cgi"--> gånger!
kanske blir något liknande detta, beroende på vad raknare.cgi producerar:
Denna sida har besökts 65 gånger!
Det är möjligt att göra cgi-scripts som skriver ut html-kod som anger att en bild skall visas. Om raknare.cgi i ovanstående exempel är ett script som anger antalet besökare genom att visa bilder på siffrorna, så kanske resultatet blir detta istället:
Denna sida har besökts <img src="6.gif"><img src="5.gif"> gånger!
vilket gör att web-läsaren kommer att ladda bilderna 6.gif samt 5.gif och visa dem.

På ACC tillhandahålls en del scripts, som till exempel en räknare, som räknar antalet besökare på en sida. För att använda den i en sida, skriver man följande rad i en html-fil:
Denna sida har besökts <!--#exec cgi="/cgi-bin/scripts/acc_count"--> gånger!
om man vill använda scriptet /cgi-bin/scripts/acc_count.

För mer information om räknare, se counter.html.sv.

För information om andra cgi-scripts, se cgiscripts.html.sv.

Lösenordsskyddade sidor
Det finns flera sätt att skapa lösenordsskyddade websidor, observera dock att göra det med cgi-script oftast är ett säkerhetshål då lösenordet sparas i webserverns loggfil.

Ett säkrare sätt är att använda htaccess istället, vilket behandlas på en separat sida.

Skapa en web-sida

Detta är inte avsett att vara en fullständig kurs till web-side-skapande, utan skall mer ses som en introduktion så att du förstår grunderna bakom en web-sidas utseende. Det bästa sättet att lära sig html är att titta på html-koden till en sida som har den feature man vill ha, och modifiera den till att passa ens egna behov.

Vad är en tag?

En "tag" är en slags styrkod som bestämmer hur web-sidor skall se ut. Ett exempel på en tag är <br>, som ger en radbrytning. Många taggar kan/skall även ha argument, t.ex. taggen img som används för att inkludera bilder på en sida. Ett exempel på hur det kan se ut är
<img src="bild.gif" alt="Bild" align="middle" width="200">

Taggar måste omges av tecknen < och > annars fungerar de ej! Likaså måste en del argument till taggar omges av " (citationstecken). Om du skriver fel i en tag kommer din sida troligen att se konstig ut, även om en del nät-bläddrare försöker gissa vad du egentligen menade. En del taggar måste dessutom avslutas. Detta gäller t.ex. för <center>, som centrerar text på en sida. Man skriver <center> före den text man vill centrera, och </center> efter. All text mellan de två taggarna kommer att vara centrerad. Likaså skriver man <p> före ett stycke, och </p> efter. Det är så styckeindelningen på denna sida är gjord.

Några av de tags som man kan ha i en html-fil är "obligatoriska". De bör finnas med i filen, om du vill att sidan skall kunna ses av så många personer som möjligt, oavsett vilken nätbläddrare de använder. Dessa är t.ex. <html>, <head> och <body>.

En enkel hemsida

Vi skall här gå igenom hur html-filen till en enkel hemsida kan se ut.

Början på sidan

Först i filen bör taggen <html> komma, för att indikera att filen är en html-fil. Sedan vill vi ha en titel på sidan. En titel placeras i huvudet på en sida. Alltså måste vi ha ett huvud: <head>. Titeln skrivs inom <title>-taggen: <title>Min hemsida</title>. Nu är vi färdiga med huvudet, så det avslutas: </head>.

Sidans text

Härnäst skall vi skriva in själva sidan. Den läggs i den s.k. kroppen. Därför skriver vi in <body>-taggen, med en del argument för att ange vilka färger vi vill ha på vår sida: <body bgcolor="#ffffff" text="#000000" link="#00ffff" alink="#000000">. Nu kan vi skriva in den text som skall finnas på sidan. Den skrivs in rakt av. Vill man tvinga fram en radbrytning på ett visst ställe i texten skriver man in taggen <br>. Nätbläddrare formaterar texten på sidor så att den fyller ut bredden i fönstret optimalt, så att sitta och formatera texten genom att sitta och sätta in en massa <br>-taggar överallt är slöseri med tid. Dessutom har olika personer olika stora fönster, så den sida som ser perfekt ut för dig kanske radbryts på ett annat sätt för en annan person. Testa genom att ändra storleken på ditt nätbläddrar-fönster, så får du se!

Bilder

Vill man ha bilder på sin web-sida sätter man in dem med en speciell tag: <img>. <img>-taggen kan ha en massa olika argument, för att ange bildens storlek, tjockleken på ramen runt bilden etc. Vi vill ha med ACC's logga: <img src="/images/logo/acc_small.gif" alt="ACC logga" width="200" align="middle" border="0">. Detta gör att bilden /images/logo/acc_small.gif visas på sidan, eller texten "ACC logga" om nätbläddraren inte visar bilder. Bredden på bilden blir 200 bildpunkter, och den visas mitt-justerad.

Länkar

För att länka till andra sidor eller dokument använder skriver man något liknande detta: <a href="http://www.cnn.com/">cnn</a>. Detta kommer att skapa en länk till www.cnn.com, som heter "cnn".
Man kan även ha bilder som länkar: <a href="http://www.lina.org/"><img src="/images/logo/acc_small.gif" alt="/images/logo/acc_small.gif" width="200" align="middle" border="0"></a>.

Slutet på sidan

Sist i html-filen skall man avsluta de taggar man "påbörjade" först i filen. Detta görs genom att man skriver in </body> och </html>.

Ett exempel

Här är det vi hittills skapat:


<html>
<head>
<title>Min hemsida</title>
</head>

<body bgcolor="#ffffff" text="#000000" link="#00ffff" alink="#000000">
Hejsan och välkommen till min hemsida. Den har inte så mycket information just nu, men vänta bara tills jag lärt mig mer html!<br>
<br>
Här kommer en länk till <a href="http://www.cnn.com/">cnn</a> där du kan läsa nyheter.<br>
<br>
En liten bild ACC's logga:
<img src="/images/logo/acc_small.gif" alt="ACC's logga" width="200" align="middle" border="0"><br>
Hejdå, och välkommen åter!
</body>
</html>

Mer info om webside-skapande

För att inte göra en alltför stor sida, har vi valt att lägga mer information om html, och framförallt olika taggar, på en annan sida.



[ACC] [Help] [Web]
Denna sida ändrades sist av wmaster den 20/12 - 2014.