Miwna
02-10-2006, 15:39
Nu ska jag lära dig hur man gör en hemsida från första början med hjälp av HTML-koder. Jag kommer dock inte berätta hur man gör den tillänglig online, (det borde du veta :p )
HTML - Hyper Text Markup Language.
Grunder
En hemsida består av massvis med "Taggar".
<taggens början>..TEXT..</sluttagen>
Sluttaggen är lika viktig som starttaggen, för om du inte har någon sluttagg kommer det inte att fungera. Om du ska ha flera taggar efter varandra ska du tänka på hur du sätter dem.
Rätt sätt: <CENTER><H1>..TEXT..</H1></CENTER>
Fel sätt: <CENTER><H1>..TEXT..</CENTER></H1>
För att börja behöver du i princip bara ett program som kan spara filer som HTML. Det enklaste programmet är anteckningar (notepad.exe) som följer med Windows. Innan du börjar bör du göra en mapp där du samlar alla HTML-dokument, annars kanske inte länkarna fungerar.
En sådanhär <!--Kommentar--!>
kan du lägga in var som helst i dokumentet, utan att den syns på sidan.
Lättast att lära sig är genom att titta på exempel.
Här är en väldigt enkel hemsida:
<HTML>
<HEAD>
<TITLE>
Min första hemsida
</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
<H1>
Välkommen till min hemsida
</H1>
Detta är en mycket enkel hemsida
</P>
</BODY>
</HTML>
<HTML>
Alla HTML-dokument måste ha en sådan tagg, den talar om för webbläsaren vad som ska läsas av.
<HEAD>
Här börjar HTML-dokumentets "huvud"
</HEAD>Här slutar dokumentets "huvud"
<BODY>
Här finns HTML-dokumentets "kropp" eller resten. Som du ser kan man lägga till flera attributer i vissa taggar. BGCOLOR="#FFFFFF" bestämmer sidans backgrundsfärg. Du kan också skriva "red" som färg.
<H1>Detta är rubriken.<H1>
<H2>Detta är under rubriken, o.s.v
Ett stycke</P>
Storlekar
Man skriver alltid texten på sidan inom <BODY>
<FONT SIZE="5" FACE="Tahoma">
Denna text är alltså med storleken 5, i teckensnittet "Tahoma". Standardteckensnittet är "Arial". Storleken kan variera från -2 till +4 och 1 till 7.
Länkar
En valig länk ser ut såhär:
Klicka här (sidan.html)
om "sidan.html" ligger i en annan mapp i mappen, så lägger du till Sidor/..såhär:
Klicka här (Sidor/sidan.html) Även länkar ska finnas inom <BODY>
Bilder
För att lägga till en bild på sidan skriver man enkelt:
bilden.jpg
Om du vill att man ska komma till en annan sida när man trycker på bilden, ska du skriva såhär:
<IMG SRC="bilden.jpg> (sidan.html)
Iframe-flytande ram
Även en iframe placeras inom <BODY>
Grundkoden för en iframe är:
<IFRAME SRC="iframe_sidan.html" NAME="iframe" WIDTH="100" HEIGHT="100">
</IFRAME>
Ett exempel kan ses här:
Exempel (http://www.webdesignskolan.com/html/iframe/exempel1.htm)
Nu hoppas jag att du har lärt dig lite mer om hur man gör en hemsida med bara hjälp av text. :D
Om du vill lära dig ännu mer kan du besöka:
CSS
CSS - Cascade Style Sheet
Med CSS kan du ändra hur t.ex. en länk ska se ut.
<STYLE>
A {FONT-COLOR:34567;}
</STYLE>
Den effektivaste metoden är att ange all CSS-kod i en egen CSS-mall och koppla alla HTML-sidor till mallen. Namnet på mall-dokumentet är valfritt men det måste vara en textfil med filtilläget .css som tex "mall.css".
All CSS skriver du inom <STYLE></STYLE>
Såhär kan du skriva:
<HTML>
<HEAD>
<STYLE>
BODY {FONT-FAMILY: Verdana; FONT-SIZE: 11px;}
P {FONT-FAMILY: Verdana; FONT-SIZE: 11px; TEXT-DECORATION: UNDERLINE;}
</STYLE>
<TITLE>
Min hemsida
</TITLE>
</HEAD>
<BODY>
<H1>
Välkommen till min hemsida
</H1>
Detta är en mycket enkel hemsida
</P>
</BODY>
</HTML>
Du har nu stylat all text inom
</P> och <BODY></BODY>
Du kan också använda en mall (som jag skrev i inlägget ovanför):
Den effektivaste metoden är att ange all CSS-kod i en egen CSS-mall och koppla alla HTML-sidor till mallen. Namnet på mall-dokumentet är valfritt men det måste vara en textfil med filtilläget .css som tex "mall.css".
För att göra så lägger du till
<LINK HREF="mall.css" REL="stylesheet" TYPE="text/css">
Inom <HEAD></HEAD>
Du kan ändra bakgrundsfärg med CSS, istället för att med HTML skriva:
<BODY BGCOLOR="#FFFFFF">
Kan du skriva
BODY {COLOR: #003366;}
Textstorlekar kan anges i dessa enheter:
px - pixlar (pixels) - samma enhet som bildskärmars upplösning
pt - Punkter (point) - 1 pt är lika med 1/72 inch
in - tum (inch)
cm - centimeter
mm - millimeter
p - picas - 1 pc är lika med 12 punkter
Nu ska jag lära dig hur man stylar sina HTML taggar med CSS.
CSS - Cascade Style Sheet
Med CSS kan du ändra hur t.ex. en länk ska se ut.
<STYLE>
A {FONT-COLOR:34567;}
</STYLE>
Den effektivaste metoden är att ange all CSS-kod i en egen CSS-mall och koppla alla HTML-sidor till mallen. Namnet på mall-dokumentet är valfritt men det måste vara en textfil med filtilläget .css som tex "mall.css".
I HTML-dokumentet.
Om du vill att den externa CSS-mallen ska styra den grundläggande formateringen på alla sidor men ändå vill avvika från mallen på vissa sidor kan du ange CSS direkt i dokumentet inom <HEAD>.
Exemplet nedan formaterar all text till Verdana 11 pixlars storlek. OBS! Notera att formateringen anges för flera tags för att även texten som finns i tabellceller, stycketext och listor ska formateras:
<style type="text/css">
body {font-family: Verdana; font-size: 11px;}
p {font-family: Verdana; font-size: 11px;}
td {font-family: Verdana; font-size: 11px;}
li {font-family: Verdana; font-size: 11px;}
</style>
I HTML-koden
I vissa fall när du formaterar samma tags på flera olika sätt i samma HTML-dokument kan du ange CSS direkt i HTML-koden och även använda egna class-namn. I exemplet nedan används ett eget class-namn ".teckenformat" som ska användas för formatering av text till Verdana 11 pixlar. OBS! Punkten i classnamnet är viktig och måste finnas med:
<style type="text/css">
.teckenformat {font-family: Verdana; font-size: 11px;}
</style>
Du kan ha flera mallar med olika namn som tex:
"teckensnitt2", "textcolor", "bakgrundsfarg", "kantlinje", "kantlinje2" etc.
Exemplet nedan formaterar all text inom ett stycke
enligt formatering i mallnamnet "teckenformat" ovan.
<p class="teckenformat">texten i ett stycke...</p>
</body>
Bakgrunsbild
Du kan använda CSS som ersättning för <body background="bakgrundsbild.jpg">
body { background-image: url(bakgrundsbild.jpg);}
:)
HTML - Hyper Text Markup Language.
Grunder
En hemsida består av massvis med "Taggar".
<taggens början>..TEXT..</sluttagen>
Sluttaggen är lika viktig som starttaggen, för om du inte har någon sluttagg kommer det inte att fungera. Om du ska ha flera taggar efter varandra ska du tänka på hur du sätter dem.
Rätt sätt: <CENTER><H1>..TEXT..</H1></CENTER>
Fel sätt: <CENTER><H1>..TEXT..</CENTER></H1>
För att börja behöver du i princip bara ett program som kan spara filer som HTML. Det enklaste programmet är anteckningar (notepad.exe) som följer med Windows. Innan du börjar bör du göra en mapp där du samlar alla HTML-dokument, annars kanske inte länkarna fungerar.
En sådanhär <!--Kommentar--!>
kan du lägga in var som helst i dokumentet, utan att den syns på sidan.
Lättast att lära sig är genom att titta på exempel.
Här är en väldigt enkel hemsida:
<HTML>
<HEAD>
<TITLE>
Min första hemsida
</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
<H1>
Välkommen till min hemsida
</H1>
Detta är en mycket enkel hemsida
</P>
</BODY>
</HTML>
<HTML>
Alla HTML-dokument måste ha en sådan tagg, den talar om för webbläsaren vad som ska läsas av.
<HEAD>
Här börjar HTML-dokumentets "huvud"
</HEAD>Här slutar dokumentets "huvud"
<BODY>
Här finns HTML-dokumentets "kropp" eller resten. Som du ser kan man lägga till flera attributer i vissa taggar. BGCOLOR="#FFFFFF" bestämmer sidans backgrundsfärg. Du kan också skriva "red" som färg.
<H1>Detta är rubriken.<H1>
<H2>Detta är under rubriken, o.s.v
Ett stycke</P>
Storlekar
Man skriver alltid texten på sidan inom <BODY>
<FONT SIZE="5" FACE="Tahoma">
Denna text är alltså med storleken 5, i teckensnittet "Tahoma". Standardteckensnittet är "Arial". Storleken kan variera från -2 till +4 och 1 till 7.
Länkar
En valig länk ser ut såhär:
Klicka här (sidan.html)
om "sidan.html" ligger i en annan mapp i mappen, så lägger du till Sidor/..såhär:
Klicka här (Sidor/sidan.html) Även länkar ska finnas inom <BODY>
Bilder
För att lägga till en bild på sidan skriver man enkelt:
bilden.jpg
Om du vill att man ska komma till en annan sida när man trycker på bilden, ska du skriva såhär:
<IMG SRC="bilden.jpg> (sidan.html)
Iframe-flytande ram
Även en iframe placeras inom <BODY>
Grundkoden för en iframe är:
<IFRAME SRC="iframe_sidan.html" NAME="iframe" WIDTH="100" HEIGHT="100">
</IFRAME>
Ett exempel kan ses här:
Exempel (http://www.webdesignskolan.com/html/iframe/exempel1.htm)
Nu hoppas jag att du har lärt dig lite mer om hur man gör en hemsida med bara hjälp av text. :D
Om du vill lära dig ännu mer kan du besöka:
CSS
CSS - Cascade Style Sheet
Med CSS kan du ändra hur t.ex. en länk ska se ut.
<STYLE>
A {FONT-COLOR:34567;}
</STYLE>
Den effektivaste metoden är att ange all CSS-kod i en egen CSS-mall och koppla alla HTML-sidor till mallen. Namnet på mall-dokumentet är valfritt men det måste vara en textfil med filtilläget .css som tex "mall.css".
All CSS skriver du inom <STYLE></STYLE>
Såhär kan du skriva:
<HTML>
<HEAD>
<STYLE>
BODY {FONT-FAMILY: Verdana; FONT-SIZE: 11px;}
P {FONT-FAMILY: Verdana; FONT-SIZE: 11px; TEXT-DECORATION: UNDERLINE;}
</STYLE>
<TITLE>
Min hemsida
</TITLE>
</HEAD>
<BODY>
<H1>
Välkommen till min hemsida
</H1>
Detta är en mycket enkel hemsida
</P>
</BODY>
</HTML>
Du har nu stylat all text inom
</P> och <BODY></BODY>
Du kan också använda en mall (som jag skrev i inlägget ovanför):
Den effektivaste metoden är att ange all CSS-kod i en egen CSS-mall och koppla alla HTML-sidor till mallen. Namnet på mall-dokumentet är valfritt men det måste vara en textfil med filtilläget .css som tex "mall.css".
För att göra så lägger du till
<LINK HREF="mall.css" REL="stylesheet" TYPE="text/css">
Inom <HEAD></HEAD>
Du kan ändra bakgrundsfärg med CSS, istället för att med HTML skriva:
<BODY BGCOLOR="#FFFFFF">
Kan du skriva
BODY {COLOR: #003366;}
Textstorlekar kan anges i dessa enheter:
px - pixlar (pixels) - samma enhet som bildskärmars upplösning
pt - Punkter (point) - 1 pt är lika med 1/72 inch
in - tum (inch)
cm - centimeter
mm - millimeter
p - picas - 1 pc är lika med 12 punkter
Nu ska jag lära dig hur man stylar sina HTML taggar med CSS.
CSS - Cascade Style Sheet
Med CSS kan du ändra hur t.ex. en länk ska se ut.
<STYLE>
A {FONT-COLOR:34567;}
</STYLE>
Den effektivaste metoden är att ange all CSS-kod i en egen CSS-mall och koppla alla HTML-sidor till mallen. Namnet på mall-dokumentet är valfritt men det måste vara en textfil med filtilläget .css som tex "mall.css".
I HTML-dokumentet.
Om du vill att den externa CSS-mallen ska styra den grundläggande formateringen på alla sidor men ändå vill avvika från mallen på vissa sidor kan du ange CSS direkt i dokumentet inom <HEAD>.
Exemplet nedan formaterar all text till Verdana 11 pixlars storlek. OBS! Notera att formateringen anges för flera tags för att även texten som finns i tabellceller, stycketext och listor ska formateras:
<style type="text/css">
body {font-family: Verdana; font-size: 11px;}
p {font-family: Verdana; font-size: 11px;}
td {font-family: Verdana; font-size: 11px;}
li {font-family: Verdana; font-size: 11px;}
</style>
I HTML-koden
I vissa fall när du formaterar samma tags på flera olika sätt i samma HTML-dokument kan du ange CSS direkt i HTML-koden och även använda egna class-namn. I exemplet nedan används ett eget class-namn ".teckenformat" som ska användas för formatering av text till Verdana 11 pixlar. OBS! Punkten i classnamnet är viktig och måste finnas med:
<style type="text/css">
.teckenformat {font-family: Verdana; font-size: 11px;}
</style>
Du kan ha flera mallar med olika namn som tex:
"teckensnitt2", "textcolor", "bakgrundsfarg", "kantlinje", "kantlinje2" etc.
Exemplet nedan formaterar all text inom ett stycke
enligt formatering i mallnamnet "teckenformat" ovan.
<p class="teckenformat">texten i ett stycke...</p>
</body>
Bakgrunsbild
Du kan använda CSS som ersättning för <body background="bakgrundsbild.jpg">
body { background-image: url(bakgrundsbild.jpg);}
:)