header

Basic html code

All of the code samples on this page have been validated through the WC3 validation service in May 2015. If you have a site running put it through this tool as a lot of the usual tags and attributes are being made obsolete in html 5.
Attributes like color width height etc are being moved to css code only. I've put a couple of big brand sites through this validator and even they have faults so all coders will be updating code to html 4 or 5.

Although the pages themselves may look fine at the moment as these attributes are withdrawn from the browsers websites will start displaying wrong so i suggest checking your site. Check your site here



TEMPLATE WEBPAGE WC3 VALIDATED


<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<link rel="stylesheet" type="text/css" href="menuhead.css" media="screen">
<title>Macmuggins start page </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<h1> This is the title at the top </h1>
<p>All your visual content goes between the body tags </p>

</body>
</html>



First you want a heading

This is the h1 header

<h1> This is the h1 header </h3>

This is the h2 header

<h> This is the h2 header </h2>



This is the h3 header

<h3> This is the h3 header </h3>



Some other text types

This is the paragraph tag

<p> This is the paragraph tag </p>



This is the italic text tag
<i> This is the italic text tag </i>

This is the bold text tag
<b>This is the bold text tag </b>

the span tag changes text within text.
<p> the span tag <span style="color:blue">changes text </span>within text</p>



FONT size and color

Here is a blue size 40px text

<p> class="bluey">Here is a blue size 40px text </p>

CSS STYLE should be in a file called ???.css
<style>
.bluey{color: blue; font-size: 40px;margin-left: 10px;}
</style>



HORIZANTAL LINE

<hr>



<hr class="bluehr">
CSS STYLE should be in a file called ???.css
<style>
hr.bluehr { border-color: blue; background: yellow; height:20px; }
</style>



THE BREAK TAG

This is a line of text give me a break


<p>This is a line of text<br>give me a break</p>

This is a line of text
give me a break



Adding images

dempic

<img class="pics" src="headpic.jpg" alt="dempic">

CSS STYLE should be in a file called ???.css

<style>
.pics { margin-left:10px; width:300px; height:100px; }
</style>



Page and website links
Back to home

<a href="http://www.macmuggins.com">Back to home </a>



The div tag

The div allows you to apply

a style or color to all

elements inside the div

<div class="divdemo">
<p>The div allows you to apply</p>
<p>a style or color to all</p>
<p>elements inside the div</p>
</div>

CSS STYLE should be in a file called ???.css
<style>
.divdemo {color:red; margin-left: 10px;}
</style>



Center tag

Centering an element



<p class="txtc">Centering an element</p>

CSS STYLE should be in a file called ???.css
<style>
.txtc{ text-align: center; font-size: 20px; }
</style>



THE FORM

different form types

This is how a form starts

<form action="" method="POST">


User: <input type = "text" name="first"> = User:

Pswd: <input type = "password" name="passwrd"> = Pswd:

<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select> =



<input type="radio" name="sex" value="female" checked>Male<br>
<input type="radio" name="sex" value="male" checked>Male<br><br>
= Female Male

<input type = "submit" name="submit"> =



This is the form closing tag

</form>



THE LIST
  • first item
  • second item
  • third item


<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>



  • first item
  • second item
  • third item


<ul class="nodots">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
<style>
.nodots
{ list-style-type: none; }
</style>



  1. first item
  2. second item
  3. third item


<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>



THE VIDEO WINDOW

<video width="400" controls>
<source src="../videohelp/kodiinstall.mp4" type="video/mp4">
</video>



THE Slider

0% 100%
demoslide

<script type="text/javascript">
function updateSlider(slideAmount) {
var pic = document.getElementById("pic");
pic.style.width=slideAmount+"%";
pic.style.height=slideAmount+"%";
}</script>

<div >0% <input id="slide" type="range" min="5" max="100" step="1" value="10" onchange="updateSlider(this.value)" />100%</div>
<div>
<img id="pic" src="headpic.jpg" alt="demoslide"/>
</div>



Propper use of a table

idpagehits
1homepage11
2projects23

<table border=1>
<tr><th>id</th><th>page</th><th>hits</th></tr>
<tr><td>1</td><td>homepage</td><td>11</td><tr>
<tr><td>2</td><td>projects</td><td>23</td><tr>
</table>



Transition window

<video class="vidbig"src="../videohelp/kodiinstall.mp4" controls></video>
CSS STYLE
.vidbig
{width:200px; height:130px; margin-left: 10px;
-webkit-transition: All 1s ease-in-out; }
.vidbig:hover
{ width:400px; height:260px; margin-left: 10px;}


This is a link

<link rel="stylesheet" type="text/css" href="menuhead.css" media="screen">
This is a link to the CSS code you should put css code on a seperate page


This is handy meta tag

<meta http-equiv="refresh" content="60;url =http://www.macmuggins.com/home/index.php">

This meta tag goes in the head of website it will refresh or send the browser to another page after a certain time. it works in seconds so this will redirect or refresh current page after 60 seconds so for 5 minutes change from 60 to 300



This meta tag is a description

<meta name="description" content="Whatever you type in here will be shown on search engines instead of the first 25 words of your site"/>

When you do a search on google etc you will normally see the first 25 words of your site. This meta tag will display the description of your site instead. It allows you to describe your site more accurately.


you can edit the text below

of what use it is im not sure yet.


<p class="maintext" contenteditable=true> of what use it is im not sure yet.</p>