Web Application Development
Hypertext Markup Language
(HTML)
Outline
• Definition
• Structure of a Web page
• Tags, Elements and Attributes
• Images
• Tables
2
Definition
• HTML is Hypertext Markup Language, which
defines the markup tags to control the
appearance of web documents
• Web browsers use markup tags to present
documents
• Nowadays, HTML is the most widely used
language on the Web
3
Example
<html>
<head>
<title>Web Application Development</title>
</head>
<body>
<!– Example of markup tags in HTML -->
<h1>About the Course.</h1>
<p>The course provides students with basic knowledge about Web
technologies. On finishing the course, students should be able to
develop simple web application.</p>
<p>During the course, students have to complete lecture notes and
assignments.</p>
</body>
</html>
Markup tags used are: <html>, <head>, <title>, <body>, <h1>, <p>
Comment tag: <!– comment content -->
4
Example
<html>
<head>
<title>Web Application Development</title>
</head>
<body>
<h1>About the Course.</h1>
<p>The course provides students with basic knowledge about Web
technologies. On finishing the course, studentsTitle
should be able to
develop simple web application.</p>
<p>During the course, students have to complete lecture notes and
assignments.</p> h1
</body>
</html> p
p
5
Structure of a Web Page
• Markup tags define structures of the documents
DOCTYPE
<html>
<head>
</head>
<body>
</body>
</html>
6
DOCTYPE Declaration
• Specifies which version of (X)HTML is used
• Placed at the beginning of the (X)HTML documents
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
7
Tags and Elements
Element
<h1> About the Course </h1>
Opening tag Closing tag
8
Attributes of Elements
• <p> is the tag for defining paragraphs
• “lang” is an attribute of element <p> for
specifying language of the paragraph
<p lang=“en-us”> Content of Paragraph</p>
• An attribute has two parts: name and value
• Name and value are separated by “=“ sign
• Values must be held in double quotation marks
• Attribute names must be in lowercase
• An element may have several attributes
9
Core Elements and Attributes
• The <html> element
– Contain two children: <head> and <body>
• The <head> element
– The first thing to appear after the <html> tag
– Contains elements such as <title>, <style>, <script>, etc.
• The <body> element
– Main content of the web page
• The <title> element
– Display title of the Web pages at the top of the browser
– Used as default name for bookmarking
– Used for search engines
10
Headings
• HTML offers six levels of headings, which use
the elements <h1>, <h2>, <h3>, <h4>, <h5>,
and <h6>
• While browsers can display headings
differently, they tend to display the <h1>
element as the largest and <h6> as the
smallest
11
Paragraphs
• <p> elements are used for defining paragraphs
• <br /> is for adding a line break
• <hr />: The <hr /> element creates a
horizontal rule across the page
12
Presentational Elements
• <b>: Anything that appears in a <b> element is
displayed in bold
• <i>: The content of an <i> element is displayed
in italicized text
• <u>: underline
• <s> (or <strike>): strikethrough
13
Presentational Elements
• <sup>: The content of a <sup> element is
written in superscript
• <sub>: The content of a <sub> element is
written in subscript
• <big>: The content of the <big> element is
displayed one font size larger than the rest
of the text surrounding it. If the font is already
the largest size, it has no effect
• <small>
14
Lists
• <li> tag defines a list item
• List items can be grouped in 3 types:
– Unordered lists, which are like lists of bullet
points: <ul>
– Ordered lists, which use a sequence of numbers or
letters instead of bullet points: <ol>
– Description lists, which allow you to define and
describe a term: <dl>, <dt>, <dd>
15
Lists
• <li> tag defines a list item
• List items can be grouped in 3 types:
– Unordered lists, which are like lists of bullet
points: <ul>
– Ordered lists, which use a sequence of numbers or
letters instead of bullet points: <ol>
– Description lists, which allow you to define and
describe a term: <dl>, <dt>, <dd>
16
Example of Order List
• HTML tags: Result:
<p>An ordered list:</p> An ordered list:
<ol> 1.Coffee
<li>Coffee</li> 2.Tea
3.Milk
<li>Tea</li>
<li>Milk</li>
</ol>
17
Example of Unorder List
• HTML tags: Result:
<p>An unordered list:</p> An unordered list:
<ul> • Coffee
<li>Coffee</li> • Tea
• Milk
<li>Tea</li>
<li>Milk</li>
</ul>
18
Example of Description List
• HTML tags: Result:
<dl> Coffee
<dt>Coffee</dt> Black hot drink
<dd>Black hot drink</dd> Milk
<dt>Milk</dt> White cold drink
<dd>White cold drink</dd>
</dl>
19
Block-level Elements
• A block-level element starts on a new line and
takes up the full width available (stretches out
to the left and right as far as it can)
• Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
20
Inline Elements
• An inline element does not start on a new line
and only takes up as much width as necessary
• Examples of inline elements:
<span>
<a>
<img>
21
Links
• Use element <a> with attribute “href” to
create links
• Value of “href” may be a relative address or a
full url
• Attribute “title” can be used to create tooltip
for helping users
22
Link Example
23
URLs
• Uniform Resource Locator
• Each resource (Web page, site, file) has a
unique URL
24
URLs
• Protocol: http://, https://, ftp://, file://
• Domain: domain name or IP address
• Path: begins with a forward slash character, and
may consist of one or more directory names
• If a filename is not given, the web server will
usually do one of three things
– Return a default file (index.htm, index.html,…)
– Offer a list of files and directories
– An error message
25
Absolute and Relative URLs
• Absolute URL: can be used to access the
Webpage from anywhere
http://www.usth.edu.vn/news/test.html
• Relative URL: indicates where the resource is
in relation to the current page
– Same directory: test.html
– Parent directory: ../test.html
– Sub-directory: example/test.html
26
Images
• Types of images
– Bitmap: JPEG, PNG, GIF
– Vector: Flash, SVG
• Add an image to a webpage
<img src=”logo.gif” title =“Cat” alt=”Image of a cat” />
<img src=“logo.gif” width=“150” height=“150” />
27
Images as Links
<a href=”../index.html” title=”Homepage”>
<img src=”images/banana.jpg”/>
</a>
28
Tables
<table border=”1”>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
29
Column & Row Spanning
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>
30
Tools
• Editor: Any text editor can be used
– Notepad
– Wordpad
– Notepad++ (recommended)
– Microsoft Expression Web
– Komodo
– Dreamweaver
• Web server:
– Apache
– Xampp
31
32
