Goals
1. HTML course provides students with the skills to build web pages using the W3C (World Wide Web Consortium)standard.
2. A brief introduction to the leading Web development technologies
Overview
1.Creating static web pages:
- Basic HTML Tags
- HTML Text Formatting
- HTML Links
- HTML Lists
- HTML Tables
- HTML Frames
- HTML Forms and Input
2.Developing dynamic web pages:
- CGI(PERL)
- PHP
- ASP
- Servlet
- JSP
Objectives
- Understand and create HTML web pages
- Use HTML <Form> to interact with backend resouces
- Have a knowlegde of web application architectures
Module 1:Basic HTML Tags
HTML Structure
A Simple HelloWorld.html Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Hello world!Test</title> </head> <body>Hello world!</body> </html>
the sample contains
1. A line containing HTML version information
2. a declarative header section
3. a body containing the document's actual content. The body may be implements by the <body> element or the <frameset> element.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
declares the 4.01 version of HTML is used in the document
the document type declaration names the document type definition(DTD) in use for the document."strict.dtd"is the default DTD.
"EN"indicates the language in the DTD is English
- <head>
the <head> element contains information about the current document,such as its title,keywords that may be useful to search engines, and other data that is not considered document content.
- <meta>
Meta Names are used to communicate informaction about the web page rather than document content.
They are designed to help search engines index documens
- <title>
<title> is what will be used by the browser to display at the top of the browser window
1. Basic HTML Tags
1. Headings:
<h1>I'm h1</h1>
<h2>I'm h2</h2>
<h3>I'm h3</h3>
<h4>I'm h4</h4>
<h5>I'm h5</h5>
<h6>I'm h6</h6>
2.Paragraghs
<p>This is a paragraph</p>
<p>This is another paragraph</p>
3.Line Breaks
<p>This <br> is <br> a para <br>graph with line breaks</p>
4.Comments in HTML
<!-- This is a comments -->
2. HTML Text Formatting
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
3. HTML Lists
1.Unordered Lists (没有顺序的编号)
<ul><li>Coffee</li><li>Milk</li></ul>
2. Ordered Lists
<ol><li>Coffee</li><li>Milk</li></ol>
3. Definition List （定义列表）
<dl><dt>Coffee</dt><dd>Black Hot Drink</dd>
<dt>Milk</dt><dd>White cold drink</dd></dl>
4. HTML Tables
Table
<table> <tr><td>采购订单编号</td><td>客户名称</td><td>备注</td></tr> <tr><td>K1100008</td><td>华诚电子</td><td>一家销售电子产品的企业</td></tr> </table>
Headings in a Table
<table> <tr><th>采购订单编号</th><th>客户名称</th><th>备注</th></tr> <tr><td>K1100008</td><td>华诚电子</td><td>一家销售电子产品的企业</td></tr> </table>
Empty Cells in a Table
<table> <tr><th>软件名称</th><th>出品公司</th><th>备注</th></tr> <tr><td>红色警戒2尤里的复仇</td><td>WESTWOOD</td><td> </td></tr> </table>
5. HTML Frames
1. Frames
<frameset>Defines a set of frames
<frame> Defines a sub window( a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
<iframe> Defines an inline sub window(frame)
2.Navigation frame
<frameset cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="tryhtml_frame_a.htm" name="showframe"></frameset>
tryhtml_contents.htm code snippet
<a href="tryhtml_frame_a.htm" target="showframe">Frame a</a><br> <a href="tryhtml_frame_b.htm" target="showframe">Frame b</a><br> <a href="tryhtml_frame_c.htm" target="showframe">Frame c</a><br>
6. HTML Forms and Input
- Forms : In general, you need a CGI script,PHP,ASP or JSP in order to use HTML form to invocate （调用，相当于invoke） a server side programming.
<form>
<input>
<input>
</form>
- Form Format : <form action="......" method = "..."></form>
-action: for server side programming. For Example,action="Hello.jsp"
-method: Get, Post
- Get:
clients request the form data are encoded into the URL. The web server
uses the environment variables to retrieve these data.One example is as below:
http://www.baidu.com/s?bs=html&f=8&rsv_bp=1&wd=html&inputT=0 (可以在百度上搜索html)
- Post:
the request contains both headers and a body.(This is just like the response from the server.) The body is then the form data encoded just like they would be on the URL if one had used GET.
- The GET method is suitable for the data are less than 256 characters, and the request is for the purpose of "search".
- The POST method should be used when the request causes a permanent changes of state on the server(such as adding to a data list).
HTML Forms and Input
Input Types
- Text Fields : <input type="text" name="firstname">
- Password : <input type="password" name="pwd" size="10" maxlength=8>
- Radio Buttons: <input type="radio" name="sex" value="male">Male
- Checkboxes: <input type="checkbox" name="bike">Bike
- Buttons: <input type="button" value="Hello world!">
- Drop-down box :
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
- Textarea: <textarea rows="10" cols="30"></textarea>
HTML Forms and Input
Form's Action and the submit, reset buttons
<form name="form1" method="post" action="login_confirm.jsp" onSubmit="return isValid();" > <table width="169" height="55" align="center" border="0"> <tr> <td> <p>用户名: <font size="2"> <input name="user_id" type="text" id="user_id" size="12"> </font></p> <p>密 码: <input type="password" name="password" size="12"> </p> <p align="center"> <input type="submit" value="提交"><input type="reset" value="重置"> </p> </td> </tr> </table> </form>
HTML Forms and Input
Forms's Action and the submit, reset buttons
Send e-mail from a form
<form action="MAILTO:john@tarena.com" method="post" enctype="text/plain"> </form>
HTML Images
Images
<img src="software.jpg" alt="Tarena Students" with="258" height="148">
Background Images
<body background="background.jpg">
Link an image
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
HTML Multimedia
Audiovisual or audio playing
<embed src="music/Canon.mp3" height="160" width="244" controls="bigconsole" autostart="false" nosave="true" loop="true">
</embed>
Background Music
<bgsound src="space2.mp3" loop="10">
Java Applet
- Embed a java applet in HTML
<applet code="HelloWorldApplet.class" width=190 height=160></applet>
HTML 4.01 Features
All features we indroduced above comply with W3C HTML Version 3.2
In HTML Version 4.01, there are some new attributes are introduced,such as Cascading Style Sheet(CSS)for separating the presentation of the document from its structure.
<style> tag: Internal Style Sheet example
<head>
<style type="text/css">
body{background-color:red}
p{margin-left:20px}
h1{color:white}
h3{color:blue}
</style>
</head>
<link>tag:External Style Sheet example
<head><link rel="stylesheet" type="text/css" href="style.css"></head>
Inline Styles
<p style="color:red;margin-left:20px">
This is a paragraph
</p>
CSS Syntax
The CSS syntax is made up of three parts: a selector,a property and a value.
selector{property:value}
examples:
body{color:black} p{font-family:"sans serif"} p{text-align:center;color:black;font-family:arial} h1,h2,h3,h4,h5,h6{color:green}
Seletor:class,id
Class Attribute:
p.right{text-align:right} // defining class "right"
p.center{text-align:center} // defining class "center"
<p class="right">
This paragraph will be right-alignd.</p>
<p class="center">
This paragraph will be center-alignd.</p>
Id Attribute
#wer345{color:green} // declare an id
<h1 id="wer345">Some text</h1>
- <span> and <div>:define content to be inline(<span>) or block-level(<div>) to achieve the desired structural and presentational effects.
<DIV class="client"> <P><SPAN class="title">Client Information:</SPAN> <TABLE> <TR><TH>Last Name</TH><TD>Boyera</TD></TR> <TR><TH>First Name</TH><TD>Stephane</TD></TR> <TR><TH>TEL</TH><TD>13715776073</TD></TR> <TR><TH>Email:</TH><TD>shin@163.com</TD></TR> </TABLE> </P>Information is over </DIV>
CSS Font
- Font Text
<head> <style type="text/css"> h3{font-family:times} p{font-family:courier} </style> </head>
- Font Size
<head> <style type="text/css"> h1{font-size:150%} h2{font-size:130%} p{font-size:200%} </style> </head>
- Font Style
<head> <style type="text/css"> h1{font-style:italic} h2{font-style:normal} p{font-style:oblique} </style> </head>
CSS List
- Set an image as the list-item marker
<head>
<style>
ul{
list-style-image:url("/images/arrow.gif")
}
</style>
</head>
- CSS List Application Example
<body>
<p><b>Note:</b>Netscape 4 does not support the "list-style-image" property.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
CSS Positioning
Aligning images
<head>
<style>
img.top{vertical-align:text-top}
img.bottom{vertical-align:text-bottom}
</style>
</head>
Aligning images example:
<body>
<p>This is an
<img class="top" src="/images/alert_red_bg.gif">
image inside a paragraph</p>
<p>This is an
<img class="bottom" src="/images/alert_red_bg.gif">
image inside a paragraph</p>
</body>
Module 2:Web Development Introduction
How the web works
Web server:
A web server is a just a computer program that listens for rquests from browsers and then execute them. For example, Apache web server, Microsoft IIS Server.
Request :
Client use HTTP protocol to request a web server to retrieve a document stored in the server side. The communication protocol between a client and a server uses TCP/IP(or FTP etc) protocal
Response: When the server receives the HTTP request it locates the appropriate document and returns it . example of Ht is abelow:
HTTP/1.1 200 OK
Server:Internet Explorer 5.5
Date:Tuesday,25-Nov-01 01:22:04 GMT
Last Modified:Thursday,20-Nov-01 10:44:53 GMT
Content-length:6372
Content-type:text/html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Web Archiecture Diagram
J2EE Architecture
Comparison of CGI,PHP,ASP,JSP
Real World Web Applications
User Log In
Shopping Cart
Chatting Room
BBS(Bulletin board system)
On-line bank transations
Flight tickets reserving system
A virtual book store
