logo   Opbyg HTML-side (template)



Den bedste måde at komme igang med opbygningen af HTML sider er at bygge en template og genbruge den i hensigtsmæssigt omfang. Opbygningen af en template kan opdeles i en række primære dele:


Delbetegnelse
xSidens primære struktur
xSidens HEAD-del
xSidens BODY-del
xPrint
xIncludes
xTemplate
xProduktion
xKolonnebokse



Sidens primære struktur


Den ydre struktur for en HTML-side har været den samme i mange år , nemlig:


<!DOCTYPE html>
<html>
<head>
...
...
...
</head>
<body>
...
...
...
</body>
</html>


Den består af 4 tags:

  • !DOCTYPE
    Til !DOCTYPE er knyttet værdien HTML. Det fortæller browseren, at den nu skal igang med en fil, der er kodet i overensstemmelse med reglerne for HTML5. I forbindelse med tidligere versioner af HTML har der været anvendt mere nomfattende forklaringer.
  • HTML
    HTML-taggen fortæller browseren, at alt det der ligger indenfor den (primært) er / HTML-kode. En HTML-fil dog, når en række individuelle regler overholdes, også indeholde / benytte sig af kode fra andre programmeringssprog, f.eks. PHP- og Javascript-kode.
    Den seneste anbefaling er at HTML-taggen får tilføjet lang-attributten "<html lang="da">" med angivelse af det sprog, filens tekst er skrevet i. De forskellige sprogkoder kan ses her: x. Derved gør man det muligt for svagtsynede at få siden læst op - når en række andre forhold er imødekommet.
  • HEAD
    Dataene i Head-taggen ser slutbrugeren ikke. De er bagvedliggende data, som browseren skal anvende for at kunne afvikle HTML-filen. Nogle af dataene, der indsættes i head-taggen, er dog rettet mod søgemaskinernes crawler-programmer.
  • BODY
    Body-taggen indeholder både de data browseren bruger til at strukturere det skærmbillede brugeren kan se og de data brugeren ser i form af billeder eller tekst etc.



Validering

En væsentlig ting lige fra første færd i opbygningen af en HTML-side er, at den er kodet korrekt. Validering kan foretages her:


Tags typerValidering af HTML-kode
Tags typerValidering af CSS-kode.
Tags typerValidering af links.



HEAD-delen


I HTML-filens HEAD-del placeres de "baggrundsdata" browseren skal bruge for at kunne vise de data, der er indeholdt i BODY-delen. (Søgemaskinernes "crawlere" bruger også nogle af dem til at fremskaffe de data de måtte have brug for om siden).


Det er kun nogle ganske få tags, der kan anvendes i headeren (Et par kan også placeres i BODY-delen):


Header-tagsOgså i BODY
meta
title
base
scriptx
noscript
link
stylex



Meta-data udgør et fast indslag i head-data (de må ikke være andre steder). Der findes næppe en samlet oversigt over de meta-data, der kan anvendes. Her gives dog et bud: x og et andet her: x


Når den enkelte tag placeres i headeren bør der foretages en opdeling i 3 grupper som vist nedenfor:


  • Minimum head-data
    Links / data der skal være på alle sider på hjemmesiden.
  • Globale head-data
    Links / data med relevans for (næsten) alle sider på hjemmesiden.
  • Lokale head-data
    Links / data med relevans for den enkelte side alene.


For alle 3 sæt data gælder, at dataene på de enkelte linier skal tilpasses til aktuelle forhold. For de 2 sidste gælder endvidere, at der kun skal medtages de linier, der er relevante.



Minimum head-data.
Skal stå øverst i denne rækkefølge og skal / bør indgå i samtlige sider.
<meta charset="UTF-8" />
<title>Kort beskrivelse af side (max.ca. 25 tegn)</title>
<meta name="description" content="Beskrivelse af siden. 150-160 tegn; evt. mere." />
<meta name="keywords" content="Kommasepareret liste med nøgleord relateret til siden / sitet." />
Globale head-data
(data, der er de samme på mange / alle sider i sitet).
<meta name="generator" content="Navn på editor, der er anvendt til at lave siden." />
<meta name="author" content="(Firma-) navn på forfatter" />
<meta name="application-name" content="navn på web-program siden evt. er en del af" />
<meta http-equiv="default-style" content="/site-template.css" />
<meta http-equiv="content-type" content"text/html; charset=xxxx" />
<base href="http://www.xxx.com/xxx/" target="_blank" />
<link rel="stylesheet" href="/felles/css/css.css" media="all" />
<script src="/felles/js/floatButton.js"></script>
<noscript>Din computer understøtter ikke JavaScript. Nogle data på siden bliver derfor måske enten slet ikke vist, eller bliver vist forkert!</noscript>
Lokale head-data
(data, der kun forekommer på en enkelt / nogle få sider i sitet).
<meta http-equiv="refresh" content="30; ,URL=/xxx.html" />
<link rel="stylesheet" href="/felles/css/css.css" media="all" />
<script src="/felles/js/floatButton.js"></script>
<script language="JavaScript" >
<!-- Begin
var now = new Date();
var month_array = new Array("Januar", "Februar", "Marts", "A ...mber", "December");
document.write("<form name=date_list>");
......
......
// End -->
</script>
<style>
p {color: red;}
</style>


