Untitled Document

HMTL snabbguide

Gör din egen hemsida

Här ska du få lära dig göra din egen hemsida. Det kommer inte att bli en avancerad hemsida. Det som jag kommer at gå igenom här är:
* Inledning
* Grunden
* Koder
* Tabeller
* Frames
* Lite smått och gott
När du är färdig med den här guiden ska du själv kunna göra din egen hemsida i Windows programmet Anteckningar. Jag hoppas att allt kommer att gå bra. Lycka till önskar Majk (MajkDomain webmaster)
[Tillbaka]

Inledning

Hej och välkomna till MajkDomains snabbguide till HMTL4. I den här guiden ska du lära dig göra en egen hemsida. Men innan vi börjar ska jag gå igenom några saker.
1. Programmet du ska använda heter Anteckningar. Det finns med på alla datorer med Windows och är en perfekt HTML redigerare. Det finns under startmenyn/program/tillbehör/anteckningar (eller notepad). När du öpnnar programmet ser du en tom yta att skriva på. Där ska din hemsida ligga yill slut.
2. Eftersom Anteckningar är en textredigerare egentligen så måste du ange vilken filändelse filen du spara ska ha. När det gäller hemside filer, måste den heta *.htm eller *.html. Det är bara att välja.

Nu när vi har gått igenom detta, är det dags att börja med din hemsida.
Fortsätt neråt.

Grunden

Grunden på en hemsida är viktig. Om du inte har en grund, kan inte webbläsaren läsa HTML koden. Grunden ser ut så här:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Om du vill ändra bakgrunds färg/bild ska det se ut så här i <body> koden:
Bakgrunds färg - <body bgcolor="§§§§§§">
Bakgrunds bild - <body background="http://www.bildens_adress">
Detta är den viktigaste koden på hela sidan. Utan denna kan du inte göra en hemsida. Alla koder som du senare kommer att få lära dig ska stå mellan <body> och </body>. När du har skrivit detta kan du spara sidan som index.html. Om du kollar på sidan nu så kommer den att se ut så här. Den kommer att vara tom för att vi inte lagt till någon text eller bild. Läs vidare så kommer vi till det.
Fortsätt neråt.

Koder

I HTML finns det många koder. Vi kommer bara att använda de valigaste koderna. Här följer en lista med koderna och vad de gör:

Fetstil - <B></B>
Kursin text - <I></I>
Understrucken - <U></U>
Genomstrucken - <STRIKE></STRIKE>
Centrera - <CENTER></CENTER> (for both text and images)
Text storlek - <FONT SIZE=?></FONT> (från 1-7)
Text färg - <FONT COLOR="#$$$$$$"></FONT>
Teckensnitt på text - <FONT FACE="***"></FONT>
Länk - <A HREF="URL"></A>
Visa bild - <IMG SRC="URL">
Byt rad - <BR>
Vågrät linje - <HR>
Dessa koder är de absolut vanligaste koderna i HTML. Nu ska vi använda dessa oxå. Öppna index.html med Anteckningar och skriv så att den ser ut så här.

<html>
<head>
<title>Sidans namn</title>
</head>
<body bgcolor="ffffff">
<center><u><h2>Överskrift på sidan</h2></u></center>
<hr color="white">
<font size="-2" face="verdana"> Skriv en rolig text här!</font>
<img src="http://home.swipnet.se/majkshemsida/webbdesign/htmlguide/exempel/devil.gif">
<hr color="white">
<center>
<a href="http://www.majkdomain.cjb.net">Besök MajkDomain V3.1</a>
</center>
</body>
</html>

Nu ska din sida se ut så här. Om den inte gör det, kolla då igenom koden en gång till och se till att allt är rätt. Vi har nu fått lite text på sidan, en bild och en länk till min hemsida. Du kan ju självklart ändra allt detta sen efter egna behov.
Fortsätt neråt.

Tabeller

Nu ska vi lära oss göra tabeller. Koderna för tabeller är:
Början/slut - <TABLE></TABLE>
Tabell rad - <TR></TR>
Tabell kolum - <TD></TD>
Tabell bredd - <TABLE WIDTH="?"> (bredd i pixel)
Tabell bredd - <TABLE WIDTH="?%"> (bredd i procent av sidan)
Kolum bredd - <TD WIDTH="?"> (bredd i pixel)
Kolum bredd - >TD WIDTH="?%"> (bredd i procent av sidan)
Ram färgen - <TABLE BORDERCOLOR="§§§§§§">
Detta är de viktigaste tabell koderna. Nu ska vi använda dessa koder. Skriv av koden nedan:

<html>
<head>
<title>Sidans namn</title>
</head>
<body bgcolor="ffffff">
<center><u><h2>Överskrift på sidan</h2></u></center>
<hr color="black">
<table width="100%" bordercolor="000000">
<tr>
<td width="50%">
<font size="-2" face="verdana">Skriv en rolig text här!</font>
</td>
<td width="50%>
<img src="http://home.swipnet.se/majkshemsida/webbdesign/htmlguide/exempel/devil.gif">
</td>
</tr>
</table>
<hr color="black">
<center>
<a href="http://www.majkdomain.cjb.net">Besök MajkDomain V3.1</a>
</center>
</body>
</html>

Nu ska sidan se ut så här. Det blev väl fint? Man kan göra mycket mer med tabeller än detta. Du kan tex göra menyer oxå. Sen kan man gå vidare och lägga till Javascript i dom oxå. Men det får vi ta en annan gång. Om din sida inte ser ut som den ska, kolla då igenom koden. Om det ändå inte skulle fungera, kan du kontakta mig.
Fortsätt neråt.

Frames

Nu ska vi göra lite frames till sidan oxå. Vi ska dela sida vertikalt. Dvs en linje uppifrån ner. Ta ett nytt dokument och skriv in denna koden:

<html>
<head><title>Sidans namn</title>
</head>
<frameset frameborder=0 cols="30%,70%">
<frame src="menu.html" name="meny" noresize>
<frame src="main.html" name="huvud" noresize>
<noframes>
<body>
Meddelande till personer som inte kan se frames
</body>
</noframes>
</frameset>
</html>

Nu ska du döpa om filen som heter index.html till main.html. Sen ska du spara den här filen med namnet index.html istället. Nu ska din sida se ut så här. Om du har problem med att tillverka en meny, kan du få hjälp här. Då tillverkar vi en fräck meny med häftiga effekter.
Fortsätt neråt.

Överkurs (Smått o gott)

Om man vill att sidan ska se lite mer avancerad ut kan man använda sig av CSS. Det står för Casscading Style Sheats. Här jag lägga ut en CSS kod som gör att länkarna byter färg när man för musen över dom:
<style type="text/css">

</style>
Klistra in den här koden mellan <body> och </body>. Sen är det bara att föra musen över en länk och se hur den byter färg till ljusblå. Självklart kan man byta färg till vilken man än vill. Det är bara att redigera det understruckna i koden. Lycka till med hemside byggandet /Majk (webmaster MajkDomain V3.1)
[Tillbaka]