|
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. 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?  |
|
|
STORA eller små bokstäver? Än så länge spelar det ingen roll, men den nyare version av HTML (XHTML) kräver små bokstäver, så använd hellre det, t ex <html> i stället för <HTML>. 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!OBS! 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="red "> Alla vanliga engelska färgord går att använda ( white yellow red green blue etc). I nyare webbläsare kan man placera allt som har med en hemsidas utseende att göra i en separat stilmall eller efter style. Sidans bakgrundsfärg kan man alltså bestämma så här: <BODY BGCOLOR="red" style="background-color:red">
Spara filen som test1.html. Om man använder Anteckningar ersätter man alltså dialogrutans "Namnlös" med hela filnamnet inkl .html. iNOM PARENTES Den sida man sedan vill ha som förstasida kallar man normalt index.html. Om någon försöker öppna t ex addressen http://www.algonet.se/~anvaendarnamn/ så öppnas normalt den fil som heter index.html. Om det inte finns någon index.html i din katalog listas alla filer du har i katalogen (om servern är konfigurerad att göra det). Om man har en förstasida som heter sidaett.html måste besökaren skriva in http://www.algonet.se/~anvaendarnamn/sidaett.html |
|
Öppna filen i en webbläsare.
Välj Arkiv/ öppna fil/ Välj fil...)
Om du ser något annat än en röd 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=" red "> 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 i 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> ----------------------------------------------
Den tagg som markerar att en huvudrubrik börjar ser ut så här: <H1> Hur ser den tagg som markerar att rubriken är slut ut? Den tagg som markerar att ett nytt stycke text börjar ser ut så här: <P> Hur ser den tagg som markerar att stycket är slut ut? Skriv in lite text på sidan, ordna den i stycken och placera en rubrik högst upp. Lägg till en länk till någon annans hemsida. ---------------------------------------------- <HTML> <HEAD> <TITLE> din_sidas_titel </TITLE> </HEAD> <BODY BGCOLOR=" red "> <H1>rubrik</H1> <P> text text text text text text text text text text text </P> <P> text text text text text text text text text text text </P> <P> <A HREF=" test1.html "> länk till första sidan </A> <A HREF=" http://www.flowsim.se "> flowsim </A> </P> </BODY> </HTML> ---------------------------------------------- Titta på sidan i webbläsaren. Du måste ladda om sidan (använd Ladda om, Reload, Uppdatera). Högst upp i fönstret ska titeln synas och resten ska se ut ungefär så här: |
|
rubriktext text text text text text text text text text text text text text text text text text text text text text länk till första sidan flowsim |
|
|
Ordna länkarna i en lista. En lista kan man skapa med hjälp av t ex UL-taggen (Unordered List). Taggen som talar om att en lista börjar ser alltså ut så här: <UL>. Taggen som talar om att en lista slutar ser ut... Varje punkt i listan måste förstås också markeras och för att göra det använder man LI-taggar (List Item). Taggen som talar om att en "listpunkt" börjar ser alltså ut så här: <LI>. |
|
|
HTML-koden: <UL> <LI>.</LI> <LI>..</LI> <LI>...</LI> </UL> |
LiSTAN:
|
|
Placera länkarna på din testsida i en lista i stället för i ett textstycke. ---------------------------------------------- <HTML> <HEAD> <TITLE>din_sidas_titel </TITLE> </HEAD> <BODY BGCOLOR=" red "> <H1>rubrik</H1> <P>text text text text text text text text text text text </P> <P>text text text text text text text text text text text </P> <UL> <LI><A HREF=" test1.html "> länk till första sidan </A></LI> <LI><A HREF=" http://www.flowsim.se "> flowsim </A></LI> </UL> </BODY> </HTML> ---------------------------------------------- |
|
rubriktext text text text text text text text text t ext text text text text text text text text text text t ext text |
|
En "oordnad lista" UL blir en "ordnad lista" om du byter U(nordered) mot O(rdered). Testa! Använder du <OL> och </OL> numreras länkarna. Klickbar e-postadress Så här ser HTML-koden för en klickbar e-postadress ut: <A HREF="mailto: ">synlig text </A>(Innan man lägger ut sin mejladress på det här sättet bör man ta sig en funderare; diverse robotar som söker igenom internet ser omedelbart att detta är en meljadress och resultatet kan bli att man får sanslösa mängder skräpmejl.) I stället för den svarta rektangeln skriver du in din e-postadress, t ex: <A HREF="mailto:namn@annatnamn.se">synlig text </A> Lägg till en linje med hjälp av taggen <HR NOSHADE> längst ner på din sida och placera din klickbara e-postadress under den linjen så att koden nu ser ut ungefär så här: ---------------------------------------------- <HTML> <HEAD> <TITLE>din_sidas_titel </TITLE> </HEAD> <BODY BGCOLOR=" red "> <H1>rubrik</H1> <P>text text text text text text text text text text text </P> <P>text text text text text text text text text text text </P> <UL> <LI><A HREF=" test1.html "> länk till första sidan </A></LI> <LI><A HREF=" http://www.flowsim.se "> flowsim </A></LI> </UL> <HR NOSHADE> <A HREF="mailto:ilj@flowsim.se">synlig text </A> </BODY> </HTML> ---------------------------------------------- |
|
rubriktext text text text text text text text text t ext text text text text text text text text text text t ext text synlig text | |
|
Hur man bestämmer hur hemsidan i exemplet ska se ut (textfärg, stil på listan, marginalbredd och annat) finns
beskrivet i del 2 LIST-taggar, TABELL-taggar, länktaggar, formulärtaggar och alla andra taggar som finns hittar du i menyn till vänster. De fungerar på samma sätt som exemplen på den här sidan. del 2 - fixa till text, färg, marginaler mmFrågor besvaras i mån av tid (ange ämne på ämnesraden): ilj@flowsim.se Hur man använder tabeller, bilder. listor, ramar mm? Leta bland länkarna i menyn till vänster! 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="red "> 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:flowsim.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 Det är iNTE nödvändigt att använda STORA BOKSTÄVER i HTML-taggarna. <html>, <head> etc fungerar lika bra som <HTML> och <HEAD>.
 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 |
|