Tools for Information Literacy ④ Hard coding a web page
Practice to create a web page with well-structured content
Hard coding a page
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 task02a,
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.
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>
-
<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">
<!--
This is a comment about the language attribute.
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.
We may wish to enhance the metadata in the <head>
<head>
<title>
INLS161-001 Fall 2025 Information Tools | Sample Page
</title>
<meta name="description" content="sample page for INLS161-001 fall 2025 Information Tools">
<meta name="keywords" content="information literacy, information tools, information, tasks, hard coding">
<meta charset="UTF-8">
<link rel="stylesheet" href="notyet.sample-style.css">
</head>
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
Using a simple text editor,
add the anchors
below to within the body of your local page
to create hyperlinks to sections within your webpage
<h1>[enter a name here]</h1>
<h2>This web site has a home page and three subordinate pages.</h2>
<h3>Does this go to the right?</h3>
<p>Specifically, the three subordinate pages are</p>
<ol>
<li>
<a href="#aboutme">About me</a>.
This section will include a hyperlink to a fuller Curriculum Vitae or a
résumé.
</li>
<li>
<a href="#classes"> Classes</a>.
This section will include hyperlinks to all the classes I am taking this semester.
<li>
<a href="#interests">Interests</a>.
This section will include an ordered list of items of my interest.
</li>
</ol>
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é