Scribd
Upload
34 views

Web Application Development: Hypertext Markup Language (HTML)

HTML is a markup language used to define the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, lists, links and images. The basic structure of an HTML document includes <html>, <head>, and <body> tags. Common elements include headings, paragraphs, lists, links, images and tables. Attributes provide additional information about elements.

Uploaded by

Nguyễn Phương Thảo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

Web Application Development: Hypertext Markup Language (HTML)

HTML is a markup language used to define the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, lists, links and images. The basic structure of an HTML document includes <html>, <head>, and <body> tags. Common elements include headings, paragraphs, lists, links, images and tables. Attributes provide additional information about elements.

Uploaded by

Nguyễn Phương Thảo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

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

You might also like