byt lankar med html-skolan

Web gbghtml.se
index body länkar visited div-taggen class hover menyer dreamweaver flash gratis templates Böcker om stylesheets

Inspira är kursmaterialet som är optimerat för lärarledd undervisning. Materialet rekommenderas på två- till tredagarskurser, ibland fler dagar beroende på elevernas förkunskaper.

Inspira Grunder riktar sig till den som behöver lära sig ett program från grunden.

Böckerna bygger på en aktiv inlärningsmetod, även känd som Docendopedagogiken. Kunskapen byggs upp med tre delmoment: Läs - Öva - Rätta. Teori varvas med övningar och i slutet av varje kapitel finns det lösningsförslag till alla övningar.
HTML-programmering Inspira Grunder

Teori varvas med övningar och i slutet av varje kapitel finns det lösningsförslag till alla övningar.

billigt webbhotell
One.com, sveriges mest prisvarda webbhotell just nu

För 144 kronor per år får du 3 Gbytes plats, fri trafik, en kontrollpanel med vilken du ordnar en blogg på 3 klick, obegränsat antal emailkonton, obegränsat med mySQL databaser för forum, CMS, bloggar o.s.v. Obegränsad trafik och hemsideprogram där du har ett tusental snygga mallar som ordnar din hemsida på ett par minuter. Det enda du behöver göra är att skriva.

 

 

 

 


hover, ett användbart kommando för länkar i ditt stylesheet.

Du kan ganska enkelt lägga in kommandot hover när du vill visa besökaren att den kör muspekaren över en länk. Här kan du använda både färg och bilder. Här har vi lagt in en fusklänk före varje textavsnitt som ser ut så här <a href="#">och vi slutar alltså länken med </a>. Här börjar du med att efter starten för kommandot, här använder vi #ettnamn, skriva ett a direkt efter kommandot. Som #ettnamnpakommandot a{här kommer kommandon för hur cellen eller den länkade texten ser ut innan någon för en muspekare över}. För att sedan få fram effekten när muspekaren förs över länken skrivs a:hover så här #ettnamnpakommadot a:hover {här kommer kommandon för hur cellen eller den länkade texten ser ut efter någon för en muspekare över}. Att använda denna typ av stylesheets är väldigt användbart när det gäller menyer. Om du ändrar bakgrundsfärg eller texten på färgen när besökaren för muspekaren över länken ser besökaren att här händer någonting. Vi har lagt en mall med kod du kan titta på här>>>

Några exempel på hur du kan skifta färg både i bakgrund och text med hover kommandot.

här har vi använt <!--start för kod-->#hoover1 a{ background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }<!--slut för kod--> i css filen och id="hover1" i td taggen
För att få fram hoover effekten har vi i nästa steg använt <!--start för kod-->#hoover1 a:hover{ background-color:#0000FF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#FF0000; font-size:large }<!--slut för kod--> i vår css fil som ger effekten när du för muspekaren över området som är länkat.
Och i denna <!--start för kod-->#hoover5 a{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i vår css fil samt id="hoover5" i vår td tagg till denna cellen.
För att få fram effekten när du för muspekaren över länken har vi använt <!--start för kod-->#hoover5 a:hover{ background-color:#FFFFFF; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> i css filen som ändrar bakgrundsfärgen till vit
Här har vi använt <!--start för kod-->#hoover7 a{ background-color:#000000; font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}<!--slut för kod--> i vår css fil och id="hoover7" i td taggen
För att sedan ändra bakgrundsfärg och färgen på texten har vi skrivit <!--start för kod-->#hoover7 a:hover{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> efter i vår css fil. Lägg märke till a efter hoover7 och a:hoover i nästa kommando för att få fram effekten.
I vår CSS fil har vi alltså skrivit <!--start för kod-->#hoover1 a{ background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }
#hoover1 a:hover{ background-color:#0000FF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#FF0000; font-size:large }<!--slut för kod--> för den första med förändring av bakgrundsbild och färg på text.
Vi har skrivit <!--start för kod-->#hoover5 a{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}
#hoover5 a:hover{ background-color:#FFFFFF; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> För nästa där vi förändrar bakgrundsfärg från grått till vitt. Och <!--start för kod-->#hoover7 a{ background-color:#000000; font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}
#hoover7 a:hover{ background-color:#CCCCCC; font:Arial, Helvetica, sans-serif; color:#000000; font-size:large;}<!--slut för kod--> Där vi ändrar från svart till vitt på bakgrundsfärg och tvärtom för text.

Som du ser i vårt första kommando kan du även ändra bakgrundsbild med hover

Det ordnar du med <!--start för kod-->#hoover9 a{background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/bild_som_bakgrund.jpg); background-repeat:no-repeat; font:Arial, Helvetica, sans-serif; color:#000000; }<!--slut för kod--> i css filen
För att sedan få fram effekten när du för muspekaren över länken skriver du <!--start för kod-->#hoover9 a:hover{background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/bakgrundsbild.jpg); background-repeat:no-repeat; font:Arial, Helvetica, sans-serif; color:#FFFFFF; }<!--slut för kod-->efter första kommandot
Om vi använder en bild och repeterar denna med en lite annorlunda bakgrund får man denna effekt <!--start för kod-->#hoover11 a{background-color:#FFFFFF; background-image:url(http://www.webbgbg.se/webbdesign/blue/rund.gif); font:Arial, Helvetica, sans-serif; color:#000000; font-size:large }<!--slut för kod-->

För att sedan få fram effekten när du för muspekaren över har vi efter det första kommandot lagt en #hoover11 a:hover sä här<!--start för kod-->#hoover11 a:hover{background-color:#000000; background-image:url(http://www.webbgbg.se/webbdesign/blue/bla_rund.gif); font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large }<!--slut kod-->

Vi har lagt en mall med kod du kan titta på här>>>

användbara länkar där du kan läsa mer

cssdrive.com
tips på stylesheets med exempel på slutliga resultatet
cssimport.com
En sida som ger inspiration
alistapart.com
Här hittar du mycket att sätta händerna i
codeproject.com
har många sidor med stylesheets och exempel.