EverWeb Codebox

HTML

An HTML document would normally contain three types of code...

     1.     HTML (Hyper Text Markup Language) is the language used to describe a webpage and its static content. It uses different tags to define various types of elements.

     2.     CSS stands for Cascading Style Sheets. These define how the HTML elements are displayed. Advances in CSS3 allow an element to change from one style to another by using CSS transitions rather than javascript or flash.

     3.     Javascript is programming code which can be inserted into HTML pages to manipulate the content of the elements. This allows static content to become dynamic.

A basic HTML doc is shown below. Note that there are no styles and the page width is fluid rather than fixed.

<!DOCTYPE html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <title>Basic Web Page Layout</title>

        <meta name="description" content="This a is a description of the web page content which will appear in a search engine entry.">

        <meta name="viewport" content="width=device-width">

    </head>

    <body>

<!--container-->

    <div id="container">

<!--header-->

    <div id="header">

<h1 align="center">Website Name <h1></h1>

<p>This is the header div containing the <a href="#">website name</a> and any other info that appears on every page such as the navigation and contact info.</p>

<div id="navigation">

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</div>

</div>

<!--/header-->

<!--content-->

     <div id="content">

<h2 align="center">Page Name <h2></h2>

<h3 align="center">Sub Heading <h3></h3>

<h4> Paragraph Heading <h4></h4>

        <p>This a paragraph in the content div.</p>

<div>

<!--/content-->

<!--footer-->

<div id="footer">

<p align="center">This is some text in the footer. The footer contains info that is required on every page of the site such as copyright, contact and links to a sitemap, terms and conditions etc.<br /><br />© Roddy McKay - 2013 - All Rights Reserved.</p>

</div>

<!--/footer-->

</div>

<!--/container-->

    </body>

</html>

This is how the code renders in the browser. Not very interseting huh? The Next Page introduces CSS to style the HTML elements.