Grundkunskaper i HTML
För att göra en hemsida behöver du inget Webbprogram utan du behöver endast Notepad eller Word.
För att skriva i Notepad så välj Start--> Kör--> Notepad så kommer en ruta att vissas och sedan är det bara att börja skriva. Eller så finns Notepad men i Start--> Program --> Tillbehör och välj sedan Anteckningar.
Jag rekommenderar personligen Notepad ifall du ska följa guiden.
Vi börjar med hur grundkoden för en HTML ser ut:
<html>
<head>
</head>
<body>
</body>
</html>
De olika klammarna är kallade taggar eller även tags. Dessa är de olika kommandona eller instruktionerna som en webbläsare använder för att tolka olika koder. I HTML så finns det runt 90-100 olika tags.
Taggen <html> beskriver vilken sorts kod det är uppbyggt på och för att avsluta koden så skriver man </html> och det kommer alltid sist i en HTML-kod.
Mellan taggen <head> och </head> så skriver man information om hemsidan. Ex. vem som har gjort sidan, vilka sökord som sökmotorn ska leta efter, vilket program som har använts och allt som har med hemsidan att göra men information som inte syns.
Nästa tagg är <body> och </body> mellan dessa två skrivs allt som ska synas på hemsidan du skriver.
För att nu utveckla sidan så skriver vi till <title> och </title> och mellan dem skriver vi vad sidan ska heta. Och i body skriver vad som ska stå på sidan.
<html>
<head>
<title> Min första hemsida </title>
</head>
<body>
Tjena Web Designer!
</body>
</html>
Om du nu vill se ifall din kod fungerar så välj Arkiv och sedan Spara som eller tryck Ctrl + s. Ifall du använder Notepad så under Filnamn så finns det Filformat där väljer du alla Alla filer och sedan döper du ditt dokument med ett namn och sedan .html exempelviss WebDesigner.html
Ifall du använder Word så väljer du Arkiv och Spara som eller trycker Ctrl + s och döper ditt dokument och under det så finns det ett fält som heter Filformat där väljer du Webbsida (*.htm; *.html) och tryck sedan Spara.
Gå till mappen där du spara filen och dubbel-klicka på den så kommer en hemsidan att startas och du ser ditt mästerverk.
Nu är sidan lite tråkig men vi ska fortsätta att utveckla våra kunskaper. Vi börjar med att göra texten Tjena Web Designer! till en rubrik genom att använda taggar som automatiskt gör texten till en rubrik. Men det finns 6 st olika sorters rubriker, det bästa sättet att välja vilken du vill ha är genom att pröva dig fram. Vi skriver in alla i koden så får du se hur det ser ut.
För att nu utveckla sidan så skriver vi till <title> och </title> och mellan dem skriver vi vad sidan ska heta. Och i body skriver vad som ska stå på sidan.
<html>
<head>
<title> Min första hemsida </title>
</head>
<body>
<h1> Tjena Web Designer! </h1>
<h2> Tjena Web Designer! </h2>
<h3> Tjena Web Designer! </h3>
<h4> Tjena Web Designer! </h4>
<h5> Tjena Web Designer! </h4>
<h6> Tjena Web Designer! </h6>
</body>
</html>
Nu för att ändra en vanlig text eller rubrik så använder vi ett kommando som kallas <font> och </font> men detta kommando för sig själv fungerar inte utan det behöver något mer som size eller face.
Av dessa två börjar vi med size som man använder tillsammans med font som blir så här <font size="x"> x:et ska ersättas med ett nummer mellan 1 och 7.
Font hör man på namnet vad det är, nämligen typsnitt. Jag rekommenderar att du använder ett vanligt typsnitt ifall du skriver en hemsida eftersom du vill nå ut till så många som möjligt och ifall du använder ett typsnitt som inte den mottagande datorn har så kommer det ställas till standard och det kommer inte att se ut som du hade planerat det. Dock så har vi ett problem när det kommer till skillnaden mellan MacOS och Windows. Jag vet inte om det är ändrat men innan så var det så att Times New Roman på Windows endast heter Times på Mac. Och när det kommer till Arial på Windows är Helvetica på Mac. Detta löser vi genom att lägga in båda i samma tagg. Vi använder exemplet på Times.
<font face"times new roman, times, serif"> Tjena Web Designer! </font>
Nu ska det bli lite färg på texten och det är inte svårare än att skriva color och sedan vilken färg, men man måste kunna koden för färgerna. Men så här ser koden ut för att använda blå färg.
<font color="#00FF00"> Tjena Web Designer! </font>
För att ta reda på en färg som du tycker om så öppnar du antingen PhotoShop eller Paint gåt in i färgväljaren och väljer en färg och kollar sedan vilken kod färgen har.
Här är några vanliga färger:
#FF0000 = röd
#00FF00 = blå
#0000FF = grön
#000000 = svart
#FFFFFF = vit
För att använda alla olika utseende koderna för samma text använder så sätter du ihop det så här:
<font size="5" face= arial color="#AAFFAA> Tjena Web Designer" </font>
Du får själv lista ut hur det kommer att se ut!
Här är några koder som du sätter innan den text som du vill ändra:
<b>...</b> = Fetstil
<i>...</i> = Kursiv
<u>...</u> = Understrucket
<br> = Radbytning
Bakgrundsfärgen är fortfarande vit så nu ska vi ändra på detta. Precis som med text färg måste vi veta färgernas kod och vi måste veta funktionens namn. Namnet är bgcolor. Så här ser det ut inskrivet i koden.
<html>
<head>
<title> Min första hemsida </title>
</head>
<body bgcolor="#00000">
Tjena Web Designer!
</body>
</html>
Ok, nu har du prövat att göra en egenhemsida med hjälp av detta så märker du säker att texten är vänsterställ och man brukar vilja ha det centreat på en hemsida. Och det är inte svårare än att man skriver <center>...</center>. Så här kan det se ut.
<html>
<head>
<title> Min första hemsida </title>
</head>
<body>
<center>
Tjena Web Designer!
</center>
</body>
</html>
Jag har använt mig av indrag bara för att det gör det enklare att se vad man har skrivit och gör det där med enklare att felsöka.
<HTML>
<HEAD>
<TITLE>Min första webbsida</TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
<CENTER>
<FONT FACE="Impact" COLOR ="#ff0000">
<H1> Tjena Webbdesigner! </H1>
</FONT>
</CENTER>
<CENTER>
<FONT COLOR = "#ffffff">
Web Designers är en grupp som tar upp allt som har med webbdesign att göra.<br> Allt från grafiskdesign, användarvänlighet, upplägg och koder.
<br>Välkommen in i gänget WD.
</FONT>
</CENETR>
</BODY>
</HTML>
Koden ovan är en mycket enkel hemsida som ni kan pröva.
Tack för att ni har tagit er tid att läsa denna guide
Detta är bara en del av det som finns att använda i HTML. Ska lägga till fler saker så fort jag har tid men kom gärna med kommentarer av vad som kan förbättras eller ifall det är något som ni inte förstår.
© Copyright får ej kopieras utan tillstånd från
Thomas Cairns
SilverKnight
