parlicoot logo

parlicoot

Starting the index file

An HTML framework file for the content


Structuring the HTML File

An html page comes in two parts: head and body


<!DOCTYPE html>
<html>
<head>
    <!-- document set up -->
</head>
<body>
    <!-- document content -->
</body>
</html>
                

We will be first looking at the "set-up" requirements for all our html documents. Luckily, the Skeleton CSS Framework has some well commented examples that define what needs to be added here. Do view source of index.html of the download package - NB. there are some extras that we will ignore at this stage.

Document set up

The head needs to have the following items within it:

  • character set used by the document
  • mobile set up
  • test for IE version 9 or less
  • Document information: title, description
  • Links to favicon.ico, humans.txt etc

<!DOCTYPE html>                          Notes
<html lang="en">                       - sets default document language (English)
<head>
    <!-- Initialise + Mobile -->       - sets the document character set & enables media queries
    <meta charset="utf-8">
    <meta meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Icons -->                     - link to our favicon & other files
    <link rel="shortcut icon" href="assets/icons/favicon.ico">
    <link rel="author" href="humans.txt">

    <!-- CSS -->                       - link to css - use style.css & @import if needed
	<link rel="stylesheet" href="assets/css/minified.css.php">
    
    <!-- Stick a knife into old IE --> - fix old internet explorer
    <!--[if lt IE 9]>
        <script src="assets/js/html5shiv.min.js"></script>
    <![endif]-->

	<!-- Documentation -->             - document title & description
	<title>Page title</title>
    <meta name="description" content="Page description.">
</head>

<body>
    <!-- document content -->
</body>
</html>
                

A Brief Note

The code has been set out in a way that I find most comfortable, commented so that when I look at it again I can see what I was doing.

Just to point out: there is no right way or "proper" convention for any of this. Read Just Try and Do a Good Job for reassurance.

An excellent source of adopting a style-guide or convention for writing CSS as well as other code practices can be seen at cssguidelin.es How you write your code if working alone is up to you.


« CSS Development Preparation | Home | Test files »