STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FEEDBACK - FORMULÄR - FRAMES - GRAFIK - GÄSTBOK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - WAP - WEB-DESIGN - XHTML - XML -

ABC - Kom igång!

Första hjälpen
Vad behövs?
Hur börjar jag?
Ett exempel hur du gör.

Första hjälpen
På begäran har jag lagt in några enkla exempel på hur man kan skriva ett enkelt dokument i en texteditor, fixa en mall, skriva in text, lägga in en bild och en enkel tabell och vad man egentligen behöver för program i början. Inget avancerat alls, enbart för den verklige novisen som aldrig prövat på att göra en egen hemsida.

Men bästa sättet att lära sig HTML är fortfarande i mina ögon att öva och pröva. Läs igenom min guide, kolla gärna i andras guider och titta hur andra gör ute på nätet. Alla är vi barn i början. Du ska inte tro att man föds till att göra hemsidor. Ej heller ska du tro att du blivit expert bara för att du lärt dig några taggar utantill. HTML är så mycket mer än bara att knacka ned koder i en editor. Du måste lära dig förstå vad HTML är egentligen. Läs gärna avsnitten Html, Text, Grafik och Tips noga i denna guide så är du på god väg.

Vad behövs?
Som nybörjare är det inte så mycket du behöver förutom dessa tre program nedan.

Både Lview och Ws-Ftp är zippade (komprimerade) vilket innebär att de måste "packas" upp på din hårddisk. Har du inte WinZip kan du ladda ned det här, klicka på exe-filen så installeras det, följ bara instruktionerna. Kort information hur du använder Ws_Ftp finns under avsnittet Tips.

Hur börjar jag?
Först av allt ska du göra en mall, som du sedan kan ha till dina resterande dokument. Öppna NotePad/Anteckningar eller liknande texteditor och skriv av eller kopiera nedanstående rader och klistra in. Har du låg upplösning kan det bli oavsiktliga radbrytningar i exempelkoden nedan, korrigera detta. Spara sedan filen som mall.htm eller mall.html beroende av vilket operativsystem du har.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> </title>
</head>
<body>

</body>
</html>

Ett exempel hur du gör.
Har du sparat ned din mall nu? Bra! Då kan du öppna den nu i din texteditor. Börja alltid med att spara ned dokumentent under nytt namn, så att du inte oavsiktligt skriver över din mall.html. Döp dokumentet till index.html då det är det filnamnet startsidan bör ha. Du ska nu namnge ditt dokument, dvs ge det en titel. Du skriver in valfri titel mellan title-taggarna. Se mitt exempel nedan.
<title>Mina fritidsintressen</title>

Sedan är det dags att börja fila på själva sidan. Den kommer jag att skriva in mellan taggarna <body> </body>
Överst ska vi skriva en rubrik. Då använder vi taggen <h1>skriver vår rubrik</h1> Observera att title och h1 inte är samma sak. Rubriken <h1> syns på din sida eftersom den är skriven inom body-taggarna.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Mina fritidsintressen </title>
</head>
<body>
<h1>Mina fritidsintressen</h1>
</BODY>
</HTML>

Vill du se resultatet så här långt? Kolla här!

Inte mycket att hurra för än. En enkel rubrik högst upp på sidan. Såg du att texten på browserns namnlist motsvarade <title>? Nu ska du skriva in lite text. Du börjar ett nytt stycke <p> under rubriken. Mer information om hur du skriver in text på olika sätt hittar du under avsnittet Text. Sedan efter det stycket ska du lägga in en bild, som sker via taggen img. Bilden har jag tagit upp i Lview så jag vet måtten både på höjd och bredd. Du kan läsa mer om detta under avsnittet Grafik.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Mina fritidsintressen </title>
</head>
<body>
<h1>Mina fritidsintressen</h1>
<p>Mina fritidsintressen är många. Men det jag tycker allra mest om är mina hundar. Jag har två stycken New Foundlandshundar, Nalle och Smulan. Vill du se en bild av Nalle? Jag har lagt in den här under.
<p><img src="nalle.gif" alt="nalle" height=235 width=369>
</body>
</html>

Vill du se resultatet så här långt? Kolla här!

Nu börjar det likna något, eller hur? Jag vill ha några länkar längst ned på sidan, mer information om hur länkar fungerar finns under avsnittet Text. För att få in dem snyggt vill jag ha dem i en liten två-rads tabell med fyra celler, table står för tabellen, tr för rad och td för cell. Tabellen ska ha snygga 3D-kanter runt om, attributet border=10 fixar det. Mer information om hur du gör tabeller hittar du under avnsittet Tabeller.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>mina fritidsintressen </title>
</head>
<body>
<h1>Mina fritidsintressen</h1>
<p>Mina fritidsintressen är många. Men det jag tycker allra mest om är mina hundar. Jag har två stycken New Foundlandshundar, Nalle och Smulan. Vill du se en bild av Nalle? Jag har lagt in den här under.
<p><img src="nalle.gif" alt="nalle" height=235 width=369>
<div align=center>
<table border=10>
<tr>
<td><a href="http://hem.passagen.se/atiger/">Annicas hemsida</a></td>
<td><a href="http://www.tele2.se">Tele 2</a></td>
</tr>
<tr>
<td><a href="http://www.passagen.se">Passagen</a></td>
<td><a href="http://home.swipnet.se/akvariumet/">Tigers hemsida</a></td>
</tr>
</table>
</div>
</body>
</html>

Vill du se resultatet så här långt? Kolla här!

Då var vi nästan klara med denna första hemsida. Lite smådetaljer bara att putsa på. Jag vill ha en ljuslila bakgrundsfärg (bgcolor="#ded3dd") och lila text (text="#a55879"), det måste anges i body-taggen, läs mer om detta under Html samt Grafik, Bakgrunder.

Sedan vill jag lägga till ett stycke till under första stycket men högerjusterat, plus att jag vill centrera tabellen. Mer information om hur du justerar text/bilder hittar du bl.a i avsnitten Text och Grafik.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title>Mina fritidsintressen </title>
</head>
<body text="#a55879" bgcolor="#ded3dd">
<h1>Mina fritidsintressen</h1>
<p>Mina fritidsintressen är många. Men det jag tycker allra mest om är mina hundar. Jag har två stycken New Foundlandshundar, Nalle och Smulan. Vill du se en bild av Nalle? Jag har lagt in den här under.
<p align=right>Visst är han fin? Det är min favorithund.
<p><img src="nalle.gif" alt="nalle" height=235 width=369>
<div align=center>
<table border=10>
<tr>
<td><a href="http://hem.passagen.se/atiger/">Annicas hemsida</a></td>
<td><a href="http://www.tele2.se">Tele 2</a></td>
</tr>
<tr>
<td><a href="http://www.passagen.se">Passagen</a></td>
<td><a href="http://home.swipnet.se/akvariumet/">Tigers hemsida</a></td>
</tr>
</table>
</div>
</body>
</html>

Vill du se resultatet nu? Kolla här!

Tycker du att det verkar vara bökigt? Jag tror inte att det blir så svårt om du läser igenom guiden ett par gånger. Det enda som gäller är öva och pröva.

Lycka till

© Annica Tiger a_t@tele2.se

Besök gärna min blog

Mina andra sidor ser ni nedan.

www.tiger.se, www.atiger.se, www.tiger.pp.se, www.atiger.pp.se, www.atiger.nu och www.nodaddy.se.


STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FEEDBACK - FORMULÄR - FRAMES - GRAFIK - GÄSTBOK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - WAP - WEB-DESIGN - XHTML - XML -