WebSite 102 – First Webpage

with No Comments

Now we are going to write our first HTML5 weboage!

Your part is to copy and past this into your Geany text editor. Save the file someplace you will put your work, and call it index.html

You can now double click the file, and open it in Firefox or Chrome. I know it is kind of ugly, but this is just a step in the right direction. Nothing here is chiseled into stone. In fact, we are going to change a lot of this.

Now it is time to do some homework. Google is your friend!

Take each HTML5 tag and Google it! What does <head> do? How about <title>? Where do use <body> and what is it for?

This is very easy, just go to Google and type in:

HTML5 <p> MDN

Change the <p> to any other tag, like <h1> or <title>

Click on the first result from Google, and there you have your homework answer!

Study this page until you understand what the <p> does. Use well formed code (close every tag you open, in reverse order).

Study each tag, there are only 18 tags (plus their close tags). Think of these tags as new words and learn how to define them. Only 18 new words is not a lot to learn. In fact, in ALL of HTML5 there are just over 100 tags, Just think, you know thousands of English words, usually 6,000 – 80,000 so 18 more HTML5 words to define will be easy for you to do!

Tip: If you do not understand something on MDN try googling “HTML5 <p>” for additional ways to explain it.

Now let’s get started!

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8" />
  <title>HTML 5 complete</title>
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
  <h1>The most important heading on this page - Page Title?</h1>
  <h2>Important Info - Website Name?</h2>
  <h3>With some supplementary information - Tag Line?</h3>
</header>
<article>
  <header>
    <h1>Title of this article</h1>
    <p>By Richard Clark</p>
    <p>You could have a &lt;footer> or a &lt;header> for a &lt;section> or an a &lt;article>.
  </header>
  <h2>Hello World</h2>
  <p>Hello to everyone!</p>
  <footer>
    Footer information for article.
  </footer>
</article>
<footer>
  <ul>
    <li>copyright</li>
    <li>sitemap</li>
    <li>contact</li>
    <li>to top</li>
  </ul>
</footer>
</body>
</html>

Leave a Reply