I denna laboration skall du lära dig grunderna för html programmering. Du skall lära dig göra en webbsida, använda frameset, tabeller, använda olika typsnitt, färger m.m. Programmeringen gör du i en vanlig texteditor tex. anteckningar (PC) eller BBEdit (MAC). Spara sedan filen i din public_html mapp på ditt konto.
Gör en webbsida där du kan redovisa samtliga laborationer i kursen. Det du behöver är ett frameset för att dela upp sidan, en meny där du kan välja de olika laborationerna, ett sidhuvud som anger kurs och namn samt en main frame som visar upp de kommande laborationerna. I denna laboration skall mainframe visa en sida som innehåller ett foto på dig och en text som beskriver dig, intressen, bakgrund etc. Texten skall vara formaterad och innehåla listor, olika färg på text, olika storlekar på font samt justerad sidmarginal. Sidhuvudet skall ha en valfri bakgrundsbild och menyn ska ha en passande bakgrundsfärg och snygga knappar som länkar till mainframe. Se exempel1
Steg 1 Skapa public_html mapp
Öppna terminalfönstret som ligger under program/verktygsprogram och
skriv: mkdir ~/public_html
Detta skapar en mapp med namnet public_html på ditt konto. För att
göra mappen och filerna som du lägger där läsbar av andra
måste du ställa rättigheterna. Detta gör du med kommandot:
fs sa ~/public_html system:anyuser rl
För att kontrollera rättigheter använder du kommandot: fs
la ~/public_html
För mer information gå in på systemgruppen
Steg 2 Skapa frameset
Börja med att öppna ditt editeringsprogram, tex BBEdit. För att
skapa en sida som exempel1 ovan behöver du skapa ett frameset
med tre frames som jag har döpt till topFrame, menyFrame och mainFrame:
<html>
<head>
<title>Frameset</title>
</head>
<frameset rows="100,*" cols="*" frameborder="NO"
border="0" framespacing="0">
<frame src="top.html" name="topFrame" scrolling="NO"
noresize >
<frameset rows="*" cols="122,*" framespacing="0"
frameborder="NO" border="0">
<frame src="meny.html" name="menyFrame" scrolling="NO"
noresize>
<frame src="main.html" name="mainFrame">
</frameset>
</frameset>
</html>
spara sidan som index.html och lägg i public_html mappen.
Steg 3 Skapa en meny
Nästa steg är att skapa tre stycken webbsidor att länka
tre frames till. I exemplet ovan har jag döpt dessa tre sidor till top.html,
meny.html och main.html. Vi börjar med menysidan. Öppna ett nytt dokument
i BBEdit. Skapa en tabell med en kolumn och 6 rader där du kan lägga
in länkarna till kommande labbar. Lägg till en bakgrundsfärg
som passar och skapa några knappar som du sedan kan länka till de
sidor som ska visas i mainFrame. Knappar kan du göra i photoshop. I exempel1
ovan ser det ut något så här:
<html>
<head>
<title>Meny</title>
</head>
<body bgcolor="#000000">
<table width="100%" border="0">
<tr>
<td><div align="center"><strong>Lab 1</strong></div></td>
</tr>
</table>
</body>
</html>
P.S glöm inte att spara
Steg 4 Skapa sidhuvud
För att skapa sidhuvudet ska du leta rätt på en snygg bakgrundsbild
som kan passa som sidhuvud. Tänk på att den måste vara tillräckligt
neutral så att texten som skall stå där blir läsbar. När
du hittat din bild kan du öppna ett nytt dokument i BBEdit. Skriv in taggarna
som behövs och länka bilden genom att använda: <body background="din
bild .jpg"> Skriv sedan in kurs, ditt namn och klass.
Steg 5 Gör en sida om dig själv
Sista momentet är att skapa en sida om dig själv där du har en
bild, text med rubrik och brödtext i olika storlekar beskriver dig själv
och dina intressen. Avslutningsvis länkar du knapp LAB1 i menyn
till denna sida så att när man klickar på knappen hamnar sidan
i mainFrame. Ett sätt är att använda en hyperlänk: <a
href="minsida.html">Lab1</a>