Download Web Site Construction I: HTML for Structure - Pdx

Web Site Construction I:
HTML for Structure
David Gerbing
School of Business Administration
Portland State University
Table of Contents
Typeface Conventions ....................................................................................................................................... 3 SECTION I
STRUCTURE THE WEB PAGE WITH HTML ........... 1 HTML ..................................................................................................................................................................... 2 Text vs. Binary Files .......................................................................................................................................... 2 Creating HTML Text ......................................................................................................................................... 2 An HTML File (for a single web page) ............................................................................................................. 3 Mark-up Tags for Document Structure (Elements) ........................................................................................... 5 paragraph ..................................................................................................................................................... 6 heading ......................................................................................................................................................... 6 lists ................................................................................................................................................................ 6 tables ............................................................................................................................................................. 6 div - generic block element ........................................................................................................................ 8 Mark-up Tags for Graphic and Hypertext Link Elements ................................................................................. 9 image ............................................................................................................................................................ 9 hypertext anchor ........................................................................................................................................ 10 navigation menus ...................................................................................................................................... 11 span - generic in-line element ................................................................................................................. 11 comments ................................................................................................................................................... 11 Example Web Page from HTML ..................................................................................................................... 12 Screen Colors ................................................................................................................................................... 13 INDEX .............................................................................................................. 2 © David W. Gerbing, 2013
Typeface Conventions
Typeface
literal
example
choice
Indicates …
a literal computer keyword, entered exactly as shown
a specific example of a word or phrase the user is free to choose
the name of the attribute for which the user is free to choose his or
her own word or phrase
Consider the following actual code,
<img src="images/jacket.jpg" alt="jacket">
.
Enter the <img src=" exactly as shown. Similarly for the alt=" and ">. The
phrase images/jacket.jpg is based on names supplied by the user, in this case a
directory called “images” and a file within that directory called “jacket.jpg”.
In contrast to the actual code displayed above, the more general definition
displays as
<img src="name" alt=”description” />
.
Here the user specifies his or her own chosen name, such as images/jacket.jpg
from the above example code.
SECTION I
STRUCTURE THE WEB PAGE WITH HTML
This section shows how to describe the structure of a document
with HTML. Structural elements include paragraphs, headings, lists
and tables.
Web Site Construction
HTML
HTML,
or Hypertext Mark-up Language, is an integral component of the World
Wide Web. Based upon previous work on the concept of mark-up languages,
Tim Berners-Lee developed HTML in 1989 while working at CERN, the European
Laboratory for Particle Physics in Geneva, Switzerland. As part of HTML, Mr.
Berners-Lee specified the form of a hypertext link which, when clicked,
transports the user to another web page. He also invented the naming system of
www.whatever.com, and he wrote the first browser and web server. Mr.
Berners-Lee continues to contribute to the development of the web through the
present as Director of the World Wide Web Consortium (W3C), an organization
that develops standards and specifications for the web. There is a more industry
focused and competing organization called the Web Hypertext Application
Technology Working Group (WHATWG).
Text vs. Binary Files
A web browser constructs much of the display of a web page from a type of
computer file called a text file, specifically an HTML text file.
A text file contains only digital representations of the standard
characters such as the uppercase letter A, punctuation and a few
control codes such as tab and linefeed.
A text file contains no styling commands for achieving presentation effects such
as italicized text or page numbering. As such, a text file is application
independent, belonging to no one single application. The same text file can be
read and written by many applications that vary from MS Word to specialized
text editors for developing web pages, such as Bluefish.
Creating HTML Text
Visual editors. A visual web page creation program, often called a WYSWYG
(What You See is What You Get) application, generates the HTML mark-up from
the page laid out by the user. The web site program that is almost a standard
among professional designers is Adobe’s Dreamweaver. Most applications
today, however, including MS Office, save the on-screen display of a document
to a web page.
To visualize how these web authoring systems work, consider MS Word, which
can serve as a WYSWYG editor for a single web page. Place a title, some
2
Gerbing © 2013
I. HTML
pictures and some text on a Word page, and use the Hyperlink… command from
the Insert menu to create some links. Then Save as Web Page… and the needed
HTML is automatically created. Just move a set of the created HTML files and
associated graphics to a web server and you have a web site!
These WYSWYG editors work well, but they are expensive (many hundreds of
dollars) and do not provide the highest level of control because they, and not
the user, generate the HTML mark-up. Ultimately most web site designers also
tweak the HTML themselves, or provide all of the mark-up. To do requires
another type of editor.
text editors. Some text editors, called HTML editors require the designer to
write his or her own HTML, which provides the ultimate level of control over the
implementation of the web page. Fortunately these editors provide many
features that facilitate this hand coding and, are also much more inexpensive
than products such as Dreamweaver. For example, a specialized text editor
automatically colors the HTML elements differently from the page’s content, and
inserts elements into the text directly from a dictionary of HTML tags obtained
from a special menu.
HTML
An excellent and free HTML editor is Bluefish. Besides being free of cost,
Bluefish also works on Windows, Mac and Linux/Unix. Any text editor, such as
NotePad on windows and TextEdit on the Mac, also work for editing HTML files,
but a primary advantage of Bluefish is the ability to browse for linked images
and web pages, from which Bluefish constructs the proper code that correctly
identifies the linked content.
An HTML File (for a single web page)
Before beginning a web project there is one step that first must be
accomplished.
First create a folder on your file system that will contain all of the
files of your web site. This folder includes an images folder for
storing all graphics to be displayed on the site.
From the beginning make sure that all files to be displayed on the finished web
site are contained within this same folder on your PC. Later these files will be
transferred to a web server for access to the entire Internet.
Mark-up. A text file primarily contains only standard text characters, so how is
the file styled for display? Embedded in the file are standard text characters
called mark-up tags, which indicate structural features such as the beginning of
Gerbing © 2013
3
Web Site Construction
a paragraph, or a second-level header. An application called a web browser
then reads the text file and displays the content according to the styling
instructions based on the various mark-up tags. Examples of a web browser
include Microsoft’s Internet Explorer, Apple’s Safari, and Google’s Chrome.
The file with the embedded mark-up tags is called an HTML file. These tags are
specified according to the HTML standard beginning with the work of Tim
Berners-Lee.
A web browser displays the web page according to the structure of
the HTML file provided by the mark-up tags (and their
corresponding styling instructions).
Figure 1. Initial formulation of input to, and output from, a web browser.
The web browser reads and transforms the HTML file into the displayed web
page1. Each HTML file corresponds to a single web page.
An HTML file specifies the document’s structure with marked-up content. The
structure of any document – a web page, an office memo, or a term paper –
consists of different logical parts, such as paragraphs and headings.
Each logical part of a document is an element.
The mark-up in an HTML file explicitly delineates, or marks up, the different
elements of a document with tags.
Markup tags set off an element with a start tag that contains the
tag’s name between angle brackets, as <name>, and a matching
ending tag – either another tag with a backslash in front of the
name, as </name>, or, if only one tag is needed, a backslash at the
end of the start tag, />.
1
As we see later, Section II, each browser contains default styling instructions for each markup tag. A web page also benefits from a customized design, provided by a technology called
CSS. So ultimately both HTML files and CSS files typically contribute to the browser’s
rendered web page, as well as a third technology called JavaScript.
4
Gerbing © 2013
I. HTML
For example, <p> and </p> tags embedded in the HTML file instruct the browser
that the enclosed content is a paragraph element. The browser then displays the
content formatted as a paragraph, by default with a leading blank line before the
content. The content, the body of the paragraph, begins on a new line when
the web page is displayed on the computer screen.
file structure. An HTML file begins with a DOCTYPE declaration that
indicates the file is of type HTML. An html tag marks the beginning of HTML
information with the <html> tag. Each HTML file contains a Head and a Body,
delineated by the <head> and <body> tags. The Head generally contains at least
the <title> tag to specify the title of the browser’s window (not the web page per
se) and also the <meta> tag to specify the character set used to encode the
characters in the file.
HTML
All of the marked-up contents of the web page appear in the Body. Everything
that appears on the generated web page appears in the Body. This general
structure of every correct HTML file follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title of browser window</title>
</head>
<body>
---- entire marked-up contents of the web page ---</body>
</html>
Obtain this template from the Bluefish HTML Text Editor with:
File à New From Template à HTML5.
Mark-up Tags for Document Structure (Elements)
The elements described below delineate a document’s structure in terms of its
constituent elements – its internal organization. All of these elements appear in
the Body of the HTML file. An element’s corresponding tags set off the element
from the rest of the document. The elements defined below, each with its own
set of mark-up tags are paragraph, heading, list, table, and the generic div
Gerbing © 2013
5
Web Site Construction
(division). The web browser interprets these elements to construct the displayed
web page.
paragraph
<p>some blah blah blah blah text</p>
By default, a web browser renders all information contained between <p> and
</p> as a separate block from the remainder of the document. The information
appears beginning on its own line, separated by a blank line from the
information that preceded it. Then the browser displays a new line after
displaying the paragraph.
When a browser displays an HTML file, the browser automatically compresses
any series of white space characters – including spaces, tabs and carriage
returns – into a single space. So in the HTML file this same paragraph listed
above could be written as
<p> some blah blah blah
blah text </p>
The browser identically displays either version of the HTML file.
heading
defines six levels of headings, numbered 1 through 6, where 1 refers to
the top most or first level heading. Headings typically display in larger fonts and
often in different colors than normal body text contained within paragraphs.
HTML
Mark-up the first, top-level heading element, as
<h1>Text of level 1 heading</h1>
.
Specify subsequent heading levels with numbers from 2 to 6 such as <h2>.
lists
<ul>
<li> list item 1</li>
<li> list item 2</li>
<li> list item 3</li>
</ul>
displays as
The ul tag in this mark-up refers to an unordered list. Use <ol> and </ol> for an
ordered (numbered) list. The <li> stands for “list item”.
tables
Tables have traditionally played a major role in the layout of the entire web
page. In the modern world, preferably restrict tables for their intended purpose:
6
Gerbing © 2013
I. HTML
the display of tabular text, a table of data with rows and columns. The most
basic mark-up of a table consists of three sets of tags:
1. <table> and </table> which define the beginning and the end of the table
2. <tr> and </tr> which define a table row
3. <td> and </td> which define a cell (of data) within each row of the table
A table displays content between <td> and </td> tags. Each set of <td> and </td>
tags defines a single table cell and appears within a table row marked by the <tr>
and </tr> tags. The HTML for the basic form of a table with two rows and three
columns follows.
<table border=”1”>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
<tr>
<td>R2C1</td>
<td>R2C2</td>
<td>R2C2</td>
</tr>
</table>
displays as
A key aspect of tables that makes them so versatile for web page display is that
virtually any content can appear inside a table cell, that is, between a matched
set of <td> and </td> tags. Not only can ordinary text be placed in a table cell, as
in the above example, but also images, video, forms, and even another table.
For example, the upper left-hand cell of a table may contain a picture, and the
upper right-hand cell of the same table may contain text that describes the
contents of the picture. Or, an entire table can be placed inside a table cell,
which results in a nested table.
Using a table to format the entire page, particularly a table with nested tables, is
an outdated 20th century technique for web page layout. The more modern
method for web page layout uses CSS, discussed later. Still, sometimes the
more modern techniques do not work reliably on all browsers, particularly
Microsoft’s buggy Internet Explorer 6, so web page design still typically
depends on a limited use of tables for page layout.
Gerbing © 2013
7
Web Site Construction
div - generic block element
The paragraph, header, list, and table elements are all examples of block
elements. The browser display separates a block element from the rest of the
text. When displayed on the web page, each block begins on a new line and all
content within the block shares at least some of the same styling characteristics.
Different elements of a document are often grouped into their own section. The
header at the top of a web page may contain a logo, a contact link, and a phone
number. Or, a navigation menu that consists of a series of links organized by
category may appear in the left column. When constructing an HTML file,
enclose the different elements that form a coherent logical group within their
own generic block element. This element delineates its own logical section – or
division.
Elements enclosed with <div> and </div> tags form a section
(division) of the document.
The div tags function as a container that sets off the enclosed content from the
remainder of the document.
Suppose a group of paragraphs and associated images are all centered. One
means to accomplish this centering is to separately style each paragraph and
image. A more straightforward alternative encloses the entire group of
paragraphs and associated images within the <div> and </div> tags. To indicate
centering or any other presentation styles, first identify the specific div block of
interest with the id attribute, such as
<div id="mycontent"> .
In this example, a set of CSS style rules defines the styling for the div block
named mycontent. The id attribute uniquely identifies this particular div block,
and attaches the specific set of styling rules with the same name of mycontent to
it.
The modern focus on using CSS to format the display of a web page relies
heavily upon dividing or laying out an entire document into specific sections,
such as with the <div> tag. The entire document is first divided into sections,
each of which in turn consists of a set of individual marked-up elements. The
CSS styling rules specify how the tags are formatted in the web page that the
browser constructs.
The HTML for a three-column web page is structured such as the following.
8
Gerbing © 2013
I. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3-columns</title>
<link rel="stylesheet" href="3colCSS.css" type="text/css" />
</head>
<body>
<div id="container">
<h1>This is the header area</h1>
<div id="leftcol"><!-- Left column -->
---- entire marked-up contents of left column ---</div>
<div id="rightcol"><!-- Right column -->
---- entire marked-up contents of right column ---</div>
<div id="centercol"><!-- Center column -->
---- entire marked-up contents of center column ---</div>
<div id="footer">
<p>This is the footer, which lies beneath all three columns.</p>
</div>
</body>
</html>
The <div id=”whatever”> and </div> tags delineate an entire section, and also link
to the corresponding CSS style rules that govern the display of the section.
Mark-up Tags for Graphic and Hypertext Link Elements
In the following definitions, name refers to a file name or URL (web address) and
description refers to a description of the name, both specified by the designer.
image
<img src="name" alt=”description” />
Gerbing © 2013
9
Web Site Construction
Example. <img src=”images/jacket.jpg” alt=”jacket” />
refers to a jpeg file (photograph) named jacket.jpg located in the images
subdirectory. Note that the expression images/ refers to content within the
specified folder, here called images.
The browser displays the image at the point in the document where the img tag
appears. Specify the image tag with at least two attributes. The src attribute, for
source, specifies the location of the image on the hard disk’s file directory. The
alt attribute facilitates web browsing for the visually impaired who have a text
reader attached to their computer. A text reader literally reads the text that
appears on the screen. When encountering an image the text reader reads the
contents of the alt attribute to the user.
In practice an img tag also typically includes the optional height and width
attributes such as height="31" and width="88", expressed in pixels. When the img
tag specifies the image’s height and width, the browser more quickly renders the
corresponding web page without first having to separately calculate the height
and width.
hypertext anchor
<a href="name">the link</a>
All content between the anchor tags becomes a link on the corresponding web
page. The link is usually text, a word or phrase, but it could be other content
such as an image. Clicking the on-screen link transports the user to the
reference specified in the href attribute. This reference can be a web page on
another web site located somewhere else on the World Wide Web, which
requires the full web address or URL for universal resource locator beginning
with the http. Or, the reference can be to another page on the same web site.
Example 1. HTML Code to link the abbreviation PSU to another site on the
web:
Check out <a href="http://www.pdx.edu">PSU</a> as a place to matriculate.
Displays as:
Example 2. HTML Code to link the phrase “new products” to a page on the
same site (in this example to a web page called products.HTML in the same
directory as the current web page):
Check out our <a href="products.html">new products</a>.
10
Gerbing © 2013
I. HTML
When referring to another web page on the same site, the http:// is no longer
used.
navigation menus
A navigation menu consists of a list of links. Within each link is the hypertext
link to the corresponding web page. Replace the # symbols with the actual
destination of the link. If the page to link to is not yet available, leave the #
symbol in the link until the page exists and the file name can be entered.
<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Usually these links are styled, such as, for example, to provide color and
rollover effects. This styling is with CSS, explained in the next section.
span - generic in-line element
Image and hypertext elements are examples of in-line elements. In contrast to
block level elements, an inline element flows with the text within which it is
placed. An example of an in-line element is an italicized word. The word
appears on the web page in the flow of text without beginning on a new line.
The generic inline element mark-up are the <span> and </span> tags. The
designer uses these tags to add styling features to an in-line element not
otherwise marked-up, such as changing the color of several words within a
sentence from black to red. As an example, the browser displays the words “Hi
There” in red when processing the following HTML.
We say <span style="color: red;">Hi There</span> when seeing someone
new.
A later section on CSS styling provides more detail regarding these style rules.
comments
A comment is text in the HTML file that the browser ignores. The purpose of a
comment allows the author to document his or her work. That is, the comment
should clarify the purpose of a segment of HTML code. All HTML comments are
text enclosed within a <!-- and a -->. For example, the text string <!-- Left
column --> is a comment.
Gerbing © 2013
11
Web Site Construction
Example Web Page from HTML
The HTML input shown below is displayed in the Bluefish editor. One of the
many features of this type of specialized text editor is the display of different
structural elements of the code in different colors and fonts. An HTML text editor
allows the different aspects of the markup, such as tags and paragraph content,
to be more easily visually distinguished from each other and from the actual
content of the page, displayed as ordinary black text.
HTML
Input
To display the web page from Bluefish, click on the Globe icon in the
Toolbar at the top-right of the window. The corresponding web page follows.
Browser Output
12
Gerbing © 2013
I. HTML
The preceding browser output rendered the corresponding input HTML file for
screen display. The displayed logo from file LogoColorW.gif resides in the
images subdirectory relative to the HTML file. Clinking on the underlined word
“link” calls up the home page for www.gerbing.com.
Unlike most web pages, this page contains no special styling for the browser
display. Instead, the browser formats each element according to it’s default
settings. For example, the default setting for the browser that generated the
previous web page (Apple’s Safari) displays lines of text within a paragraph as
black with one blank line inserted in front of the paragraph. Before showing
how to customize the presentation of the page, the next section shows how to
specify the colors on a computer display.
Screen Colors
Color is an important aspect of a web page. On a computer monitor each
screen pixel combines the three primary colors for light: red, green, and blue.
The RGB color model specifies the intensity of each of the three primary colors
on a scale from 0 to 255. For example, content formatted as rgb(255,0,0)
displays as red because red light is at maximum without any green or blue light.
Some often-used colors such as red can also be referred by their name.
All three primary colors at the full intensity of 255 yield white light. All three
colors at zero intensity yield black. Other combinations of red, green, and blue
provide for more than 16 million possible colors, of which some appear in the
following table.
Color Specification
rgb(0,0,0)
rgb(255,255,255)
rgb(255,255,0)
rgb(0,0,255)
rgb(102,0,255)
rgb(204,204,204)
Description
black
white
yellow
blue
purple
light gray
Pattern
absence of all color
full strength of all colors
full strength of red and green
full strength blue only
partial red and full blue
high red, green & blue
Choosing an appropriate color scheme for a web site can involve both analysis
and intuition developed from experience. Though the process can be fairly
involved, here is a simple style guide. If one or two more colors are needed to
complement a chosen color, a pleasing possibility scrambles the red, green and
blue intensities. For example, to complement rgb(153,204,255), try
rgb(255,153,204) and/or rgb(153, 255,204).
Gerbing © 2013
13
Web Site Construction
INDEX
E element, 3
block, 7
inline, 10
F heading, 6
html, 4
hypertext anchor, 9
image, 9
lists, 6
paragraph, 5
span, 10
tables, 6
file
binary, 2
H HTML, 2
M markup tag, 3
markup-tag
body, 4
T text editor, 4
U URL, 9
W white space, 5
div, 7
head, 4
2
Gerbing © 2012