|
1
Öppna en ny fil i en vanlig enkel texteditor, till exempel Notepad (Anteckningar) eller Wordpad i Windows. i Windows 95 hittar man Anteckningar genom att välja Start/ Program/ Tillbehör och klicka på Anteckningar. Här nedanför finns en bild på texteditorn Anteckningar och webbläsaren Netscape (det ser ungefär likadant ut i Microsofts Internet Explorer. Till vänster syns koden som skrivits i Anteckningar och till höger ses den hemsida som blir resultatet när samma fil öppnas i webbläsaren. Texten Min sida om... finns på två ställen på bilden. Var?  |
|
Skriv in följande (allt mellan de streckade röda linjerna, inte de röda linjerna): ---------------------------------------------- <HTML> <HEAD> </HEAD> <BODY> text och bilder </BODY> </HTML> ---------------------------------------------- Detta är stommen. Koden börjar alltså med <HTML> och slutar med </HTML> Däremellan finns det två avdelningar: en HEAD-del och en BODY-del.  HEAD-delen börjar med <HEAD> och slutar med </HEAD> BODY-delen börjar med <BODY> och slutar med </BODY> 
Mer om de olika delarnas funktion längre ned!Så här ser de flesta taggarna eller märkorden i HTML ut: <NÅGOT_BÖRJAR> något </NÅGOT_SLUTAR>. Det som skiljer en slut-tagg från en start-tagg är snedstrecket. EN FRÅGA SOM MAN KAN HOPPA ÖVER Det finns en tagg som ser ut så här: <B> och som gör att den efterföljande texten skrivs i fetstil. Om man till exempel vill att textraden det går inte att... ska skrivas med ordet "inte" i fetstil hur gör man då? svaret finns längre ner på den här sidan
HEAD-delen och SIDANS TITEL En sak som ska placeras i HEAD-delen är sidans titel. Taggen som talar om att en titel börjar ser ut så här: <TITLE> och den som talar om att titeln slutar ser ut ... Skriv in din sidas titel i koden så att det hela ser ut så här: ---------------------------------------------- <HTML> <HEAD> <TITLE>din_sidas_titel</TITLE> </HEAD> <BODY> text och bilder </BODY> </HTML> ---------------------------------------------- Titeln kommer att hamna i listen högst upp i fönstret och som rubrik i resultatlistorna i de olika sökmaskinerna; det är alltså bra om den säger något väsentligt om din hemsida. BODY-delen och SIDANS BAKGRUNDSFÄRG I BODY-delen placerar man allt som syns på sidan när man tittar på den i en webbläsare. Text och bilder placeras i BODY-delen och om man vill bestämma vilken bakgrundsfärg hemsidan ska ha så är det just BODY:n som ska förses med en bakgrundsfärg. Det kan man göra till exempel genom att ändra BODY-taggen så att den ser ut så här: <BODY BGCOLOR="orange"> Alla vanliga engelska färgord går att använda (white yellow red green blue etc).
Spara filen som test1.html. Om man använder Anteckningar ersätter man alltså dialogrutans "Namnlös" med hela filnamnet inkl .html. |
|
Öppna filen i en webbläsare.
Välj Arkiv/ öppna fil/ Välj fil...)
Om du ser något annat än en orange sida med texten placerad så här: |
|
text och bilder
|
|
se Om det inte fungerar
längre ned.
|
|
Ta fram Anteckningar/ Notepad igen (man kan växla mellan olika fönster genom att hålla ner
Alt-knappen och trycka på TAB). Spara filen
som
test2.html
i samma katalog som
test1.html.
Fortsätt med filen test2.html. Skapa en länk till första sidan (test1.html) genom att placera en länk-tagg i BODY-delen: ---------------------------------------------- <A HREF = "test1.html ">länk till första sidan</A> ---------------------------------------------- Så här ska koden i filen test2.html se ut nu: ---------------------------------------------- <HTML> <HEAD> <TITLE>din_sidas_titel</TITLE> </HEAD> <BODY BGCOLOR="orange"> text och bilder <A HREF="test1.html">länk till första sidan</A> </BODY> </HTML> ---------------------------------------------- Spara filen. |
| Ta fram webbläsaren igen(Alt + tab). Öppna test2.html som nu ska se ut så här: |
|
text och bilder länk till första sidan
|
|
Om du vill att länken ska hamna på ny rad skriver du in radbrytningstaggen som ser ut så här: <BR> Klicka på länken "länk till första sidan". Om allt fungerar visas test1.html. Så länge filerna ligger i samma katalog/ mapp räcker det alltså med att ange filens namn länktaggen. Tänker du länka till någon annans hemsida måste du ange hela adressen. En länk till flowsims sida skulle kunna se ut så här: ---------------------------------------------- <A HREF = "http://www.flowsim.se">flowsim</A> ----------------------------------------------
|
|
Man kan bestämma vilken färg länkarna ska ha. Så här kan det se ut: ---------------------------------------------- <HTML> <HEAD> <TITLE>din_sidas_titel</TITLE> </HEAD> <BODY BGCOLOR = "orange" LINK="red" ALINK="blue" VLINK="green" > text och bilder<BR> <A HREF="test1.html">länk till första sidan</A> </BODY> </HTML> ---------------------------------------------- Använd Visa/ Ladda om (View/ Reload på engelska; Refresh i Microsofts Explorer) för att ladda om sidan när du gjort ändringar i koden.
|
|
LITE AV VARJE Kommentarer, som alltså syns bara i koden, inte på hemsidan, skriver man så här <!-- KOMMENTAR --> Alla som tittar på en hemsida kan läsa all kod inklusive det som placerats mellan kommentartecken genom att välja Visa/ Sidkod eller Visa/ Källa på menyraden (engelska View source). Radbrytningstaggen ser ut så här: <BR> Nytt stycket blir det om du använder P-taggen <P> Taggen som talar om att ett stycke tar slut ser förstås ut så här: </P>
Om man vill göra sin e-postadress klickbar kan man skriva så här: -------------------------- <A HREF ="mailto:namn@adress.se"> E-post till namn@adress.se</A> -------------------------- Resultatet på sidan blir
I stället för att ange en bakgrundsfärg kan man använda en bild (t ex en gif- eller jpg-bild) som bakgrund. Då kan man byta ut <BODY BGCOLOR = "orange"> mot <BODY BACKGROUND = "bildfilens namn"> Så här kan man också skriva: <BODY BGCOLOR = "orange" BACKGROUND = "bildfilens namn"> Om bakgrundsbilden har några genomskinliga partier kommer den orange bakgrunden att synas igenom. Hur man gör genomskinliga bilder finns beskrivet under BILD & FÄRG/hur man gör gif-bilder med transparent bakgrund. |
|
... OCH LITE TILL Allt om hur man kan använda stilmallar för att bestämma bakgrundsfärg mm finns under rubriken STYLESHEETS/ färg o bakgrunder Under rubriken BILD & FÄRG finns det flera avsnitt om hur man placerar bilder, vilka färger som fungerar bra och hur man gör olika sorters bilder (t ex knappar, genomskinliga giffar, animationer) mm. Om hur man väljer typsnitt, ändrar färg och storlek på texten, gör den kursiv mm handlar avsnitten: HTML/ text Hur man gör samma sak men med hjälp av stilmallar finns beskrivet under STYLESHEETS/ färg o bakgrund STYLESHEETS/ typsnitt STYLESHEETS/ text
Hur man kan använda tabeller för att placera text och bilder där man vill ha dem och samtidigt se till att raderna aldrig blir oläsligt långa finns beskrivet under avsnitten: HTML/ tabeller HTML/ blandade taggar 3 I nyare webbläsare kan man göra samma sak med hjälp av stylesheet; allt om det under rubriken STYLESHEETS.
Hur man gör bilder (hela eller delar av) klickbara? Se avsnitten HTML/ klickbara bilder eller BILD & FÄRG/ klickbara bilder
Allt om hur man gör egna e-postformulär finns under rubriken: HTML/ forms/e-postformulär.
|
|
FOTNOTERNA de olika delarna I HEAD-delen placeras:
För att få webbläsaren att visa en rad som ser ut så här (med ordet inte i fetstil): det går inte att ... behöver du HTML-kod som ser ut så här: det går <B>inte</B> att ... upp igen!
|
|
Om det inte fungerar TAGGARNA - <...> och </...> Kontrollera att tecknen i taggarna är riktade åt rätt håll och att de inte råkat dubbleras eller tappas bort. Så här skall det se ut: <HTML> </HTML> CITATIONSTECKEN - "..." eller '...' Kontrollera att du har (ett!) citationstecken på båda sidor om färgord och filnamn (eller också inga alls - vilket fungerar så länge man inte använder andra tecken än bokstäverna a-z, siffrorna 0-9 samt bindestreck och punkt). <BODY BGCOLOR="orange"> STAVNING Kontrollera att stavningen är rätt. Ska det alltid finnas både start-tagg och slut-tagg? Nej. Principen är att slut-tagg behövs bara om det finns anledning att markera att något tar slut. En klickbar länk måste till exempel ta slut någonstans - om man inte vill att hela resten av sidan ska vara klickbar. Alltså: <A HREF="mailto:namn@adress.se">mail to flowsim</A> Däremot finns det ingen anledning att använda någon slut-tagg när det gäller t ex radbrytningstaggen <BR>. |
|
|
|
Kommentar Koden kan skrivas på många sätt; man kan använda ny rad och indragningar om man tycker koden blir tydligare och lättare att läsa, men det är inte alls nödvändigt. Följande avsnitt <BODY BGCOLOR = "yellow" LINK="red" ALINK="red" VLINK="red"> kan t ex lika gärna skrivas på en rad och med bara små bokstäver: <body bgcolor="yellow" link="red"alink="red">
 Sidan gjordes av  ilj@flowsim.se  Senast ändrad 4 augusti 1998. Den här sidan hör hemma i ett ramsystem hos www.flowsim.se HTML på svenska |