HTML koder - Huskeliste

Nyttige html koder.
Jeg har lavet denne side, fordi jeg selv savnede en liste med
de html koder der skal huskes, når man skriver i html.
Hvis du kan få glæde af den også, er det jo fint.

Søg på siden: tast Ctrl + b (Ctrl + f)

Indhold:

Tegn i html (tegnsæt)
Typer af kanter (border)
Runde hjørner med css
Siden gemmes ikke i cache og loades på ny...
Vis link-tekst ved mouse over
Cursor: Vis hånd ved en link-knap
Åben link i nyt vindue
Fjern understregning på link
vertical-align
Emne i mail-link
Ikke højreklik (no right click)
Hotspot / Image map - klikbare punkter i et billede
Gennemsigtigt billede
Indsæt kommentarer i din html
Besked hvis brugere ikke kan se dine JavaScripts
Send brugeren videre efter et antal sekunder
Tekst box/textarea/formularer
Iframe
Vindue lukker af sig selv
Websikre farver

Relevante links: nederst på siden
(CSS finder du i menuen under scripts)

OBS! Hvis du bruger et hjemmesideprogram og vil kopiere koderne, skal du muligvis gøre det således: [Marker koden - kopier - og sæt den ind i notepad eller anden tekst-editor. Kopier igen derfra og sæt ind i din html.]

Link til Engelsk/Dansk ordbog: www.ordbogen.com
HTML noget nemmere at have med at gøre, hvis man forstår hvad ordene betyder.
Er desværre ikke gratis i længden (billigt: 50 kr. om året), men du kan sagtens bruge den et par gange og så slette den cookie, der bliver lagt i dine temperary internet files.

Oversigt over artikler om webdesign på Teknik og Sjov

Tegn i html

Til dig der vil skrive dine sider i en text-editor, og har det som jeg med at glemme, hvordan nogle af de forskellige tegn skal skrives i html, er her en liste over nogle af dem: (Alle tegn her er med i iso8859-1).

<	>	<	>
&	"	&	"
»	»	»	»
©	©	©	©
¼	½	¼	½
¾	+	¾	+
\|	@	\|	@
/	#	/	#
ä	Ä	ä	Ä
ö	ü	ö	ü
ß	é	ß	é
Æ	Ø	Æ	Ø
Å	å	Å	å
Bemærk:		Vil du lave et lille bogstav, er koden den samme - bare med små bogstaver.
·		·
Dette herunder har ikke noget at gøre med ISO 8859-1
Mellemrum:
Ny linie:		<br /> <br>
LINKS: HTML.dk: ISO 8859-1 Tegn, Beskrivelse, Kodenavn, Kodenummer Link til Martin Ramsch iso8859-1 table (Latin-1) Tegnsæt på web: Designværkstedet Korrekt brug af tegnsæt iso8859-1 table står for: "The International Standards Organisation standard for an 8-bit Latin-1 character code". Om sprog på min side: Om webdesign

Typer af kanter /border

