Web Programming with Java HyperText Markup Language Basics Huynh Huu Viet University of Information Technology Department of Information Systems Email: viethh@uit.edu.vn... 2008 © Depart
Trang 1Web Programming with Java
HyperText Markup Language Basics
Huynh Huu Viet
University of Information Technology Department of Information Systems
Email: viethh@uit.edu.vn
Trang 22008 © Department of Information Systems - University of Information Technology 2
Trang 32008 © Department of Information Systems - University of Information Technology 3
Trang 42008 © 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
Trang 52008 © Department of Information Systems - University of Information Technology 5
Client's Functions
desired protocol.
"human-readable" results.
Trang 62008 © Department of Information Systems - University of Information Technology 6
Server's Functions
Trang 72008 © Department of Information Systems - University of Information Technology 7
Client/Server Interaction
Trang 82008 © Department of Information Systems - University of Information Technology 8
Client/Server Interaction
Trang 92008 © Department of Information Systems - University of Information Technology 9
Client/Server Interaction
Trang 102008 © Department of Information Systems - University of Information Technology 10
Client/Server Interaction
Trang 112008 © Department of Information Systems - University of Information Technology 11
Client/Server Interaction
Trang 122008 © Department of Information Systems - University of Information Technology 12
Client/Server Interaction
Trang 132008 © Department of Information Systems - University of Information Technology 13
Client/Server Interaction
Trang 142008 © Department of Information Systems - University of Information Technology 14
Trang 152008 © Department of Information Systems - University of Information Technology 15
<tag> text </tag>
<tag attribute=argument> text </tag>
Trang 162008 © Department of Information Systems - University of Information Technology 16
Trang 172008 © 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>
Trang 182008 © 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”>
Trang 192008 © 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
Trang 202008 © 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
Trang 212008 © 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
Trang 222008 © Department of Information Systems - University of Information Technology 22
Trang 232008 © 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
Trang 242008 © 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)
Trang 252008 © Department of Information Systems - University of Information Technology 25
HTML Basics: Colors
Trang 262008 © Department of Information Systems - University of Information Technology 26
Trang 272008 © Department of Information Systems - University of Information Technology 27
File Management
Organize and plan your site
Default file: index.htm(l) or default.htm(l)
Use meaningful file and directory names
Cross-platform compatibility (PC, Mac,
UNIX)
Consistency (lowercase, UPPERCASE)
Only use only letters, numbers and “_”, “-”, and “.”
Media files need appropriate extensions
(.gif, jpg, mov)
Create backups
Trang 282008 © Department of Information Systems - University of Information Technology 28
filenames
Keep it Simple!
Trang 292008 © Department of Information Systems - University of Information Technology 29
Trang 302008 © Department of Information Systems - University of Information Technology 30
Sample Exercise
Objective: Use simple HTML concepts to
create a web page
Trang 312008 © Department of Information Systems - University of Information Technology 31
Step 1: Structure
Trang 322008 © Department of Information Systems - University of Information Technology 32
Step 2: Include Table
Trang 332008 © Department of Information Systems - University of Information Technology 33
Step 3: Add Table Rows
Trang 342008 © Department of Information Systems - University of Information Technology 34
Step 4: Add Table Data
Trang 352008 © Department of Information Systems - University of Information Technology 35
Step 6: Save and View
Trang 362008 © Department of Information Systems - University of Information Technology 36
Step 6: Save and View
Trang 372008 © Department of Information Systems - University of Information Technology 37
Readings & Exercise
Trang 382008 © Department of Information Systems - University of Information Technology 38
Discussion