Tools for Information Literacy
Task 02a - hard coding a web page
Task
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. 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 02c.
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">
<!--
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.
Head elements
We may wish to enhance the metadata in the <head>
<head>
<title> INLS161-001 Spring 2024 Information Tools | Sample Page </title>
<meta name="description" content="sample page for INLS161-001 Spring 2024 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, if you have a multi-page site
add the anchors below to within the body of your local page to create hyperlinks to pages that are part of your website
<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="02_aboutme.html">About me</a>.
This page will include a hyperlink to a fuller Curriculum Vitae or a résumé.
</li>
<li>
<a href="02_classes.html"> Classes</a>.
This page will include hyperlinks to all the classes I am taking this semester.
<li>
<a href="02_interests.html">Interests</a>.
This page will include an ordered list of items of my interest.
</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.
Using a simple text editor, if you have a single-page site with multiple sections within it.
add the anchors below to within the body of your local page to create hyperlinks to sections within your website
<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é
Condition
By 2359 on the day before the CSS session, SFTP the entire task02a folder into your public_html directory on Opal and submit your URL in Canvas assignments. It should read
https://opal.ils.unc.edu/~your-own-onyen/task02a/index.html
Task 02a is required just to compel you to try out hard coding.
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 02a hard code using VSL]](assets/images/task02a-example.png)
And after you validate it with the W3C Markup Validation Service, it should look like this.
![[task 02a using W3C validator]](assets/images/task02a-example.validated.png)