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
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
