(category) LIST of posts

Website fra starten

Afdæk formål og virkemidler

Fokuser på hvad du gerne vil

  • Hvad vil du formidle?
  • hvem skal det formidles til?
  • Selvom du skal bruge et personligt site til at profilere dig med, er det ok, at være under udvikling og ændre mening undervejs. Start ENKELT, start OVERSKUELIGT.

Research i eksisterende genre

  • for at definere hvilken kontekst eller genre produktet kommer til at være del af
  • for nærmere at afgrænse hvad du selv vil/ikke vil
  • for at få indblik i hvad andre har formået/ikke formået

Layout Skitse

  • skitseret tegning
  • title
  • filnavn.html
  • pile til links
  • fil/mappestruktur

skitse

Filsystem udfra det skitserede overblik

  • Rodmappe i stifinder
  • Opret nye tomme navngivede html-filer
  • Giv dem en titel hver
  • Opret en tom css-fil
  • Organiser undermapper

filsystem

Struktur skitse på baggrund af layout skitsen:

  • Inddel layoutet i grove overordnede blokke
  • Forsyn dem med Elementer – tags
  • Noter lidt Formodet css

skitse2c

Produktionen

Med udgangspunkt i skitserne – hvis de er gode og der er lagt indlevelse og omtanke i – er der chancer for at resten af arbejdet næsten laver sig selv..

Afhængigt af hvem du er og en masse andre faktorer, er der flere mulige rækkefølger til det videre arbejde

  • Lænk hele sitet sammen i en fungerende demo med links.
  • Tast indholdet ind i siderne, råt – Det kan senere styles og siderne lænkes.
  • Layout og styling på sidens div-beholdere – Der kan senere komme indhold i.
  • Tegn, mal og fotografer dig frem til det visuelle indhold.

html, så kan du lære det

Produktionen aktiveres med lidt humor, af hver sin slags:

Med alle forbehold for, at tabeller ikke skal bruges til at layoute med… Tabeller bruges til skemaer, og layout klares med css.

.

.

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