Menu Close Menu

HTML en CSS Code Snippets voor je website

De HTML en CSS code snippets hieronder baseer ik voornamelijk op doctype xhtml transitional omdat ik die nu eenmaal het meest gebruik anno 2010. Waarom geen strict? Heel simpel, omdat target="_blank" daar niet in een normale link gebruikt mag worden, en 't is gewoon makkelijker. (Zie Voorbeeld Xhtml Stict Link). Ik zet er niet bijv. alle doctypes ofzo op, gewoon alleen hetgeen ik het meest gebruik. Deze pagina is dus eigenlijk voor mijn eigen gemak. Maar je mag gerust mee kijken hoor...smile

Doctypes: html snippets

HTML 5:
<!DOCTYPE HTML>
<html lang=nl>
<head>
<meta charset=UTF-8>

XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="NL" lang="NL">

XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="NL" lang="NL">


Charset: html snippets

utf-8:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
iso-8859-1:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />


Metatags en de rest van de head (Xhtml-snippet)

<title>...........</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta http-equiv="pragma" content="cache" />
<meta name="revisit-after" content="2 days" />
<meta name="description" content="................" />
<meta name="keywords" content="..................." />
<meta name="Language" content="nl" />
<meta name="formatter" content="Notepad2" />
<meta name="contactName" content="............." />
<meta name="contactCity" content="............." />
<meta name="web_author" content="............." />
<meta name="Identifier-URL" content="http://www................" />
<meta name="copyright" content=".................." />

<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="js/bookmark.js"></script>
<link rel="shortcut icon" href="img/favicon.ico" />
</head>


PHP Include

<?php include('incl/header-copyright.php'); ?>
<?php include('menu/menu.php'); ?>


HTML5 Audio-tag

<audio width="300" height="30" src="http://listen.radionomy.com/2bfm-40" controls="controls" autoplay="autoplay"></audio>


Validerende (Flash) object-tag

<object type="application/x-shockwave-flash" data="img/whatever.swf" width="35" height="20">
<param name="movie" value="img/whatever.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
</object>


Horizontale lijn in CSS

hr{
border: none;
border-top:1px solid red;
width: 80%;
height: 1px;
}


CSS Links - HTML linkje maken?

a.tekstlink {
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
color: blue;
outline: none;
}
a.tekstlink:link, a.tekstlink:visited {
text-decoration : none;
}
a.tekstlink:hover {
text-decoration : underline;
color: red;
}
a.tekstlink:active {
text-decoration : none;
}


Plaatjes link

<a href="#" title="........." target="_self"><img src="img/plaatje.jpg" alt="......." title="......." /></a>


3 kolommen verschillend stylen in een tabel

table.overzicht tr td:first-child{
color:#696969;
}
table.overzicht tr td:first-child + td{
color:#004600;
}
table.overzicht tr td:first-child + td + td{
color:#950000;
}


Css3 ondersteuning voor IE7, IE8, IE9

Download PIE en zet deze in de css-map. Laat je div verwijzen naar:
behavior: url('css/PIE.htc');


Targeting van een subdomein

Google vertellen waar de Franse versie van je website uithangt.

<head>
<link rel="alternate" hreflang="fr" href="http://fr.domain.com/" />
</head>


acronym code snippet

<acronym title="..........."></acronym>

acronym{
cursor: help;
}


Container + fixed footer

#container{
background : #fff;
position : relative;
margin : 0 auto;
width : 980px;
height : auto !important ;
min-height : 100%;
height:100%;
}


Header

#header {
background-image : url('img/header.png');
background-repeat : no-repeat;
position : relative;
width : 980px;
height : 250px;
left : 50%;
margin-left : -490px;
}


Pagina verversen voor een Captcha oid.

<a href="javascript:history.go(0)"><img src="img/refresh.png" alt="Ander nummer" title="Ander nummer" /></a>


Maak een niet klikbare divider in een dropdown

<option disabled="disabled">----------------------------</option>


Mailto

<a href="mailto:emailadres@provider.nl?subject=Onderwerp formulier &body=
Naam: %0D%0A
Adres: %0D%0A
Plaats: %0D%0A
Bestelnummer: %0D%0A
Aantal: %0D%0A
Opmerking: %0D%0A
"><img style="border:none;" src="img/bestelknop.jpg" alt="Bestellen" /></a>


Iframe zonder border

Frameborder="0" om de border in IE7 weg te krijgen.

