Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
6 views103 pages

L2. HTML

L2. HTML

Uploaded by

khoivotri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views103 pages

L2. HTML

L2. HTML

Uploaded by

khoivotri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 103

Vietnam National University of HCMC

International University
School of Computer Science and Engineering

Web Application Development


(IT093IU)
Assoc. Prof. Nguyen Van Sinh
Email: [email protected]
(Semester 1, 2025-2026)
HTML

HTML:
- Hypertext markup languages

- The background for front-end


development of a website

Web Application Development - IU - IT 2


The World Wide Web
⚫ The World Wide Web
⚫ The set of computers on the Internet that
support HTTP
⚫ Not a separate network.
⚫ HTTP
⚫ The HyperText Transfer Protocol.
⚫ The language used by a www client (e.g.
Firefox, Internet explorer, etc.) to request
documents from a www server (i.e. the
program running at websites like
amazon.com or gmail.com)
⚫ HTML
⚫ The HyperText Markup Language
⚫ It was created by Tim Berners-lee in 1990
⚫ The language is used to design webpages

3
HyperText Markup Language
⚫ Text Mixed with Markup Tags
⚫ Tags Enclosed in Angle Brackets:
<H1>Introduction</H1>
<b>Bold</b>
<Table>Name of a table</Table>
⚫ Nested Tags
⚫ Whenever you have HTML tags within other HTML
tags, you must close the nearest tag first
⚫ Example:
⚫ <H1> <I> The Nation </I> </H1>
⚫ What Does Markup Describe?
⚫ Appearance
⚫ Layout

4
Structure of a Web Page
⚫ All Web pages <HTML>
share a common <HEAD>
structure <TITLE> Example </TITLE>
</HEAD>
⚫ All Web pages <BODY>
should contain a This is where you would
include the text and images on
pair of <HTML>, your Web page.
<HEAD>, </BODY>
<TITLE>, and </HTML>

<BODY> tags
HTML Example

6
Steps for creating and publishing
a webpage
1. Create an HTML document
2. Register with an ISP (Internet service provider)
3. Place the document in a world-accessible directory on
a system running an HTTP server
4. Access the webpages through:
http://localhost:8081/WAD/TestPage.jsp
http://vnexpress.net
http://hostname/~username/filename
Note: http ≠ https (s: security sites)

7
HTML Document Template

8
Main HTML Elements
➢ DOCTYPE
➢ HTML
➢ HEAD
⚫ TITLE element required
⚫ Optional elements:
⚫ BASE
⚫ META
⚫ BGSOUND
⚫ SCRIPT, NOSCRIPT
⚫ STYLE
⚫ LINK
Explain ➔ https://www.w3schools.com/tags/tag_head.asp

9
Main HTML Elements (Continued)
➢ BODY Element
⚫ <BODY BGCOLOR="YELLOW">
⚫ HTML Attributes and Attribute Values
⚫ BACKGROUND
⚫ BGCOLOR
⚫ TEXT
⚫ LINK, VLINK, ALINK
⚫ OnLoad, OnUnload, OnFocus, OnBlur,…
➢ Elements inside BODY element
⚫ <BODY>
Remaining HTML elements
</BODY>

10
META Element
⚫ Provides data information of HTML document,
forwards and refreshes pages
⚫ The data information are not displayed on the browser
⚫ The information are as bellows:
⚫ NAME="author"
⚫ NAME="keywords"
⚫ NAME="description”
⚫ HTTP-EQUIV="refresh”, "content-type”,…

11
META Element, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>News Headlines</TITLE>
<META HTTP-EQUIV="REFRESH"
CONTENT="3600">
</HEAD>

<BODY>
<H1 ALIGN="CENTER">News Headlines</H1>

<H2>National News</H2>
Blah, blah, blah.

<H2>International News</H2>
Yadda, yadda, yadda.

</BODY>
</HTML>
12
Block-Level Elements
⚫ Headings
⚫ H1 ... H6
⚫ ALIGN
⚫ Basic Text Sections
⚫ P
⚫ ALIGN
⚫ PRE
⚫ WIDTH
⚫ ADDRESS
⚫ BLOCKQUOTE
13
Block-Level Elements, cont.
⚫ Lists
⚫ OL ordered list
⚫ LI list of items
⚫ UL unordered list
⚫ DL description list
⚫ DT a term in a description list
⚫ DD the term in a description list
⚫ Tables and Forms (Postponed)
⚫ Misc.
⚫ HR
⚫ DIV (A <div> section in a document that is styled with CSS)
⚫ CENTER
⚫ MULTICOL (Netscape only)

14
Headings
⚫ Heading Types
⚫ <H1 ...> ... </H1>
⚫ <H2 ...> ... </H2>
⚫ <H3 ...> ... </H3>
⚫ <H4 ...> ... </H4>
⚫ <H5 ...> ... </H5>
⚫ <H6 ...> ... </H6>
⚫ Attributes: ALIGN
⚫ Values: LEFT (default), RIGHT, CENTER
⚫ Nesting tags
⚫ Headings and other block-level elements can
contain text-level elements, but not in the
contrary
15
Headings, Example
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="CENTER">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="RIGHT">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>

16
Headings, Result

17
P – The Basic Paragraph
⚫ Attributes: ALIGN
⚫ LEFT (default), RIGHT, CENTER. Same as headings.

⚫ Whitespace ignored (use <BR> for line break)

⚫ Consecutive <P>’s do not yield multiple blank lines


⚫ End Tag is Optional:

<BODY>
<P> <BODY>
Paragraph 1 Paragraph 1
</P> <P>
<P> Paragraph 2
Paragraph 2 <P>
Paragraph 3
</P>
<P> </BODY>
Paragraph 3 Equivalent with Implied Tags
</P>
</BODY>
Fully-Specified 18
Preformatted Paragraphs
⚫ The PRE element
⚫ <PRE> ... </PRE>
⚫ Attributes: WIDTH
⚫ Expected width in characters. Not widely
supported.
⚫ Problem: Special Characters
<PRE>
if (a<b) { Desired Character HTML Required
< &lt;
doThis();
> &gt;
} else { & &amp;
doThat(); " &quot;
} Non-breaking space &nbsp;
</PRE>
19
OL: Ordered (Numbered) Lists
⚫ OL Element
⚫ <OL>
<LI>…
<LI>…
...
</OL>
⚫ Attributes: TYPE, START, COMPACT
⚫ List entries: LI
⚫ <LI ...> ... </LI> (End Tag Optional)
⚫ Attributes: (When inside OL) VALUE, TYPE
A sample list:
<OL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</OL>
20
Nested Ordered Lists
<OL TYPE="I">
<LI>Headings
<LI>Basic Text Sections
<LI>Lists
<OL TYPE="A">
<LI>Ordered
<OL TYPE="1">
<LI>The OL tag
<OL TYPE="a">
<LI>TYPE
<LI>START
<LI>COMPACT
</OL>
<LI>The LI tag
</OL>
<LI>Unordered
<OL TYPE="1">
<LI>The UL tag
<LI>The LI tag
</OL>
<LI>Definition
<OL TYPE="1">
<LI>The DL tag
<LI>The DT tag
<LI>The DD tag
</OL>
</OL>
<LI>Miscellaneous
</OL>
21
UL: Unordered (Bulleted) Lists
⚫ UL Element
⚫ <UL>
<LI>…
<LI>…
...
</UL>
⚫ Attributes: TYPE, COMPACT
⚫ TYPE is DISC, CIRCLE, or SQUARE
⚫ List entries: LI (TYPE)
⚫ TYPE is DISC, CIRCLE, or SQUARE
A sample list:
<UL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</UL>
22
UL: Custom Bullets
<UL TYPE="DISC">
<LI>The UL tag
<UL TYPE="CIRCLE">
<LI>TYPE
<UL TYPE="SQUARE">
<LI>DISC
<LI>CIRCLE
<LI>SQUARE
</UL>
<LI>COMPACT
</UL>
<LI>The LI tag
<UL TYPE="CIRCLE">
<LI>TYPE
<UL TYPE="SQUARE">
<LI>DISC
<LI>CIRCLE
<LI>SQUARE
</UL>
<LI>VALUE
</UL>
</UL>

23
Text-Level Elements
⚫ Physical Character Styles
⚫ B, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, Q,
BLINK
⚫ FONT
⚫ SIZE
⚫ COLOR
⚫ FACE
⚫ BASEFONT
⚫ SIZE
⚫ Logical Character Styles
⚫ EM, STRONG, CODE, SAMP, KBD, DFN, VAR, CITE

24
Text-Level Elements (Continued)
⚫ Hypertext Links
⚫ A
⚫ HREF, NAME, TARGET, ...
⚫ Images
⚫ IMG
⚫ SRC (required), ALT, ALIGN, WIDTH, HEIGHT,
HSPACE, VSPACE, BORDER, USEMAP, ISMAP
⚫ Misc. Text-Level Elements
⚫ BR (Explicit line break)
⚫ AREA (Client-side image maps)
⚫ APPLET (Java),
⚫ ...

25
Physical Character Styles, Example
...
<H1>Physical Character Styles</H1>
<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>
26
...
Physical Character Styles, Result

27
Logical Character Styles, Example
...
<H1>Logical Character Styles</H1>
<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray
Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">JDK
Acronym</ACRONYM>
... 28
Logical Character Styles, Result

29
Hypertext Links
⚫ Links can contain images and other text-
level elements (i.e., <A HREF…> ... </A>)
⚫ Link to Absolute URL
⚫ Use a complete URL beginning with http://
Java is discussed in
<A HREF="http://host/path/chapter2.html">
Chapter 2</A>.
⚫ Link to Relative URL
⚫ Use a filename or relative path to filename
⚫ Interpreted write location of current file
Java is discussed in
<A HREF="chapter2.html">Chapter 2</A>.

30
Hypertext Links (Continued)
⚫ Link to Section
⚫ Use a section name (see below) preceded by #
Images are discussed in
<A HREF="#Section2">Section 2</A>
⚫ Link to Section in URL
⚫ Use absolute or relative URL, then #, then
section name
Images are discussed in
<A HREF="chapter1.html#Section2">
Sec. 2 of Chap. 1</A>.
⚫ Naming a Section
⚫ Use <A NAME="..."> and do not include the
pound sign
<H2><A NAME="Section2">Images</A></H2>

31
Changing the Color of Links
⚫ The LINK, VLINK, and ALINK
attributes can be inserted in the
<BODY> tag to define the color of a
link
⚫ LINK defines the color of links that have
not been visited
⚫ VLINK defines the color of links that
have already been visited
⚫ ALINK defines the color of a link when a
user clicks on it
Using Links to Send Email
⚫ To create a link to an email address,
type
<A HREF=“mailto:email_address”> Label</A>
⚫ For example, to create a link to send
email to myself, I would type:
<A HREF=“mailto:[email protected]”> email
Sinh Nguyen</A>
Anchors
⚫ Anchors enable a user to jump to a
specific place on a Web site
⚫ Two steps are necessary to create
an anchor. First you must create
the anchor itself. Then you must
create a link to the anchor from
another point in the document.
Anchors

⚫ To create the anchor itself, type <A


NAME=“anchor name”>label</A>
at the point in the Web page where
you want the user to jump to
⚫ To create the link, type <A
HREF=“#anchor name”>label</A>
at the point in the text where you
want the link to appear
Example: Anchor

<A HREF="#chap2">Chapter Two</A><BR>


Link

<A NAME="chap2">Chapter 2 </A> Anchor


