SILS iSchool

29 Jan 2019

meets Tuesday and Thursday from 0800-0915

in Carolina Hall 220

Contact options

office hours in Manning 112


Value Added | daily

Class Schedule

Basics | sessions 01-05

10 Jan | intro
15 Jan | clients
17 Jan | servers
22 Jan | networks
24 Jan | basics lab

Web Development | sessions 06-11

29 Jan | HTML - practice | theory | tags | links | HTML terms | 02.01 | next session
31 Jan | presentational layer
05 Feb | working with layers
07 Feb | behavior layer
12 Feb | images & design
14 Feb | website lab

Document Markup | sessions 12-14

19 Feb | document markup
21 Feb | tools that read markup
26 Feb | document markup lab

Spreadsheets | sessions 15-19

28 Feb | spreadsheets
05 Mar | formulas & functions
07 Mar | data display

 09-17 Mar | Spring Break 

19 Mar | database tools
21 Mar | spreadsheets lab

Relational Database | sessions 20-26

26 Mar | relational databases
28 Mar | tables
02 Apr | relationships
04 Apr | input & output
09 Apr | SQL
11 Apr | complex queries
16 Apr | databases lab

Presentation | sessions 27-30

18 Apr | presentation design
23 Apr | presentation delivery
25 Apr | presentation lab
30 Apr | 0800-1100 | final in class presentation





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

  1. An HTML element usually consists of a start tag and end tag, with the content inserted in between
  2. 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

  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 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.

    <head>
        <title> INLS161-003 Spring 2019 Information Tools | Sample Page </title>
        <meta name ="description" content ="sample page for INLS161-003 Spring 2019 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