<iframe name="content" id="frame" src="http://www.google.nl" width="700" height="800" scrolling="yes" frameborder="0">Sorry, je browser ondersteunt geen iframes</iframe>


Current state van je menuknop

Deze code is bruikbaar om een aangeklikte knop in je menu een andere kleur te geven zodat mensen niet hoeven te onthouden waar ze ook al weer op geklikt hadden. Ik ga hieronder uit van 2 knoppen en in de actieve status wordt ie rood. Let wel! Bij een menu met subitems werkt deze manier niet op het parent item.

CSS:
#home #nav-home a, #contact #nav-contact a{background:black;color:#fff;}
#home #nav-home a:hover, #contact #nav-contact a:hover{background:red;color:#fff;}

Menu:
<li id="nav-home"><a href="http://www.website.nl/index.php" title="Voorpagina">Home</a></li>
<li id="nav-contact"><a href="http://www.website.nl/contact.php" title="Contact pagina">Contact</a></li>

In de betreffende paginas:
<body id="home">
<body id="contact">


Tekst selectie (werkt in echte browsers, valideerd niet)

*::selection {color: #F37711;background: #fff;}
*::-moz-selection{color: #F37711;background: #fff;}
*::-webkit-selection{color:#F37711;background:#fff;}


Dummy Tekst (Nietszeggende afgeleide van Latijns)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

En hier volgt de vertaling in het Nederlands:

Dit is gewoon dummy tekst van de mentale focus, maar omdat zo nu en dan zich omstandigheden voordoen waarin zwoegen en pijn, wat veel plezier. Om een triviaal voorbeeld, wie van ons ooit verbindt zich moeizaam lichaamsbeweging, maar ook uit de selectie hieronder te nemen. Uw link wordt verzonden naar een plezier genieten van de pijn, aan te merken op de pagina. Er is geen product, ze zijn in speciale sieraden behoeften of hij ondergaat en gemakkelijk te

Of van Latijns naar Engels:

This page is available, however, but because occasionally circumstances occur in which toil and pain can procure him some great. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it. Or desires to obtain pain in the bullet train to find fault with in the pleasure of pain that produces no resultant good to flee. These cases are perfectly account of the system, the fault of those who are in the original text: this is to sink


Googleon Googleoff

<!--googleoff: index-->
<p>Content die niet wordt opgenomen in Google</p>
<!--googleon: index-->


Google +1 Button laten valideren volgens W3C

In de head zet je het volgende:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'nl'}
</script>

Op de plek waar de knop moet komen het volgende:

<script type="text/javascript">
//<![CDATA[
document.write('<g:plusone count="false"></g:plusone>');
//]]>
</script>


Hoe check je welke pagina's van je website opgenomen zijn in Google?

Gebruik gewoon de zoekbalk in google.nl
site:metaaldetectortips.nl of site:www.metaaldetectortips.nl
Met of zonder www maakt volgens mij niet uit. Geen spaties gebruiken na de dubbele punt.
site:www.copyrightvrijeplaatjes.nl

En link:www.copyrightvrijeplaatjes.nl geeft sites die naar je domein linken.


Opacity voor een linkend plaatje werkend in IE7/IE8

Vraag niet waarom maar de volgorde van de regels schijnt belangrijk te zijn voor IE.

a:visited img{
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity:.50;
border:none;
}


E-mailadres in een plaatje tonen ter voorkoming van spam

Een plaatje van 200 bij 20 pixels, als je dat in een regel tekst zet gaat het veel te hoog staan.
Door verticle-align:text-bottom te gebruiken komt hij op de juiste hoogte te staan.

<img style="vertical-align:text-bottom;width:200px;height:20px;" src="../img/m.png" alt="" />


Een tekenset specificeren (Pagespeed)

Voor de volgende bronnen is geen tekenset gespecificeerd in de HTTP-header. Als u een tekenset in HTTP-headers opgeeft, kan het renderen van pagina's in browsers worden versneld.
(Boven de doctype zetten).

<?php header("Content-type: text/html; charset=utf-8"); ?>


Als een javascriptje niet wil valideren 'character data' gebruiken

<script type="text/javascript">
//<![CDATA[
.................
//]]>
</script>


.htaccess altijd handig deze snippets want dit onthouden is geen doen.

# -----------------------------------------------------------------------
# REDIRECT ZONDER WWW NAAR MET WWW
# -----------------------------------------------------------------------
RewriteEngine On
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} ^whateverwebsite\.nl
RewriteRule (.*) http://www.whateverwebsite.nl/$1 [R=301,L]


# -----------------------------------------------------------------------
# REDIRECT index.php NAAR DE ROOT
# -----------------------------------------------------------------------
RewriteEngine On
Options +FollowSymLinks
# (DirectoryIndex index.php kan je nodig hebben)
DirectoryIndex index.php
RewriteCond %{THE_REQUEST} ^.*/index.php
RewriteRule ^(.*)index.php$ http://www.whateverwebsite.nl/$1 [R=301,L]


# -----------------------------------------------------------------------
# PERMANENT REDIRECT VAN OUDE PAGINA'S
# -----------------------------------------------------------------------
RewriteEngine On
Redirect 301 /index.html http://www.whateverwebsite.nl/index.php
Redirect 301 /mapje/pagina.html http://www.whateverwebsite.nl/mapje/pagina.php

# -----------------------------------------------------------------------
# 301 REDIRECTEN VAN DYNAMISCHE URL
# -----------------------------------------------------------------------
De oude link is dit:
http://www.een-domein.nl/index.php?id=OverOns
De nieuwe link wordt zo:
http://www.een-domein.nl/info/over-ons.php

RewriteEngine on
RewriteCond %{QUERY_STRING} ^id=OverOns$
RewriteRule ^index\.php$ http://www.een-domein.nl/info/over-ons.php? [R=301,L]

Ik kan niet voor jou server spreken maar bij mij werkte het.

# -----------------------------------------------------------------------
# .HTACCESS REDIRECT ALLE HTTP (public_html) NAAR HTTPS (in private_html)
# -----------------------------------------------------------------------
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

# -----------------------------------------------------------------------
# REDIRECT ALLES HTML NAAR PHP
# -----------------------------------------------------------------------
RedirectMatch 301 (.*)\.html$ http://www.website.nl$1.php

# -----------------------------------------------------------------------
# VOLLEDIGE DOMEIN REDIRECT VANAF MET- EN
# ZONDER WWW NAAR DE NIEUWE MET WWW
# -----------------------------------------------------------------------
RewriteEngine On
RewriteCond %{HTTP_HOST} ^(www\.)?oude-domein\.nl [NC]
RewriteRule ^(.*)$ http://www.nieuwedomein.nl/$1 [R=301,L]

# -----------------------------------------------------------------------
# FILES 1 WEEK LATEN CACHEN
# -----------------------------------------------------------------------
<FilesMatch ".(jpg|png|gif|swf|js|css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

By the Way, een .htaccess maak je niet door een tekstbestandje op je bureaublad te hernoemen. Dit gaat niet lukken. Wat je wel kunt doen is bijvoorbeeld in Notepad2, Crimson-editor of Notepad++ opslaan als .htaccess.


Windows Server IIS - httpd.ini in plaats van .htaccess

[ISAPI_Rewrite]
# -----------------------------------------------------------------------
# REDIRECT ZONDER WWW NAAR MET WWW
# -----------------------------------------------------------------------
RewriteCond Host: (?!www.)website.nl(.*)
RewriteRule (.*) http://www.website.nl$2 [I,RP,L]


# -----------------------------------------------------------------------
# index.php naar Root
# -----------------------------------------------------------------------
RewriteRule (.*/)index.php $1 [I,RP,L]


# -----------------------------------------------------------------------
# PERMANENT REDIRECT (RP)
# -----------------------------------------------------------------------
RewriteRule /mapje/pagina.html http://www.website.nl/pagina.php [I,O,RP,L]


# -----------------------------------------------------------------------
# PERMANENT REDIRECT PDF BESTAND MET SPATIES
# -----------------------------------------------------------------------
RewriteRule /images/pdfs/2013(.+)oude(.+)versie.pdf http://www.eenwebsite.org/images/pdfs/2014-nieuwe-versie.pdf [I,O,RP,L]


Wordpress css alleen op de voorpagina veranderen

Deze zou je kunnen plaatsen in de head van header.php van je thema

<?php if( is_home() || is_front_page() ) : ?>
<style>
h1{color:#fff;}
</style>
<?php endif; ?>


Even wat onthouden voor Wordpress

In wp-config.php
define('WP_HOME','http://desite.nl/');
define('WP_SITEURL','http://desite.nl/');

In .htaccess
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress




Nou, de rest kan ik hopelijk wel typen in het vervolg.