Hand Coding Web Design Standards Basics

My first assignment in Introduction to Web Design is to hand code a typography based 3 page website. I have only done extremely simple HTML before, so hopefully this by the end of this year I will have a foundation understanding of HTML and CSS. In our first lesson we learnt a little bit of coding.

<!DOCTYPE html> This is what tells the browser on how to read the information

<html lang=”en”> This tells the browser that the language will be english

<head> This is where specialised coding for the whole page appears

<meta charset=”utf-8″/> This tell the browser how to read special tags and is a self closing tag

<title>Lovely Web Site | Web Design, Graphic Design etc</title> This is what the page or tab is called

</head> This is the close tag

<body> This is the bit where the main part of the page will be displayed
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6> This is various different types of headings and will help with the hierachy of the page layout.

<p><em>Lorem ipsum</em> dolor <strong>sit amet,</strong> 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. </p>

This is a paragraph of sample text showing italic type and bold type

<ul> This is the code where we have an unorganised list
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

<ol> This is the code where we have an organised list
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
</body>
</html>

All this code was checked on the W3c Markup Validation Service to ensure the html is of a webstandard. All this code generates a page that looks like the below.

Advertisements