I visse situationer kan det undtagelsesvis være hensigtsmæssigt at indsætte css-dataene direkte i head-delen på den enkelte side. Dette kan gøres således:

</style>
...
her indsættes css-selektorer
<...
<style>




BODY-delen



Siden medio 200x-årene har det i stigende grad været almindeligt at opbygge sidestrukturer med div--taggen - og dens funktionsmæssigt identiske kloner: header, footer og nav.


DIV-taggen og dens kloner kaldes (sammen med span-taggen) "generic block-level container". Mere populært udtrykt betegnes DIV-taggen som et "stillads" til opbygning af HTML-dokumenter.


En sidestruktur opbygges typisk som et antal firkantede arealer - kaldet div-bokse. Mens div-boksene strukturelt opbygges styres deres indbyrdes sammenspil fra ´css eller flere "lag" eller som en eller flere "kolonner" eller som en kombination deraf.


Nedenfor vises et antal grundkomponenter med tilhørende CSS3-selektorer / deklarationer, der kan anvendes til at opbygge en sidestruktur.



Opbygningen af en HTML-side kan deles i 3 (delvis iterative) faser:

  • Strukturdelen
    Opbygning af sidens struktur til og med (midlertidig baggrundsfarve
  • Indholdsdelen - fælles
    Det indhold, der skal gå igen i alle eller en stor del af sitets sider. Vil ofte gælde alle felter pånær feltet til brødtekst.
  • Indholdsdelen - indivuduelt
    Det indhold, der er inidviduelt for den enkelte eller forholdsvis få af sitets sider.



Strukturdelen.


De mest anvendte CSS-deklaratorer til at styre opbygningen af strukturdelen af en HTML-side er:


CSS-deklarationBeskrivelse
widthBredde på en div-boks. undlades bredde går boksen til kant indenfor råderummet.
heightHøjde på en div-boks.
I de tilfælde hvor boksen skal have dynamisk højde undlades denne deklaration. Det kan dog være hensigtsmæssigt at angive en højde under opbygning af strukturen. Når strukturen iøvrigt er på plads slettes "overskydende" markeringer af højde.
float_leftFår en kolonne til at placere sig langs venstre side af det "råderum" den har.
float-rightFår en kolonne til at placere sig langs højrre side af det "råderum" den har.
clearNulstiller / stopper float-left og float-right.
paddingPadding ligger sig udenpå div-boksens width. Denne skal derfor så meget mindre så overflow undgås.
marginEn kolonne med tilknyttet margin: auto; skal ikke have angivet nogen bredde. Den bruger den plads, der er tilbage indenfor "råderummet" efter at "float"-kolonnerne er dannede - og er lige brede på hver side.
displayOpbygning af tabel til brug for kolonnesektioner med variabel længde.
background-colorKan til brug i nyere browsere forkortes til background. Angivelse af markeringsfarve i hvert struktureret felt under opbygningen.



Råskitser / Roughs.

Indledningsvis etableres råskitser som blyantstegning eller på anden vis over sitets forventede opbygning i DIV-bokse. De enkelte bokse påføres gerne deres #ID-navne.


I designet skal der tages hensyn til, at skærmenes opløsning fra medio 200x er blevet så stor, at en HTML-side i fuld skærmbredde ikke er brugervenlig. Det er derfor normalt at opbygge et "kolonne-skærmbillede" på typisk 800-1200 pixel bredde. Kolonnen er oftest centreret, men kan også være venstrestillet, eller - i meget sjældne tilfælde - højrestillet. Det er også normalt at skærmbilleder har "fuldskærms" baggrund.


Herefter kan den fysiske opbygning / kodning påbegyndes.



Opbygning af kode.


Skærmbaggrund - Fuldskærm

For at sikre at hele skærmfladen dækkes så man ikke kan se data fra andre sites skal de første CSS-data knyttes til body-taggen.


HTML
<body> <!-- Fuldskærm start -->
.
.
.
</body> <!-- Fuldskærm slut -->
CSS
Tegnsæt og
nulstil overalt
@charset "utf-8";
/* CSS Document */

* {margin: 0; padding: 0;}
CSS
body {background: #xxxxxx;}


De enkelte browsere har en tendens til - hver på sin måde - at knytte skjult margin og især padding til en række tags. For at opnå ensartethed (og sikre egen kontrol over sitet) på tværs af browsere nulstilles effekten af de 2 deklarationer ved indledningsvis at nulstille dem globalt. Det gøres i CSS med '*'-selektoren.



Sidehøjde: fast / variabel


Opbygningen af en side afhænger meget af, om den skal have fast eller variabel sidehøjde. Det er her nok typisk brødteksten der giver anledning til variabel sidehøjde.


I containeren / wrapperen og andre CSS-bokse, der har samme bredde som Containeren - og som ikke indeholder kolonneopdelinger - løses opgaven alene ved at undlade at angive højde på de CSS-bokse, der skal rumme den variable højde.


I CSS-bokse inde i containeren / wrapperen, der skal indeholde kolonneopdeling, skal der opbygges forskelligt, alt efter om siden skal have fast eller variabel højde.


Opbygningen af kolonnebokse med hhv. fast og variabel højde er beskrevet her: x



Container / Wrapper

Den "kolonne", hvori selve skærmbilledet skal opbygges - som oftest centreret på skærmbilledet.
Skal oftest lægges helt ud mod body-taggene og resten af opbygningen af siden skal som udgangspunkt foretages indlejret deri.

Containeren ses også betegnet som f.eks. "wrapper".


HTML
<div id="wrapper"> <!-- Container / wrapper start -->
.
.
.
.
.
</div> <!-- Container / wrapper slut -->
CSS
Side med fast højde
#wrapper {
width: nnnpx;
height: nnnpx;
margin: auto;
background: #xxx;}
CSS
Side med variabel højde.
#wrapper {
width: nnnpx;
margin: auto;
background: #xxx;}


I sider med variabel højde skal height-deklarationen udelades både i wrapperen og i de indlejrede div-tags, der indeholder / indgår i den variable del. Det vil som oftest være den del, der indeholder brødteksten.



Almindelige lag-bokse.


Almindelige lagbokse til f.eks. header eller footer der går fra side til side i containeren kan opbygges således:


HTML
<div id="abc"> <!-- Lag boks start -->
.
.
</div> <!-- Lag boks slut -->
CSS
Fast højde
#abc{
width: nnnpx;
height: nnnpx;
background: #xxx;}
CSS
Variabel højde
#abc{
width: nnnpx;
background: #xxx;}


Top- og bundbokse over og under container.

Lagbokse på 5-15 px kan placeres ovenover eller nedenunder containeren for at give 'luft' til skærmens over-/underkant. De vil ofte have transparent baggrund.


Især topboksen kan også være større og bruges til reklamer.


HTML
<div id="bcd"> <!--Lag boks start -->
.
.
</div> <!-- Lag boks slut -->
CSS
#bcd{
height: nnnpx;
margin: auto;
background: rgba(255,255,255,0.0);}



Includes

På næsten ethvert site med 2 eller flere html-sider vil der være situationer, hvor de samme data skal være til rådighed på flere / alle sider. Menu, header og footer er typiske eksempler.


I stedet for at skulle vedligeholde sådanne data på hver side på sitet, kan de pågældende data håndteres som "includes". Grundprincippet i includes er:

  • at data, der skal være til rådighed på mange / alle sider i sitet placeres i selvstændige filer - typisk med .html som suffix. Filerne må kun indeholde den kode de skal medbringe ved indsættelse i de modtagende filer. Af hensyn til overskuelighed samles filerne i en "include"-mappe.
  • at der benyttes en blandt flere teknikker til indsætte include-teksten på det korrekte sted i de html-sider, hvori de skal bruges.


Til indsættelse af include-data fra 1 fil på det rette sted i mange html-sider kan vælges blandt adskillige teknikker. 3 er kort beskrevet nedenfor:


SSI-includes og PHP-includes kan ikke anvendes samtidig i et HTML-dokument.


Server Side Includes (SSI)
(Kan anvendes i både Apache og IIS)
x x
  • Forudsætninger
    For Apache: At Apache kører og er sat op til at håndtere "includes". Et selv minimalt kendskab til HTML er rigeligt.
    For IIS: ?
  • Begrænsninger
    Ingen
  • Udførselstidspunkt
    Når Apache indlæser den enkelte side. Det teknisk set tidligste tidspunkt det kan gøres på.
  • Kode
    Der hvor include-dataene skal bruges indsættes:
    <!--#include virtual="/sti/filnavn.htm" --> eller anden suffix.
    eller
    <!--#include file="../filnavn.htm" --> eller anden suffix.
    Den valgte metode styres af, hvordan man linker til Include-filen.
Include med SSI bør benyttes ved al generel HTML-kode.
jQuery-metoden
  • Forudsætninger
    Evt. et meget begrænset kendskab til jQuery.
  • Begrænsninger
    Kan ikke bruges på data i sidernes HEADER-del og heller ikke inde i selve "<BODY>"-taggen.
  • Udførselstidspunkt
    ??????
  • Kode
    Ved include med jQuery behøves 3 ting:
    • CDN-kald
      I HEADER-delen indsættes et CDN-kald, der kan være:
      <script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"><script>
    • Event lytter
      For hver include, der skal være på siden indsættes i HEADER-delen (Ses ofte indsat nederst).
      <script>
      $(function ()
      {$(".classnavn").load("/sti/filnavn.htm");
      });</script>

      eller
      <script> $(function () {$(".classnavn").load("/sti/filnavn.htm"); });</script>
    • Eventsender
      Der hvor include-dataene skal bruges indsættes:
      <div class="classnavn"><>/div>
    • classnavn
      classnavn skal for hvert eventpar være det samme i sender og lytter.
Include med jQuery bør afgrænses til generel HTML-kode, og situationer hvor SSI ikke er til rådighed.
PHP-metoden
x
  • Forudsætninger:
    At Apache og PHP kører og siderne har .php som suffix. Et minimalt kendskab til PHP.
  • Begrænsninger
    Kan ikke bruges på data i sidernes HEADER-del og heller ikke inde i selve "<BODY>"-taggen.
  • Udførselstidspunkt
    Når Apache's PHP-fortolker møder PHP-koden under indlæsning af den enkelte side.
  • Kode
    Der hvor include-dataene skal bruges indsættes:
    include("/sti/filnavn.php");
    eller
    require("/sti/filnavn.php");
    Med "Include" forsøger PHP-programmet at fortsætte trods evt. problemer med include-filen. "Require" stopper derimod afviklingen af programmet ved problemer.
Include med PHP bør afgrænses til at omfatte kode, der naturligt hører til i et php-tag <?php ... ?>


Det meste arbejde med at indlægge includes bør foregå under opbygningen af template.


I hver enkelt side i Webdok er der indlagt 11-14 Server Side Includes. De 11 (bl.a. menuen) er indlagt i den template, der altid bruges ved etableringen af en ny side. - Også den du læser nu.



Print

Et godt printformat er en væsentlig, men alt for ofte overset detalje ved opbygningen af en HTML-side. Et godt print vil i de allerfleste tilfælde bestå af en (printtilpasset) header og brødteksten og meget lidt andet. Bortset (evt.) fra headeren vil resten (fjernelse af menuer, footer etc.) som hovedregel kunne håndteres via CSS.


Etableringen af printformat vil typisk være en opgave der indgår i opbygningen af templaten.




Template


Det er udbredt, at de fleste / alle strukturelle felter på en HTML-side - bortset fra brødtekstfeltet - har et statisk indhold baseret på "includes" på tværs af sitets sider.


Efter at strukturen er på plads, er det nu tid til at få baggrunde og evt. include-felterne gjort færdige. Denne opgave er så individuel, at der ikke kan beskrives skematisk.


Tre meget væsentlige punkter under færdiggørelsen af templaten er:

  • Et design der både er pænt, vel disponeret og tilpasset den primære brugergruppe.
  • En nem og intuitiv navigation
  • At print af de enkelte sider indeholder det de skal og ikke andet.


Efter at templaten som sådan er godkendt og klar til brug. tilbagestår der stadig nogle få test med "rigtige" brødtekstdata for at sikre at også denne del er på plads - incl. at SSI-rutiner, javaScript-, php-, asp.net- og andre programmer fungerer korrekt.


Når disse udvidede tests er overstået og godkendte, er tiden kommet til at etablere en template - en side, der ved simpel kopiering kan anvendes til at kopiere fra, hver gang der skal etableres en ny side. Der kan uden tvivl være situationer, hvor det kan være hensigtsmæssigt at have 2 eller flere templates.


For at gøre det nemmere / sikrere at se på templaten hvor brødtekst må placeres indrammes dette område af:

<!-- HERUNDER INDSÆTTES BRØDTEKST >>>>>>>>>>>>>>>>>>>>>>>> -->

og

<!-- HEROVER INDSÆTTES BRØDTEKST <<<<<<<<<<<<<<<<<<<<<<<<< -->



Produktion


Med templaten på plads og godkendt, er det nu tid at gå igang med den egentlige produktion af sitet. Mens det i denne proces vil være nemt at tilpasse / omgøre en enkelt side vil det være en helt anden sag at foretage ændringer i templaten. Alle færdige produktionssider skal da tilpasses indivuduelt.





























































x
x