client / server web browser (firefox,msie) web server (apache, lighttpd) request file http: the...

Client / Server

Web Browser(FireFox,MSIE)

Web Server(apache, lighttpd)

request request

file file

HTTP: the common protocol the client and server use to communicate

(≈language)

TCP/IP Connections

Web Browser Web Server

request request

file file

TCP: Virtual ConnectionIP: Connection Protocol (≈Phone

Exchange)

Client / Server Sides

•Client side takes place in the browser

•Dynamic-HTML (DHTML)

•This course is purely on the client side

•Dynamic Web pages are generated on the server side (often using a database)

•CGI programs: Perl, Ruby, …

•Template systems: PHP, JSP, …

•TEXT document that contains:

•Content is “Tagged” for classification and presentation purposes

•The text to be presented

•References to content to be presented (like images)

•Filename suffix: .html

HyperText Markup Language

•Numerous tutorials on web

•“View source” is in most browsers

•some browsers you can right-click on a page and then select view source

•save the page and open in any text editor

•Experiment using trial and error to figure out how things work

How to learn HTML

•HTML format Validation Tools

•Point out your mistakes

•Some give descriptions and examples of what you should do

•Not “smart” so they can’t be 100% relied upon;

•Errors may be too geeky to understand

How to learn HTML

•Basic HTML element consists of a tag with attributes, text, and end tag:

•<tag attribute=“value”>some text</tag>

•Attribute values placed in double quotes

•Multiple attribute/value pairs separated by white space

•Close tags in reverse order of start tags

Basic HTML

Open Tag Close tagContent

<tag> Hello World! </tag>

(tag obviously stands for an html codeword)

<tagattribute=”value“> Hello World!</tag>

(Attribute names and their values depend onthe HTML codeword used in the tag)

(It is similar to using parentheses in english)

HTML ConvertersMS Word, Open Office

Visual HTML EditorsDreamweaver(great), FrontPage (horrid)

Text Editors (some have HTML tools)pico, vi, emacs, Notepad, Textpad, BBedit

Ways to Write HTML

•HTML not case-sensitive

•Old convention is to use all uppercase

•Worldwide Web Consortium (W3C) recommends all lower-case tags in HTML 4 recommendation; XHTML demands lower-case tags

•XHTML is XML legal (case sensitive)

Uppercase vs. Lowercase Tags

•All HTML documents are surrounded by <html> and </html> tags

•HTML comment:



<html> & comments

•HTML documents divided into a <head> and a <body>

•Title tag resides in <head> section and describes content of browser title bar

•Content to be displayed in browser window is placed between <body> and </body> tags

•Text may display in browser even breaking the rules (depends on the browser)

Fundamentals

Basic HTML Tags<html> HTML Document<head> Document Header<title> Page Title</title></head>

<body>Document Contents

</body></html> End of document

Different tags have different allowed attributes:

Examples:<p align=“right”><body bgcolor=“red” ><table width = “50%” border = “5”>

HTML versionsHTML 3.2

HTML 5.0

HTML 4.0.1 TransitionalHTML 4.0.1 FramesetHTML 4.0.1 StrictXHTML 1.0 TransitionalXHTML 1.0 FramesetXHTML 1.0 Strict

XHTML 1.1

XHTML 2.0

•HTML is rendered differently by different browsers and versions of those browsers

•Always test in every browser and release level users are expected to use

•Optionally, the specific HTML version used can be specified to aid the browser in properly rendering the page (as well as better handling of your mistakes)

Browser differences

<p> Paragraph: separated by a single line of white space<br> Line breakNOTE: no end tag is used for this tag

Headers (<H1> through <H6>) a very basic way of altering font size based on the “level” of the header tag (H1 is largest)<hr> Horizontal rule (a single line)NOTE: no end tag is used for this tag

Formatting text

<html>

<head> <title>Hello World</title></head>

<body> <h1>Hello World (headline tag)</h1>

<h2>smaller (subhead) headline tag</h2>

<p>This body text line contains several tags including <i>italics</i>, <b>bold</b>, <abbr>abbreviation</abbr> and <samp>sample or example</samp>. The following line creates a line break followed by a horizontal rule line:

</p> <br /> <hr />

<img src="graphic.gif" /> This line contains an image.

</body> </html>

•<font> tag applies to all text that follows until the </font> tag

•<font face = “arial” color = “red” size =“5”

•Size attribute is relative ranging from 1 to 7; 3 is default

•Good practice to use only common fonts like arial, times, helvetica, etc.

Fonts

•<hr />

•<hr align=”center” />

•<hr size="12" />

•<hr width="30%" />

•<hr width="15" />

•<hr align=”center” size="12" width="30%" />

Horizontal Rule Lines

•<img src = “filename” width=”9” height=”#”/>

•GIF

• interlacing, transparent colors, animation

•2 - 256 colors ONLY

• JPG (JPEG)

•PNG (sometimes pronounced “ping”)

Image Tag

•Hexadecimal for Red, Green, and Blue lights

