Hand Coding .websdiy



Creating the MetaData in the head element

In the previous 5 lessons, we've only been dealing with text in the <body> element.

From here onwards, things get a liitle more complicated. It may be very confusing for you if you are very new to HTML. If I were to introduce this section as lesson one, you may find it hard to follow and give up along the way.

If you are able to follow through the first 5 lessons, it may be a little easier for you.

Notepad++ and Xampp needed for this exercise

In this exercise, we are going to create some sub-folders which will contain supporting files for our html file we are about to create.

At this point, if you are still using the windows notepad, it may be time to download the notepad++ because we will be dealing with php soon.

And also the Xampp software. Without this software, you will have to upload the files to your server to view the web pages. In addition, you will have need to do an additional step if you name your extention as html.

Look at the screenshot of this page. Compare it with the actual codes that will appear in the view source - right click on this page and click view source.

I do not really know what an HTML editor does when you are creating pages from a template. But I've always create a template first before moving on to build pages. And this is exactly how my template for this file looks like.

Coding the Metadata section

In this lesson, we'll be dealing with the <html> and <head> elements.

Another reason why I cover this in the earlier exercise - it's a copy and paste job. We select the tags we want to include in this section and make the necessary admendments for other web pages.

Understanding this and it's application is more important that coding in this section. Once you understand this part, it will purely be applying them to every of your template, making changing to adapt them to your website, instead of coding every line for every website and web pages.

If no changes are needed, we will be using the same codes in every page, and if changes are needed like adding an extra code, we do it once in a file and all pages will reflect the changes.

You understand this part here? In the next excercise, we'll be doing about the same thing - create a footer file and every web page will have the same footer.

Do you still remember the basic structure of an HTML page?

Document Structure

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Document Type Declaration <!DOCTYPE html>

Take note I've added in an extra line:

<!DOCTYPE html>

This is to tell the browsers that we'll be using the HTML5 elements.

This is the first line in every web pages. Either learn this by heart or copy the template and never delete this line. There are other versions of DOCTYPE but I strongly suggest you stick to this lastest version.

In this exercise, we will be expanding the first three lines.

  1. Do a right click on this page and select [view page source].
  2. Look closely at everything above the closing of the </head>
  3. We are going to put some of those lines between the opening of <head> till the closing </head> into a file so that it will appear in every of our web pages.
  4. We will name this file metadata.php and place it in another subfolder.
  5. That will save the repeating task of adding these codes to every web pages.
  6. More importantly, it saves us from making the same changes to every page - just make changes to metadata.php and changes will be reflected in every web pages. That's cool, isn't it ?

Now the coding begins:

  1. Create a folder name include ( or incl or any name you want it to be ) under handcoding
  2. Copy the codes below, paste it to a notepad and save it as metadata.php in the folder include
  3. You'll want to come back later to make changes or edit these lines:
    1. Not all lines are needed.
    2. As you move along, there may be other lines to be included for all you web pages.
    3. Google Plus author - delete it if you do not need it
    4. Fill in your css file
    5. You'll want to delete the viewport if you do not need your site to be responsive ( for device of other sizes)

Pay attention to the 2 meta elements : <title> and meta name description. I added in a php code to these 2 lines because you can't fill in your title and description in this file. Otherwise all your web page will have the same title and description.

These 2 lines will read the title and description from your actual web page.

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width; initial-scale=1.0">

<title><?php echo "$title"; ?></title>

<meta name="description" content="<?php echo $description; ?>" />

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

<link rel="stylesheet" href="css/YourCssFileName.css" type="text/css" media="screen" />

<link rel="shortcut icon" href="favicon.ico" />

<link rel="author" href="Your Google Plus" />

Now we will insert this metadata.php to the first HTML file we created in lesson one - lesson1.html

  1. Open up your lesson1.html with notepad
  2. Above <h1/>Read Me First<h1/>, fill in these codes:

<?php $title= "Fill in your page title here "; ?>

<?php $description= "Fill in your page's description. "; ?>

<!DOCTYPE html>

<html lang="en">

<head>

<?php include("incl/metadata.php"); ?>

<style>

</style>

</head>

<body>

  • Like the title and description, the style tags cannot go into the metadata.php because it's meant for styling in each particular page. Otherwise it should go into the css file.
  • If your Include folder is named Include, you'll want to change accordingly.

End of the Metadata section

That concludes the hand coding for the metadata section. If you are adventurous, you will want to type out every line. But be warned - there's a difference in text and codes.

If there are typos in text, what you get is misspellings. If you made an error in codes you will see an error message in the web page. The slash and ? shared the button. Keying your </p> as <?p> will cause the page to stop rendering and shows the error message instead.

I've always stick to copy and paste.