Getting Down with ...

by ...

Lesson n:

Minimal Page

This is the minimal page we will use. It contains no content inside the the body element:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

</body>
</html>

It has everything that a browser needs to create a web page. It defines the DOCTYPE, the language, the header, and the body or content section of the page. Any information that the browser will use to create the page will be between < and >. These are called angle brackets. Angle brackets are used to enclose tags, which look like this:

<tag-type></tag-type>

Elements

Most tags will occur in pairs, with an open tag and a close tag. Open and close tags are alike except that the close tag starts with </ instead of just <. The open and close tags together with the content between them form an HTML element.

Attributes

Additional information can be given about an HTML element using attributes. Attributes are assigned (or bound to) values using the assignment operator (=). The value is enclosed in quotation marks (""). The general syntax looks like this:

attribute="value"

Attributes are put inside the open tag of an element, after the tag name. One element can have several attributes, seperated by spaces.

We have already seen two examples of attributes in the minimal page: lang="en" in the html element and charset="utf-8" in the meta element.

Comments

Comments contain information for the webmaster to see, but not for the viewer of the web page (the browser does not render them). They can also be used to make the browser temporarily ignore parts of a page (this is called commenting out) that contain errors.

If you want to create a comment use:

<!-- put your comment here -->

We will add comments to our minimal page indicating where to add content.

Exercises:

  1. Let's create our first web page:
    1. Open your favorite text editor.
    2. Copy the contents from the Minimal Page above into your new document.
    3. Save the new document as minimal_page.html .
    4. Add these comments below the <body> tag: 
      <!-- content starts below here -->

<!-- content ends above here -->
      You will place all the content of your web pages between these two comments.
    Note: Do not make any more changes to minimal_page.html . We will copy and rename it every time we want to start new page.
  2. Make a copy of minimal_page.html and name it index.html . Open index.html in a web browser. Make note of the text on the window bar of the browser. We will change this in the next exercise.
  3. Change the title (between the title tags) to read: My New Home Page in HTML!. Verify that this shows up on the top bar of your browser window when you reload the page.

  4. Put this same text (My New Home Page in HTML!) between <h1></h1> tags inside the body of your document (between the body tags). Your completed page should look something like this.

    Note: Any text put between the <body> and </body> tags will show up on your page (unless it is between <!-- and -->), though to be marked up correctly all contents must be enclosed within HTML tags.