INLS161-001 Spring 2022

Tools for Information Literacy

Task 02.01 - hard coding a web page

Task 02.01

website creation task logo

Create an initial hard-coded homepage, a page we will use in class to practice other skills. Use a basic text editor and type in the text on the tags page of the HTML session class notes.

Create a folder on your computer and name it task02-01, then save the file you will create as index.html in the folder you just created so that it will display as the first page in that directory. This may be the basis of your fuller task 02 website, but it does not have to be. You may wish to use this hard-coded page solely for HTML practice in class, and, later, go on to create a totally individualized, fuller, multi-level personal web site according the specs provided in task 02.03.

task document head body condition standard

back to top

Well formed document

Let's start with a new web page. Using a text editor of your choice, create a basic page by typing in the code for a basic, well-formed page and save it to the same folder where you saved your original page. It is the very basic code needed to display a page. Note that it is just text at the present. If we want to display it in a browser, we have to save it again with a .htm (or .html) file extension. Go ahead and do it, then open the saved page in your favorite browser. We will make changes to the code using a your preferred text editor, and view our efforts in the browser.

  1. The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
  2. <html> the outermost element, indicates that the enclosed text is html and therefore must use an html-capable program to open it
  3. <head> the first element inside <html> is the HEAD
    • a container for information about the document; this is where one might place meta-information about the document as well as the <title>page title</title>
    • remember, balanced and consistent; one must close the HEAD, </head>
  4. <body> the BODY element contains all the text and other material that is to be displayed
    • and, of course, the document is balanced as it is closed, </body>
  5. and consistent, as HTML is closed as well - </html>

So the structure should look like

<!DOCTYPE html>
this is a comment about the DOCTYPE, the html version of which should be specified.
The DOCTYPE in the line above specifies the HTML5 type.
For more see

<html lang="en">
here the language attribute is specified as having English as its value.
For more see

        <title>page title</title>

        <p>a paragraph in the body of the page</p>
        <!-- this is a comment -->


Although we can get away without putting end tags on elements (because many browsers are lax about it), we will adopt the habit of always closing any tag we open so that we are compliant with current and future standards.

task document head body condition standard

back to top

Head elements

        <title> INLS161-001 Spring 2022 Information Tools | Sample Page </title>
        <meta name="description" content="sample page for INLS161-001 Spring 2022 Information Tools" />
        <meta name="keywords" content="information literacy, information tools, information, tasks, hard coding" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="notyet.sample-style.css" />
task document head body condition standard

back to top

Maybe add some body elements

add the anchors below to within the body of your local page to create hyperlinks to pages both on and off your website

<p>This web site has a home page and three subordinate pages (or sections, if it is a single page web site). Specifically, the three subordinate pages/sections are </p>
<li><a href="02_aboutme.html">About me</a>. This page (or section, if it is a single page web site) will include a hyperlink to a fuller Curriculum Vitae or a r&eacute;sum&eacute;. </li>
<li><a href="02_classes.html">Classes</a>. This page (or section, if it is a single page web site) will include hyperlinks to all the classes I am taking this semester. </li>
<li><a href="02_interests.html">Interests</a>. This page (or section, if it is a single page web site) will include an ordered list of items of my interest. </li>

Test it out. Paste your new code into your index file using your text editor and look at it, first in your text editor, and then in your browser of choice. Note that you probably don't already have these other pages. However, if you create them, this page now has a hyperlink to them. You can choose your own page file names; I used these names simply to remind myself that several of the pages are second level pages, while others are third level pages.

Note also that we are using some special characters in this HTML code.
For example, r&eacute;sum&eacute; is rendered in a browser as résumé

task document head body condition standard

back to top


By 2359 on day before the CSS session, SFTP the entire task02-01 folder into your public_html directory on Opal and tell your lab/recitation instructor to look at it. Task 02.01 is required just to compel you to try out hard coding.

task document head body condition standard

back to top


Your hard coded page must validate using the W3C Markup Validation Service. There must be no errors in your code.

Yours might look like this

[task 02.01 hard code using Brackets]
task document head body condition standard

back to top

Copyright © R.E. Bergquist 2014- | Last Updated on | Powered by w3.css