HTML grunder
You are currently browsing the articles from Svensk Server matching the category HTML grunder.
Det finns en mall som varje HTML-dokument följer och den inkluderar alla grundläggande märke-par ett HTML-dokument behöver för att vara synlig på webben.
Hela processen kan man beskriva med ord:
1. Öppna ett HTML-dokument.
2. Öppna HEAD-avdelningen. Allt som finns här är osynligt på webben. Därför börjar alla märken i HEAD med ordet META, förutom TITLE-märket. För ett HTML-dokument META betyder: ”Visa inte det här information på webben utan skicka den till sökmotorrobotar för identifiering av dokumentet.”
3. Stänga HEAD-avdelningen.
4. Öppna BODY-avdelningen. Allt som finns här är synligt på webben.
5. Stäng BODY-avdelningen.
6. Stäng HTML-dokumentet.
Det här var strukturen för vilken HTML-sida som helst på Nätet.
HTML-koden är:
<html>
<head>
<title> Namn på din hemsida </title>
<meta …..märket forsätter här>
<meta …..ännu ett META-märke här>
<meta …..det kan finns ännu flera META-märken>
</head>
<body>
Innehållet i ditt dokument som visas på Nätet.
</body>
</html>
Det som återstår nu är att lära HTML-märken för att skapa länkar, infoga bilder, osv. Efter det kan du skriva ditt första HTML-dokument.
Andra bloggar om: html, design, server
Written by admin on oktober 24th, 2007 with no comments.
Read more articles on HTML grunder.
Innan vi går börjar med nya märken vill jag betona vikten av Body-märket och dess betydelse för hemsidans utseende.
Det är dags att introducera parametrar eller attribut. En parameter (attribut) kan beskrivas som en egenskap för märken. Olika märken har olika egenskaper; dock finns det en del märken som har gemensamma egenskaper.
<BODY>-märket har attribut som anger hemsidans bakgrund, textfärgen, länkfärgen o s v.
En webbsida med röd bakgrund har attribut BGCOLOR=”red” i sitt BODY-märke. Fullständiga HTML-koden blir:
<BODY BGCOLOR=”red”>
Oftast nöjer man sig inte enbart med att ange bakgrundsfärgen utan man vill påverka resten av webbsidan. Glöm inte att BODY-märket är startpunkten för det som ska visas på skärmen vilket gör att alla attribut i det har global effekt. I praktiken betyder det att om du anger att textfärgen ska vara blå kommer det att gälla för hela webbsidan, om man inte i efterhand ändrar specifika stycken, meningar och ord i texten.
Attribut som tar hand om textfärgen heter TEXT=” ”. Koden som anger röd bakgrund och blåfärgad text på en webbsida blir:
<BODY BGCOLOR=”red” TEXT=”blue”>
Det man ofta vill ändra är färgen på länkar i sitt dokument. Detta gör man med attribut LINK=” ”. Standard värdet för länkar är blå och det behöver man inte ange ifall man vill behålla färgen.
Anta att vi vill ha en röd bakgrund, blå text och gröna länkar på en webbsida:
<BODY BGCOLOR=”red” TEXT=”blue” LINK=”green”>
Du har säkert märkt att färgen på länkar du redan besökt har ändrat sin färg efter besöket? Det ska vi också påverka. Vissa länkar vill man inte ändra färg på efter att man klickat på dem. Till ex. om du har en meny på din webbsida kanske du vill att länkfärgen förblir detsamma oavsett om man klickat på dem eller inte.
Koden för röd bakgrund, blå text och alltid gröna länkar blir:
<BODY BGCOLOR=”red” TEXT=”blue” LINK=”green” VLINK=”green”>
Självklart kunde vi ange vilken färg som helst i VLINK=” “. Denna egenskap anger färgen på besökta länkar på din webbsida.
Notering: Färgen man anger behöver inte anges som jag gjort hittills (red, green, blue). Man kan ange färgerna i hexadecimalform: #ffffff.
Du har säkert sätt det tidigare. Det som är viktigt just nu är vetskap att det kvittar vilken metod du använder för att ange färgen på dina element i dokumentet. Dock måste jag påpeka att hexadecimalform ger större urval av färgerna.
Hexadecimalformen består av tecknet ”#” följd med 6 hexadecimala siffror (tal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f).
Varje sifferkombination av hexadecimala tal motsvarar en viss färg.
Föredrar du första varianten är det bra att veta vilka färger som kan anges. Det är enbart 16 standard Windows färger: Black, white, green, blue, yellow, magenta, cyan, purple, gray, lime, maroon, navy, olive, silver, and teal.
För att sammanfatta BODY-märket har jag samlat de viktigaste attribut kopplade till det:
|
Attribut:
|
Exempel:
|
|
Bgcolor
|
<body bgcolor=”green”>
|
|
Text
|
<body text=”green”>
|
|
Link
|
<body link=”green”>
|
|
Vlink
|
<body vlink=”green”>
|
|
background
|
<body background=”bild.gif”>
|
Du ser att i tabellen finns det ett attribut som jag inte nämnt hittills: BACKGROUND. Det används ifall man vill ha en bild i bakgrunden istället för en vanlig färg.
Tänk på att genvägen till bilden måste vara exakt. En annan sak är bildstorleken. Man ska se till att ha små bilder (i storlek) annars kommer din webbsida att laddas långsamt för dina besökare.
Andra bloggar om: it, html, server
Written by admin on augusti 15th, 2007 with no comments.
Read more articles on HTML grunder.
I vanliga ordbehandlingsprogram kan man formge texten med färger, teckensnitt och olika stilar. På liknande sätt gör man det även i hemsideprogram ( FrontPage o s v).
En viktig sak man ska tänka på vid val av teckensnitt är faktum att man är begränsad till några teckensnitt. Trots stort urval av teckensnitt du har bör man hålla sig till standard teckensnitt av en enkel anledning: inte alla användare har det teckensnitt du tänkt dig.
Resultatet blir det att din webbsida inte visas som du tänkt dig för dina besökare.
Håll dig till:
Times New Roman, Verdana, Arial, Tahoma och Helvetica.
Andra bloggar om: html, it, server
Written by admin on juli 26th, 2007 with no comments.
Read more articles on HTML grunder.
Ofta brukar man dela in texten på en webbsida. Exempelvis har man en titel, en sammanfattning i början och brödtext i resten av webbsidan.
I HTML kan man använda sig av fördefinierade rubriker för olika ändamål. ”Headings” är engelska namnet för rubriker man använder sig av i HTML-dokument.
Elementet med vilket man identifierar rubriker är H. Märket för att definiera en rubrik börjar med elementet H följd med en av 6 tal: 1, 2, 3, 4, 5, 6.
Största rubrik börjar med <H1> och slutar med </H1>. Minsta rubrik börjar med <H6> och slutar med </H6>.
Här kommer alla möjliga rubriker:
<H1> Störst text < /H1>
<H2> Större text </H2>
<H3> Stor text </H3>
<H4> Normal </H4>
<H5> Mindre </H5>
<H6> Minst </H6>
Rubrikmärket har också sina egna attribut med vilka man ändrar egenskaper för texten som följer. Här kommer det mest använda attribut för rubriker:
|
Attribut:
|
Beskrivning:
|
Exempel:
|
|
align
|
Justering av rubriken:
left, center, right, justify
|
<h1 align=”center”>
|
Exempelvis:
<H1 align=”center”> Störst text </H1>
kommer att justera texten på mitten av din webbsida.
Andra bloggar om: IT, html, server
Written by admin on juni 12th, 2007 with no comments.
Read more articles on HTML grunder.
Stycken
En webbläsare (Internet Explorer exempelvis) kommer att visa texten på skärmen efter fönstrets bredd. Ändrar du fönsterstorleken kommer texten att visas lite annorlunda p.g.a. raderna bryts på olika ställen beroende på fönstrets bredd.
Ibland är det en fördel men det händer att man vill ha fasta radbrytningar och då kan man använda sig av märket <P>.
Effekten man får med ett nytt stycke är den du ser nu när du läser den här boken. Har du märkt att jag delar in min text i stycken med högst 5-6 rader?
Det gör jag för lättare läsning och trevligare utseende. Man tröttnar lätt på texter utan radbrytningar.
Det vanligaste attribut för stycken är align.
<P align=”center”> text är centrerad </P>
OBS: man kan utesluta </P> för stycken och några få märken till.
Radbrytning
I vissa fall har man ett behov av en ny rad inom samma stycke. Självklart finns det ett märke även för det. Det heter <BR>.
<br> representerar en ny rad.
<p> representerar ett nytt stycke .
Egentligen är <p> samma som två <br>.
Du kan skriva <br><br> istället för <p>.
Fet- och kursivstil
Märket för att göra texten i fetstil börjar med <B> och slutar med </B>.
Märket för kursivstil börjar med <I> och slutar med </I>.
Exempel:
<B> fetstil kommer här </B>
<I> kursivstil följer efter </I>
Andra bloggar om: it, html, server
Written by admin on maj 11th, 2007 with no comments.
Read more articles on HTML grunder.
« Older articles
No newer articles
