client / server web browser (firefox,msie) web server (apache, lighttpd) request file http: the...
TRANSCRIPT
![Page 1: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/1.jpg)
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)
![Page 2: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/2.jpg)
TCP/IP Connections
Web Browser Web Server
request request
file file
TCP: Virtual ConnectionIP: Connection Protocol (≈Phone
Exchange)
![Page 3: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/3.jpg)
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, …
![Page 4: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/4.jpg)
•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
![Page 5: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/5.jpg)
•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
![Page 6: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/6.jpg)
•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
![Page 7: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/7.jpg)
•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
![Page 8: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/8.jpg)
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)
![Page 9: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/9.jpg)
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
![Page 10: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/10.jpg)
•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
![Page 11: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/11.jpg)
•All HTML documents are surrounded by <html> and </html> tags
•HTML comment:
<!-- this is a comment
more comment here
last comment line -->
<html> & comments
![Page 12: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/12.jpg)
•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
![Page 13: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/13.jpg)
Basic HTML Tags<html> HTML Document<head> Document Header<title> Page Title</title></head>
<body>Document Contents
</body></html> End of document
![Page 14: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/14.jpg)
Different tags have different allowed attributes:
Examples:<p align=“right”><body bgcolor=“red” ><table width = “50%” border = “5”>
![Page 15: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/15.jpg)
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
![Page 16: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/16.jpg)
•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
![Page 17: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/17.jpg)
<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
![Page 18: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/18.jpg)
<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>
![Page 19: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/19.jpg)
<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>
![Page 20: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/20.jpg)
•<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
![Page 21: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/21.jpg)
•<hr />
•<hr align=”center” />
•<hr size="12" />
•<hr width="30%" />
•<hr width="15" />
•<hr align=”center” size="12" width="30%" />
Horizontal Rule Lines
![Page 22: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/22.jpg)
•<img src = “filename” width=”9” height=”#”/>
•GIF
• interlacing, transparent colors, animation
•2 - 256 colors ONLY
• JPG (JPEG)
•PNG (sometimes pronounced “ping”)
Image Tag
![Page 23: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/23.jpg)
•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
![Page 24: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/24.jpg)
•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
![Page 25: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/25.jpg)
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
![Page 26: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/26.jpg)
•<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
![Page 27: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/27.jpg)
•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
![Page 28: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/28.jpg)
•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
![Page 29: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/29.jpg)
Unordered Lists
<ul><li>Java</li><li>C++</li><li>Perl</li></ul>
•Java•C++•Perl
![Page 30: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/30.jpg)
Ordered Lists
<ol><li>Java</li><li>C++</li><li>Perl</li></ol>
1.Java2.C++3.Perl
![Page 31: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/31.jpg)
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
![Page 32: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/32.jpg)
• 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
![Page 33: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/33.jpg)
![Page 34: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/34.jpg)
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
>
![Page 35: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/35.jpg)
<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
![Page 36: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/36.jpg)
Table Structure
a cell
span 2 columns
span 2 rows
columns
row s
![Page 37: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/37.jpg)
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
>
![Page 38: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/38.jpg)
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
![Page 39: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/39.jpg)
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
![Page 40: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/40.jpg)
•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
![Page 41: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/41.jpg)
•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
![Page 42: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/42.jpg)
•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
![Page 43: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/43.jpg)
Online Tutorials• http://www.w3schools.com/html/html_tables.asp
• google for “html table tutorials”
![Page 44: Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate](https://reader038.vdocuments.mx/reader038/viewer/2022102908/56649de65503460f94ade947/html5/thumbnails/44.jpg)
•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