Basic Information Technologies.

Basic Technologies.

Everyone knows the content of a new file, but what is the basic content of a empty HTML5 file?

Base content of a HTML 5 should be something like this.

<!DOCTYPE html>
<html>
  <head>
    <title>This is the title</title>
  </head>
  <body>
    Place your content here.
  </body>
</html>

Content that you want people to read on the page is added between the <body> and the </body> tags.

There are tags which define what part of the site the information belongs to, such as (opening and closing tags in order).

        <header></header>
        <nav></nav>
        <section></section>
        <footer></footer>

As Before the content is placed between the opening and the closing tags.
So the site can appear something like this.

<!DOCTYPE html>
<html>
  <head>
    <title>This is the title</title>
  </head>
  <body>
    <header>This is the header section of the site</header>
    <nav>Here a menu or navigational links are suitable</nav>
    <section>This is a good Place to have the content</section>
    <footer>This is the appendix, maybe with a copyright notification and Contact dertails.</footer>
  </body>
</html>

Now if you try this at home, this will not be a pretty site.
Thats where CSS come into the Picture, but to use that we have a few options, we can add styling to each tag in the html file, we can add a css style tag and write it all there, or we can link to an external (seperate file) that is named something that ends with .css
I prefer to link to a seperate document, simply to keep the basic html file at a minimum.
To link to a external .css file we need to add a line in our section, and that is the tag. There is no closing for <link>, it is enclosed in a single tag which could look something like this.

<link rel="stylesheet" href="mystyles.css" type="text/css" media="all">

When entered into the document we should get this appearance of the basic html file, with the content removed showing only html.

<!DOCTYPE html>
<html>
    <head>
        <title>This is the title</title>
        <link rel="stylesheet" href="mystyles.css" type="text/css" media="all">
    </head>
    <body>
        <header></header>
        <nav></nav>
        <section></section>
        <footer></footer>
    </body>
</html>

But now we have a problem, we linked a stylesheet and yet the page does not look better.
Given we never actually created a file called “mystyle.css” and your now asking yourself “Whats that supposed to look like then?”
Well, the basic content of a .css file is as follows.

    

Correct, its an empty file. It will do nothing, but you also need nothing to start with.

Once linked you can add formating in the .css file and it will apply to your html document.

Example to format the <section> tag, you simply write this in your .css file.

section {
  /* this is a comment */
  width: 600px; /* this fix the <section> tag content into a 600 pixels wide column. */
  height: 400px; /* with defined height, the <section> tag content now fits into a box-shaped area */
  background: green; /* its good to see your object, and without a color its by default transparent so make it green, blue, red, black, what ever you need to see it. */
}

That should get your going for now.
remember google is your friend.

This entry was posted in Flipped Classroom and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *