WEB APPLICATION
DEVELOPMENT
Lecture 2: HTML
By: MSc. Tin Trinh
Today’s schedule
• Make a HTML Cheatsheet
• Familiar with W3Schools and use HTML editor in Browser
• Learn how to design Product slider and Shopping cart by HTML
• Check out the course website for all this and more:
[Link]
< HTML />
HTML
“Hyper Text Markup Language”
Describes the content and structure of
information on a web page
A website is built from “HTML elements”
(HTML tags)
Browsers do not display HTML tags but only
use them to draw the website interface
• Tim Berners-Lee, Word wide web (WWW)
History
Nguồn: [Link]
STATIC WEBSITE VS DYNAMIC
WEBSITE
TAGS
POPULAR EDITORS
1. STRUCTURE
• Understanding structure
• Learning about markup
• Tags and elements
HTML STRUCTURE
HTML TAG
WRONG
<p> Welcome to HTML
Welcome to HTML </p>
CORRECT
<p> Welcome to HTML </p>
HTML ATTRIBUTE
Page Title <title>
…
<head>
<title> HARRY POTTER AND THE DEATHLY HALLOWS
- PART 2 </title>
</head>
… HTML
• Placed within the head of the page
• Displayed in web browser’s title mark and when
bookmarking the page
CS380 15
Block and Inline Statements
• Block elements contain an entire large region of
content
• examples: paragraphs, lists, table cells
• the browser places a margin of whitespace between block
elements for separation
CS380 16
Block and Inline Statements (cont.)
• Inline elements affect a small amount of content
• examples: bold text, code fragments, images
• the browser allows many inline elements to appear on the
same line
• must be nested inside a block element
CS380 17
More HTML tags
• Some tags can contain additional information called attributes
• syntax: <element attribute="value"
attribute="value"> content </element>
• example: <a href="[Link]">Next page</a>
CS380 18
More HTML tags
• Some tags don't contain content; can be opened and closed in one
tag
• syntax:
<element attribute="value" attribute="value" />
• example: <hr />
• example:
<img src=“[Link]" alt="pic of Harry Potter" />
CS380 19
2. TEXT
• Headings and paragraphs
• Bold, italic, emphasis
• Structural and semantic markup
Headings <h1>, <h2>, … <h6>
<h1> Harry Potter </h1>
<h2> Books </h2>
<h3> Harry Potter and the Philosopher’s Stone </h3>
HTML
Harry Potter
Books
Harry Potter and the Philosopher’s Stone
output
CS380 21
HEADINGS
PARAGRAPHS
BOLD
ITALIC
SUPERSCRIPT & SUBSCRIPT
WHITE SPACE
To insert blank spaces in text in
HTML, type for each
space to add
LINE BREAKS &
HORIZONTAL LINE
STRONG AND EMPHASIS
QUOTATIONS
ABBREVIATIONS & ACRONYMS
CITATIONS & DEFINITIONS
AUTHOR
DETAILS
CHANGES TO CONTENT
CHANGES TO CONTENT
3. LISTS
• Numbered lists
• Bullet lists
• Definition lists
ORDERED LISTS
UNORDERED LISTS
DEFINITION LISTS
NESTED LISTS
4. LINKS
• Creating links between pages
• Linking to other sites
• Email links
WRITING LINK
Links <a>
<p>
Search
<a href="[Link]
now!
</p> HTML
Search Google now!
output
• The href attribute specifies the destination URL
• Links or anchors are inline elements, so they must be
placed inside a block element such as a p or h1
CS380 43
More about anchors
<p><a href=“[Link]">Harry Potter and the
Deathly Hallows Book</a></p>
<p><a href="[Link]
title="Search">Wikipedia</a></p>
HTML
Harry Potter and the Deathly Hallows
Wikipedia output
• Types of URLs that can appear in anchors:
• Absolute: to another web site
• Relative: to another page on this web site
CS380 44
LINKING TO
OTHER SITES
LINKING TO OTHER
PAGES ON THE SAME SITE
DIRECTORY STRUCTURE
RELATIVE URLS
EMAIL LINKS
OPENING LINKS IN A NEW WINDOW
LINKING TO A SPECIFIC PART OF THE SAME PAGE
5. IMAGES
• How to add images to pages
• Choosing the right format
• Optimizing images for the web
Images <img>
<img src="images/[Link]" alt=“Tobby from Harry Potter" />
HTML
• The src attribute specifies source of the image URL
• XHTML also requires an alt attribute describing the
image
CS380 53
More about images
<a href="[Link]
<img src="images/[Link]" alt=“Dumbledore from Harry
Potter"
title="Alas! Ear wax!"/>
</a> HTML
• If placed inside an a anchor, the image will become a link
• The title attribute specifies an optional tooltip
54
EXERCISE 1
EXERCISE 1 (CONT)
<img>Product Images</img>
<img> Official </img>
<p>Điện thoại Nokia C30…</p>
<img>*****</img>
<h2>1.490.000đ</h2>
<hr>
<p>Giao ngày mai</p>
Get images link here: [Link]
6. TABLES
• How to create tables
• What information suits tables
• How to represent complex data in tables
Tables <table>, <tr>, <td>
<table>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table> HTML
1,1 1,2 okay
2,1 real wide 2,2
output
table defines the overall table, tr each row, and
td each cell's data
Useful for displaying large row/column data sets
NOTE: tables are sometimes used by novices for
web page layout, but this is not proper semantic
58
HTML and should be avoided
Table headers, captions: <th>, <caption>
<table>
<caption>My important data</caption>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table> HTML
My important data
Column 1 Column 2
1,1 1,2 okay
2,1 real wide 2,2
output
th cells in a row are considered headers
a caption at the start of the table labels its
meaning 59
7. FORMS
• How to collect information from visitors
• Different kinds of form controls
• New HTML5 form controls
8. EXTRA MARKUP
• Specifying different versions of HTML
• Identifying and grouping elements
• Comments, meta information and iframes
Comments <!-- … -- >
<!-- My web page, by Bob Student
CSE 380, Fall 2048 -->
<p>CS courses are <!-- NOT --> a lot of fun!</p>
HTML
CS courses are a lot of fun!
output
• Comments are useful for disabling sections of a page
• Comments cannot be nested and cannot contain a --
CS380 62
HTML Character Entities
character(s) entity
<> < >
éèñ é è ñ
™© ™ ©
πδΔ π δ Δ
И И
"& " &
CS380 63
Inline quotations <q>
<p>
<a
href="[Link]
8&aq=t">
Search Google for Xenia
</a>
</p> HTML
<p> <a href="[Link] Search
Google for Xenia </a> </p>
output
CS380 64
Computer code <code>
<p>
The <code>ul</code> and <code>ol</code>
tags make lists.
</p> HTML
The ul and ol tags make lists.
output
• code: a short section of computer code
CS380 65
meta element to aid browser / web server
<meta http-equiv="Content-Type"
content="type of document (character encoding)" />
<meta http-equiv="refresh"
content="how often to refresh the page (seconds)" />
</head> HTML
• using the Content-Type gets rid of the W3C "tentatively valid" warning
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
• the meta refresh tag can also redirect from one page to another:
<meta http-equiv="refresh" content="5;url=[Link] />
• why would we want to do this? (example)
66
meta element to describe the page
<head>
<meta name="author"
content="web page's author" />
<meta name="revised"
content="web page version and/or last modification date"
/>
<meta name="generator"
content="the software used to create the page" />
</head> HTML
• many WYSIWYG HTML editors (FrontPage,
PageMaker, etc.) place their names in the meta
generator tag (why?)
CS380 67
meta element to aid search engines
<head>
<meta name="description"
content="how you want search engines to display your page"
/>
<meta name="keywords"
content="words to associate with your page (comma
separated)" />
</head> HTML
• these are suggestions to search engines about how to
index your page
• the search engine may choose to ignore them (why?)
CS380 68
Preformatted text <pre>
<pre>
Bill Gates speaks
You will be assimilated
Microsoft fans delirious
</pre> HTML
Bill Gates speaks
You will be assimilated
Microsoft fans delirious
output
• Displayed with exactly the whitespace / line breaks
given in the text
• Shown in a fixed-width font by default
CS380 69
Preformatted text <pre>
<pre><code>
public static void main(String[] args) {
[Link]("Hello, world!");
}
</code></pre> HTML
public static void main(String[] args) {
[Link]("Hello, world!");
}
output
• When showing a large section of computer code,
enclose it in a pre to preserve whitespace and a
code to describe the semantics of the content
CS380 70
9. FLASH, VIDEO, AUDIO
• How to add Flash movies into your site
• How to add video and audio to your site
• HTML5 <video> and <audio> elements
Summary
• Learn how to make a HTML cheatsheet
HOMEWORK 1:
WRITE HTML TO DESIGN SHOPPING CART
HOMEWORK 1: GUILINES
Layout by using Table
HOMEWORK 1: GUILINES
For details
• You can choose to use any elements for example:
• <img>
• <p>
• <h6>
• <p><span style color red></span></p>
References
[1] Jon Duckett - HTML & CSS - Design and Build Websites - Wiley
(2011)
[2] Assoc. Prof. Xenia Mountrouidou, CS380 – Web Programming
Lecture Slides
[3] Marty Stepp and Jessica Miller., Web Programming Step by Step
THANK YOUR FOR YOUR LISTENING