INLS161-001 Fall 2021

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 https://www.w3schools.com/tags/tag_doctype.asp
-->


<html lang="en">
<!--
here the language attribute is specified as having English as its value.
For more see https://www.w3.org/International/questions/qa-lang-why
-->


    <head>
        <title>page title</title>
    </head>

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

</html>

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

    <head>
        <title> INLS161-001 Fall 2021 Information Tools | Sample Page </title>
        <meta name="description" content="sample page for INLS161-001 Fall 2021 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" />
    </head>
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 is divided into a minimum of three areas, with a minimum of one of the areas having subordinate pages as well. Specifically, the areas are </p>
<ol>
<li><a href="02_aboutme.html">About me</a>. This area may have subordinate pages for a fuller Curriculum Vitae or a r&eacute;sum&eacute;. </li>
<li><a href="02_classes.html">Classes</a>. This area will have subordinate pages for four tasks due as part of <a href="https://ils.unc.edu/courses/2021_fall/inls161_001/index.html"> INLS161-001 Information Tools</a>
<ul>
<li><a href="03_classes_task03.html">Dealing with Markup</a></li>
<li><a href="03_classes_task04.html">Working with data</a></li>
<li><a href="03_classes_task05.html">Presentations</a></li>
</ul>
</li>
<li><a href="02_interests.html">Interests</a>. This area may have subordinate pages for fuller explorations of personal interests.</li>
</ol>

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

Condition

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

Standard

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