| inledning till HTML-kurs | Färger | horisontella streck | Trolla med text och fonter | Listor | Tabeller | Länkning | Bilder | Image map | Frames | Special tecken | Ifyllnadsformulär | Stylesheet | |
Man kan skriva flera HTML-koder på samma rad om man vill och det spelar ingen roll om man har mellanslag eller inte mellan koderna. Det viktigaste är att det är lätt att läsa koden. I
kursen kommer vi oftast att ha en tag per rad. Det är lättare för en ovan att se vad som händer då.
Nu till kodningen, om det är så att ni inte har en HTML-editor (finns ett antal på Internet). använder själv Homesite, som är en shareware.
Tycker pesonligen att den är en av de bättre som jag har tittat på. En annan som också är bra är Einstein
den är Svensk och har en bra hjälp.Det kan i bland vara lite svårt att förstå vad som menas på Engelska (om man inte är riktigt duktig).
Tycker där imot inte om FronPage97/98 (och det är min personilga åsikt) eftersom den lusar ner så väldigt
med kod som man inte vet vad de skall vara till, tycker att det ät bra att kunna förstå vad det är som koden gör.
Men det går lika bra med en vanlig texteditor,så starta den texteditor eller ordbehandlare du vill använda för att skriva HTML-kod och skriv följande sex rader:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Dessa rader ska alltid finnas med i dina HTML-dokument! Det spelar ingen roll om man skriver HTML-koder med gemener eller versaler.
Jag kommer att använda mig av gemener vid HTML-koden för att förtydliga att det just är kod.
Nu ska vi gå igenom vad ovanstående rader betyder.
1. Ge information om dokumentet, som man inte vill att Browsen skall presentera.
2. Separera dokumentet i två delar.
3. Starta vissa rutiner innan resten av dokumentet laddas.
I och med att man delar upp sidan i en osynlig och en synlig del, kan man ge information till sökmotorer och besökare.
Man kan även starta vissa funktioner, <STYLE> är ett exempel på hur man skapar en stilmall för dokumentet. <LINK>
anropar man extern stilmall, <SCRIPT> , <APPLET> och <META> är några fler fuktoiner som startas är ifrån.
Utveklingen på vad man kan göra i <HEAD> taggen ändras hela tiden och nya saker kommer till så det är svårt att hänga med,
nöjer mig med dessa funktionerna så länge.
<META NAME="keywords" CONTENT="ord,ord,ord">
Nu har vi get attributet NAME ett värde "keyword" samt attributet CONTENT också ett värde. För sökmotorerna är "keyword" en funktion som aktiveras och de som följer där
efter är de ord som sökmotorn kommer att hitta och indexsera sidan med. Du måste skilja orden med komma (,) och inget mellanrum.
Tips!! Vissa sökmotorer rangordar efter hur många gånger ett ord kommer upp efter CONTENT, kan därför vara skäl att upprepa vissa ord.
Men andra sökmotorer tolka mer än tre som upprepning och försök till spamming (reklam) och kanske struntar i att indexsera sidan. Tips!!
<META NAME="description" CONTENT=" en beskrivning av vad sidan innehåller">
Den beskrivning som man skriver in här kommer att presenteras med sidas URL, vid sökmotorns presentation av sidan.
<META NAME="generator" CONTENT="notpadde">
Talar vilket program sidan är skapad med.
<META NAME="author" CONTENT="Anders Blomgren" lang="sw">
Talar om vem som skapat sida. Röststyrda Browsers får hjälp här av lang-attributet, liksom översättningsprogrammen att hitta
rätt språkligt uttal. "sw" står för Swedish (Svenska). Sökmotorerna får även hjälp här om någon letar information på
ett visst språk. (Kommer att bli mycket användbart i framtiden ).
<MET NAME="copyright" CONTENT="Copyright by Anders Blomgren 1999">
Anger att sidan är coyright skyddad. Talar om att ingen får kopiera texten utan att fråga mig först.
<META NAME="expires" CONTENT="12 july 2020">
Används av den som vill att en sida skall försvinna ur sökmotorenas index lister, och ur datorns cache vid en viss datum.
Vet inte ur långt i förväg man kan bestämma detta, kommandot används framförallt av nyhetssajter.
<META NAME="robots" CONTENT="noindex,nofollow">
Anger för sökmotorerna att sidan värken skall indexeras eller leta efter länkar i.
Andra möjliga värden är all, none, index, follow.
<META HTTP-EQUIV="refresh" CONTENT="5;URL=sidans.nya.URL">
Är bra att använda om man vill styra om trafiken från sidan, t ex om man har flyttat på sidan till en ny adress.
Detta funkar inte alltid så glöm inte att lägga in en klickbar länk till den nya adressen. Siffran 5 i CONTENT är de antal sekunder som den gamla adressen skall visa innan den nya adressen laddas in.
Går bra att ange lägre eller högre, ange ett högre och låt besökaren se ett meddelande om att sidan är flyttad.
Några sidor angående HEAD-element som kan var värda att besöka, det finns hur mycket som helst om detta element.
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
<div align="center"><H1>VÄLKOMMEN TILL MIN HEMSIDA!</div><H1> Centrering av rubiken samt är satt till rubrik 1
skriv vad ni vill och hur mycket ni vill. Det är eran egna fantasi som sätter gränsen inte någon annan.
HE M S I DA
</BODY>
I koden <BODY> kan man lägga till flera parametrar som talar om hur sidan ska se ut.
BGCOLOR anger vilken bakgrundsfärg sidan ska ha. Färgkoden fungerar så här:
<BODY BGCOLOR="#FFDFA2D">
Tecknen efter # kan delas upp i tre grupper med två tecken vardera (FF DA 2D). De talar om hur mycket rött, grönt och blått som ska blandas för att skapa den bakgrundsfärg man vill ha.
Den första gruppen innehåller det hexadecimala värdet för mängden röd färg,
nästkommande grupp hur mycket grönt och sista gruppen hur mycket blått som ska ingå i bakgrundsfärgen.
I vårt exempel betyder det att vi vill ha FF (255 decimalt) röd färg, DA (218 decimalt) grönt och 2D (45 decimalt) blått.
En hög siffra betyder att det ska vara mycket av färgen och en låg siffra att det ska vara lite. Minimum är 00 (ingen färg) och maximum är FF (max färg).
Om du inte vill prova dig fram kan du använda någon av nedanstående färger.
000000 = svart FFFFFF = vitt FF0000 = rött 00FF00 = grönt 0000FF = blått FFFF00 = gult 00FFFF = cyan FF00FF = lila BGCOLOR Anger färgen på backgrundsfärg Default färg är VitEtt exempel på hur en <BODY>-tagg kan se ut.
TEXT Anger vad det ska vara för färg på text Default färg är Svart
LINK Obesökta länkar Default färg är Blå;
VLINK Besökta länkar Default färg är Lila
ALINK Länkar i det ögonblick man klickar på dem Default färg är Röd
<BODY BGCOLOR="#000000" TEXT="#FFFF00" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000">
Man kan även lägga in en bild som bakgrund på sidorna, tycker då att man skall ha samma bild på alla sina sidor.
Det är tröttsamt att få olika färger i ansiktet när man blädrar mellan sidorna (gäller även om man har en bakgrunds färg).
För att få en bild som bakgrund lägger man in BACKGROUND i <BODY>-taggen. t ex:
<BODY BACKGROUND="bilder/bakgrund.jpg">
| Attribut för horisontella streck | ||
|---|---|---|
| Justering | <HR ALING=LEFT|RIGHT|CENTER> | |
| Tjocklek | <HR SIZE="X"> | I pixlar |
| Längd | <HR WIDTH="X"> | I pixlar |
| Länd i procent | <HR WIDTH="?%"> | Procent av sidans bredd |
| Fylld linje | <HR NOSHADE> | Förlorar 3D-effekten |
<SUP>Upphöjt, texten blir förskjuten på raden en halv rad upp.
Källkod visas som skrivmaskintext: <CODE>
Storabokstäver: <BIG>
Går bra att använda flera i rad: <BIG><BIG><BIG>
Pytte småbokstäver: <SMALL>
Samma som BIG, går bra att skriva flera i rad.
<BR> Framtvingar en radbrytning.
<P> Radbrytning med en tom rad efter brytningen.
används även är man skall justera text, se längre ner.
<NOBR> Ingen radbrytning, använd denna tag med stor försiktighet sidorna kan bli väldigt långa i bredd.
<WBR> Tillåter att Browsen gör ett radbrytning, kan vara bra att använda sig av om långa ord används
Dessa fyra HTML-taggarna (kod) behöver ingen slut-tag, <P> används även vid justering av text eller tecken, då använder man slut-tag. Se längre ner.
text som är ställd till vänstra marginalen: <P ALIGN="left"></P>
Centrerad text: <P ALIGN="center"></P>
text till höger marginalen: <P ALIGN="right"></P>
<PRE></PRE>Förformaterad Visar precis som det är skrivet, går att använda med WIDTH="80" texten bryts då efter 80 tecken. Ankare-taggen och länkar-taggen fungerar inne i <PRE>-taggen. Samt färgsättning och byte av typesnitt Bytt till Arial och ökat stoleken med +4
Detta element är bara supported av Internet Explorer, elementet tillåter användaren att skapa text remsa som sveper över sidan,
mycket lik den skärsläckaren som finns i Windows.
För att få denna effekten med Netscape krävs Java scrip, Java Applet eller ett script.
Så om du använder dig av IE kommer tre text remser svepa in på sidan, om inte så kommer inget att hända.
<MARQUEE behavior="alternate" BGCOLOR="#F0F8FF">Text från höger till vänster</MARQUEE>
BEHAVIOR="|scroll|slide|alternate"
På vilket sätt texten skall framträda på sidan.
loop="2"
Antal gånger texten presenteras, default hela tiden.
BGCOLOR="#F0F8FF"
En färgad remsa som texten kommer att presenteras i.
SCROLLAMOUNT="value"
Antal pixlar som texten kommer att uppdateras per gång.
DIRECTION="left|right"
Från vilket håll som texten kommer ifrån, default är från höger till vänster.
SCROLLDELAY="value"
Antal millesekunder mellan varje gång texten skrivs ute på sidan
T ex:
<MARQUEE SCROLLDELAY="100"> 100 millesekunder mellan varje utskrivning </MARQUEE>
<MARQUEE scrollamount="10">10 pixlar per gång</MARQUEE>
<FONT><FONT>
Har många olika variablalar och egenskaper, man kan ändra storlek byta teckensnitt ändra färg m.m.
Man kan göra det olika sätt använda sig av stylesheet extern fil som man anropar eller
skapar en man i dokumentet som gäller för bara de dokumentet. Man kan förändra enskilda tecken och stycken och mycket mer.
BASEFONT SIZE="X" när man vill förändra storleken genomgående för hela dokumentet.
FONT SIZE=X storleken på fonten
FONT SIZE="-1" minska storleken med ett
FONT SIZE="+1" öka storleken med ett
FONT FACE ="geneva, arial, helvetica"
<OL></OL>
Detta är taggarna man använder sig av för att tala om för Browsen att det är en nummrerad lista, Taggen för de punkter man vill lista är: (listentry)
<LI></LI>
T ex:
<OL>
<LI>Första</LI>
<LI>Andra</LI>
<LI>Tredje</LI>
</OL>
Kommer att se ut så här:
Om man vill ändra typen för numrering så gör du det med hjälp av TYPE egenskapen.
<OL> TYPE="A">
Det finns en egenskap till som man kan använda sig av vid nummrerad lista, START. Denna egenskap anväder man om man vill att
listan skall starta på ett speciellt nummer, om du vill att listan skall starta på 25 så skriv:
<OL START="25">
Ange alltid en siffra när du anger med vilket nummer din lista ska börja, din Browse byter ut siffran mot motsvarande tecken beroende på vilken TYPE du har på din lista.
Olika typer som du kan ange här är: A, a, I, i , vilket ger listor som ser ut såhär:
|
|
|
|
sedan använder man samma tag som vid ordered list för de punkter som skall listas. T ex:
<UL>
<LI>Första</LI>
<LI>Andra</LI>
<LI>Tredje</LI>
</UL>
De olika nivåerna får olika utseende på punkterna, det går att komma förbi detta också genom att använda sig av egenskapen TYPE med olika värden.
<UL TYPE=DISC> lista med bara fyllda punkter
<UL TUPE=CIRCLE> lista med bara cirklar
<UL TYPE=SQUARE> lista med bara fyrkanter
Man kan även ändra utseende på bara en list punkt.
<LI TYPE=SQURE>
<DL></DL>
<DT></DT>Titel
<DD></DD>Definition
<DL>
<DT> Punkt nummer ett
<DD> Här står det vad punkt nummer ett handlar om.
<DT> Punkt nummer två
<DD> Här står det vad punkt nummer två handlar om.
<DT> Punkt nummer tre
<DD> Här står det vad punkt nmmer tre handlar om.
</DL>
Det finns även något som heter Directory list och Menu list, men jag kommer inte att ta upp dessa här.
Om du vill läsa om dessa lister så testa länkarn nedan.
Om man använder tabeller för att få en specifik layout på sida bör man inte presentera allt
i en enda lång tabell, eftersom tabellens innehåll inte visas fören sista raden har lästs in av Browsen.
Det kan därför vara bra att skapa flera små, finns det dessutom bilder i tabellen kan besökaren bli
sittande med en blank sida en bra stund och tröttnar till slut.
Även om det finns en organisation w3 om tabeller som sätter en standad på HTML-kodning som är det så att de Browser som finns på marknaden i visa avsenden inte följer denna standad, utan de tolkar elementen olika. Visa saker de egnorerar totalt, Browsen läser inte in taggen överhuvud taget. Det är bara att testa elementen i de olika Browsen och själv se vad som fungerar eller inte.
| Länder | Städer |
|---|---|
| Sverige | Stockholm |
| Norge | Oslo |
| Denmark | köpehamn |
| Island | Reikavik |
| Finland | Hesingfors |
| <table></table> | Taggarna för att starta och avsluta tabellen |
| <caption></caption> | För att namnge en tabell |
| <tr></tr> | Table row (tabellrad) Markerar börja och slutet på en rad. |
| <th></th> | Table heading (tabellrubrik)Taggen används får att skapa en cell på tabellraden i detta fall en kolumnrubrik |
| <td></td> | Table data (tabelldata) Används för dataceller |
| Exemplet ovan har sex tabellrader <tr>-taggar med två celler <td>-taggar på varje rad, på första raden är taggen för att skapa tabellrubrik <th> i detta fall två stycken. | |
Vissa av sluttaggarna i en tabell är valfria att anväda, det är underförståt att ett element stängs
när ett nytt elememt öppnas. Dessa taggar är <tr>, <th>, <td>. Varje gång en ny
rad, rubrik eller datacell är det underförståt att föregående element är stängt.
Men eftersom det fortfarande finns äldre versioner av Browsers som inte tolkar detta på samma sätt som nyare versioner,
är det praktiskt att även använda slut taggarna för rad, rubrik och datacell.
<TABLE ALIGN="center">
detta attribut har dålig support av så väl äldre som nyare Browser, så använd elementen <DIV></DIV> för att justera tabellen. DIV står för division och används i just placeringssyfte.
<DIV ALIGN="center">
<TABLE>
- - - - - - - -
</TABLE>
</DIV>
För att justera innehållet i en tabell så är det samma värden som vid justering av en tabell. Om ALING attributet av används i <TR>-taggen så kommer innehållet på den raden att justeras.
<TABLE>
<TR ALING="center">
- - - - - - - - -
</TR>
</TABLE>
För att justera i enbart en cell så skrivs attributet i taggen för detta.
<TABLE>
<TR ><TD ALING="center"></TD>
</TR>
</TABLE>
<TABLE WIDTH="70%"> 70% bred oavsätt vilken upplösning skärmen har.
<TABLE WIDTH="500"> 500 pixlar oavsätt skärmupplösning.
| Länder | Städer |
|---|---|
| Sverige | Stockholm |
| Norge | Oslo |
| Denmark | köpehamn |
| Island | Reikavik |
| Finland | Hesingfors |
<table border="2">, 2 står för antal pixlar ramen skall vara tjock.
| Länder | Städer |
|---|---|
| Sverige | Stockholm |
| Norge | Oslo |
| Denmark | köpehamn |
| Island | Reikavik |
| Finland | Hesingfors |
Det går bra att kombinera olika fäger på olika ställen i tabellen, tabellen ovan har en färg
i tabellens bakgrund, första raden en annan medans cellerna på rad två har olika färger.
Man kan även lägga in en bild som bakgrund i en tabell.
<TABLE BACKGROUND="URL (bild.gif")>
Går även att tilldela både en bakgrundsfärg och bild samtidigt.
<TABLE STYLE="background: #BBBBBB URL (bild.gif)">
Med detta attribut kan man föreslå vilka celler eller cellgrupper som skall ramas i. Om attributet BORDER
används tillsammans med attributet FRAME kommer BORDER bara rita ut den uttre ramen.
Det värden som FRAME kan tilldelas är:
(vissa av dessa attribut har jag inte fått att fungera i Netscape )
Man kan även specificera inramningsregler med attributet RULES, värderna för detta attribut är rows och cols.
| Länder | Städer |
|---|---|
| Sverige | Stockholm |
| Göteborg |
COLSPAN Cellen spänner över flera kolummer.
| Länder | Städer |
|---|---|
| Sverige | Stockholm |
| Finland | |
| T1, R1, C1 |
|
T1, R1, C3 | ||||
| Den nästlade tabellen befinner sig i T1, R1, C2 | ||||||
<table border="3">
<tr><td>T1, R1, C1</td>
<td><table border="2">
<tr><td>T2, R1, C1</td><td>T2, R1, C2</td></tr>
<tr><td>T2, R2, C1</td><td>T2, R2, C2</td></tr>
</table></td>
<td>T1, R1, C3</td></tr>
</table>
| |||||
| T1, R2, C1 | T1, R2, C2 | ||||
| Den nästlade tabellen befinner sig i T1, R1, C1 och är centrerad samt att den sträcker sig över två kolumner | |||||
<table border="3">
<tr><td align="center" colspan="2">
<table border="2">
<tr><td>T2, R1, C1</td><td>T2, R1, C2</td></tr>
<tr><td>T2, R2, C1</td><td>T2, R2, C2</td></tr>
</table></td></tr>
<tr><td>T1, R2, C1</td><td>T1, R2, C2</td></tr>
</table>
En av de saker som gör Internet så spännande och att man nästan tror att man har allt runt hörnet är länkning.
Man klickar på en länk i Svergie och hoppar till en sida i USA t ex. Det ända man behöver är adressen (URL) till sidan
man skall hoppa till.
Lika väl som man kan hoppa till en sida någon annan stans på Intenet kan man hoppa mellan sina egna sidor eller varför inte
hoppa på samman sida?!!.
Kommer att använda adressen till Netscapes hemsida som URL (Unifom Resource Locator) som är http://www.netscape.com. Nu för att kunna länka till Netscapes hemsida från min sida skriver man:
<A HREF="http://www.netscape.com">Netscape</A>
Vad betyder nu detta då? De taggar som används är <A> . <HREF> (Hypertext Referens) talar om att det är en referens till en annan adress, efter talar man om vad det skall stå på länken 'Netscape'.
Nästa sak att göra med länken är att lägga in en bild som då blir klickbar istället för texten. Då bäddar man in taggen för bild inne i länk-taggen
<A HREF="http://www.netscape.com"><img src="bild.gif"></A>
Samma sak skriver du om länken går till en annan sida du har skapat och vill att den skall laddas när man klickar på länken.
<A HREF="nästa.html">Nästa sida</A>
<A HREF="mailto: hnab@swipnet.se">hnab@swipnet.se</A>
hnab@swipnet.se
MAILTO: Talar om för Browsen att öppna de mail-program som du använder för att skriva dina mail med, antingen det är Netscapes eller IE egna mail program eller något annat type Eudora.
Man skapar en klickbar referens länk på vanligt sätt, och lägger till en egenskap som talar om att det är en ankarlänk # (staket).
<A HREF="#hoppa">Hoppa</A>
Till det ställe man vill hoppa till lägger man in taggen.
<A NAME="hoppa"></A>
Går även bra att hoppa till ett specielt ställe på en annan sida, de ända man behöver lägga till är dokumentets namn.
<A HREF="dokumentnamn.html/#hoppa">hoppa</A>
GIF och JPEG är såkallade 'bitmappade' bilder, betyder att bilden är uppbyggd av pixlar, varje pixler
har en bestämd placering i bilden.
Dessa två format har olika användningsområden, små bilder med få färger sparas i GIF-format medans
större, informationstätare bilder sparas i JPEG-format.
GIF-formatet har 8 bitas grafik, betyder att den kan bara återge maximalt 256 färger.
JPEG-formater har 24 bitas grafik, betyder att den kan återge miljontals färger. JPEG erbjuder stora möjligheter till komprimering,
detta innebär i gengäld mindre skarpa bilder. I informationstäta bilder har det ingen betydelse.
Så skall bilden återges exakt så använd GIF-format.
Man kan göra många fräcka effekter med GIF-bilder, t ex göra animerad bild, interlaced betyder att bilden
är placerad men är otydlig för att gradvis bli skarpare. Fördelen med bilder som är sparade som interlaced är att
Browsen visar sidans layout så att den som laddar hem sidan kan läsa texten medan bilden laddas in.
Funkar på samma sätt som när man definerar attributen WIDTH och HEIGHT för bilden. De senaste formatet för GIF-bilder
(gif89a) går även att göra transparanta. Denna funktion kan användas för att göra sidans layout luftigare, t ex
lägga in osynliga bilder som fasta mellanrum mellan textavsnitt.
Den transparanta effekten görs i bildredigerings programmet, genom att markera färgen eller lagret beroende på vilket program du använder, och sparar bilden i GIF89a-format.
<IMG SRC="bild.gif">
Om inga andra attribut anges för bild-taggen kommer den att placeras i vänstemarginalen och efter närmast föregående text. (defaultplacering av bilder). Inne i <IMG>-taggen placeras även attributen WIDTH="XX" och HEIGHT="XX" anges i antal pixlar hur hög och bred bilden är. T ex bredd och höjd för loggan på sidans topp.
<IMG SRC="bild.gif" WIDTH="50" HEIGHT="113">
Arributen talar om för Browsen hur stor bilden är och Browsen reserverar plats för bilden när nerladdning av HTML-dokumentet görs.
Du bör alltså använda dessa attribut, det går fortare att ladda ner sidan samt att bilden presenteras på rätt sätt.
WIDTH="" och HEIGHT="" går också att använda om man vill manipulera bilden, testa själv.
Problemet med att manipulera bilden är att storleken för den reserverade platsen inte stämmer och Browsen måste göra ny plats vilket
tar tid. Många Browsers bryr sig eller inte om felaktiga värden men måste läsa in dem.
För att få reda på pixel storleken om man inte använder sig av en så kallad HTML-editor som lägger med dessa attribut och rätt värden direkt, öppna filen med en Browser och i adressrutan står sedan pixelstorleken, WIDTH står först. Funktionen finns även i bildredigerings program den kan se lite olika ut beroende på vilket program som används.
Denna text ligger med attributet VSPACE 30 pixlar ovanför bilden.
Denna text ligger med attributet HSPACE med 30 pixlar efter bilden.
Två sätt att justera bilder och text i för hållande tillvarandra, i första sättet skils bilden och texten inte åts på något sätt. Detta kallas för inline image, bilden behandlas som en del av paragrafen och texten läggs i samma stycke.
<IMG SRC="bild.gif" ALING="left">
Det andra sättet behandlar bilden som en hel paragraf, efterföljande text kommer i stycket efter, alltså mellanrum till texten.
<P ALIGN="left"><IMG SRC="bild.gif"></P>
I båda fallen justeras bilden efter den närmast föregående texten.
Textens baslinje hamnar i höjd med bildens baslinje, för att ändra på det kan man använda sig av kommandot:
| ALIGN=MIDDLE | centrerar bilden i förhållande till textens baslinje. |
| ALIGN=ABSMIDDLE | Centrerar bilden till textens mittlinje. |
| ALIGN=LEFT | Placerar bilden till vänster på sidan. |
| ALIGN=CENTER | Placerar bilden i centrum på sidan. |
| ALIGN=RIGHT | Placerar bilden till höger på sidan. |
| ALIGN=BASELINE | Gör så att bildens nederkant kommer i höjd med textens baslinje. |
| ALIGN=BOTTOM | Ger samma resultat som ovanstående kommando. |
| ALIGN=ABSBOTTOM | Placerar bilden i nivå med den lägsta punkten på textraden, t.ex så hamnar ju j, g q under baslinjen. |
| ALIGN=TOP | TOP läger bilden i nivå med med den övre gränsen på den högsta "saken" på raden. |
| ALIGN=TEXTTOP | TEXTTOP placerar bildens överkant i höjd med överkanten på den högsta bokstaven på raden. |
För att få bra kontroll på bilder och text tillsammans i HTML-dokument är det bra att använda sig
av tabeller, för det mesta justeras tabellens celler efter bildstorleken förutsatt att bilderna inte är för stora.
Om man vill ha många bilder på en sida är det bra att göra dessa lika stora i ett blidredigerings program
och sedan lägga en bild i varje cell som tabellen har. Man kan ta bort ramen runt tabellen och mellanrummet mellan cellerna
, så att bilderna ligger tät ihop, se sidan som beskriver tabeller för rätt attribut till tabellen.
<IMG SRC="bild.gif" ALT="Den text som visas i stället för bilden">
<BODY BACKGROUND="bild.gif">
Bilden som används till bakgrund behöver inte vara särskilt stor eftersom Browsen kopierar bilden
så att den fyller hela sidan. Man kan kombinera detta attribut med BGCOLOR men BACKGROUND,
t ex för att väcka ett intresse hos surfaren.
Färgen försvinner när bilden laddas eftersom BACKGRUOND är ett starkare attribut och kommer att gälla när sidan
är färdig laddad. Tänk på att använda en färg som går ihop med den färg som texten har om det av någon anledning skulle
vara så att bakgrunds bilden inte laddas, så att text går att läsa.
<IMG SRC="bild.gif" WIDTH="X" HEIGHT="X" LOWSRC="kopiabild.gif">
<A HREF="nysida.html"><IMG SRC="bild.gif"></A>
Taggen för bilden står innaför taggen för länkelementet, när musen förs över bilden ändrar den utsende till en hand och en adress visas på status fönstret.
Funktionen med bilder som hyperlänkar kan användas på många sätt, t ex ersätta den vanliga textlänken som exemplet ovan.
Om det är så att sidan innehåller många bilder (tar lång tid att ladda)
kan det vara bra att använda sig av något som kallas för thumbnails.
Man skapar små kopior av orginalbilden i ett bildredigeringsprogram och lägger in dem i dokumentet
samt att man gör dem klickbara, på så sätt om besökaren själv vill kan han klicka på bilden och få upp orginalbilden
i ett nytt Browser fönster.
Skapar en sida med det nödvändigaste HTLM-taggarna och ett elementet för blid ock länkar ihop den med
den lilla kopian av bilden.
Det finns två typer av image maps, server-side och client-side,
server-side, är den som är krångligast eftersom det kräver att det körs ett
script på din web server som man anropar på sidan där image maps ligger samt att
man måste vara on-line för att funktionen skall fungera.
Den andra varianten, clinet-side , innebär att det är Browsen själv som tolkar image maps och presenterar den utan att få hjälp från serven. Detta sätt innebär att man lägger sin image map direkt i HTML-koden, samtliga taggar skrivs där man vill att image map skall ligga på sidan.
<IMG SRC="bild.gif" BORDER=0 WIDTH="400" HEIGHT="200" ALT="Image map" USEMAP="#bild">
USEMAP="#bild"
Attributet talar om för browsen att bilden är en image map, använder sig av samma egenskaper som
HREF attributet gör i <A>-taggen.
Brägården (#)
talar om för Browsen att bilden som skall användas för image map ligger i HTML-dokumentet.
Se till att ha lite luft mellan de klickara områderna och att inte ha för många image maps på sidorna, eftersom det är tidkrävande att ladda bilder.
<MAP NAME="bild"> <AREA SHAPE="rect" COORDS=x,y,x,y" TARGET="" HREF="länkens adress" ALT="Alternativ text till hot spoten"> <AREA SHAPE="default" NOHREF> </MAP>MAP NAME="bild.gif"
AREA SHAPE=""
COORDS="x,y,x,y"
Vilken form de klickbara området på bilden har, finns tre olika former.
AREA SHAPE="default" NOHREF
Kommandot för att tala om för Browsen att inget skall hända om man klickar utanför de klickbara områderna,
man kan även ange en länkadress.
Den ena är ett 'ankarlänk' till toppen på denna sida,den andra öppnar inlednings sidan på denna HTML-kurs i ett nytt Browser fönster,
använder värdet imagemap_out till attributet TARGET.
Förmodar att det har samma funktion som värdet _blank, har inte hittat någon dokumentation om detta men
efter test så ser det ut att fungera på samma sätt.
Ett exempel på hur det skulle kunna se ute.
<A HREF="picture.bild.map">
<IMG SRC="picture/bild.gif" BORDER=0 WIDTH="400" HEIGHT="200" ALT="Image map" ISMAP></A>
Frames är en egenskap (funktion) som gör att man kan dela in en sida i flera sidor, helt olika fönster.
I vart och ett fönster laddas sedan ett HTML-dokument in. Så med frames-egenskapen gör man egentligen inte websidor, utan man definerar
ett huvud-dokument och i det presenterar du sedan olika HTML-sidor.
Upp
<FRAMESET>
innan för detta tagg talar man om man skall ha ROWS (rader)eller COLS (kolummer).
<FRAMESET COLS="250,*">
Nu har vi talat om att det skall vara kolummer och att första (den vänstra) skall vara 250 pixlar bred och den andra (den högra) kommer att bli var den bli beroende på vilken upplösning läsaren har på sin skärm.
Man kan även använda sig av procent satser här t ex:
<FRAMESET="30%,70%">
Okej i denna taggen finns det flera saker att lägga till men dem tar vi lite senare fram, nu till de två sidor som skall placeras i respektive frame, för enkelheten skull döp den till sid1.html sid2.html.
Upp
Kolla inga BODY-taggar, dessa behövs inte eftersom FRAMESET och NOFRAMES ersätter dessa. Om det skulle vara så att man vill ha BODY-taggar ändå måste de stå innaför NOFRAMES,
som i sin tur står innanför FRAMESET-taggen. Det som står i mellan NOFRAMES är det som visas för dem som har Browsers som inte stödjer frames.
Man kan läga in en länk här för dem så att de får ta del av informationen på vanligt sätt (sida för sida ).
Två FRAMESET-kommandon delar upp sidan i tre delar, och tre FRAMESET-kommandon delar upp sidan i fyra delar också vidare. Hur man vet (bestämmer) hur uppdelningen kommer att bli,
en browser väljer (prioriterar) alltid de övre fönstret framför de under, och de vänstra framför de högra.
Upp
Upp
| NORESIZE | Gör så att användare inte kan ändra storlek på framen genom att dra i dess kant (inte sabba din snygga layout) Antingen i taggen <FRAMESET> eller <FRAME SRC=""> |
| SCROLLING="yes|no|auto" | Denna egenskap bestämmer om framen skall ha rullist eller inte, valfri, default är det auto |
| FRAMESPACING="X" | Ger luft mellan framen, X antal pixlar, nästan samma som BORDER och FRAMEBORDER |
| BORDER="X" | Är för Netscape, där X står för bredden i pixlar på ramen |
| FRAMEBORDER="X" | Intenet Explorer, där X står för bredden i pixlar på ramen |
| BORDERCOLOR="#XXXXXX" | Färg sättning på ramen, X står för vilken färg i Hex-decimalt |
| MARGINWIDTH="X" | Bestämmer marginalerna inne i fönstret till vänster och höger, anges i pixlar. |
| MARGINHEIGHT="X" | Marginalerna i fönstrets överkant och underkant. |
Upp>
Tre sätt att använda sig av länkningar i frames.
1. Den första funktionen är default, skapas som en vanlig länk till ett nytt HTML-dokument.
2. Kräver mer knoppande, använder dig av ett kommando som ger ett fönster information till ett annat fönster. Innehållsförteckning i vänster marginalen och de olika sidorna öppnas i framen (fönstret)till höger. Namne ge sidorna på huvud-dokumentet.
<FRAME SRC="sid1.html" name="sid1">
<FRAME SRC="sid2.html" name="sid2">
Sid1 har innehållsförteckningen med länkar till dockumenten, och sid2 är den sida som dokumenterna skall presenteras.
T ex: En länk till nästa sida kan se ut så här.
>
<A HREF="nästa.html" TARGET="sida2">Nästa</A>
Nu kommer sidan nästa.html att ladas i fönstret sida2.
Upp
<FRAMESET COLS="50%,50%"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> <FRAMESET ROWS="33%,33%,33%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> </FRAMESET> Delar in sidan först i två kolummer som är lika stora, var av den första kolummer delas in i två rader som är lika stora. Den andra kolummern delas sedan in i tre lika stora rader.Upp
Detta var ett kommando som bara fungerade på Explorer, men i och med införandet av HTML 4.0-standarden 1997, så ligger detta kommando med.
Vad det inbör att man kan skapa en frame som ligger inuti en annan frame (som att ha en tabell i en tabell). Eftersom man laddar
olika sidor in i frames, så erbjuder denna funktion en del nya möligheter.
<IFRAME SRC="frameiframe.html" WIDTH="400" HEIGHT="160" SCROLLING="auto" FRAMEBORDER="1" NORESIZE>
</IFRAME>
Denna tag ligger i denna sida, inte på huvud-dokumentet som man kanske kan tro. IFRAME skapar framen, SCR anger vilken sida som skall laddas in.
Detta funkar bara om man har Internet Explorer 3.0 eller senare samt en av de senaste versionerna av Netscape.
Man manipulerar fönstret som för vanliga frames.
<IFRAME WIDTH="X" HEIGHT="X" ALIGN="X" VALIGN="X">
<FORM>
<INPUT type="button" value=" flera frames samtidigt" onClick="parent.frames[0].location='nya1.html';
parent.frames[1].location='nya2.html';">
</FORM>
Parent anger huvud-dokumentet.
Frames[1] är de frame som skall ändras.
location='nya1.html' talar om att sidan nya1.html skall laddas in i andra framen (parent är den första sidan, Browsen
börjar räkna från noll).
Här är en lista på en del av de specialtecken som kan vara värda att byta ut,
Specialtecken | ||
|---|---|---|
| Tecken | Character entity | |
| å | å | |
| Å | Å | |
| ä | ä | |
| Ä | & | |
| ö | ö | |
| Ö | Ö | |
| < | < | |
| > | > | |
| & | & | |
| " | " | |
| | ­ | |
| | ||
| © | © | |
| ® | ® | |
| ™ | ™ | |
| « | « | |
| » | » | |
| ½ | ½ | |
| ¼ | ¼ | |
| ¾ | ¾ | |
| £ | £ | |
| ¶ | ¶ | |
| ¹ | ¹ | |
| ² | ² | |
| ³ | ³ | |
| Æ | Æ | |
| æ | æ | |
| Ð | Ð | |
| Ø | Ø | |
| ø | ø | |
| É | É | |
| é | é | |
| ð | ð | |
| þ | þ | |
<FORM>
Om man nu ska göra ett formulår som det går att skicka e-post ifrån, så skriver man taggen:
<FORM METHOD=POST ACTION="mailto:användarnamn@domän.se">
För att få texten i läsbar form i ett vanligt mail, så kan man i form-taggen lägga till
ENCTYPE="text/plain"
så får man ett vanligt mail. Detta fungerar dock inte med Internet Explorer, som inte klarar av Mailto-funktionen i formulär.
Sen finns det olika typer av textfält och kryssrutor, som du kan lägga in i ditt formulär. För att få en vanlig ruta, där läsaren t.ex. kan skriva in sitt namn, så använder man taggen:
Skriv ditt namn här: <INPUT TYPE="text" NAME="namn" SIZE="20" VALUE="Ditt namn">
Det fätet kommer att se ut så här:
OM du använder dig av INPUT TYPE, så finns det olika sorters fält, och det är följande:
| "text" | Här får du du en vanlig textruta |
| "radio" | Med detta kommando så får du en radioknapp, som går att kryssa i. |
| "checkbox" | En vanlig fyrkantig kryssruta. |
| "submit" | Du får en knapp som utför det du vill att formuläret ska göra (det som står efter ACTION=). |
| "reset" | Du får en knapp som suddar ut allt ifyllt, och låter anvädaren börja om. |
<FORM>
<INPUT TYPE="radio" NAME="1" VALUE="Val ett">Val ett<BR>
<INPUT TYPE="radio" NAME="1" VALUE="Val två">Val två<BR>
<INPUT TYPE="radio" NAME="1" VALUE="Val tre">Val tre<BR>
</FORM>
ser ut så här:
Om man låter bli att skriva MUTIPLE SIZE=x, så får man ett fät som ser ut så här:
När du är klar med ditt formulär, så avslutas det med:
</FORM>
Det finns hur mycket information som helst att få tag på ute på "nätet".
Stilmallar använder man för att få bättre kontroll över sina HTML-sidor (layout). När man använder HTML-taggar, t ex:
H1, EM och P, talar man bara om att det skall vara en rubrik, en förstärkning eller ett nytt stycke.
Med en stilmall kan man definera sådant som typesnitt, tecken storlek, mellanrum mellan bokstäverna och orden
samt man kan skapa egna egenskaper för ord eller stycken som man sedan anropar via sin stilmall.
Ett exempel:
<FONT FACE="Arial, Geneva, Helvetica" SIZE="24pt" COLOR="#008000">Ser ut så här</FONT>
Ser ut så här
<FONT FACE="Arial, Geneva, Helvetica" SIZE="24pt" COLOR="#008000"
STYLE="Font-family: Arial, Geneva, sans-serif; Font-size: 24pt; Color: #008000; Font-weight: medium"
>Ser ut så här</FONT>
STYLE-taggen skall ligga i HEAD-taggen, den ger information till Browsen hur man vill att sidan skall se ut. T ex: vilken typesnitt, font storlek och så vidare.
<STYLE TYPE="text/css" TITLE="Bright Colours">
Förklaring:
Det som skrivs mellan BODY-taggarna kommer att få vit färg.
BODY { color : white}
P { color : blue;
font-size : 12pt;
font-family : Arial}
H1 { color : red;
font-size : 18pt}
</STYLE>
Mellan P-taggarna kommer att bli färg blå, teckenstorlek 12 och typesnitt Arial.
H1-taggarna färg röd och teckenstorlek 18.
TYPE egenskapen används för att specifiera MIME (Internet media), vilka egenskaper 'stilmallen' skall ha. I detta fall är den av typen ("text/css").
TITLE egenskapen definerar namnet på 'mallen', används av browsen om det finns möjlighet att välja 'stilmall'.
Copyright © Anders
Blomgren 1998, All rights reserved.
hnab@swipnet.se
Sitens URL: http://home.swipnet.se/anders_blomgren