IMG: Embedding Images
⚫ Example
<IMG SRC=”SomeFile.gif" ALT="My Dog"
WIDTH=400 HEIGHT=300>
⚫ Attributes:
⚫ SRC (required)
⚫ ALT (technically required)
⚫ ALIGN (see <BR CLEAR="ALL">)
⚫ WIDTH, HEIGHT
⚫ HSPACE, VSPACE
⚫ BORDER
⚫ USEMAP, ISMAP
37
Image Alignment, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD><TITLE>Image Alignment</TITLE></HEAD>
<BODY>
<H1 ALIGN="CENTER">Image Alignment</H1>
<TABLE BORDER=1>
<TR><TH>Alignment
<TH>Result
<TR><TH><CODE>LEFT</CODE>
<TD><IMG SRC="rude-pc.gif" ALIGN="LEFT"
ALT="Rude PC" WIDTH=54 HEIGHT=77>
This positions the image at the left side,
with text flowing around it on the right.
<TR><TH><CODE>RIGHT</CODE>
<TD><IMG SRC="rude-pc.gif" ALIGN="RIGHT"
ALT="Rude PC" WIDTH=54 HEIGHT=77>
This positions the image at the right side,
with text flowing around it on the left.
...
</TABLE>
</BODY>
</HTML>
38
Image Alignment, Result

39
Tables

⚫ Tables can be used to display the


data in rows and columns,
⚫ Tables can be used to create multi-
column text, captions for images
and sidebars, etc.
⚫ The <TABLE> tag is used to create
a table; the <TR> tag defines the
beginning of a row while the <TD>
tag defines the beginning of a cell
Tables
⚫ Example
<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH> <TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2
Data</TD></TR>
<TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2
Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2
Data</TD></TR>
</TABLE>

41
TABLE Element Attributes
⚫ ALIGN
⚫ The ALIGN attribute gives the horizontal alignment of the table as a
whole
⚫ Legal values are LEFT, RIGHT, and CENTER, with LEFT being the
default
⚫ BORDER
⚫ This specifies the width in pixels of the border around the table
⚫ This is in addition to the border around each cell (the
CELLSPACING).
⚫ The default is zero, which also results in the visible 3D divider
between cells being turned off
⚫ CELLSPACING
⚫ This gives the space in pixels between adjacent cells. Drawn as a 3D
line if BORDER is nonzero, otherwise empty space in the
background color is used
⚫ The default is usually about 3
42
TABLE Element Attributes
(Continued)
⚫ CELLPADDING
⚫ CELLPADDING determines the empty space, in pixels, between the
cell’s border and the table element
⚫ The default is usually about 1
⚫ WIDTH
⚫ This specifies the width of the table, either in pixels (<TABLE
WIDTH=250>) or as a percentage of the current browser window
width (<TABLE WIDTH="75%">)
⚫ BGCOLOR
⚫ Specify the background color of the table TABLE (also legal for TR,
TD, and TH)
⚫ BORDERCOLOR, BORDERCOLORDARK,
⚫ BORDERCOLORLIGHT
⚫ No standard attributes supported by IE to specify the colors to user
for the borders
43
TABLE Element Attributes (Continued)
⚫ BACKGROUND
⚫ This nonstandard attribute supported by IE gives an image file that will
be tiled as the background of the table
⚫ You might want to use style sheets instead.
⚫ RULES
⚫ HTML 4.0 attribute that specifies which inner dividing lines are drawn
⚫ All are drawn if this attribute is omitted
⚫ Legal values are NONE, ROWS, COLS, and ALL
⚫ FRAME
⚫ Specifies which outer borders are drawn
⚫ All four are drawn if this attribute is omitted
⚫ Legal values are BORDER or BOX (all), VOID (none), ABOVE (top),
BELOW (bottom), HSIDES (top and bottom, despite the somewhat
confusing name), VSIDES (left and right), LHS (left), and RHS (right)

44
Table CAPTION
⚫ Attribute
⚫ ALIGN (Values: TOP, BOTTOM)
⚫ Usage
⚫ An enclosing borderless table may give more flexibility than
the built-in CAPTION.

45
TR: Table Row
⚫ TR is used to define each row in the table
⚫ Each row will then contain TH and/or TD entries
⚫ ALIGN
⚫ ALIGN (legal values LEFT, RIGHT, or CENTER) is used to set the
default horizontal alignment for table cells
⚫ VALIGN
⚫ VALIGN (legal values TOP, MIDDLE, or BOTTOM) is used
to set the default vertical alignment for table cells
⚫ BGCOLOR
⚫ Sets the color for the table row, overriding any values set for the
table as a whole via the BGCOLOR attribute of TABLE
⚫ BORDERCOLOR, BORDERCOLORDARK,
⚫ BORDERCOLORLIGHT
⚫ Supported only by Internet Explorer, these specify the colors to use
for the row borders
46
Table Cells: TH and TD
⚫ COLSPAN
⚫ COLSPAN defines a heading or cell data entry that spans multiple
columns

<TABLE BORDER=1>
<TR><TH COLSPAN=2>Col 1&2 Heading
<TH>Col3 Heading
<TR><TD>Col1 Data
<TD>Col2 Data
<TD>Col3 Data
</TABLE>

47
Table Cells: TH and TD

48
Table Cells: TH and TD
(Continued)
⚫ ROWSPAN
⚫ ROWSPAN defines a heading or cell data entry that spans
multiple rows; similar to COLSPAN
⚫ ALIGN
⚫ LEFT, RIGHT, CENTER, JUSTIFY and CHAR.
⚫ E.g., the following aligns entries on a decimal point
<TD ALIGN="CHAR" CHAR=".">
⚫ VALIGN
⚫ TOP, BOTTOM, MIDDLE
⚫ WIDTH, HEIGHT
⚫ Values in pixels only (no percentages officially allowed)
⚫ NOWRAP
⚫ Use with caution
⚫ BGCOLOR, BACKGROUND
⚫ Same as for TABLE and TR

49
Summary
⚫ A DOCTYPE is required to validate the document
⚫ HTML document should have an enclosing HTML element, a HEAD
(TITLE is required) and a BODY
⚫ Documents are composed of block-level and
text-level elements
⚫ Text-level elements must be inside block-level elements, not vice
versa
⚫ Hypertext links, <A HREF="…">,
can be absolute or relative
⚫ A link to a named section is denoted by #section
⚫ Tables are composed of main table element, <TABLE>; rows,
<TR>; table headers, <TH>;
and table data, <TD>
⚫ Use BGCOLOR to give background colors to tables, rows, or cells
⚫ Use ROWSPAN or COLSPAN to join cells

50
Thank for your attention!
- Question?
- Exercises:
1) Refer the website and do some quizs at:
https://www.w3schools.com/html/html_quiz.asp
2) Present your CV on an html page.

51
51 Introduction
HTML Frames Layouts
(option)
Agenda
⚫ Advantages and disadvantages of frames
⚫ FRAME template
⚫ Defining rows and cols in a FRAMESET
⚫ Common FRAME and FRAMESET attributes
⚫ Nested frames
⚫ Targeting a document to a named
FRAME cell
⚫ Dynamic inline frame tag: IFRAME
⚫ Another common layout tag: DIV

53
Frame Advantages
⚫ Certain parts of the interface (e.g., a TOC) are always
on the screen
⚫ Can avoid retyping common sections of multiple Web
pages
⚫ Consistent use across a large site sometimes simplifies
user navigation
⚫ A convenient way to mix text-oriented HTML with
Java applets
⚫ Image maps are more convenient if the map image
remains on screen and only the results section changes

54
Frame Disadvantages
⚫ The meaning of the “Back” and “Forward” buttons can
be confusing (for old version)
⚫ Poorly designed frames can get the user lost
⚫ Hard to find real URL of a page you want
⚫ Printing problems!
⚫ Hard to bookmark "configuration"
⚫ Some very old browsers do not support frames
⚫ Security
⚫ Hackers can insert frame cells into your pages in some
circumstances, perhaps stealing information intended for your
site

55
Frame Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Frameset//EN">
<HTML>
<HEAD><TITLE>Document Title</TITLE></HEAD>

<FRAMESET ...>
<!-- FRAME and Nested FRAMESET Entries -->
<NOFRAMES>
<BODY>
<!-- Stuff for non-Frames browsers -->
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

56
FRAMESET Attributes
⚫ COLS, ROWS
⚫ A comma-separated list of pixel values,
percentages, and weighted remainders
⚫ FRAMESET entries should always specify at least
two rows or columns. Netscape problems if not!
⚫ Examples

<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>

<FRAMESET COLS="25%,*,*">
...
</FRAMESET>
57
FRAMESET ROWS, Example

<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>
58
FRAMESET Attributes
(Continued)
⚫ FRAMEBORDER
⚫ Indicates whether borders will be drawn between frame cells
⚫ YES or 1 specifies borders; NO or 0 specifies no border
⚫ Can be overridden by FRAMEBORDER settings in individual
FRAME entries
⚫ Often used in conjunction with BORDER=0 and
FRAMESPACING=0
⚫ BORDER (Netscape), FRAMESPACING (IE)
⚫ Specify the thickness of the border between cells
⚫ Apply to outermost FRAMESET only
⚫ BORDERCOLOR
⚫ Sets the color of the border between cell, using either a hex
RGB value or color name

59
Frame Border, Examples

60
FRAME:
Specifying Content of Frame Cells
⚫ SRC
⚫ URL of the document to place in the frame cell
⚫ NAME
⚫ Supplies destination for TARGET attribute of hypertext links
⚫ FRAMEBORDER, BORDERCOLOR
⚫ MARGINWIDTH, MARGINHEIGHT
⚫ Specifies the left/right and top/bottom cell margins,
respectively
⚫ SCROLLING
⚫ Indicates whether cells should have scrollbars
⚫ NORESIZE
⚫ Disables the ability to resize the frame cells

61
Frame Example 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Frame Example 1</TITLE></HEAD>
<FRAMESET ROWS="55%,45%">
<FRAMESET COLS="*,*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>

<FRAMESET COLS="*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>

<NOFRAMES>
<BODY>
Your browser does not support frames. Please see
<A HREF="Frame-Cell.html">non-frames version</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
62
Frame Example 1, Result

63
Frame Example 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Frame Example 2</TITLE></HEAD>

<FRAMESET COLS="55%,45%">
<FRAMESET ROWS="*,*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>

<FRAMESET ROWS="*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<NOFRAMES>
<BODY>
Your browser does not support frames. Please see
<A HREF="Frame-Cell.html">nonframes version</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML> 64
Frame Example 2, Result

65
Targeting Frame Cells
⚫ Specify the cell in which to place a
page referenced by a hyperlink

⚫ The NAME Attribute of FRAME


<FRAME SRC="..." NAME="cellName">

⚫ The TARGET Attribute of A HREF


<A HREF="..." TARGET="cellName">

66
Targeting Example

67
Cold-Fusion.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Investing in Cold Fusion</TITLE>
</HEAD>
<FRAMESET ROWS="75,*">
<FRAME SRC="TOC.html" NAME="TOC">
<FRAME SRC="Introduction.html" NAME="Main">
<NOFRAMES>
<BODY>
This page requires Frames. For a non-Frames version,
<A HREF="Introduction.html">the introduction</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

68
TOC.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Table of Contents</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="100%">
<TR><TH><A HREF="Introduction.html" TARGET="Main">
Introduction</A></TH>
<TH><A HREF="Potential.html" TARGET="Main">
Potential</A></TH>
<TH><A HREF="Investing.html" TARGET="Main">
Investing</A></TH>
<TH><A HREF="References.html" TARGET="Main">
References</A></TH></TR>
</TABLE>
</BODY>
</HTML>

69
Targeting Example, Results

70
Predefined Frame Names
⚫ _blank
⚫ Load document into a new browser window
⚫ _top
⚫ Causes the linked document to take up the whole browser
window
⚫ Document will not be contained in a frame cell
⚫ _parent
⚫ Places document in the immediate FRAMESET parent
⚫ Same as _top if no nested frames
⚫ _self
⚫ Place document in current cell
⚫ Only necessary to override a BASE entry
71
Floating Frames
⚫ Defines an inline frame that contains another document
⚫ Don’t need frame set. Put anywhere in document
⚫ <IFRAME attributes ></IFRAME>: is used to display
a web page within a web page.
⚫ Attributes
⚫ SRC=URL
⚫ HEIGHT=pixels|percent,
⚫ WIDTH=pixels|percent
⚫ HSPACE=pixels
⚫ VSPACE=pixels
⚫ ALIGN=left|right
⚫ FRAMEBORDER=0
72
DIV and ILAYER
⚫ Allows you create a position within a block of content.

Text here

73
DIV
⚫ <DIV attributes> content </DIV>
⚫ Attributes
⚫ ID=“name”
⚫ STYLE = “style parameters: CSS”
• Example: a section in a document that will have a
light blue background color:
<div style="background-color:lightblue">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>

74
DIV Example
< DIV ID=“fred”
STYLE = “POSITION:absolute|relative;
VISIBILITY:visible:hidden;
Z-INDEX:number;
WIDTH:width in pixels;
HEIGHT:height in pixels;
TOP:pixels from top of page or block;
LEFT:pixels from left edge of page or block;
PADDING:margin in pixels;
other style attributes; “ >
content
</DIV>
75
DIV Example (Cont.)

content

content
contentc
content content

content
content

76
DIV Another Example
Source:

<div id="myDiv" name="myDiv" title="Example Div Element" style="color:


blue; font: Helvetica 12pt;border: 1px solid black;"> <h5>Subtitle</h5>
<p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div>
Result:

77
Summary
⚫ Frames require a Frameset DOCTYPE for validation
⚫ A FRAMESET can be divided either into columns or
rows
⚫ To create both rows and columns use nested FRAMESETs
⚫ By giving a FRAME a name, documents can be
targeted to the named frame cell
⚫ <FRAME … NAME="…">
⚫ <A HREF="…" TARGET="…">
⚫ There are four predefined frame names
⚫ _blank, _top, _parent, and _self

78
Advance HTML

Forms &
Design Data Forms

https://www.w3schools.com/html/html_forms.asp
Forms
▪ What are forms?
• An HTML form is an area of the document that
allows users to enter information into fields.
• A form may be used to collect personal information,
opinions in polls, user preferences and other kinds
of information.
• An HTML form contains form elements.
• Form elements are different types of input elements,
like: text fields, checkboxes, radio buttons, submit
buttons, and more.
Forms
⚫ There are two basic components of a Web form: the
shell, the part that the user fills out, and the script
which processes the information
⚫ HTML tags are used to create the form shell. Using
HTML you can create text boxes, radio buttons,
checkboxes, drop-down menus, and more...
⚫ Example of form and elements tags
<form>
.
form elements <input>
.
</form>
Example: Form
Text Box

Drop-down Menu
Radio Buttons
Checkboxes

Text Area

Reset Button
Submit Button
The Form Shell
⚫ A form shell has three important parts:
⚫ the <FORM> tag, which includes the address of the
script which will process the form
⚫ the form elements, like text boxes and radio buttons
⚫ the submit button which triggers the script to send
the entered information to the server
Creating the Shell

⚫ To create a form shell, type <FORM


