Det er rigtigt hvad de andre skriver: Man skal
vide hvad man laver, når man arbejder med (X-)HTML, CSS, Javascript, ASP eller PHP i Notesblok. 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 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 milighed 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
æ æ
Æ ¾
ø ø
Ø Ø
å å
Å Å |
Dette er dog ikke nødvendigt i (X-)HTML kommentarer <!-- Dette er en kommentar ->
...eller i CSS kommentarer i dit stylesheet /* Dette er en kommentar */
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> |
Det har kun taget mig en lille ½ time at lave de 2 HTML filer til dig fra bunden
Nu kan du lege lidt med siderne medens du som sagt kan lære mere her:
http://www.hjemmesideskolen.dk/
Happy coding...
</MOLOKYLE>