Tools for Information Literacy
Task 02.01 - hard coding a web page
Task 02.01
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.
-
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.
- <html> the outermost element, indicates that the enclosed text is html and therefore must use an html-capable program to open it
-
<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>
-
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>
-
<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>
- 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
We may wish to enhance the metadata in the <head>
<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ésumé. </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ésumé is rendered in a browser as
résumé
task document head body condition standard
![[task 02.01 hard code using Brackets]](images/02.01.png)