06 Sep 2018
Class Schedule
21 Aug | intro
23 Aug | clients
28 Aug | servers
30 Aug | networks
04 Sep | basics lab
06 Sep | HTML - practice |
theory |
tags |
links |
HTML terms |
02.01 |
next session
11 Sep | presentational layer
18 Sep | working with layers
20 Sep | behavior layer
25 Sep | images & design
27 Sep | website lab
02 Oct | object layers
04 Oct | tools that read markup
09 Oct | document markup lab
11 Oct | spreadsheets, formulas & functions
16 Oct | data display
18 Oct | Fall Break
23 Oct | database tools
25 Oct | spreadsheets lab
30 Oct | relational databases
01 Nov | tables
06 Nov | relationships
08 Nov | input & output
13 Nov | SQL
15 Nov | complex queries
20 Nov | databases lab
22 Nov | Thanksgiving
27 Nov | presentation design
29 Nov | presentation delivery
04 Dec | presentation lab
13 Dec | 0800-1100 | final in class presentation
This work
is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
home & schedule | class blog | syllabus | contact | grades
Having created an HTML page, let's consider what we did by considering the theory behind the page.
HTML describes the structure of pages
What is a markup language?
- It's a collection of codes, embedded in a document, that explain the meaning or desired formatting of the marked text
- It's a way of describing, using instructions buried in the document, what the document is supposed to look like
- Every electronic text processing tool uses some kind of markup language, though you may not necessarily be able to see the commands
back to top
HTML follows the same three-part-instruction model we used in command line situations
| UNIX/LINUX ⇒ | command | argument | value |
| HTML ⇒ | tag | attribute | value |
So an HTML tag is a form of a command, but this tag (command) is directed at the browser.
back to top
HTML Elements and tags
Two definitions that say the same thing
- An HTML element usually consists of a start tag and end tag, with the content inserted in between
- An element is composed of content that is to be displayed and tags that tell the browser what structure the content is to be understood to be.
<tagname> content </tagname>
For instance,
these tags
tell the content of the element how to display.
Thus, the element
<b>content</b>
tells the browser to show the word "content" as bold, or
content
For another instance,
these tags
tell the content of the element how to display.
Thus, the element
<i>content</i>
tells the browser to show the word "content" as italicized, or
content
back to top
Attributes and values of tags
Some elements - such as a Heading 4
can take
attributes
that define the properties of the element - such as a style
and
values - such as centering
Thus, the element
<h4
style="text-align:center">centering a Heading 4</h4>
tells the browser to show the words "centering a Heading 4" in Heading 4 style and centered, or
centering a Heading 4
back to top
They follow rules about nesting and placement.
In general, both sides of the content must be balanced and consistent.
The element
<h3
style="text-align:right"><i> the marked-up content</i></h3>
tells the browser to
open heading 3
in a style
in which the text is displayed to the right of the line
open italics
the marked-up content
close italics
close heading 3
in mirrored order.
Or, as it will display
the marked-up content
back to top
HyperText Document structure
-
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 version>
<!-- this is a comment about the DOCTYPE, the html version of which should be specified -->
<html>
<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-003 Fall 2018 Information Tools | Sample Page </title>
<meta name ="description" content ="sample page for INLS161-003 Fall 2018 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>
Metadata typically define document title, styles, links, scripts, and other meta information.
back to top
Getting started with HTML
We'll sort of follow this W3C intro, doing the things he recommends as we go. You may, if you wish, use his guidance to create your own good code for your own new pages
back to top
HTML - practice | theory | tags | links | HTML terms | 02.01 | next session