(index) LIST of posts

Personligt Website opgave

Website:

Indhold (til og udover følgende grundkrav,) bestemmer du selv.

Ide og Design er op til dig.

Resultatet skal afspejle de færdigheder du opnår gennem undervisningen og læsningen – i grundlæggende webdesign, brug af tilgængelige ressourcer, og problemløsning.

Teknologi*: XHTML, CSS.

Grundkrav:

  • minimum 5 validerbare (xhtml1-strict*) html-sider
  • dit personlige CV skal indgå tydeligt i websitet
  • et eksternt stylesheet, som dine html-sider refererer til
  • et galleri med billeder

* Har du af en eller anden grund behov for at afvige fra grundkravene, skal der foreligge en overbevisende argumentation.

Aflevering:

Websitet uploades til server i en velorganiseret mappestruktur (må ikke overskrive index i rodmappen).

I den korrekte afleveringsmappe i Fronter og efter navngivnings konventioner uploades følgende:

  • Link til websitets adresse, som skal læses således:  navn_efternavn-persoligt_website_v-1-0

Er du meget øvet eller haj:

Opgaven som skitseret indeholder alligevel udfordringer for dig, på trods/grund af sin enkelthed:

  • Gå helt ud til kanten af de begrænsninger du måtte finde i grundkravene – og bryd nogle andre ubeskrevede regler eller tilføj nogle nye krav. (fx.: Lav en rund hjemmeside)
  • Udse dig en problematik, eller et hul i din viden, som du udforsker imens du løser opgaven. (Måske er det et af dine egne læringsmål?)
  • Lav en ekstra hjemmeside.

Box-model

ericmeyeroncss.com/bonus/render-mode.html

quirksmode.org/css/box.html

css-fix for q-tag citationstegn

Iexplorer viser ingen citationstegn i forbindelse med q-tags. Andre browsere gør.
En måde at tvinge citationstegn igennem går ud på: at skrive citationstegnene selv – og skjule dem i alle andre browsere, med css, på en måde Iexplorer ikke forstår.
W3C anbefaler ikke at man skriver citationstegn i q-tags — så skriver man dem bare udenfor! Læs artiklen fra alistapart her .

Linket ER blevet rettet!

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