Review of HTML - HWS Department of Mathematics and Computer
Download
Report
Transcript Review of HTML - HWS Department of Mathematics and Computer
Review of HTML
CPSC 120
Principles of Computer Science
March 26, 2012
Quick Reminders
An HTML page is an ASCII source file (myfile.html)
you edit but is viewed through a Web browser.
HTML pages are formatted by tags:
<body bgcolor=“white”>
<font color=“black”>
This text is black on white background.
</font>
</body>
HTML documents are free format and generally
case insensitive. Document spacing is generally
ignored by browser. Caution: file names matter!
Web author must always keep straight the clientserver view for editing/posting/viewing her pages.
My First HTML Document
<html>
<head>
<title>My First Page </title>
</head>
<body>
This is my first web page!
<hr>
</body>
</html>
Question: How do I get this on the Web for others to see?
Browser View of the HTML
Local versus Remote/Global
Upload
Web author
Web Brower User
Local: Edited HTML File
Remote: Server File
Global: Internet HTTP request
Web Server
Overview of HTML Tags
Grouping/Alignment: <p>, <div>, <center>, <table>, <ul>,
<hr>, etc
Style/Decoration: <font>, <b>, <u>, <h2>, <h3>, etc
Navigation/Linking: <a> is the primary tag here
External Objects: <img>, <embed>, <object> tags
Forms: <form> for filling in user forms
Scripting: <script>
Phases of tag development
Very early days: Just get basic alignment and fonts!
Middle Ages: Add complex linking and images, scripting
Today: Use cascading style sheets (CSS) to overcome
problems with original designs for HTML
Many Tags Have Properties or Attributes
<hr> is the basic tag to draw a horizontal rule across the
width of the entire page
<hr width="100" size="4"> gives a horizontal rule 100
pixels wide, 4 pixels thick, centered on the page.
<hr width=”50%" size="4" align=“left”> gives a rule
across 50% of the page width and aligned to the left
Much of learning HTML concerns what tags are available
and what their attributes are! Practice, practice, practice.
Warning: Not all browsers render all tags and attributes
or they may render them quite different in appearance!
So called cross-browser compatible page design can be
frustrating and requires ingenuity on the designer’s part.
Getting Control of Alignment
We certainly want to control vertical and
horizontal spacing in our HTML pages.
Simple paragraph control uses <p>…</p>.
<p align=“left”>…</p> can be used to control
alignment as well as paragraph breaks.
<br> is a simple line break.
<pre> …</pre> overrides HTML control and
allows your source line breaks to be shown.
<ul> and <ol> provide unordered and ordered
lists to also control vertical spacing.
Horizontal Control is Harder
Lots of time was wasted trying to get good
horizontal control until the <table> tag was finally
well implemented.
Typical table use:
<table border=1 align=“center”>
<tr>
<td>Item in row 1, column 1</td>
<td>Item in row 1, column 2</td>
<td>Item in row 1, column 3</td>
</tr>
<tr>
<td colspan=2>Item in row2, column span of 2</td>
<td>Item in row 2, column 3</td>
</tr>
</table>
Images in Web Pages
Images can be included in HTML pages using the
<img src=“myImage.jpg” alt=”LMAO picture”>
Note: This assumes there is a file precisely
named myImage.jpg in the same directory as the
HTML page. This is a form of relative addressing.
Items are relative to where this HTML page is
located. PAY ATTENTION TO UPPER/LOWER CASE.
<img src=“images/myImage.jpg”> tries to locate
an image file in the images directory (folder)
supposedly found in the same directory as the
HTML page.
<img src=“myImage.jpg” align=“left” width=“100”
height=“100” alt=“myImage.jpg” title=“Roll over
title”> shows how tags quickly get complex!
Interruption! Base 16 Tutorial
Recall base 2, binary, used to represent numbers using
only 0 and 1?
Ex. 210 (decimal) = 128 + 64 + 16 + 2 = 1101 0010
We can simplify groups of four bits using base 16
(hexadecimal). 0000 (binary) = 0 (hex), 0001 (binary) =
1 (hex), etc. But 1010 (binary) = 10 (decimal) = A (hex)
and so on. So 1111 (binary) = F (hex).
In our example 210 (binary) = 1101 0010 (binary ) but
also D 2 (hex).
The decimal values 0-255 can be expressed as hex
values from 00 to FF.
A byte (8 bits) requires 2 hexadecimal digits so we can
efficiently express long binary strings more compactly.
Binary - Hexadecimal
Equivalents
Binary
0000
0001
0010
0011
0100
0101
Hex
0
1
2
3
4
5
Binary
1000
1001
1010
1011
1100
1101
Hex
8
9
A
B
C
D
0110
0111
6
7
1110
1111
E
F
Which Leads to HTML Colors
HTML uses RGB (red, green, blue) color designators for
non-basic color names.
Each RGB color descriptor is composed of three
components: red, green, and blue.
Each component has 256 (8 bits = 1 byte!) possible
values so we use base 16 as a shorthand for component
values. So red ranges from 00 to FF in hexadecimal!
White: red=255, green=255, blue=255. Hex: FF FF FF
Black: red=0, green=0, blue=0. Hex: 00 00 00
“Pure red” is red=255, green=0, blue=0. Hex: FF 00 00
Similarly for pure green and blue. Most colors are
combinations of mixed RGB values.
We can specify an RGB background color for our page
body this way: <body bgcolor=“#26C2A0”>
Equal R=G=B values give grey scale!
Hypertext Links
The <a href=….>Link text</a> tag is used in two ways to allow the user
to “go to” another view or page. The href attribute is used point where
the user view moves to when the corresponding link is clicked.
Named Anchors
<a href="#tables">Jump to the Tables Section</a>
displays an underlined link Jump to the Tables Section. This link must
be matched by a named anchor like this:
<a name="tables">Tables Section</a>
This is the place where the user view moves when the link is clicked. If
no matching named anchor is found, the browser simply shows the first
line of the page.
Hypertext Links (continued)
Another use for links or anchors is to move between HTML documents, load
images, or other documents. Recall Uniform Resource Locators (URL) can
be used to name and retrieve Web documents. A typical complete URL
contains the protocol, DNS entry, directories, etc. An example is
http://math.hws.edu/vaughn/cpsc/120/lecture/test-page.html.
Hyperlinks and URLs
<a href=”http://www.google.com">Search Google</a>
displays an underlined link Search Google shown here.
When clicked, the user view changes to google.com when the link is
clicked. More correctly, the default or home page on the Web server with
URL www.google.com. Links to invalid or misspelled URLs often create
a “File not found: 404” error code depending on Web server software.
Graphical Links
An often used technique involving hyperlinks is to use an image as a
graphical link. This can be overused and also is sometimes unclear that the
user is to click on the image in order to activate the link.
<a href=”http://www.google.com">
<img src=“gicon.gif”>
</a>
displays a graphical link shown here.
Notice this may work fine but NOT look
good on your background!
You can use additional attributes on the <img> tag to control the border,
margin spacing, etc. Check your HTML tutorial for more details. You can put
such links inside tables to control alignment as the image placement can be
troublesome when a screen is resized.
Now Put it Together and KISS
Design your document to be read top to bottom
as it may scroll through several screens.
Try to code so users with smaller or larger
screens see much the same thing.
Don’t load your pages with lots of animated GIF
images and complex graphics for no reason.
Avoid busy backgrounds with text in front.
Avoid red-text-on-dark-background styles of
fonts and backgrounds as they are very hard to
read.
There is a reason people like/use Google. Look
at their portal again.
KISS is a good motto in most Web designs.
Good Web Pages Start with Good Design
Be clear what you want to express/display on your web
pages. Draw a diagram if it helps.
Try several layouts and arrangements before starting to
finally code your pages.
Consider putting content on several linked pages and
use anchors/links to allow navigation.
Collect all the materials you need before coding your
page. An unavailable resource may mean yet another
redesign on the fly.
Use your sense of good design in pages you can easily
find information and navigate. Cool Flash movies and
lots of animation usually add nothing to a poorly
designed web site.
Future Plans/Needs
Certain Web sites have forms which allows
users to register or purchase goods by filling in
information and submitting it to server-side
software.
Some sites check validity of user input (last
name entry box not empty!) before submission.
Many, many add-ons to sites including Flash,
movies, animations, music, etc. How?
Writing pure HTML is slow and error-prone.
What about an HTML editor?
Better upload/site management tools?