Min feta websida!
Hej, och välkommen till min plats på nätet. Ni kan nå mig på olof@punkmail.com. Kolla in den här sidan: www.geocities.com/dana5ht/index.htmlDet var väl inte så svårt? Nu skall vi gå igenom lite vanliga taggar för att markera texten på lite olika sätt Vi börjar med radbyte:<BR> som står för Break. Det är som att trycka på Enter. Men om du vill göra ett helt nytt stycke så rekomderar jag <P>. Den står för "Paragraph" och används för att göra nytt stycke. Dessa båda behöver inte en stopp. Om du vill dela upp texten med linjer som skiljer så gör du det med <HR>. Om du tycker strecket har fel färg, tjocklek eller bredd så kan du ändra det genom att göra så här:
<HR COLOR = "färg" WIDTH = "bredd" SIZE = "tjocklek">. Den behöver inte heller stopp, utan placeras bara in i koden där du vill ha strecket.
Exempel:
<HR COLOR = #FF0000> ser ut såhär:
<HR SIZE = "4"> ser ut såhär:
<HR WIDTH = "10%"> ser ut såhär:
<HR WIDTH = "50%"> ser ut såhär:
Nu vet du lite om linjer, radbyte och så. Då går vi vidare med lite andra taggar som är nyttiga.
| Olika taggar | Så här ser det ut: | <EM> Text </EM> | Text |
|---|---|
| <STRIKE> Text </STRIKE> | <CODE> Text </CODE> |
Text |
| <U> Text </U> | Text |
| <I> Text </I> | Text |
| <SUB> Text </SUB> | Här är lite Text |
| <SUP> Text </SUP> | Här är lite Text |
| <B> Text </B> | Text |
Nu har du fått lite taggar att testa med, så sätt igång att testa, så lär du dig fortare, plus att det blir roligare. Mer kommer allt efter att vi avancerar. Tabellen ovan är en så kallad <TABLE> som vi kommer till lite senare. Tables kan användas till fler saker än att visa data på ett rent och fint sätt. Du kan få texten att sitta där du vill ha den, utan att browwsern placerar texten där den behagar. Text som ser bra ut i en browser kan se annorlunda ut i en annan, så det gäller att testa sin kod i flera browsers för att få en proffesionell look. Kolla gärna koden till denna sida, så ser du hur jag kodat. Om du vill ha koden att läsa så kan du ladda hem den här. Att läsa kod kan vara trevligt om man är en kod-hacker, men annars är den ytterst lärorik för den som inte gillar sånt, men vill kunna. En sak som är sann är att du lär dig aldrig koda utan att koda själv. Att läsa böcker gör dig inte till en programmerare, utan det är flit och kodande som gör dig till en. Nu får du koda en sida med dom saker vi tagit upp, så lär du dig. Om du kör fast så är det bara att läsa om och göra som det står. Testa lite olika saker, exprimentera så skall du se att du kan skriva en sida på nolltid. Innan du börjar koda så kan vi ta upp färger lite snabbt så att du kan få till som färger du vill ha, det gör det hela roligare.
Färger
Färger definieras genom hexadecimaler. Hexadecimalt räknar man såhär:1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, och F. Det är alltså upp tilll 16. En färgkod för röd ser ut såhär: #FF0000. Färgerna går i ordningen Röd, Grön och Blå. Om du vill ha klar röd så skriver du alltså: FF0000. Fundera på den en stund, så skall du se att du fattar. Vill du ha grön så skriver du:00FF00. Och blå:0000FF. det var väl inte så svårt. Testa lite olika siffer coh bokstavs (A, B, C, D, E, och F) kombinationer så skall du se att du hittar en färg som passar. Det finns massor med "color pickers" att tanka hem från nätet där du väljer färg efter kartor eller genom att hålla musen över en färg. Koden syns då och det är bara att skriva in. Men vill du vara "äkta" så skriver du färgkod för hand, utan program. Ett litet program som är bra kan laddas hem här.
Nu är det dags för dig att testa själv. Du kan kolla igenom detta en gång till och sen börja, eller skriva ut det och ha bredvid. Så öppna text editorn och börja!
Bilder
Nu vill du säkert ha med en bild på dig själv också, så det skall vi gå igenom nu. Bilderna som du skall ha måste antingen finnas på nätet eller på den server där du har lagt din sida. Du laddar upp bilder på olika sätt på olika servrar. Ett sätt är att ladda upp den via HTTP. Det gör du i ett användagränssnitt på servern där du har sidan. Om det är en sida där du måste använda FTP (File Transfer Protocol) så får du läsa manualen, då det varierar från olika program. Men vanligast är att du får logga in till ditt konto på servern och sen har du två förnster. Den ena är din dator och den andra ditt konto på servern. Sen kan du i vissa program bara dra en fil till den andra datorn så skickas den dit. Som sagt, hör av dig till mig eller läs manualen. Läs manualen först. Låt oss återgå till koden för bilder, då det är det som denna handledning är till för. En vanlig bild läggs in så här:<IMG SRC = "adress till bilden">
Adressen kan se ut såhär: http://sleipners.homepage.com/yomannen.jpg. Eller bara bildensnamn.jpg eller gif, om den ligger på servern alltså.
Sen kan du ändra bildens höjd och bredd, genom att lägga till ett attribut till IMG SRC = bilden.jpg. Det gör du såhär. Om du vill ha en bild med höjden 120 och 145 bred så skriver du såhär:
<IMG SRC = "bilden.format WIDTH = 145 HEIGHT = 120>
Om du vill ha en kommentar till bilden när man för musen över den så lägger du bara till ALT = " Här är texten. Den måste vara inom " " ".
En komplett tagg för bilden ser ut såhär:
<IMG SRC = "adress och format" WIDTH = 145 HEIGHT = 120 ALT = "Kommentar">
Nu kan du lägga in bilder också, kul va? Det livar upp sidan, men höjer nedladdningstiden. Det är alltså bättre om bilden ligger på samma server, av två anledningar:1. Det går fortare! 2. Om källan på internet går ner så finns ingen bild. Och om det är på en stor site så kan det vara kö.
Nu vill du kanske ha en bild som bakgrund, så det skall vi lägga till nu.
Bakgrundbilder bör vara små gif eller jpg bilder och int stora fotografier, då ett fotografi kan "ruta" upp sig och förlora sin mening.
Alla har inte samma upplösning, så om bilden ser bra ut för dig så kan den se förjävlig ut hos någon annan. Men det är upp till dig. Det funkar, men tänk på att det ser olika ut. Ett sätt är att tala om på framsidan vilken upplösning sidan är gjord för, men som sagt, det är upp till dig.
Bakgrundsbilder läggs in såhär:
<BODY BACKGROUND = "adress">
Du kan också ha en bild som länk. Det gör du såhär:
<A HREF = "protokoll" = "adress"> <IMG SRC = "adress"> </A>
Du byter alltså bara ut texten som annars skulle vara länk till en bild. Detta är användbart om du skall ha banners på sidan, eller om du bara vill
ha en bild som man kan klicka på. Så kan du göra om du har mycket bilder och vill att man skall kunna klicka på dom så kommer en störra bild upp. Alltså du skapar en sida åt en bild och länkar till den.
Exempel:
Låt kreativiteten tala, och testa olika saker. Jag kan tyvärr inte tala om för dig hur du skall göra din sida, utan bara hur du gör.
Men låt oss gå upp till <HEAD> och <BODY> och ta det från början, genom att lägga in saker om hur det skall se ut.
BODY är alltså kroppen, och skall innehålla färger till sidan.
Nu får du komma ihåg hur man gör färger, för det skall vi göra nu.
En kropp med färger till text, länkar, besökta länkar och bakgrund skall se ut såhär:
<BODY BGCOLOR = #000000 TEXT = #FF0000 VLINK = #?????? LINK = #?????? ACTIVE = #??????>
"BGCOLOR" är bakgrundsfärg, TEXT är text, VLINK är besökt länk (Visited Link), ACTIVE är aktiv länk och tillsist LINK, länk färg. Vi kommer definiera dessa i CSS lite senare, men detta är sånt man måste veta ändå.
<HEAD>! Inom denna tagg skall information om författare, sökord titel mm skrivas in. Vi börjar med titel som vi redan har gjort. <TITLE> sätter alltså titel upp i browserns förnster, och är titel på sidan.
Vi går vidare till META taggarna. Dessa missbrukas av många HTML kodare, så alla sökmotorer kollar inte dessa, men vi kör dom i alla fall.
Meta taggar är till för sökmotorer så att dom hittar sökord, beskrivning och så om sidan.
De skrivs inom <HEAD>. Det kan se ut så här:
<META NAME = "KEYWORDS" CONTENT = "htmlskola, html,hur man kodar html">
<META NAME = "DESCRIPTION" CONTENT = "en liten skola för nybörjaren">
<META NAME = "AUTHOR" CONTENT ="Henrik Andersson, Sleipner, Henrik, Andersson">
Så ser det ut. Jag tänker inte förklara mer, utan du ser och förstår hur det går till. Många missbrukar dessa som jag sa, genom att skriva in andra ord än vad sidan innehåller, allt för att få många besökare. Många sökmotorer struntar som sagt i dessa, men många gör det inte. Nu får man fylla i ett formulär för att få sin sida i "spindeln". Sen kollar anställda upp din sida och kontrollerar att sökorden stämmer. Det är för att få stopp på missbruket.
Tabeller
Nu skall vi gå igenom <TABLES>. Tables används för att presentera data på ett snygg sätt, men även för att placera text exakt där du vill ha den. Du kan även lägga in bilder och länkar inom ett table. Låt oss börja. Vi börjar med att bestämma tjocklek på ramen, och bakgrundsfärg.
<TABLE BORDER = "här sätter du in en siffra för att bestämma tjocklek på ramen" BGCOLOR = "hex för bakgrundfärg i tabellen">
Nu skall vi ha en "header" som vi lägger in med <TH>, men först måste vi ha en ny rad. Det gör vi med <TR> som står för "TABLE ROW".
Sen skall vi presentera lite data som vi gör med <TD>, som betyder "TABLE DATA".
Nu vet ni vilka taggar som skall användas, så nu kodar jag ett table så får ni analysera lite.
<TABLE BORDER = "4" BGCOLOR = #AABBAA>
<TR>
<TH> Meny </TH>
</TR>
<TD><A HREF = http://sleipners.homepage.com> Sleipners sida</A></TD>
</TR><TR>
<TD><A HREF = http://insipidorpheus.homepage.com>HTML skola</A></TD>
</TR><TR>
<TD><A HREF = http://htmlskola.homepage.com>HTML skola på Svenska</A></TD>
</TR></TABLE>
Ja, så ser koden ut till en liten tabell. Men hur ser den ut då? Jag skall visa. Ovenstående kod resulterar i:
| Meny |
|---|
| Sleipners sida | HTML skola | HTML skola på Svenska |
Om du vill presentera text utan ram så struntar du i attributet "BORDER". Utan bakgrundsfärg, alltså samma som resten av sidan så skippar du "BGCOLOR" också. Du kan också bestämma bredden på tabellen med attributet "WIDTH", även "HEIGHT". Sen kan du bestämma var på sidan tabellen skall vara också genom att lägga till "ALIGN = "left,center,right"". Testa lite! Det är det man lär sig på. Bilder läggs in på det vanliga viset. Inom ett <TD>"här" </TD>.Om du vill ha fler data än ett på samma rad så strunta i </TR> och lägg in den där du vil ha ny rad. Jag tror du begriper nu hur det hela hänger ihop så vi går vidare med lite CSS.
Cascading Style Sheets
Jag kommer inte gå igenom så mycket inom CSS, men lite om hur du ändrar färg på länkar när musen är över o.s.v.
Du kan även ändra FONT när musen är över, lägga till tjocktext och ändra storleken på en länk när du håller på musen över.
Jag skall visa allt. Först börjar du med att tala om att det är CSS det handlar om, och det gör du såhär:
<STYLE TYPE = "TEXT/CSS">
A:HOVER {color:#??????;}
A:LINK {color:#??????;}
A:VLINK {color:#??????;}
A:ACTIVE {color:#??????;}
</STYLE>
A: står för "anchor" och det andra fattar du också. Färgerna ändrar du efter egen smak.
"HOVER" är den med "mouse over", och där ändrar du färg på länken när musen är över.
Du kan lägga till FONT ändringar också. Det gör du såhär A:HOVER{color:#??????;FONT-WEIGHT:BOLD(detta gör texten fet);FONT-FAMILY:ARIAL(Detta ändrar typsnitt);FONT-SIZE:18(Här ändrar du storleken på texten i pixlar);TEXT-DECORATION:UNDERLINE(Detta ger texten små tillägg, tex Understruken, Överstruken text);}
OBS!Lägg märke till ";" och "}". Dessa måste vara med, annars funkar det inte. Jag tänker inte förklara allt i detalj, utan du får kolla koden och memorera, eller kopiera och ändra efter eget tycke. Detta, CSS, gör sidorna lite mer levande, och är kul att ha med. Du kan ändra FONT på dom andra också, alltså det funkar inte bra på "HOVER". Om CSS intresserar dig så får du köpa en bok i ämnet. Du kan hitta trevliga verk på någon av följande URL:ar:IDG BOOKS och Pagina.
Detta är allt för denna version, men i nästa version skall vi kolla lite på CGI-formulär och DHTML. Detta som du lärt dig nu räcker för att skapa en hemsida. Kontakta mig gärna med frågor via email på adressen dana5ht@yahoo.com
Henrik Andersson
Stockholm
