Grundkunskaper I Html

TecWizard · 29 Februari 2008

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  och  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  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:

... = Fetstil

... = Kursiv

... = Understrucket

  = 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

Redigerat 4 Mars 2008 av SilverKnight

1 Mars 2008

Ett bättre sätt att testa HTML-dokument:

1. Öppna en mapp.

2. I menyn högst upp letar du efter något i stil med 'Mappalternativ' (lite olika i XP och Vista)

3. Fliken visning

4. Kryssa bort 'Dölj filnamnstillägg för kända filtyper'.

Sedan kan du gå till en valfri mapp, högerklicka -> Ny(tt) -> Textdokument och ändra filnamnstillägget till html. Du öppnar fillen genom att högerklicka -> öppna med -> Anteckingar. Sen skriver du, sparar och klickar vanligt på filen så visas den i standardwebbläsaren.

Nerd · 1 Mars 2008

För oss som är lata så borde du visa hur det kommer se ut efter man har lagt in det.

3 Mars 2008

Fattar inte varför du tar dig tid att skriva detta?

Alla kollar ju på Javascript.nu eller Webdesignskolan?

ELF · 3 Mars 2008

Ja, tracka honom för att han har gjort en rätt så bra guid för nybörjare...

7 Mars 2008

Notera att den här guiden är mycket simplare än dom på Webdesignskolan, För där står det jätte mycket text innan dom visar lite hur man gör.

Jag kommer lägga upp en CSS guide sen.

Ceto · 22 Mars 2008

1.hur ska man göra för att köra sidan

2.Måste man spara som nåt?

EDIT:oops läste ej ordentligt sorry :D MEN det funka bra guide!!! kan du visa hur man gör mer advancerat tack.Ifall du kan

Redigerat 22 Mars 2008 av Ceto

Mosa1nagant · 5 April 2008

Har du skrivit detta till dom som copyrigtar saker? Om inte så får man kopiera din text. -.-

Mezox · 5 April 2008

1.hur ska man göra för att köra sidan

2.Måste man spara som nåt?

EDIT:oops läste ej ordentligt sorry :D MEN det funka bra guide!!! kan du visa hur man gör mer advancerat tack.Ifall du kan

Guiden lär dig grunderna.

Du kan gå in här:

http://monkeytoys.com/htmlkurs/

om du vill lära dig lite mer.

Logga in

Grundkunskaper I Html

Rekommendera inlägg

TecWizard

Länk till kommentar

Dela på andra sajter

Gäst 48893

Länk till kommentar

Dela på andra sajter

Nerd

Länk till kommentar

Dela på andra sajter

Gäst lordifan

Länk till kommentar

Dela på andra sajter

ELF

Länk till kommentar

Dela på andra sajter

Gäst DamelQ

Länk till kommentar

Dela på andra sajter

Ceto

Länk till kommentar

Dela på andra sajter

Mosa1nagant

Länk till kommentar

Dela på andra sajter

Mezox

Länk till kommentar

Dela på andra sajter

Gå med i konversationen

Bläddra

Aktivitet