Web Programming with Java - HyperText Markup Language Basics potx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.57 MB, 38 trang )
1
Web Programming with Java
HyperText Markup Language Basics
Huynh Huu Viet
University of Information Technology
Department of Information Systems
Email:
2008 © Department of Information Systems - University of Information Technology
2
Outline
WWW Client/Server Model
HTML Basics
File Management and Tips
Sample Exercise
2008 © Department of Information Systems - University of Information Technology
3
Client/Server Model
WWW Client/Server Model
Client's Functions
Server's Functions
Client/Server Interaction
2008 © Department of Information Systems - University of Information Technology
4
WWW Client/Server Model
`
Client
Web Server
Request
Response
• Microsoft Internet Information Server
• Apache Web Server
•……
• Microsoft Internet Explorer
• Netscape Navigator
• Mozilla Firefox
•……
2008 © Department of Information Systems - University of Information Technology
5
Client's Functions
Handle the user interface.
Translate the user's request into the
desired protocol.
Send the request to the server.
Wait for the server's response.
Translate the response into "human-
readable" results.
Present the results to the user.
2008 © Department of Information Systems - University of Information Technology
6
Server's Functions
Listen for a client's query.
Process that query.
Return the results back to the client.
2008 © Department of Information Systems - University of Information Technology
7
Client/Server Interaction
2008 © Department of Information Systems - University of Information Technology
8
Client/Server Interaction
2008 © Department of Information Systems - University of Information Technology
9
Client/Server Interaction
2008 © Department of Information Systems - University of Information Technology
10
Client/Server Interaction
2008 © Department of Information Systems - University of Information Technology
11
Client/Server Interaction
2008 © Department of Information Systems - University of Information Technology
12
Client/Server Interaction
2008 © Department of Information Systems - University of Information Technology
13
Client/Server Interaction
2008 © Department of Information Systems - University of Information Technology
14
Outline
WWW Client/Server Model
HTML Basics
Tags
Structure
Formatting
Graphics
Links
Tables
Colors
File Management and Tips
Sample Exercise
2008 © Department of Information Systems - University of Information Technology
15
HTML Basics: Tags
Tag – HTML Command
Used for
Text formatting
Image formatting
Hyperlinks
Other information
HTML Tag Structure:
<tag> text </tag>
<tag attribute=argument> text </tag>
2008 © Department of Information Systems - University of Information Technology
16
HTML Basics: Structure
<html>
<head>
…
</head>
<body>
…
</body>
</html>
2008 © Department of Information Systems - University of Information Technology
17
HTML Basics: Head Tags
<head>
<title> Weiss Associates </title>
<meta name=“keywords” content=“…”>
<meta name=“description” content=“…”>
<style> </style>
</head>
2008 © Department of Information Systems - University of Information Technology
18
HTML Basics: Body Tags
<body bgcolor=“red”>
<body background=“images/darthvader.jpg”>
<body link=“red” vlink=“blue” alink=“orange”>
2008 © Department of Information Systems - University of Information Technology
19
HTML Basics: Text Formats
<pre></pre>Creates preformatted text
<h1></h1> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<em></em> Emphasizes a word
<font size=#></font> Sets size of font, from 1 to 7
<font color=?></font> Sets font color
2008 © Department of Information Systems - University of Information Technology
20
HTML Basics: Formatting
<hr> Creates a horizontal line
<center></center> Centers a block of text
<p></p> Creates a new paragraph
<p align=?> Aligns a paragraph to the left, right, or center
<br> Inserts a line break
<blockquote> </blockquote> Indents text from both sides
<ol></ol> Creates a numbered list
<li></li> Precedes each list item, and adds a number
<ul></ul> Creates a bulleted list
2008 © Department of Information Systems - University of Information Technology
21
HTML Basics: Graphics
<img src="name">
Adds an image
<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle
<img src="name" border=?>
Sets size of border around an image
<img src="name" width=? height=?>
Sets size of of an image in pixels
2008 © Department of Information Systems - University of Information Technology
22
HTML Basics: Links
<a href="URL"></a>
Creates a hyperlink
<a href="mailto:EMAIL"></a>
Creates a mailto link
<a name="NAME"></a>
Creates a target location within a document
<a href="#NAME"></a>
Links to that target location from elsewhere in the document
2008 © Department of Information Systems - University of Information Technology
23
HTML Basics: Tables I
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
2008 © Department of Information Systems - University of Information Technology
24
HTML Basics: Tables II
<table border=#> Sets width of border around table cells
<table cellspacing=#> Sets amount of space between table cells
<table cellpadding=#> Sets amount of space between a cell's border and
its contents
<table width=# or %> Sets width of table - in pixels or as a percentage of
document width
<tr align=?> or <td align=?> Sets alignment for cell(s) (left, center, or
right)
<tr valign=?> or <td valign=?> Sets vertical alignment for cell(s) (top,
middle, or bottom)
<td colspan=#> Sets number of columns a cell should span
<td rowspan=#> Sets number of rows a cell should span (default=1)
2008 © Department of Information Systems - University of Information Technology
25
HTML Basics: Colors
Use predefined colors, or
Hex Codes (0-9ABCDEF)
