Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the...
-
Upload
brent-parks -
Category
Documents
-
view
237 -
download
0
Transcript of 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:
<!-- this is a comment
more comment here
last comment line -->
<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>
<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
•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
Table Data cell Table Data cell Table Data cell
Table Data cell 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