Nemt
Man skal bare vide hvad man laver, når man arbejder med (X-)HTML, CSS, Javascript, ASP eller PHP og gøre det i Notesblok, i stedet for et af de mange 'smarte' programmer som: Frontpage, Dreamweaver, Webwriter eller lign. WYSIWYG editorer.
Til gengæld er man så klar over hvordan koden er 'skruet sammen' og kan derfor fremover nemmere vedligeholde og rette den til.
Mange får sig et mindre chok når de pludselig erfarer hvorledes deres side ser ud, når den ses med andre indstillinger eller i en anden browser end den de selv bruger. Får at 'redde' deres side må de rette den til og det går sjældent godt, når siden er lavet med en WYSIWYG editor.
For at gøre det en smule nemmere for dig at gå i gang, har jeg kodet en lille skabelon til dig.
Den første kode er en til index.html side, som er den første side dine besøgende ser, når de surfer ind på dit domæne f.eks.
http://www.MIN_FORSIDE.dk/ Koden giver dig mulighed for nemt at skifte baggrundsfarve, skriftfarve, lave flere link og sætte flere billeder ind selv. Jeg forklarer dig hvorhenne du skal rette med kommentarer i koden.
Kopier det følgende og indsæt det i Notesblok. Gem derefter koden fra Notesblok som index.html.
Når du gemmer koden skal du i Notesblok først i menuen Filer vælge: Gem som... skifte filtype til 'Alle' og huske at skrive endelsen html i filnavnet ..ellers får du koden gemt som en almindelig tekstfil. (Skulle det alligevel ske? Så kan du blot derefter omdøbe filen i stifinder).
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Default</title> <!-- Sidens navn som vises i browserens øverste linje -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Default">
<meta name="keywords" content="Default">
<style type="text/css">
<!--
body
{
background:#000; color:#fff; /* Her vælges baggrund- og tekstfarve */
font-size:80%; /* Tekststørrelse som svarer til MELLEM størrelse */
font-family:verdana, sans-serif; /* Fonten Verdana vælges til tekst */
}
h1{color:#ffff66;text-align:center;} /* En centreret overskrift i en anden farve */
.tekst /* Dette er en 'klasse' hvor du kan skifte tekst farve */
{
color:#ff0000; /* En anden skriftfarve */
}
img {border: thin solid #fff; } /* En tynd hvid ramme om billeder */
-->
</style>
</head>
<body>
<div>
<h1>Overskrift.</h1>
<p>
Dette er en tekst i sidens 'standard' farve.
</p>
<p class="tekst">
Dette er en tekst i en anden farve.
</p>
Nu viser jeg et billede:
<br />
<br />
<img src="MIT_BILLEDE.jpg" alt="Billede" />
<p>
Dette er et <a href="underside.html" title="Link">Link</a> til min underside.
</p>
<p>
Teksten skifter <span class="tekst">farve</span> midt i en sætning.
</p>
</div>
</body>
</html> |
Billedet på siden lægger du i samme biliotek som ovenstående. I koden retter du MIT_BILLEDE.jpg til hvad dit billede nu hedder. NB: Undgå danske bogstaver og mellemrum i navnet!
Du kan bruge billedformaterne: *.jpg/*.jpeg, *.gif eller *png
Her er en liste over tekstfarver:
http://www.html.dk/dokumentation/farver/
Bemærk:
I (X-)HTML bør du skrive de specielle danske bogstaver således:
Kode
æ æ
Æ ¾
ø ø
Ø Ø
å å
Å Å |
..eller:
Kode
æ æ
Æ Æ
ø ø
Ø Ø
å &oring;
Å &Oring; |
Dette er dog ikke nødvendigt i (X-)HTML kommentarer:
<!-- Dette er en kommentar -->
// ..og dette er en én-linjes kommentar
...eller i CSS kommentarer i dit stylesheet:
/* Dette er en kommentar */
..men det kan anbefales at gøre det alligevel
Her kommer så din underside, som du lægger i samme bibliotek som din index.html og dit billede:
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Underside</title> <!-- Sidens navn som vises i browserens øverste linje -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Underside">
<meta name="keywords" content="Underside">
<style type="text/css">
<!--
body
{
background:#fff; color:#000; /* Her vælges baggrund- og tekstfarve */
font-size:80%; /* Tekststørrelse som svarer til MELLEM størrelse */
font-family:verdana, sans-serif; /* Fonten Verdana vælges til tekst */
}
h1{color:#cc3300;text-align:center;} /* En centreret overskrift i en anden farve */
.tekst /* Dette er en 'klasse' hvor du kan skifte tekst farve */
{
color:#3333ff; /* En anden skriftfarve */
}
img {border: thin solid #000; } /* En tynd sort ramme om billeder */
a img {border:none;} /* Fjerner 'rammen' om billeder i links */
-->
</style>
</head>
<body>
<div>
<h1>Underside.</h1>
<p>
Dette er en tekst i sidens 'standard' farve.
</p>
<p class="tekst">
Dette er en tekst i en anden farve.
</p>
Nu viser jeg et billede som linker til min forside:
<br />
<br />
<a href="index.html" title="Link til forsiden"><img src="MIT_BILLEDE.jpg" alt="Billede" /></a>
<p>
Teksten skifter <span class="tekst">farve</span> midt i en sætning.
</p>
</div>
</body>
</html> |
Nu kan du lege lidt med siderne, medens du med fordel kan lære mere her:
http://www.hjemmesideskolen.dk/
Happy coding...
Ps. Det ku' være sjovt at se din 'første' side.
Jeg garanterer dig; jeg kan finde MASSER af fejl på den
</MOLOKYLE>