•00 = no light ; ff = full light

•Black: color=“#000000”

•Red: color = “#ff0000”

•Green: color= “#00ff00”

•Blue: color = “#0000ff”

HTML colors RGB

•Browsers since 2000 support a set of color names, e.g., red, antiquewhite, aquamarine

•W3C standard does not support color names

•Browsers differ in the name list supported

• I RECOMMEND THAT YOU DONT USE THEM

HTML Color Names

For jumping around within the same pageName attribute of anchor tag (<a>) marks a location on a pageLink to that anchor is indicated with “#” appended to the front of thename<a name = "linked"></a><a href = "#linked">Go to linked text</a>Most useful pages large enough to scroll

Internal Links

•<a> (anchor) element inserts a link

•<a href=“http://www.msnbc.com”>msnbc</a>

•<a href=“ftp://www.asite.edu/afile.zip”> Download the file </a>

•<a href=“mailto://[email protected]”>email me</a>

External Links

http://www.msnbc.com/

http://www.asite.edu/afile.zip

mailto://[email protected]

•Relative to the location of the current file (page)

•<A HREF=“subdir/help.html">Help</A>

•Links to a file in subfolder “subdir” called help.htm

•To go up a level: (../)

• <A HREF=“../helpmain.html">Help</A>

Pathnames

•Absolute: specify entire url

•<A HREF=“http://www.asite.com/Help.htm">

• Help</A>

• Internal vs. external links

•<base>

•defines the base url for a whole document

Pathnames

Unordered Lists

<ul><li>Java</li><li>C++</li><li>Perl</li></ul>

•Java•C++•Perl

Ordered Lists

<ol><li>Java</li><li>C++</li><li>Perl</li></ol>

1.Java2.C++3.Perl

Nested Lists<ol><li>Java</li><li>C++</li><li>Perl</li><li><ul><li>Shell</li><li>CGI</li></ul></li></ol>

1.Java2.C++3.Perl•Shell•CGI

• Spreadsheet - like uses

• Used for Layout

• Can be used as graphics themselves

• Except for Style Sheets, Tables are the only way to format the layout of a page

• Tables are supported even in the oldest browsers

• Table formating can be tricky

HTML Tables

HTML <table> Structure

<TD><TD>TTable able DDataata

</TD></TD>Table Data cell Table Data cell

Table Data cell Table Data cell Table Data cell




Tab

le R

ow

</T

R>

<TR

>

</T

R>

<TR

>

</T

R>

<TR

>

</T

R>

<TR

>

</T

R>

<TR

>

<table border=“5” width = “100%” bgcolor=“yellow”>

<tr> table row

<td> table cell</td>

<td> table cell 2</td>

</tr>

</table>

table cell table cell 2

Table Structure

a cell

span 2 columns

span 2 rows

columns

row s

HTML <table> Structure

<TD>Table Data

</TD>

<TD colspan=”2”><TD colspan=”2”>TTable able DDataata

</TD></TD>

<TD <TD rowspan=”2”>rowspan=”2”>

TTable able DDataata</TD></TD>

Tab

le R

ow

</T

R>

<TR

>

</T

R>

<TR

>

</T

R>

<TR

>

</T

R>

<TR

>

</T

R>

<TR

>

Note on Spanning

•Spanning table cells extend into other cells, pushing them over in the row they span into

•Browsers will probably guess you want additional columns in the table

•You must remove these extra cells from the row

•Total TD tags + spans = # columns in a row

•Spanning table cells extend into other cells, pushing them over in the row they span into

•Browsers will probably guess you want additional columns in the table

•You must remove these extra cells from the row

•Total TD tags + spans = # columns in a row

Example Table

<td>Cell 1A</td><td>Cell 1B</td>

<tr>

</tr>

<td rowspan=”2”>Cell 2A</td><tr>

</tr>

<table border=”0”>

</table>

Cell 1ACell 1BCell 2AB

•Any valid HTML is ok in Table Data <TD>html</TD>

•width / height (pixels or %)

•align (left/right/center)

•valign (top/bottom/middle)

•border (<table border=”1”)

•bgcolor

•Create problems in special cases

•Often limited; forces use of tables inside of tables (legal, but avoid doing it)

•Server programming often requires solid understanding of hand-coding tables

•Good text editor skills makes a human almost as fast as a table tool (and a human is more flexible)

Table Editors

•CSS takes over visual characteristics; attributes that will not fade away:

•td: colspan rowspan

•tr: width height

•Newer table tags:

•<thead> <tbody> <tfoot>

•CSS can also do tables in the same way

Future Trends

Online Tutorials• http://www.w3schools.com/html/html_tables.asp

• google for “html table tutorials”

•URLS are not always used to specify some file’s location on a server; they are also used to give commands:

•http://www.dict.org/bin/Dict?Form=Dict2&Database=devils&Query=BLANK

•But replace the word BLANK with any word -- try it a few times

Fun Stuff

client / server web browser (firefox,msie) web server (apache, lighttpd) request file http: the...

Documents