| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
URLE n URL (Uniform Resource Locator) är en sökvägsbeskrivning till en resurs på internet. En URL för vanliga HTML-dokument ser ofta ut någonting i stil med: http://www.karelma.com/internet/htmlskola.html * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Objekt
O
bjektet är vad som avses med kommandot, exempelvis en bild, en länk eller liknande. AttributD etta begrepp fattast enklast genom lite praktisk erfarenhet. Man kan säga att attributen difinierar objektets (kommandots) olika dimensioner, alltså de sätt varpå objektet kan ändras. Se nedan! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ArgumentA rgumentet är ett visst, av kodmakaren valt värde, vilket objektets attribut sättes till. I kommandot <img src="http://www.karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan" width="50" height="25" border="0" /> så är alla uttryck inom citationstecken argument, därvid "http://www.karelma.com/superpluseng/svenskflagga.gif", "Svenska Flaggan","50", "25" och "0". Attributen är "src", "alt", "width", "height" och "border". * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * SkelettN är man inledningsvis startar med HTML är det brukligt att få sig föreslaget ett enkelt skelett, vilket ser ut så här:
<html> O vanstående kommandon omnämnes i allmänt tal såsom HTML- taggar. HTML, och enkannerligen XHTML (den förfinade, modernare formen), uppbygges kring par av taggar varav den avslutande taggen inledes med ett /, exempelvis sålunda </html>. Denna tagg avslutar inledningstaggen <html> vilka två kommandon bildar ett par. </head> avslutar det huvud som inledes med <head> och </body> avslutar den kropp vilken inledes med <body>. XHTML, till skillnad mot HTML kräver att alla kommandon är skrivna med gemena, inte versaler. Eftersom HTML också accepterar gemena är dessa att föredraga. B ody- delen, alltså den del som står mellan body- taggarna, utgör ditt egentliga dokument och är förutom titeln mellan <title> och </title> det enda besökaren kan se av ditt dokument utan att granska källan. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * TitelD et är värt att lägga ned extra möda på titeln, eftersom många sökmotorer med förkärlek väljer allt mellan titeltaggarna som nyckelord för dokumentet. Därigenom hamnar du högre i sökmotorernas index för dessa nyckelord och får fler besökare. Titeln är den enda delen i dokumentets huvud, mellan <head> och </head> som är omedelbart synligt för besökaren. Om du som ytterligare beskrivning av din sida önskar nyttja meta- taggar så kommer dessa att läsas av en del sökmotortjänster, såsom i skrivande stund AltaVista, AllTheWeb (Evreka), Overture m.fl. Google läser inte meta- taggar. Även söktjänster som de tidigare nämnda fäster knappast större vikt vid meta- taggarna än vid den text som möter besökaren. XHTML kräver att dokumentets huvud inkluderar taggarna <title> och </title> även om det är tomt däremellan. D en text du önskar presentera för din sidas besökare skall alltså ligga mellan body- taggarna, exempelvis.
<html> * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Text
I
denna text så måste alla "konstiga" tecken bytas ut, exempelvis "å" mot "å" "ä" mot "ä" och "ö" mot "ö". En mer fullständig sammanfattning hittar du på:
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Radbrytning VagnreturN ästa steg är att göra radbrytningar. En radbrytning markeras med <br> eller i XHTML <br /> vilket är likasågott att skriva redan från första början. För att alternativet <br /> skall fungera också i äldre browsers måste mellanslaget innan slashen vara med. I XHTML måste denna tagg ligga mellan två andra taggar, företrädelsevis i en paragraf mellan <p> och </p>. Om du i något fall vill skriva en sträng tecken inkluderande mellanslag vilka bäst presenteras på en och samma rad så finns alternativet att lägga in teckensträngen mellan taggarna <nobr> och </nobr>. Allting däremellan hamnar på en rad. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Rubrik
O
bservera skillnaden mellan rubrik och titel. Titeln hamnar som huvudnamn på dokumentet uppe i den grå zonen, medan rubrikerna möter besökaren i själva dokumentet. Det finns flera storlekar, från <h1>Din rubrik</h1> som ger största möjliga rubrik till <h6>Din rubrik</h6> vilket ger minsta möjliga; och alla storlekar däremellan. Du kan välja att ytterligare påverka storleken på dina rubriker med <font size="7"><h1>Din rubrik</h1></font> för största möjliga rubrik. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Textstorlek<font size="7">Din text</font> påverkar storleken på all text som ligger emellan taggarna. Här är numreringen på storlekarna den omvända, dvs 7 ger största möjliga text och 1 minsta möjliga. Du bör vara försiktig med åtminstone de två minsta textstorlekarna eftersom en del sökmotorer (AltaVista) tolkar det som försök till "spam", alltså sådan text som mera riktar sig till sökmotorerna än besökarna, på vad sätt vissa webbmastrar försöker manipulera sidans ranking i indexen. Textstorleken kan också markeras på en relativ skala, då med: <font size="+2">Din text</font>. I XHTML är det noga med att "2" eller "+2" eller vilken storlek du än har på argumentet markeras med citationstecken. Detta gäller även för alla andra argument för alla kommandon. TextfärgO m du vill ändra färgen på din text så låter sig detta göras genom att du lägger in texten mellan taggarna <font color="red" >Din text</font> eller vilken annan sanktionerad färg som helst istället för "red" . Ett annat sätt att ange textfärg är att uppge hexadecimalkoden för färgen ifråga:
<font color="#FFFFFF">Vit text</font> * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Teckensnitt stil
D
et är fullt möjligt att bestämma med vilket teckensnitt din text skall framträda på sidan. Kommandot härför är: <font style="times">Din text</font> där "times" kan utbytas mot vilket annat önskvärt teckensnitt som helst. Förutsättningen för att din sidas besökare skall kunna läsa texten i det teckensnitt som du tänk dig är att de har det lagrat i sin dator. Undvik därför alltför exotiska varianter. Vanliga teckensnitt är exempelvis times, courier, times new roman, geneva, helvetica och verdana. Verdana är vanligt på stora, kommersiella sajter. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Text - sammanslagna kommandonI stället för att för ett textblock precisera tre olika par taggar, en för textstorlek, en för textens färg och en för teckensnittet så är det tillåtet att kombinera alltihop i en tagg: <text size="5" font="times" color="red" >Din text</font> * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Fet och kursiv stilT ext kan lätt visas såsom fet eller kursiv. Man åstadkommer detta genom att placera in texten mellan taggarna <b>Din feta text</b> respektive <i>Din kursiva text</i>. Kommandot <em>Din kursiva stil</em> är ett meningslöst alternativ till sistnämnda kommando (oftast). * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Kommandot PREM ellan taggarna <pre> och </pre> så bevaras ursprungsformateringen i ditt dokument med avseende på radbrytningar och mellanslag. En poäng brukar sägas vara att man på så sätt lättare presenterar programkod. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Länkar
N
aturligtvis vill man som webbsidesnickare kunna länka till andra sidor, alternativt inom det egna dokumentet. Om man förfogar över en egen domän är det bästa att använda hela sökvägen då man länkar, exempelvis: L änkar kan beskriva hopp inom ett dokument. Målen för dessa hopp måste i förväg ha utmärkts med ankare. Om jag i detta dokument har angivit följande ankare: <a name="kkjsdhfk">kom pjutti, pjutti</a> så kan jag länka till stället ifråga genom följande länk: <a href="#kkjsdhfk">Klicka här för att komma till ankaret "#kkjsdhfk"</a> Från ett annat dokument kan du länka till detta ankare i detta dokument genom kommandot: <a href="http://www.karelma.com/internet/htmlskola.html#kkjsdhfk">Klicka här för att komma till ankaret på skolsidan"kkjsdhfk"</a> * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Länkar till epostadresser
D
u bör som seriös webbsidemakare avsluta dina dokument med namn och epostadress. Detta göres bäst på detta vis: * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Bilder
B
ilder lägges in genom liknande metodik som för länkar, nämligen genom att URL:en till din i förväg uppladdade bild lägges in på sidan: <img src="http://www.karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan"> * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Bilder som länkar
L
ika enkelt som man kan länka till ett annat dokument med en textsnutt, lika enkelt kan man åstadkomma samma en länk, fast med en bild som objekt. Besökare som klickar på bilden hamnar på den URL vilken du i din visdom har bestämt: <a href="www.goteborgschat.com"><img src="http://www.karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan" /></a> * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * tabellerE n tabell inledes med taggen <table> och avslutas med </table>. Varje horisontell rad i tabellen inledes med <tr> och avslutas med </tr>. Varje kolumn i respektive rad inledes med <td> och avslutas med </td>. För varje rad måste antalet kolumner vara konstant, möjligen med undantag av översta och nedersta raden. Ett ytterligare undantag är celler vilka i horisontalled sträcker sig över flera kolumner, vilket åstadkommes med kommandot colspan="". Genom att markera en färg till attributet color="" i tr- taggen kan du välja att färga en cell. En tabell med två rader och tre kolumner ser ut sålunda:
<table> D et går att få en cell att sträcka sig över flera rader genom att på motsvarande sätt som för td och colspan="" tillsätta rowspan="" som attribut i en tr- tagg. Kommandot <table> har också flera attribut, exempelvis color="" som reglerar tabellens färg och width="" som reglerar tabellens bredd i pixlar eller, försåvitt ett %- tecken sättes före talet i argumentet, i procent. Du har även kontroll över linjerna mellan cellerna, dessas bredd, och tomrummet emellan innehållet i olika celler. Linjetjockleken bestämmes av attributet border="" och tomrummet med cellpadding="". Ett ytterligare argument är cellspacing, vilket kompletterar border="" genom att tillföra större eller mindre tomrum mellan border- linjerna. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
eller hellre med omedelbar anpassning till XHTML: <img src="http://www.karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan" />. Bilder i formaten GIF (Graphics Interchange Format) respektive JPEG/JPG (Joint Photographers Expert Group) brukar stödjas av de flesta webbläsare. Se alltså till att lägga dina bilder på servern i detta format. Andra, mer sällsynta format är BMP (bitmap), XBM (X bitmap) och PNG (Portable Network Graphics). Det är en god idé att inte laborera med dessa format. Du kan medels attributen "height" och "width" modifiera storleken på din ursprungliga bild. Exempel: <img src="http://www.karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan" width="40" height="10" border="0" />