index body länkar visited div-taggen class hover dreamweaver flash gratis templates Böcker om stylesheets index länkar a href img-taggen alt-taggen Fonter Storlek Färg Body-tagg Resultat tabeller td-taggen koden bordercolor colspan rowspan bgcolor width cellspacing Distans Bild i table Tabellkod Bilden i mitten valign Frågesport tabeller Bakgrund Border-tagg Border-kod Klart Frågesport bilder Bodytaggen Photoshop Table index ftp ftp smartftp username port21 connect framme upload lokal markera drag&drop gratis hemsida billiga webbhotell inkomster affiliate dating e-butik spel webbhotell Besokare DOC type title-taggen description keywords länkbyten verktyg sökmotorer forum gratis annons validera sidan andra tips BMW M3 ColinMcRae CombatFlightSim Kontorsprogram Forum Nätverk Onlinespel Poker Antivirus Böcker Drivrutiner Forum Möss Nätverk
Här har vi använt lite olika egenskaper för cellerna. Vi har sagt att bakgrunden i menyn till vänster skall vara grå när det går en länk i cellen och att det skall vara en liten linje mellan länkarna med kommandot .menyleft a{background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; color:#0000FF; display:block; border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc; color:#000000;} Kommandot color:#000000; talar om för webbläsaren att bokstäverna i länken skall vara svarta. Linjen mellan länkarna får du fram med border-top och border-bottom. För att cellen till vänster skall följa detta kommando har vi i td taggen skrivit class="menyleft" så här <td class="menyleft"> . I detta avsnitt som du läser här har vi sagt att länkarna skall vara svarta, när du hovrar över länkarna skall du få en grå bakgrund, att länken skall bli blå och att bakgrunden från början skall vara vit med kommandona .content {background-color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; color:#000000}
.content a:link{background-color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; color:#000000}
.content a:hover{background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; color:#0000FF}
Koden till denna sida är alltså <!--start av kod--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>exempel pa menyer</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet"/>
</head><body><table><tr><td class="meny1"><a href="#">Hem</a></td><td class="meny1"><a href="#">sida B</a></td><td class="meny1"><a href="#">sida C</a></td><td class="meny1"><a href="#">sida D</a></td><td class="meny1"><a href="#">sida E </a>
</td><td class="meny1"><a href="#">sida F </a></td class="meny1">
</tr>
<tr>
<td class="menyleft"><a href="http://www.gbghtml.se/stylesheets/index.php">index </a>
<a href="http://www.gbghtml.se/stylesheets/body.php">body </a>
<a href="http://www.gbghtml.se/stylesheets/links.php">länkar</a>
<a href="http://www.gbghtml.se/stylesheets/visited.php">visited</a>
<a href="http://www.gbghtml.se/stylesheets/div.php">div-taggen</a>
<a href="http://www.gbghtml.se/stylesheets/selektor.php">class</a>
<a href="http://www.gbghtml.se/stylesheets/hoover.php">hover</a>
<a href="http://www.gbghtml.se/stylesheets/dreamweaver.php">dreamweaver</a>
<a href="http://www.gbghtml.se/stylesheets/flash.php">flash</a>
<a href="http://www.gbghtml.se/stylesheets/templates.php">gratis templates</a>
<a href="http://www.drivrutiner.net/drivrutiner/books/html.php">Böcker om stylesheets</a>
<a href="http://www.gbghtml.se/links/index.php">index </a>
<a href="http://www.gbghtml.se/links/href.php">a href </a>
<a href="http://www.gbghtml.se/links/img-taggen.php">img-taggen</a>
<a href="http://www.gbghtml.se/links/alt-taggen.php">alt-taggen</a>
<a href="http://www.gbghtml.se/links/font-size.php">Fonter</a>
<a href="http://www.gbghtml.se/links/font-size.php">Storlek</a>
<a href="http://www.gbghtml.se/links/font-color.php">Färg</a>
<a href="http://www.gbghtml.se/links/body-tagg.php">Body-tagg</a>
<a href="http://www.gbghtml.se/links/resultat.php">Resultat</a>
<a href="http://www.gbghtml.se/links/background.php">Bakgrund</a>
<a href="http://www.gbghtml.se/links/border-tagg.php">Border-tagg</a>
<a href="http://www.gbghtml.se/links/border-kod.php">Border-kod</a>
<a href="http://www.gbghtml.se/links/finish.php">Klart</a>
<a href="http://www.gbghtml.se/links/fragesport.php">Frågesport</a>
<a href="http://www.gbghtml.se/bild/index.php">bilder </a>
<a href="http://www.gbghtml.se/bild/body.php">Bodytaggen </a>
<a href="http://www.gbghtml.se/bild/photoshop.php">Photoshop</a>
<a href="http://www.gbghtml.se/bild/table.php">Table</a>
<a href="http://www.gbghtml.se/ftp/index.php">index ftp</a>
<a href="http://www.gbghtml.se/ftp/ftp.php">ftp</a>
<a href="http://www.gbghtml.se/ftp/smartftp.php">smartftp</a>
<a href="http://www.gbghtml.se/ftp/username.php">username</a>
<a href="http://www.gbghtml.se/ftp/port21.php">port21</a>
<a href="http://www.gbghtml.se/ftp/connect.php">connect</a>
<a href="http://www.gbghtml.se/ftp/framme.php">framme</a>
<a href="http://www.gbghtml.se/ftp/upload.php">upload</a>
<a href="http://www.gbghtml.se/ftp/lokal.php">lokal</a>
<a href="http://www.gbghtml.se/ftp/markera.php">markera</a>
<a href="http://www.gbghtml.se/ftp/drag.php">drag&drop</a>
<a href="http://www.gbghtml.se/ftp/gratis.php">gratis hemsida</a>
<a href="http://www.gbghtml.se/ftp/billiga.php">billiga webbhotell</a>
<a href="http://www.drivrutiner.net/program/bil/bmw_m3_challenge.php">BMW M3</a> <a href="http://www.drivrutiner.net/program/bil/spel.php">ColinMcRae</a> <a href="http://www.drivrutiner.net/program/flyg/cfs.php">CombatFlightSim </a> <a href="http://www.drivrutiner.net/program/kontor/index.php">Kontorsprogram</a> <a href="http://www.gbghtml.se/seo/forum.php">Forum </a> <a href="http://www.drivrutiner.net/drivrutiner/dlink.php">Nätverk </a> <a href="http://www.drivrutiner.net/program/online/spel.php" title="gratis spel pa natet">Onlinespel</a> <a href="http://www.drivrutiner.net/program/online/poker.php">Poker </a><a href="http://www.drivrutiner.net/drivrutiner/antivirus.php">Antivirus </a> <a href="http://www.drivrutiner.net/drivrutiner/books/">Böcker </a> <a href="http://www.drivrutiner.net/drivrutiner/drivrutiner.php">Drivrutiner</a> <a href="http://www.gbghtml.se/seo/forum.php">Forum </a> <a href="http://www.drivrutiner.net/drivrutiner/logitech/mus.php">Möss </a> <a href="http://www.drivrutiner.net/drivrutiner/dlink.php">Nätverk </a></td>
<td colspan="5"><p>Koden till denna sida är <!--start av kod--> o.s.v. här kan du själv lägga in länkar, bilder och text. Det där med länkar gick vi igenom i början av html skolan pa denna sidan>>> och bilder här>>><!--slut på kod--> </p>
</td>
</tr></table></body>
</html> <!--slut på kod--> Enklast för dig är helt enkelt att kopiera allt som står innanför <!--start av kod--> och <!--slut på kod-->. klistra in alltihop i en notepad och spara som html. Men glöm inte stylesheet för att få effekten på länkarna.
Vi har även lagt upp hela stylesheeten och sidan här>>> i en zipfil som du packar upp och lägger i samma mapp på din webbserver. Du får själv ändra länkarna och gärna texten till vad du vill. I denna stylesheet ligger ett par extra id du kan använda som <td id="annorlunda2"> <td id="annorlunda3"> <td id="annorlunda4"> och till annorlunda12. Som vi skrev tidigare kan du bara använda id på ett ställe i dokumentet så skall du använda detta på flera ställen är du alltså tvungen att göra om id tecknet # till class tecknet . istället. Exempelvis blir #annorlunda1 till .annorlunda1 om du skall använda class.
Vi skulle vara hemskt tacksamma om vi får en länk tillbaka till htmlskolan typ <!--start av kod--> <a href="http://www.gbghtml.se"><img src="http://www.webbgbg.se/bilder/html-skolan.gif" width="468" height="60" alt="html skolan" border="0" /></a><!--slut på kod--> som blir som nedanstående banner
