Steg 1 - Lite historia
HTML (HyperText Mark-up Language) "föddes" av Tim Berners-Lee runt 94-95 (har egentligen funnits sen 90, men Tim utvecklade det då han jobbade på CERN 1989) då han lanserade versioner som HTML+ och HTML 3.0. Den verkliga uppmaningen för världens befolkning kom egentligen inte förrän World Wide Web Consortium (W3C) lanserade version 3.2.
97 kom HTML 4.0 som börjar bli mer o mer av en standard i de flesta webläsarna runt om i världen, även fast inte bl.a. IE och Netscape alltid vill utnyttja den..
Steg 2 - HTMLs uppbyggnad
Ja, HTML bygger, precis som många andra webtolkningar, på att du anger olika kommandon eller i detta fallet "tags" (som du då anger med < och >).
HTML, enligt mig, är ett av de lättare språken att förstå. Det behövs inte mycket till erfarenhet att kunna det, bara lite tid...
Nästan alla taggar avslutas med </> som t.ex:
<HTML> och </HTML>
<I> och </I>
Till att börja med så ska vi gå igenom några av de vanligaste taggarna som används, vilket är <HTML>, <BODY> och <HEAD> som används av olika skäl.
Tips: Det är oftast en fördel att använda STORA bokstäver inom taggarna för att du lätt ska se vart de är nu du ändrar. Vissa idiotiska tolkningar måste t.o.m. använda sig av stora bokstäver...
<HTML>-taggen:
<HTML> används för att visa när ditt HTML-dokument ska börja. Här smusslar du in alla din kod..
<HEAD>-taggen:
<HEAD> är den som brukar användas för att du ska sätta i grundegenskaperna för ditt dokument. Här kan du sätta in egenskaper som stil, titel m.m.
<BODY>-taggen:
Här hamnar ditt arbete. Tabeller, text, färger, ja i stort sett allt som ska visas.
Vi gör nu ett litet test och ser hur det blir
Code: Select all
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Nåväl, vi går vidare med lite taggar som du kan ha nytta av.
Steg 3 - En liten lätt start
När du t.ex. skriver ett Word-dokument så har du ju massvis med möjligheter att få din text fet, kursiv, understruken, färgad etc.
Samma sak gäller i HTML.
Eftersom engelska är det mest utspridda språket i världen så är det även gjort för att HTML ska använda det.
Fet text får vi genom <B> och avslutningen </B> (B som i 'bold').
Kursiv text får vi genom <I> och avslutningen </I> (I som i 'italic).
Understruken text får vi genom <U> och avslutningen </U> (U som i 'underlined').
Code: Select all
<B>Mega menyn</B>
<I>Lutande tornet i Pisa</I>
<U>Viktigt!</U>
Självklart kan du sätta flera taggar tillsammans om du t.ex. vill ha en fet och kursiv text så blir det <B><I>Text</I></B> osv.
Nu går vi vidare med <FONT>-taggen som kan innehålla mer info inuti sig.
Font (på sv. typsnitt) ändrar på texten som du skriver, och måste då kunna ändra dess färg, storlek, typsnitt etc.
Det gör vi enkelt genom att lägga till det som vi vill ha i <FONT>-taggen. T.ex.:
Code: Select all
<FONT COLOR="red">Ger en röd färg</FONT>
<FONT SIZE="9">Ger storlek 9 ([i]ej i pixlar![/i]</FONT>
<FONT CLASS="verdana, arial">Visar typsnittet verdana i första hand, sen arial</FONT>
Nåväl, då kanske du tänker dig. 'Hur gör man alla dessa profisionella sidor då med all glitter å glamour?'.
Ja, till att börja med så måste du låta allt få sin tid. Gör en skiss först, koda sen.
Vi fortsätter nu med taggarna <A>, <IMG> och <>
<A>-taggen:
A (anchor) gör så du kan länka till olika sidor. I detta fallet räcker det inte med bara <A> utan du måste lägga till HREF (Hypertext Reference). Skulle kunna se ut såhär:
Code: Select all
<A HREF="http://www.com">www.com</A>
'Maila mig!' har du säkert sett någon gång. Då räcker det inte att sätta in din mail utan du måste knåpa in mailto: efter HREF. Såhär:
Code: Select all
<A HREF="mailto:buy_toys@gunsrus.com">Maila mig!</A>
Code: Select all
<A NAME="top">
Code: Select all
<A HREF="minsida#top.html">Gå till toppen</A>
Ja, denna taggen kanske du kan lista ut själv att det är en tag för att infoga en bild. Den behöver du aldrig heller avsluta med </IMG> som kan vara en lättnad. Här kan du knåpa in saker som storlek, ram (border) m.m.
För att välja bild så måste du ange vilken address din bild ligger på. Det gör du genom att använda SRC (source) och sen din address:
Code: Select all
<IMG SRC="http://www.uglypeople.com/lither.gif">
Code: Select all
<IMG SRC="lither_aer_soet.jpg">
Code: Select all
<IMG SRC="bild1.gif" BORDER="0">
Ändringen av storleken funkar inte genom att lägga till SIZE utan du måste ange höjd och bredd.
Code: Select all
<IMG SRC="jag_snygg32.jpg" HEIGHT="100" WIDTH="70">
Code: Select all
<IMG SRC="kusin_rofl.jpg" ALT="här e min loliga kusin! ROFL!!!!">
Code: Select all
<IMG SRC="bild.gif" ALIGN="middle">
Kom ihåg! Internet tar inte ansvaret att visa .bmp, .tga osv. utan använd .jpg och .gif i första hand. .png kan komma sedan (däremot så stödjer bl.a. inte IE .png-visning).
<HR>-taggen:
<HR> (Horizontal Reference) gör en fin liten linje som du kan dela upp stycken med. Denna kan du ändra färg, storlek på å lite annat smått o gott.
Code: Select all
<HR COLOR="#CCCCCC" WIDTH="30">
Steg 4 - Hexkoder
Färggivning #1 om du inte vill skriva saker som 'red', 'black' etc.
Här använder du dig av en sexsiffrig kombination av bokstäver och siffor (ej å, ä, ö) och börjar det hela med en # (fyrkant).
#FFFFFF - Blir vit
#000000 - Blir svart
#808080 - Blir grå
#FF0000 - Blir röd
osv.
Här hittar du alla blandningar
Nästa gång..
När jag återkommer så kommer jag gå igenom nya taggar, bl.a. <TABLE>, <UL>/<LI> och hur du ändrar bakrund.