Frenetic - Introduktion till HTML

<html>
<head>
<title> Testdokument </title>
</head>
<body>
Detta är en paragraf. Detta börjar på nästa rad.
Detta är en ny paragraf.
</body>
</html>

Som du kanske märker så har några rader lagts till, med två nya kommandon, och . Om du vill se hur detta dokument kommer att se ut, klicka här.

Observera att stycket () avslutas med sin stängningstagg, samma sak fast med / framför (). Denna teknik används för alla HTML-taggar, utom... (Kommer du ihåg?) -taggen!

För att sammanfatta radbrytningstecken kommer vi fram till att "p" för ett nytt stycke och "br" står för en ny rad. Du kommer få mycket nytta av dessa i framtiden. Då går vi raskt över till nästa steg, färger på texten:

Detta är en paragraf.

Så fort du ska ändra på något som har med typsnitt att göra, använder du dig av , där prickarna står för det du ska ändra. Ovan ändrade vi färgen med hjälp av . #ff0000 är värdet på färgen som ska visas i hexadecimal form. Det är indelat i tre delar, "#rrggbb", där "rr" är rött, "gg" är grönt och "bb" är blått. För att du ska förstå bättre, titta på exemplen nedan:

"#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ff00ff", "#000000", "#ffffff".

Värdet för de olika färgerna är skrivna i hexdecimalt talsystem, alltså kan de anta värden från 00 till ff. Detta ger 256 toner per färg som du sedan kan kombinera med varandra. Du förstår snart att du får ganska många färger att välja mellan. 16 777 216 för att vara mer exakt! Däremot brukar man använda sig av "webbsäkra färger", färger som ser likadana ut i alla webbläsare.

Vi går vidare med typsnitt, nu ska vi ändra på storleken. Som tidigare använder vi oss av , men den här gången lägger vi in värdet SIZE.

Detta är en paragraf.

Om du klickar här får du se resultatet. Som du kanske märker är alla attribut (i detta fall "4") satta inom citationstecken. I HTML behöver du inte göra detta så länge värdet är numeriskt, men jag rekommenderar ändå att du gör detta, återigen för att slippa framtida problem när du konverterar dina dokument till XML eller XHTML.

Nåja, för att återgå till vår text innan vi fördjupar oss alldeles för mycket: Storleken kan du sätta mellan 1-7 och resultatet är enligt följande:

En sista sak vi ska ta upp om typsnitt, är just typsnitten, hur texten ska se ut. I början kan detta verka enkelt, men det finns ett stort problem. Det viktiga är att det typsnitt du skriver in också finns på den dator som ska läsa dokumentet, annars kommer standardtypsnittet (som oftast brukar vara Times New Roman) att visas. Några typsnitt som brukar vara säkra är dock Arial, Times new Roman, Courier, Comic Sans MS och Verdana. Om du vill gardera dig kan du även skriva fler fonter i samma tag. Då visar sidan den font som finns först:

innebär att om inte Verdana finns installerade, kommer sidan att visas med Arial istället osv.

Sammanfattningsvis så kan man kombinera alla dessa tre attribut (size, color, face) i samma -tag. För att visa hur typsnitten fungerar, gör vi om dokumentet lite.

<html>
<head>
<title> Testdokument </title>
</head>
<body>
Verdana 
Arial, storlek 4 
Courier, grön färg 
Comic sans MS, röd färg, storlek 6
</body>
</html>

Det är lika bra vi tar en titt på vad vi har lyckats skapa nu. När du är klar med det, är det dags att titta lite närmare på länkar.