HTML - Finesser

Kommentar 

Favoritikon - favicon.ico 

Marquee - rullande text 

Sidövergångar  

Ljud på sidan  

Kommentar

Kommentarer är en finurlig funktion att använda sig av när man kodar i HTML eftersom kommentaren fungerar som en parentes i koden. Det som skrivs i kommentaren kommer inte att synas på själva sidan.

I själva KODEN syns däremot kommentaren och det är det som är själva vitsen. Med hjälp av kommentarer kan du strukturera upp din sida så att det blir lättare att hitta i koden. Om du högerklickar på den här sidan och väljer "Visa källa" kommer du att se att koden vimlar av kommentarer...

Så här skriver man en kommentar:

<!-- DETTA ÄR EN KOMMENTAR -->

Favoritikon - favicon.ico

När du surfat runt på nätet har du säkert lagt märke till att vissa sidor har en egen ikon som syns i adressfältet och i "favoriter" när du bokmärkt sidan. Skulle du också vilja ha en sån? Det är inte alls svårt!

Från början var det enbart Internet Explorer som kunde visa den här finessen men nu fungerar den i de vanligaste nya webläsarna. Men de visas på lite olika sätt i olika webläsare.

Netscape visar favoritikoner från version 7.0, nyare versioner av Opera och Mozilla också. I Internet Explorer visas ikonen bara om du sparat sidan som Favorit - men Netscape, Mozilla och Opera visar ikonen även om du inte bokmärkt sidan!

Hur man gör? Följ de enkla stegen nedan!




1.Skapa Ikonen

Ikonen ska vara en kvadratisk bild - skapa den i ditt bildprogram.

- eller utgå från en bild du redan har. Men ju mindre orginalbilden är - 32x32 eller 16x16 (pixlar) - desto bättre blir resultatet.

- väljer du 32x32 kommer ikonen att se snygg ut om man skulle få för sig att spara den på t.ex. skrivbordet - men den kommer att komprimeras i adressfältet. Testa!

- väljer du 16x16 ser du precis hur den ser ut i adressfältet men den blir inte lika snygg i Windows...


Spara bilden i lämpligt filformat ( t.ex: bmp eller gif ) på din hårddisk. Kom ihåg i vilken mapp du sparar bilden.


Öppna nu bilden i ett program som kan konvertera den till en ikon med filtillägget ico. Ett bra sånt gratisprogram är IrfanView. Eventuellt måste du ändra storleken till 32x32 eller 16x16 pixlar. Välj "Spara som". Döp filen till: favicon och spara den i formatet: ico.

Här kan du ladda hem IrfanView

På den här sidan kan du enkelt göra om en bild till en favoritikon: Pics FavIcon

Du kan också...

• Skapa ikonen direkt i ett program speciellt avsett för att skapa ikoner. Kom ihåg att ikonen ska vara 32x32 eller 16x16 (pixlar).

Någon av de här kanske?

PixelToolBox Gratis!
Liquid Icon XP Gratis!
Icon Cool Editor Pröva gratis! Registrering c:a $ 20
Icon Forge Pröva gratis! Registrering c:a $ 38

De här programmen stöder även funktionen att importera en bild du redan har och "göra om" den till en ikon.




2.Publicera och länka till ikonen

Favoritikonen, som nu heter favicon.ico - ska placeras i rotmappen på din sidas server. Alltså i samma mapp som din startsida (oftast index.html). Ladda upp den med ditt FTP-program.

För att ikonen ska synas måste du lägga in följande kod på din websida:

<link rel="shortcut icon" href="http://www.ninetnet.com/favicon.ico">.

Koden ska ligga i sidans huvud mellan <head> och </head> .

Byt ut adressen till NinetNet mot adressen till din egen sida. Såklart! Spara filen och skicka iväg den till din webplats server.

Frameset

Har du en sida byggd med ramar ska koden med länken till ikonen skrivas in på "förstasidan" d.v.s. sidan med "framesetet" Fortfarande i sidans huvud mellan <head> och </head>. Ikonen kommer att visas i adressfältet oberoende av vilken undersida som bläddras fram.

Fler ikoner

Om du vill skapa olika ikoner för olika sidor på din webplats ska du namnge dom till något annat än "favicon" t.ex "minikon.ico".

Placera helst ikonen i samma mapp som websidan du vill att den ska höra till. Sedan länkar du till ikonen från sidan på det här sättet:

<link rel="shortcut icon" href="minikon.ico">

- eller med HELA sökvägen om ikonen finns i en annan mapp:

<link rel="shortcuticon" href="http://www.minsida.com/mapp/minikon.ico">.

Båda metoderna fungerar med senare versioner av Internet Explorer, Netscape, Mozilla och Opera.

OBS!
Det här med favoritikoner fungerar som sagt lite olika i olika webläsare. Det SKA räcka om du skriver in koden på din webplats startsida för att den även ska fungera på alla undersidor. Det gör det i de senaste versionerna av Internet Explorer. Vill du vara på säkra sidan kan du skriva in koden på undersidorna också. I Internet Explorer kommer favoritikonen bara att synas för dom som sparar just DEN sidan som bokmärke eller favorit. Netscape, Opera och Mozilla visar ikonen oavsett.




3.Testa din Favoritikon

Nu är det dags att testa om det fungerar. I Internet Explorer kan det vara lite trixigt. Särskilt om du har sparat din sida som favorit eller bokmärke förut. Följ stegen nedan så ska det funka.

Har du INTE sparat din sida som favorit förut kan du hoppa över de två första stegen som följer.