De forskellige muligheder for at lave kanter/border:
(#FFCC00 er bare farven på kanten)

4px solid #FFCC00

4px dashed #FFCC00

4px dotted #FFCC00

4px double #FFCC00

4px groove #FFCC00

4px ridge #FFCC00

3px inset #FFCC00

4px outset #FFCC00

Runde hjørner med css

Dette har jeg fundet her: Webdesign 101 Runde hjørner uden grafik.

Html-kode

Stylesheet

..men læs mere på www.webdesign 101

Siden gemmes ikke i cache og loades på ny når den indlæses

Vil du gerne at dine besøgende også ser det sidste nye du har lagt ud? Så indsæt dette mellem <head> og </head> i din html
Det skulle gerne forhindre at siden bliver gemt i computerens hukommelse, hvad betyder at den er nød til at loade siden på ny fra nettet.
Virker ikke altid og i alle browsere. (Se evt. links)

Om "cache":

Caching Tutorial for Web Authors and Webmasters: Klik her (Engelsk sproget)

Web Caching: Klik her (Engelsk sproget)

Altid seneste version af siden: www.html-faq.dk/

Caching af websider: www.improve.dk

"Pragma: No-cache" Tag May Not Prevent Page from Being Cached: support.microsoft.com

ASP:
ASP Cache problemer? Læs artiklen hos: activedeveloper.dk

Undgå at dine ASP sider bliver Cached. www.viewsource.dk

Undgå at din side gemmes hos brugeren. www.opfinderen.dk

HER - min forklaring/beskrivelse af det, der står mellem <head> og </head> .

Vis link-tekst ved mouse over

Vil du gerne have at der kommer en lille beskrivelse, når man holder musen over et link?

Du skal indsætte dette i din link kode: title="din link tekst"

Her en link kode hvor jeg har sat title ind:
<a href="http://gilau.dk" title="din link tekst">Dit link</a>

Du finder en mere udførlig beskrivelse af <title> og <alt,>
samt gode links til sider - med artikler og forklaringer angående links.
Dette på min side HER

Cursor: Vis hånd ved en link-knap

Vil du gerne have "hånden" kommer frem, når man holder musen over en link-knap?

Det gøres således:

<input type="button" value="Klik her" style="cursor: pointer" />

Hvis du vil have 'hjælp' symbolet i stedet for hånden, så skal du udskifte pointer med help.

Andre cursere: (Prøv at holde musen hen over)
- help,
- crosshair,
- wait,
- move.

Se evt. artikel på denne hjemmeside: activedeveloper.dk/artikler/default.asp?articleid=253

Bemærk at der i artiklen bruges 'hand' i stedet for 'pointer' - det virker bare ikke i alle browsere!!

Åben link i nyt vindue

Denne metode kan valideres i xhtml:

<a href="http://www.webcafe.dk" title="webcafe" onclick="window.open(this.href,'_blank');return false;"> Webcafe i nyt vindue</a>

Nogle pop-up stoppere vil muligvis opfatte dette som et pop-up vindue og blokere disse links. Det kommer an på hvor høj sikkerheden er sat til.
Ved normal sikkerhed vil jeg ikke mene, at der ikke skulle være problemer.

Det skal siges at xhtml er et forenklet og mere strengt html, som er lavet med den tanke og filosofi, at brugeren selv skal kunne vælge, om et link skal åbne i et nyt vindue. Hvis du benytter overstående eksempel, så kan du måske nok validere din html i følge xhtml, men du følger i realiteten ikke standarden, da du "snyder" ved at bruge en javascript formulering.

Vil du være sikker så brug target="_blank" i stedet for. Dette er gængs i HTML 4.01

Eks.: <a href="http://www.gilau.dk" title="gilau.dk" target="_blank"> gilau.dk i nyt vindue</a>

Skriv i forummet hvis du har kommentarer.
Mere om xhtml på siden Om webdesign

Fjern understregning på link

Hvis du vil fjerne understregning af et enkelt link:

Her et alm. link:

<a href="http://www.gilau.dk">gilau.dk</a>

Her har jeg fjernet understregning ved at definere style:

<a href="http://www.gilau.dk" style="text-decoration:none">gilau.dk</a>

Du finder gode links til sider - med artikler og forklaringer angående links.
Dette på min side HER

Emne i mail-link

Sådan kan du skrive emnet på den mail du modtager, når folk klikker på dit mail-link:

Hvis du også vil skrive noget i selve mailen, skal du tilføje &body=
således:

Bemærk at man kan lave mellemrum med %20

Eksempel: Mail

Se hvordan du kan kryptere din e-mail adresse under JavaScripts

Vertikal midterstilling af tekst ud for et billede

Dette kan klares med style og vertical-align således:

Flere muligheder med vertical-align (links):

www.w3schools.com The vertical-align property
www.webtip.dk - vertical-align

Placere tekst i toppen af en tabel (celle)

- Også her kan du bruge vertical-align:

<table>
<tr>
<td style="vertical-align: top;">
<p>Her er din tekst </p>
</td>
</tr>
</table>

Ikke højreklikke på billeder og links

Virker i Internet Explorer og Mozilla Firebird. Jeg har ikke testet andre browsere.

OBS! Disse eksempler kan ikke valideres, da oncontextmenu ikke er en gyldig attribute i følge W3C. Brug da istedet dette script.

Her et alm. link:

<a href="http://www.gilau.dk">gilau.dk</a>

Her forhindrer jeg højreklik:

<a href="http://www.gilau.dk" oncontextmenu="return false">gilau.dk</a>

Her et alm. billede:

<img scr="billede.jpg" alt="billede">

Her forhindrer jeg højreklik:

<img scr="billede.jpg" alt="billede" oncontextmenu="return false">

Se dette beskevet samt flere muligheder hos:
msdn.microsoft.com

Se en anden forklaring her:
docs.mandragor.org

onContextMenu Attribute Support:
www.blooberry.com/

What are Event Handlers?:
www.blooberry.com

P.S. Der findes ingen metoder, der kan sikre dig helt mod f.eks. kopiering af billeder.
Se evt. her: www.html-faq.dk/1014.asp

No right click JavaScripts her

Vil du også undgå, det der kommer frem, (med mulighed for at gemme, udskrive, sende med email m.v.) når man holder musen hen over et billede i Internet Explorer?

Så indsæt dette i <head> </head> i dit dokument :

Du kan muligvis også bruge galleryimg="no" i dit image tag.

Relevante links om imagetoolbar:
www.html-reference.com/META_httpequiv_imagetoolbar.htm
Diasable IE image bar (forum)
Useing HTML Meta Tags

Hotspot / Image map - Klikbare punkter i et billede.

Jeg vil ikke begive mig ud i at forklare dette, men her er tilgengæld nogle gode links:

Sådan laver du et client-side image map (HTML.dk)

ImageMap Intro with MapEdit (engelsk- med link til program)

Ismap - et Imagemap værktøj (www.elof.dk)

Lige et par husketips fra HepHey:

Shape er formen på det klikbare område.
Formen kan være enten rect (en firkant), circ (en cirkel) eller poly (en polygon).
coords angiver koordinater på det klikbare område.
"rect" angives med fire koordinater [venstre x, top y, højre x, bund y].
"circ" angives med tre koordinater [midt x, midt y, radius].
"poly" angives med X antal koordinater [første x, første y, andet x, andet y, etc..].
href fortæller hvilken handling der skal udføres ved klik.
alt angiver titel på det klikbare område.

Gennemsigtigt billede:

(Billede der står svagt, men bliver tydeligere ved mouseover.)

Mere om dette script: activedeveloper.dk

onMouseDown, onMouseover, onMouseout kan desværre ikke valideres i følge W3C's standard for HTML 4.01.

style="filter:alpha(opacity=25)" kan godt valideres.
Se flere tricks med filter alpha på disse hjemmesider:
www.fred.net CSS filer Examples
CSS Visual Filters

Mere om stylesheets HER

JavaScript

Her en anden metode:
(Jeg har kopieret dette fra BLARP.DK)
Måske kan det også bruges...

<script language="JavaScript">

</script>

Komentarer i html

Sådan kan du indsætte kommentarer i din html, som ikke vises i browseren:

Besked hvis brugere ikke kan se dine JavaScripts

Bruger du JavaScripts? Så kan du tilføje dette til dit script - til de der ikke har JavaScripts slået til, eller som slet ikke kan se dem.

Send brugeren videre efter et antal sekunder

Indsæt dette øverst i din html mellem <head> og </head>

Tekst box/textarea

En tekstbox som denne ovenfor laves således:

<textarea name="Tekst" cols="50" rows="3">Evt. din tekst her</textarea>

Bemærk at man kan skrive i denne tekstboks. Dette fordi den normalt bruges i en formular.

Links:
Formularer på webtips.dk
Lær at lave formularer på HTML.dk

iframe

Med iframe kan du indsætte et dokument på din side i en boks med scroll til højre.
det kan f.eks være tekst doukumenter (.txt) men også html, php, asp o.lign.

Ved scrolling kan du vælge auto, yes(altid) eller no(aldrig)
Link: <iframe> på html.dk

Se evt. også:
Scroll på et område med <div>

Vindue lukker af sig selv

Indsæt koden indenfor klammerne i dit body tag - således:
(20000 = 20 sek.)

Dette virker muligvis ikke, hvis brugeren har pop-up stopper.

(OBS! Hvis du bruger et hjemmesideprogram: Marker koden og sæt den ind i notepad eller anden tekst-editor. Kopier igen og sæt ind i din html. Hvis tegnene < og > skal disse erstattes af < og > )

Websikre farver

Her en fortegnelse over websikre farver med hex koder og farve eksempler:

Her på Teknik og Sjov: Find farven og kopier koden

216 websikre farver: Echo Echo.com
Echo Echo.com: HTML kursus - hexfarver

Links W3C: Colors | Notes on using colors

Farver/Farvekoder/Hvordan udregnes farvekoder? Læs artikel af René Hangstrup Møller på WebCafe.dk. (Webcafe er nedlagt, men artiklerne er vist stadig tilgængelige.) PRØV HER

Se evt. også under CSS/Redskaber - hjælp til farvekoder.

Relevante LINKS:

html-faq.dk/ - om html. Artikler og FAQ

www.webworksite.com/scripttips.shtml Forskellige Scripts og Tips

PHP universet.dk Her finder du lignende tips og tricks!

Echo Echo.com - HTML TAGS - kodesamling

Webdesign - HTML Tags: Alfabetisk og Systematisk

Links til Respons - Hjælp - Diskussionsgrupper - Forummer på Teknik og Sjov

Artikler på Teknik og Sjov vedr. webdesign - en oversigt

Links på mine sider er et forsøg på at give gode links videre til dig, men også at give dig noget at vælge imellem. Jeg har ingen interesse i at fremhæve nogle fremfor andre, men jeg prøver dog at sortere skidt fra kanel.
Jeg forsøger altså at linke til gode sider!
Du kan hjælpe ved at foreslå et link, eller ved at komme med kommentarer til de links, som du møder på mine sider - KLIK HER.
Giv mig endelig besked om døde links. Tak!
Der er nogle få reklamer hist og her. Du kan se, hvis det er en reklame og vælge at gå udenom.
OBS! Links til andre hjemmesider åbner i nyt vindue.