(category) LIST of posts

Tomme menu punkter

#menu {
position:relative;
margin:auto;
width:420px;
}
#menu ul {
display: inline;
}
#menu li {
display: inline;
float: left;
}
#menu li a {
display: block;
width: 105px;
height: 30px;
font-size: 0;
}
#menu li a:link, #menu li a:visited  {
background-color: red;
}
#menu li a:hover, #menu li a:active  {
background-color: yellow;
}
<div id="menu"><ul>
<li><a href="index.html" title="index"> </a></li>
<li><a href="cv.html" title="cv"> </a></li>
<li><a href="musik.html" title="musik"> </a></li>
<li><a href="grafik.html" title="grafik"> </a></li>
</u></div>

.

Billedbaggrund og “you-are-here” funktionalitet

<li><a id="vi_er_her" href="index.html" title="index"> </a></li>
#menu li a:link, #menu li a:visited  {
background-image: url(sti/til/billede.jpg);
background-position: 0px 0px;/*y-akse x-akse*/
}
#menu li a:hover, #menu li a:active  {
background-position: 50px 50px;
}
#menu li a#vi_er_her:link, #menu li a#vi_er_her:visited  {
background-position: 50px 50px;
}

Ul – li – links

xhtml css 
<ul>
<li><a href="#">punkt1</a></li>
<li><a href="#">punkt2</a></li>
<li><a href="#">punkt3</a></li>
<li><a href="#">punkt4</a></li>
</ul>
 
 ul {
background-color: #000000;
padding: 0 8px 0 8px;
display: inline;
background-image: url(slette_02.gif);
}
 
li {
display: inline;
margin: 0 4px 0 4px;
}
 
li a:link, li a:visited {
background-color: #CCCCCC;
color: #666666;
padding: 0 5px 0 5px;
text-decoration: none;
font-weight: bold;
}
 
li a:hover, li a:active {
background-color: #eee;
color: #000000;
}

Puslespil med tags

  • Skriv(eller paste) en lille tekst i en text-editor og gem den med det rigtige ‘filnavn.html’
  • Åbn den nye fil i en browser

En moderne browser vil højst sandsynligt vise teksten – bare uden struktur og uden den formatering du havde bestemt. Dermed kan du ikke få kontrol over din tekst.

  • Pak det hele ind i de rigtige tags-elementer for at få den ønskede og korrekte struktur. Du vil få brug for at pusle-spille mellem føgende elementer – her listet op i en tosset rækkefølge :
  • <p> </p>
  • <title> </title>
  • <em> </em>
  • <img src=”" alt=”" />
  • <head> </head>
  • <br />
  • <h1> </h1>
  • <html> </html>
  • <body> </body>
  • <b> </b>

Hele din tekst skal forvandles til html: en skøn krop, der sidder et godt hoved på.

Kode er tilgængelig for alle

  • Åben en hjemmeside i en hvilken som helst browser

Koden er det tekst-sprog som browseren læser og fortolker, for at kunne vise dig det du ser.

  • Koden ved selvsyn hedder ‘vis kilde’, ‘source’, ‘display source’ eller lignende. Let tilgængelig i menueerne eller ved højreklik.

I virkeligheden er den allerede på din harddisk gennem cache-lageret, som det kan være lidt svært at grave den frem fra igen – men nu, da den er synlig og fremme i en texteditor, er den så let at gemme eller copy/paste fra.

  • gem filen på harddisken i en vel-navngivet mappe og åbn den påny i en browser.

Du vil da se på adresselinien , at filen nu er lokal..

  • Der er nu muligt at ændre i koden på kreativ vis – “hvad sker der hvis jeg flytter den tabel længere ned under den div?” (gem, gå til browseren og opdater og chek ud) tilbage til koden og ændre lidt mere – står der align=”left”, så prøv at skrive “right”, (gem – hen og chekke ud – Nååå flot – tilbage igen – mere..)

Husk at markere indhold inclusiv tags – fra start til slut <>…</>

Det er smart at have flere programmer åbne: texteditor, browser(e) og skifte imellem dem hurtigt med Alt+Tab, hvor du hoder Alt nede mens du dapper med Tab.

  • Du kan nemt tage bider fra flere forskellige koder, ændre, klippe-klistre dem ind i den fil du bruger som prøveklud.
  • Nye billeder? så må de gemmes lokalt – i samme mappe som html-filen fx., og refereres til i forhold til den:

<img src=”ditbilledesnavn.jpg” />

Og så kan man jo altid spørge Google om “indsæt billede i html” og på dansk

Fil og Mappestruktur

roots

Et forslag. Strukturen må svare til indholdet og opgaven.

  • [] Mitnavn_roots
    • [] source_files(fx. arbejdsfiler, som ikke skal uploades)
      • my_image.psd
    • [] proj1_site_v1 (tilsvarende rodmappe på monline er public_html)
      • index.html
      • [] interface_pix
        • my_image.gif
      • [] gallery
        • index.html
        • [] images
      • [] info
        • index.html
        • [] images
      • [] contact
        • index.html
        • [] images