Introduktion Rubriker Teckenstorlek Fontstilar Teckensnitt Textjustering Listor Vågräta linjer Tabeller Länkar Bilder

INTRODUKTION

Min första webbsida handlar lite om hur texter, rubriker, fonter, bilder, länkar m.m. kan se ut på hemsidor.
Denna sida är gjord lika mycket för min egen del som för någon annan nybörjare på HTML !

RUBRIKER

Här ser ni skillnaden på dom 6 olika rubrikformaten som finns färdiga i HTML.
De tre första är större än textens grundstorlek, de tre sista mindre.
I formaten ingår radbrytning automatiskt.

Rubrikformat 1

Rubrikformat 2

Rubrikformat 3

Textens grundstorlek

Rubrikformat 4

Rubrikformat 5
Rubrikformat 6

TECKENSTORLEK

Om man vill ha tecken i motsvarande storlek som rubrikerna, men utan automatisk radbrytning
används med fördel FONT SIZE. Bra att använda när man anpassar text till grafik t.ex.
Teckenstorleken finns på en skala från 1 - 7. Här har jag dock lagt in manuell radbrytning.
Teckenstorlek 7
Teckenstorlek 6
Teckenstorlek 5
Teckenstorlek 4
Teckenstorlek 3
Teckenstorlek 2
Teckenstorlek 1

FONTSTILAR

För att visa lite mer att FONT SIZE kan vara användbart istället för dom färdiga rubrikformaten,
visar jag ett flexibelt bruk av teckenstorlekar...

F L E X I B E L T

1 2 3 4 5 6 7 6 5 4 3 2 1

TECKENSNITT OCH STILAR

För att visa text med ett bestämt teckensnitt används parametern FACE
tillsammans med koden <FONT>. För att detta skall fungera så måste
det angivna teckensnittet finnas installerat på besökarens dator.
Det går då att i koden ange flera alternativa teckensnitt som skrivs
i prioriteringsordning. (t.ex. Arial, Helvetica, Times, Courier)
Teckensnitt valt med koden FONT

Förutom FONT FACE så finns det även några färdiga stilar där texten anges med inneslutande koder:
Skrivmaskinsstil anges med koden <TT>...</TT>

Understruken text anges med koden <U>..</U>

Genomstruken text anges med koden <S>..</S>

Större teckenstorlek än grundstorleken ordnas av koden <BIG>..</bIG>

Liten stil ordnas av koden <SMALL>..</SMALL>

Upphöjd stil respektive nedsänkt stil

ordnas genom koderna: <SUP>..</SUP> och <SUB>..</SUB>

Vill man att texten skall se ut exakt som den är angiven, dvs texten får inte brytas om.
Förformaterad text ordnas med koden: <PRE>...</PRE>

Se exempel när man vill ordna text i spalter: 

Namn                Elbrevsadress
Pelle Persson       persson@hotmail.com
Kalle Karlsson      karlsson@hotmail.com

Om inte PRE används ser det ut så här:

Namn Elbrevsadress
Pelle Persson persson@hotmail.com
Kalle Karlsson karlsson@hotmail.com

När man väl lärt sig HTML så är det smidigare att använda sig av tabeller.

TEXTJUSTERING

Att justera text används mycket av ordbehandlingsprogrammen och kan i viss form även användas i HTML-dokument. Justeringen görs oftast med parametern ALIGN i kombination med koden <P>

Vänsterjusterad text

Högerjusterad text

Centrerad text

Det går även att centrera text med koden <CENTER>...</CENTER>

Centrerad text

LISTOR

Då man inte kan använda sig av tabbar eller en följd av blanksteg i HTML-dokument
finns istället möjligheten att göra indrag i texten genom att använda sig av listor.
Listor inleds och avslutas med koder som anger typen av lista.

Följande koder används:
<UL>...</UL> (punktlista - onumrerad)
<LI> (anger dom enskilda punkterna)
Listorna kan även innehålla underlistor och detta ger en bra hierarkisk struktur på listan.

Se ex.

VÅGRÄTA LINJER

Den vågräta linjen finns fördefinerad i HTML och är väldigt flexibel.
Linjen ger vanligvis ett lika bra resultat oberoende av webbläsare!
Man kan använda parametrar till koden för att ange bredd, tjocklek, justering och skuggeffekt.
Om du tänkt på det så har jag använt mig av linjer för att avgränsa dom olika styckena.

Tre olika vågräta linjer har angetts med positionskoden: <HR>

Linje utan restriktioner

Linje som är högerjusterad, skuggad och har storleken 50%

Linjen är centrerad, utan skugga och har storlek 30%

TABELLER

Tabeller kan användas på flera olika sätt, t.ex. för att simulera tabbar, visa listor, ordna text i spalter m.m.
Området som skall ingå i tabellen finns innanför koden: <TABLE...>...</TABLE>.

Favoritlag och Webbadress
A I K www.aik.se
NH 90 www.nh90.com

LÄNKAR

En mycket använd del av HTML är möjligheten till att göra länkar till egna dokument på hemsidan,
andra dokument på andras hemsidor, eller andra sajter m.m.
I stycket ovanför om tabeller är webbadresserna gjorda som länkar och är klickbara för att komma till
deras hemsidor.

Länkar använder sig av koden <A>

I början av koden anges platsen som länken leder till och i slutet av koden anges texten som är klickbar.

<A HREF="http://www.nh90.com">NH90 - Nyköpings stolthet</A>
NH90 - Nyköpings stolthet

BILDER

Bilder på webben är mest sparade i formataet JPG och GIF.
GIF-formatet hanterar endast 256 färger, medans JPG hanterar upp till
16,7 miljoner färger.

Exempel på att använda bilder med koden <IMG SRC...>:
Bilderna kan även placeras olika på skärmen.

Parametern ALIGN kan inte bara ange bildens justering i sidled utan också
hur texten ska placeras i förhållande till bilden.

Här börjar texten

Här börjar texten

Här börjar texten

Bilder kan även användas som länkar och kan då klickas på för att gå vidare.
När bilden är en länk visas en färgad ram runt bilden (bra att veta när man surfar).

klicka här