METHOD=POST
ACTION=“script_url”> where
“script_url” is the address of the
script
⚫ Create the form elements
⚫ End with a closing </FORM> tag
Creating Text Boxes
⚫ To create a text box, type <INPUT TYPE=“text”
NAME=“name” VALUE=“value” SIZE=n
MAXLENGTH=n>
⚫ The NAME, VALUE, SIZE, and MAXLENGTH
attributes are optional
⚫ Example:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Text Box Attributes
⚫ The NAME attribute is used to identify the text box
to the processing script
⚫ The VALUE attribute is used to specify the text that
will initially appear in the text box
⚫ The SIZE attribute is used to define the size of the
box in characters
⚫ The MAXLENGTH attribute is used to define the
maximum number of characters that can be typed in
the box
Example: Text Box
First Name: <INPUT ⚫ Here’s how it
TYPE="text"
NAME="FirstName" would look on
VALUE="First Name" the Web:
SIZE=20>
<BR><BR>

Last Name: <INPUT


TYPE="text"
NAME="LastName"
VALUE="Last Name"
SIZE=20>
<BR><BR>
Creating Larger Text Areas

⚫ To create larger text areas, type <TEXTAREA


NAME=“name” ROWS=n1 COLS=n2
WRAP> Default Text </TEXTAREA>, where
n1 is the height of the text box in rows and n2
is the width of the text box in characters
⚫ The WRAP attribute causes the cursor to move
automatically to the next line as the user types
Example: Text Area

<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments"
ROWS=10 COLS=50 WRAP>
</TEXTAREA>
Creating Radio Buttons

⚫ To create a radio button, type


<INPUT TYPE=“radio”
NAME=“name”
VALUE=“data”>Label, where “data”
is the text that will be sent to the
server if the button is checked and
“Label” is the text that identifies the
button to the user
Example: Radio Buttons
<B> Size: </B>
<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"

VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"

VALUE="Small">Small
Creating Checkboxes

⚫ To create a checkbox, type <INPUT


TYPE=“checkbox” NAME=“name”
VALUE=“value”>Label
⚫ If you give a group of radio buttons
or checkboxes the same name, the
user will only be able to select one
button or box at a time
Example: Checkboxes

<B> Color: </B>


<INPUT TYPE="checkbox"
NAME="Color"
VALUE="Red">Red
<INPUT TYPE="checkbox"
NAME="Color"
VALUE="Navy">Navy
<INPUT TYPE="checkbox"
NAME="Color"
VALUE="Black">Black
Creating Drop-down Menus

⚫ To create a drop-down menu, type


<SELECT NAME=“name” SIZE=n
MULTIPLE>
⚫ Then type <OPTION VALUE=
“value”>Label
⚫ In this case the SIZE attribute
specifies the height of the menu in
lines and MULTIPLE allows users to
select more than one menu option
Example: Drop-down Menu
<B>WHICH IS FAVOURITE FRUIT:</B>
<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>
Creating a Submit Button

⚫ To create a submit button, type


<INPUT TYPE=“submit”>
⚫ If you would like the button to say
something other than submit, use
the VALUE attribute
⚫ For example, <INPUT
TYPE=“submit” VALUE=“Buy
Now!”> would create a button that
says “Buy Now!”
Creating a Reset Button

⚫ To create a reset button, type


<INPUT TYPE=“reset”>
⚫ The VALUE attribute can be used in
the same way to change the text
that appears on the button
A complete example
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<label><input type="radio" name="gender" value="m" />Male<label>
<label><input type="radio" name="gender" value="f"
/>Female</label>
</p>
</form>
</body>
</html>
98
A complete example
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Please Input The Value!</h2>
<form method="post" action="GetValue.jsp">
<input type="text" name = "tx1"><br>
<input type="Submit" value= “Submit”>
</form>
</body>
</html>

99
A complete example

100
A complete example
This is the source code of file GetValue.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Result page</h2>
<%
String value = request.getParameter("tx1");
out.print("Hello "+value+"!");
%>
</body>
</html>
101
A complete example

102
Your exercise!

103

You might also like