Har du redan sparat din sida som favorit så ta bort den från listan.

Klicka sedan på "Verktyg" och välj: Internet-alternativ. Under fliken "Allmänt" klickar du på: "Rensa tidigare" i rutan "Tidigare". Samt "Ta bortfiler" i rutan "Tillfälliga Internet-filer". Det här kan ta en ganska lång stund (flera minuter) beroende på när mappen rensades senast. Hav tålamod! När det är klart klickar du på OK för att stänga fönstret. Det här rensar webläsarens "cacheminne" d.v.s. de filer som sparats för snabbvisning. Stegen ovan beskriver hur man gör i Internet Explorer.

Stäng din webläsare. Alla fönster!

Anslut till Internet och öppna din webläsare.

Surfa till din sida och spara den som favorit eller bokmärke. Ett fiffigt sätt är att trycka: Ctrl+D.

Sådärja!??




Felsökning

Funkar det inte? Det kan som sagt vara lite trixigt..

Kolla noga att själva ikonen ligger på rätt ställe på din server och att länken på sidan är korrekt skriven.

Om det inte funkar första gången du sparar sidan så ha lite tålamod. Pröva att stänga webläsaren och öppna igen. Ibland funkar det först andra gången man besöker sidan.

Om det fortfarande inte fungerar kan du pröva att upprepa stegen ovan.

Fungerar det i Mozilla Firefox och Netscape? Be nån kompis kolla om det funkar i hans eller hennes webläsare!

Skulle du bli sur och svära och stänga av datorn och gå och lägga dig - är det inte helt fel det heller... Det kan gott hända att din favoritikon dyker upp precis som du har tänkt dig nästa dag när du har startat om datorn.  

Lycka till!


Marquee - rullande text

Med taggen <marquee> kan man infoga t.ex. en text som rullar fram över sidan. Från början fungerade det bara i Internet Explorer. Numer rullar det också i nyare versioner Netscape, Mozilla, Opera. Observera att webläsare som inte hanterar Marquee-taggen inte kommer att visa någonting alls!

Så här kan det se ut:

Marquee - rullande text!

Marquee-taggens utseende kommer att följa den övriga formateringen på sidan, men man kan också ändra utseendet på texten, få den att rulla uppåt och nedåt och till och med infoga rullande bilder.

Infoga marquee

Så här infogar man rullande text:

<marquee>Rullande text!</marquee>

Genom att kombinera taggen <marquee> med CSS förändrar man enkelt utseendet på texten. Nedan följer några exempel.




Exempel 1

Rullande text!

Så här ser det ut i koden:

<span style="color: green"><marquee>Rullande text!</marquee></span>

Det går lika bra att ange färgen med hexadecimal kod..




Exempel 2

Rullande text!

Så här ser det ut i koden:

<span style="color: #003366; font-size: 30px; font-style: italic"><marquee>Rullande text!</marquee></span>




Om du har ändrat radavståndet på din sida med CSS så kommer delar av texten inte att synas om den tar större plats än storleken på radavståndet.

Så här:

Rullande text!

Det kan du åtgärda genom att skapa ett större radavstånd runt din "marquee" med CSS Inlinestyle i en span eller div-tagg. Så här t.ex.:

<span style="line-height: 35px">
<span style="color: #003366; font-size: 30px; font-style: italic"><marquee>Rullande text!</marquee></span>
</span>

Läs mer om hur man formaterar med css under rubriken: CSS - Stilmallar

Marquee - Attribut

Det finns en hel del attribut man kan använda tillsammans med taggen <marquee>.

Bakgrundsfärg - bgcolor

Med attributet bgcolor kan man ge den rullande texten en bakgrundsfärg antingen med en namngiven färg eller hexadecimal kod. Så här ser det ut:

Rullande text!

Så här ser det ut i koden:

<marquee bgcolor="#FFFF99">Rullande text!</marquee>

Riktning - direction

Med attributet direction kan man bestämma åt vilket håll texten ska rulla.

<marquee direction="right">

Rullande text!

 
<marquee direction="down">

Rullande text!

  <marquee direction="up">

Rullande text!

<marquee direction="left">

Default! Används om man särskilt vill ange att texten ska glida åt vänster.

Behavior

<marquee behavior="alternate">

Studsande text!

 

<marquee behavior="slide">
Texten glider in och stannar sedan.

<marquee behavior="scroll">
Default! Används om man särskilt vill ange att texten ska rulla (scrolla).

Hastighet

För att kontrollera hastigheten på texten kan man använda två attribut:

scrollamount Pixlar Lågt värde - texten rör sig långsammare.
scrolldelay Tid i millisekunder Lågt värde - texten rör sig snabbare.



Exempel

<marquee scrollamount="2">Text...</marquee>

Text som rullar långsammare!

 

<marquee scrolldelay="20">Text...</marquee>

Text som rullar snabbare!

 

Fler attribut!

AttributVärde 
loop 1 - infiniteAnger hur många gånger texten ska rulla. Infinite = Default! - oändligt antal gånger.
width % eller Pixlar Bredden på din MARQUEE.
height % eller Pixlar Höjden på din MARQUEE.
hspace % eller Pixlar Anger bredden på höger och vänstermarginalerna.
vspace % eller Pixlar Anger höjden på marginalerna ovanför och under texten.

Bild

Genom att infoga en bild i taggen <marquee> kan du få den att rulla över sidan.

<marquee><img src="bild.gif"></marquee>

 

Ovanstående kod går att kombinera med de andra attributen!