Web Page Design Lessons
Lesson 1: Introduction to HTML
Lesson 2: HTML Tags
<font> <body>
<h(n)> <hr>
<img> html colors
Lesson 3: HTML Tags
<marquee>
<table>
List Tags
Lesson 4: HTML Tags
Formatting tags <frame>
superscript bold <a>
subscript italic
center
Lesson 5: HTML Tags
<forms>
<style>
<span>
Lesson 6: HTML Tags
<div>
<style>
<span>
Web Page Design
Lesson 1: Introduction to HTML
Web Structure
Site Root Directory
([Link]) Home Page
html documents
images
css
xml
Web Terms
⚫ HTML - short for Hyper Text Markup Language, the
language used in creating documents on the World
Wide Web..
⚫ Web Browser - A software that enables the user to
view Web pages that are created in HTML codes.
⚫ Tags - codes found inside an HTML document.
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
HTML document Page Structure
Explanation of document structure tags
<HTML>...</HTML> Encloses the entire HTML document. These tags
let the browser know to start reading and displaying the information presented
within.
<HEAD>...</HEAD> The <HEAD> element contains all information
about the document in general. It contains HTML elements that describe the
document's usage and relationship with other documents
<TITLE>...</TITLE> The <TITLE> is contained inside the <HEAD>
</HEAD> of the document. It is displayed at the top of the browser window
and on the bookmark list, so it is important to choose something descriptive,
unique, and relatively short.
Explanation of document structure tags
<BODY>...</BODY> The <BODY> element contains all
the information which is part of the document.
Viewing your Web Page
HTML document when
typed using Notepad
HTML codes display when
viewed using a
BROWSER.
Web Page Design
Lesson 2: HTML tag
<font> <body>
<h(n)> <hr>
<img> html colors
Font tag
The text that you are going to use on your web
page is controlled by the font tag,
SYNTAX: <font>…</font>
The <font> tag attributes are:
face="font name"
size="number“ value=1 smallest to 7 largest
color="name or Hex number"
Font tag
<Html>
<head><title>My font tag</title></head>
<body>
<font face="verdana" size=4 color="blue">
assumption antipolo </font>
</body>
</html>
But font tag is not supported in HTML 5.
HTML color value
HTML Color Values
HTML colors can be defined as a hexadecimal notation for the combination of
Red, Green, and Blue color values (RGB).
The lowest value that can be given to one light source is 0 (hex #00) and the
highest value is 255 (hex #FF).
The table below shows the result of combining Red, Green, and Blue light
sources:
Body tag
The <body> tag is a container where you put text
and images you want to appear of your web
page.
SYNTAX: <body>…</body>
The <body> tag attributes are:
background="[Link]"
bgproperties=“fixed"
bgcolor=“color name or Hex number“
text=“color name or Hex number"
Heading Tag
The <hn> tag is use to format text on your web
pages. This tags whose function is to create
headings, sub-headings titles on your page
SYNTAX: <hn>…</hn>
The (n) inside the tag represents a number from
1 to 6, which 1 is the largest and 6 is the smallest
Heading Tag
<Html>
<head><title></title></head>
<body>
<h1>This is heading 1</h1>
<h2> This is heading 2</h2>
<h3> This is heading 3</h3>
<h4> This is heading 4</h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6</h6>
</body>
</html>
Image Tag
The <img> tag allows you to add image on your
page.
SYNTAX: <img>
The <img> tag attributes are:
src=“path/name of the image file”
width=“n" [in pixels and in percentage(%)]
height=“n" [in pixels and in percentage(%)]
border=“n" [in pixels]
align="center, left or right”
alt=“defines a short description of the image
title=“gives information about the image
Image Tag
<html>
<head><title></title></head>
<body>
<img src="[Link]" width=400px height=400px
title="logo" alt=“Error loading image"
border=1px>
</body>
</html>
Horizontal Rule (hr) Tag
The <hr> tag is used to create a horizontal line
on your page.
SYNTAX: <hr>
The <hr> tag attributes are:
width=“n" in pixels
size=“n" in pixels.
align="center, left or right”
color=“name or Hex number”
Horizontal Rule Tag
<html>
<head><title></title></head>
<body>
<hr width=200px size=10px noshade
color="blue" align="left">
</body>
</html>
Horizontal Rule Tag
<body>
<hr width="50%" color="green" size="50px" align="right" />
</body>
Web Page Design
Lesson 3: HTML tag
<marquee>
<table>
<list>
Marquee tag
The <marquee> display a scrolling text inside
your webpage.
SYNTAX: <marquee>…</marquee>
The <marquee> tag attributes are:
width= vertical dimensions.(value is in pixels)
height=horizontal dimensions.(value is in pixels)
direction=“left, right, up and down“
behavior=“scroll, slide and alternate"
scrolldelay & scrollamount=“speed of marquee“
bgcolor=“color name or Hex number“
Marquee tag
<body>
<marquee> assumption antipolo</marquee>
<marquee bgcolor=#ffff00>assumption antipolo</marquee>
<marquee width=200px height=200px bgcolor=#ff0000
direction="down">assumption antipolo</marquee>
<marquee bgcolor=#00ffff behavior=“alternate">assumption
antipolo</marquee>
<marquee scrolldelay=50>assumption antipolo</marquee>
<marquee scrolldelay=50 scrollamount=100>assumption
antipolo</marquee>
</body>
List tags
Unordered list - display a bulleted list inside your
document page.
SYNTAX: <ul>…</ul>
<li> refers to the items that will be displayed on
your unordered list tag.
The <ul> tag attributes: (type=disc default value)
type=“square, circle and disc”
List tags
<html>
<head><title>List Tags</title></head>
<body>
-----M E N U-----
<!------------unordered list-----------------> ▪ Tinolang Manok
<ul type=square> ▪ Adobong Manok
<li>Tinolang Manok ▪ Sinigang na Manok
<li>Adobong Manok ▪ Pritong Manok
<li>Sinigang na Manok ▪ Manok na ginawang Bola
<li>Pritong Manok
<li>Manok na ginawang Bola
</ul>
<!------------end unordered list----------------->
</body>
</html>
List tags
Ordered list - display a numbered list of item
inside your document page.
SYNTAX: <ol>…</ol>
<li> refers to the items that will be displayed on
your unordered list tag.
The <ol> tag attributes: (type=“1” default value)
type=“1,A,a,I and i”
List tags
<html>
<head><title></title></head>
<body>
-----M E N U-----
<!------------ordered list-----------------> I. Ginataang Isda
<ol type=I> II. Pritong Isda
<li>Ginataang Isda III. Inihaw na Isda
<li>Pritong Isda IV. Tinapang Isda
<li>Inihaw na Isda V. Isda na ginawang Bola
<li>Tinapang Isda
<li>Isda na ginawang Bola
</ol>
<!------------end ordered list----------------->
</body>
</html>
List tags
Definition list - display a list of terms and
definition in your web page.
SYNTAX: <dl>…</dl>
<dt> refers to the terms that will be displayed
<dd>refers to the definition of the term that is
displayed.
List tags
<html>
<head><title> definition list tag</title></head>
<body>
<!--------------definition list tag----------------->
Definition of Terms:<br>
<dl>
<dt>Web Browser
<dd>A software that enables the user to view web pages that are created in HTML codes.
<dt>HTML
<dd>HTML stands for Hyper Text Markup Language. It is a scripting language whose primary
purpose is to create pages that are used on the WWW (World Wide Web). HTML pages or
documents consist of codes called Tags embedded in the text of a document.
<dt>Tags
<dd>are codes in an HTML document which the internet browser reads and then interprets for
succeeding display to a reader. An HTML document should always start with the tag [HTML],
followed by the [HEAD], [TITLE] and the [BODY] that only occur once.
</dl>
<!--------------definition list tag end----------------->
</body>
</html>
List tags
Definition List Tag
Table tag
The <table> specify a container for data the will
be viewed as tables inside your web document.
SYNTAX: <table>…</table>
Inside the <table> tag rows and columns are
included:
<tr> refers to the table row of the table.
<td> refers to the table cell of the table.
<th>refers to the table headings (text emphasize).
Table tag
The <table> Attributes:
▫ Align=“left, center and right” [default value is left]
▫ bgcolor=“color name or Hex number“
▫ border=“pixels” [specifies the border width]
▫ The value="0“ displays table with no border, the default
value of the <table> tag.
▫ Cellpadding = “pixels/%” [specifies the space between
the cell walls and contents]
▫ cellspacing=“pixels/%” [specifies the space between
cells]
Table tag
The <table> Attributes:
▫ Frame = “above, below, hsides, lhs, rhs,
vsides, box, border” [Specifies which sides of
the border side will appear.]
▫ The "border" attribute can be used in specifying
the width of the border.
▫ width=“pixels and %” specifies the width size of
the table.
Table tag
<html>
<head><title>HTML Table</title></head>
<body>
<!--------------table tag----------------->
<table border=5>
<tr>
<td><img src="[Link]" border=1 width=200px
height=200px>
</tr>
</table>
<!--------------table tag end----------------->
</body>
</html>
Table tag
<html>
<head><title></title></head>
<body>
<!--------------table tag----------------->
<table border=5 cellpadding=30px>
<tr>
<td><img src="[Link]" border=1 width=200px
height=200px>
</td>
</tr>
</table>
<!--------------table tag end----------------->
</body>
</html>
Table tag
Cellpadding=30px
The space between the
cell walls and the
image.
Table tag
<html>
<head><title></title></head>
<body>
<!--------------table tag----------------->
<table border=5 cellpadding=30px>
<tr>
<td><img src="[Link]" border=1 width=200px height=200px>
</td>
<td><img src="[Link]" border=1 width=200px height=200px>
</td>
</tr>
</table>
<!--------------table tag end----------------->
</body>
</html>
Table tag
Table tag
<html>
<head><title></title></head>
<body>
<!--------------table tag----------------->
<table border=5 cellpadding=30px cellspacing=30px>
<tr>
<td><img src="[Link]" border=1 width=200px height=200px>
</td>
<td><img src="[Link]" border=1 width=200px height=200px>
</td>
</tr>
</table>
<!--------------table tag end----------------->
</body>
</html>
Table tag
The spaces between
Cellspacing=30px the cell.
Table tag
Colspan/Colgroup Attribute- merging n
columns
Table
<html> tag
<head><title></title></head>
<body>
<table border=5 cellpadding=30px>
<tr>
<td colspan=2 align="center">Assumption Antipolo logo</td></tr>
<tr>
<td><img src="[Link]" border=1 width=200px height=200px></td>
<td><img src="[Link]" border=1 width=200px height=200px></td>
</tr>
<tr>
<td colspan=2 align="center">Sumulong Highway, Antipolo City</td>
</tr>
</table>
</body>
</html>
Table tag
Rowspan Attributes: merging rows
<html>
<head><title></title></head>
Table tag
<body>
<!--------------table tag----------------->
<table border=2 cellpadding=4>
<tr>
<td rowspan=3><img src="[Link]" width=200px
height=200px> </td>
<td>assumption antipolo</td></tr>
<tr>
<td>sumulong highway, antipolo city</td></tr>
<tr>
<td>tel#697-2350</td></tr>
</table>
<!--------------table tag end----------------->
</body>
</html>
Web Page Design
Lesson 4: HTML tag
Formatting tag <frame>
superscript bold <a>
subscript italic
center
Formatting tags
Formatting tags allow you to add or change the
style view of your web page window.
<b>…</b> bold
<i>…</i> italic
<u>…</u> underline
<sup>…</sup> superscript
<sub>…</sub> subscript
<br> line break
<p> insert blank space
space
Adding additional spaces
<html>
<head>
<title>Example of  :</title>
</head>
<body>
This is a       regular space.
</body>
</html>
Formatting tags
<html>
<head><title)Formatting tags</title></head>
<body>
<!---------------formatting tags----------------->
<b>W</b>orld <b>T</b>rade </b><b>C</b>enter<br>
<i>Italics Tag</i><br>
<u>Underline</u><br>
a<sup>2</sup><br>
H<sub>2</sub> O<br>
<!---------------formatting tags end----------------->
</body>
</html>
Frameset tags
Frames allow you to subdivide your web page
window to multiple windows.
SYNTAX: <frameset>…</frameset>
The <frameset> tag attributes:
cols=“%"
rows=“%"
border=“n" in pixels.
bordercolor="color name or hex number "
frameborder="yes"|"no"
Frameset tags
The Element Frame
Defines a rectangular sub-space within a Frameset
document. Each FRAME must be contained within a
<frameset> that defines the dimensions of the frame.
SYNTAX: <frame>
The <frame> tag attributes:
name=“name”
marginheight =“n" in pixels.
marginwidth =“n" in pixels.
bordercolor=“color name or hex number”
Frameset tags
The <frame> tag attributes:
frameborder=“yes” | “no”
noresize
scrolling=“yes” | ”no” | “auto”
src=“url”>
Frameset tag
Vertical Frames (columns)
Frameset tag
Vertical Frames (columns)
<html>
<head><title>Vertical Frame</title></head>
<frameset cols=25,50,25>
<frame>
<frame>
<frame>
</frameset>
</html>
A comma-separated list of widths for
division of window in columns.
Frameset tag
Horizontal Frames (rows)
Frameset tag
Horizontal Frames (rows)
<html>
<head><title>Horizontal Frame</title></head>
<frameset rows=25,50,25>
<frame>
<frame>
<frame>
</frameset>
</html>
Frameset tag
Horizontal and Vertical Frames (rows & columns)
<html>
<head><title>Horizontal and Vertical Frames</title></head>
<frameset rows=130,*>
<frame>
<frameset cols=150,* >
<frame>
<frame>
</frameset> The asterisk * replaces the
remaining percentage to 100%.)
</html>
Frameset tag
Vertical and Horizontal Frames (rows & Columns)
Frameset tag
<html>
<head><title>Blue Page</title></head>
<body bgcolor=”blue”> [Link]
</body>
</html>
<html>
<head><title>Yellow Page </title></head>
<body bgcolor=“yellow”> [Link]
</body>
</html>
Frameset tag
<html>
<head><title>Red Page </title></head>
<body bgcolor=“red”>
</body> [Link]
</html>
Frameset tag
<html>
<head><title>Vertical Frame</title></head>
<frameset cols=25,50,25 border=0>
<frame src=“[Link]“>
<frame src=“[Link]">
<frame src=“[Link]">
</frameset>
</html>
Frameset tag
Putting all Web Pages in ONE page
Anchor tags
The anchor tag <a> is used to create links to HTML files
internal (on current page or within current website) or
external (other websites)
SYNTAX: <a>…</a>
The <a> tag attributes:
* href=“Specifies a hypertext link to another
resource, such as an HTML document or
image.”
* name=“Defines a destination for a link"
Anchor tags
The <a> tag attributes:
* target=“__” Is used with frames to specify the
frame in which the link should be rendered or
appear.”
* title=“__” The text inside the double quotes will
appear when you hover over the anchor text”
Anchor tag
Open the file [Link]
<html>
<head><title>Yellow Page</title></head>
<body bgcolor=“yellow”>
</body>
</html>
Anchor tag
Open the file [Link]
<html>
<head><title>Yellow Page</title></head>
<body bgcolor=“yellow”>
<a href="[Link]">Yellow</a><br>
<a href="[Link]">Blue</a><br>
<a href="[Link]">Red</a><br>
</body>
</html>
save this file
Anchor tag
Open the file [Link] with a browser
The text link
created using the
anchor <a> tag
Anchor tag
Open the file [Link]
<html>
<head><title>Yellow Page</title></head>
<body bgcolor=“yellow”>
<a href=“[Link]” target=“_blank”>Yellow</a>
<br>
<a href="[Link]“ target=“_blank”>Blue</a><br>
<a href="[Link]“ target=“_blank”>Red</a><br>
</body>
</html>
The "_blank" value opens
the new document in a
new window
Anchor tag
Open the file [Link] using notepad.
<html>
<head><title>Horizontal and Vertical
Frames</title></head>
<frameset rows=130,*>
<frame src="[Link]">
<frameset cols=150,* >
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>
Anchor tag
Open the file [Link] using notepad.
<html>
<head><title> Horizontal and Vertical
Frames </title></head>
<frameset rows=130,*>
<frame name=“top” src="[Link]">
<frameset cols=150,* >
<frame name=“left” src="[Link]">
<frame name=“right” src="[Link]">
</frameset>
</html>
Anchor tag
Open the file [Link] with a browser
The text link
created using the
anchor <a> tag
Anchor tag
Open the file [Link]
<html>
<head><title>Yellow Page</title></head>
<body bgcolor=“yellow”>
<a href=“[Link]”
target=“_blank”>Yellow</a><br>
<a href="[Link]“
target=“_blank”>Blue</a><br>
<a href="[Link]“
target=“_blank”>Red</a><br>
</body>
</html>
Anchor tag
<html>
<head><title>Yellow Page</title></head>
<body bgcolor=“yellow”>
<a href=“[Link]”
target=“right”>Yellow</a><br>
<a href="[Link]“
target=“right”>Blue</a><br>
<a href="[Link]“
target=“right”>Red</a><br>
</body>
</html>
Anchor tag-name
The name attribute is used to create a named anchor.
When using named anchors you can create links to a
specific section on a page, instead of letting your viewer
scroll around to find what they are looking for.
Named anchors are called bookmarks in Expression Web.
<a href="#introduction">Introduction</a>
<b><A name=“introduction">Introduction to Web
Page Design</a></b>
NOTE: Not supported in HTML5. Use the global id attribute instead.
Web Page Design
Lesson 5: HTML tag
<forms>
<style>
<span>
Form tag
⚫ The <form> tag allows you to add forms to your web
pages using the form elements.
⚫ Form elements are elements that allows the interact
with the computer by entering information to the
computer.
⚫ This elements are associated with the <input> tag.
SYNTAX: <form>…</form>
The <form> tag attributes
Attribute Value Explanation
action url Defines where to send the data when
the submit button is pushed.
Form tag
The <form> tag attributes
Attribute Value Explanation
method get The HTTP method for
post sending data to the action
url. The default value is
get.
method="get": This method sends the form contents in the url.
method="post": This method sends the form contents in the body of
the request.
Note: If the form values contains non-ASCII characters or exceeds
100 characters you MUST use method="post".
Form tag
How to use the <form> tag and its attributes.
• Inform the browser that you are going to
use or starting a form in your web page.
• Inform the browser what do you want to
do with the data in the form.
Form tag
<form method="post" action="[Link]
email address">
•The command informs the browser that you are
starting or using a form.
•The command informs the browser that the
METHOD of dealing with the form is to POST it.
•And lastly, that the data should be posted to your
e-mail address using the ACTION "[Link]
Form tag
Text Element
A text area entry field allows multiple lines of entry
to be entered.
Typical uses are to provide comments the Web
user can enter.
<form>
<input type=“text”>
</form>
The <form> tag
⚫ The <form arguments> ... </form> tag encloses form
elements (and probably other HTML as well)
⚫ The arguments to form tell what to do with the user input
⚫ action="url" (required)
⚫ Specifies where to send the data when the Submit button is clicked
⚫ method="get" (default)
⚫ Form data is sent as a URL with ?form_data info appended to the end
⚫ Can be used only if data is all ASCII and not more than 100 characters
⚫ method="post"
⚫ Form data is sent in the body of the URL request
⚫ Cannot be bookmarked by most browsers
⚫ target="target"
⚫ Tells where to open the page sent as a result of the request
⚫ target= _blank means open in a new window
⚫ target= _top means use the same window
91
The <input> tag
⚫ Most, but not all, form elements use the input tag, with
a type="..." argument to tell which kind of element it is
⚫ type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
⚫ Other common input tag arguments include:
⚫ name: the name of the element
⚫ value: the “value” of the element; used in different ways for
different values of type
⚫ readonly: the value cannot be changed
⚫ disabled: the user can’t do anything with this element
⚫ Other arguments are defined for the input tag but have
meaning only for certain values of type
92
Text input
A text field:
<input type="text" name="textfield" value="with an initial value">
A multi-line text field:
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret">
93 • Note that two of these use the input tag, but one uses textarea
Buttons
⚫ A submit button:
<input type="submit" name="Submit" value="Submit">
⚫ A reset button:
<input type="reset" name="Submit2" value="Reset">
⚫ A plain button:
<input type="button" name="Submit3" value="Push Me">
⚫ submit: send data
⚫ reset: restore all form elements to
their initial state
⚫ button: take some action as specified
by JavaScript
94
Checkboxes
⚫ A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>
⚫ type: "checkbox"
⚫ name: used to reference this form element from
JavaScript
⚫ value: value to be returned when element is checked
⚫ Note that there is no text associated with the
checkbox—you have to supply text in the surrounding
HTML
95
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female
⚫ If two or more radio buttons have the same name, the user can only
select one of them at a time
⚫ This is how you make a radio button “group”
96
Drop-down menu or list
⚫ A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
⚫ Additional arguments:
⚫ size: the number of items visible in the list (default is "1")
⚫ multiple: if set to "true", any number of items may be
selected (default is "false")
97
Hidden fields
⚫ <input type="hidden" name="hiddenField" value=“Page_">
This is page 10.
⚫ What good is this?
⚫ All input fields are sent back to the server, including hidden fields
⚫ This is a way to include information that the user doesn’t need to
see (or that you don’t want them to see)
⚫ The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted
98
A complete example
<html>
<head>
<title>Get Identity</title>
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>
99
File upload Box
Web Page Design
Lesson 5: HTML tag
<div>
<style>
<span>
Division tag
The <div> tag is use as a container for other tags.
The same use and function of the body tag. The
div elements are block elements to group other
tags together.
SYNTAX: <div>…</div>
The <div> tag attributes
id
width
height
title
style
Div tag
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
Span Tag
⚫ The <span> tag is an inline container
used to mark up a part of a text, or a part
of a document.
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span>
eyes and my father has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>
</body> </html>
Block and Inline Elements
⚫ Block elements add a line break before
and after them
⚫ <div> is a block element
⚫ Other block elements are <table>, <hr>,
headings, lists, <p> and etc.
⚫ Inline elements don’t break the text
before and after them
⚫ <span> is an inline element
⚫ Most HTML elements are inline, e.g. <a>
106
List tags
Definition list - display a list of terms and
definition in your web page.
SYNTAX: <dl>…</dl>
<dt> refers to the terms that will be displayed
<dd>refers to the definition of the term that is
displayed.
List tags
<html>
<head><title> definition list tag</title></head>
<body>
<!--------------definition list tag----------------->
Definition of Terms:<br>
<dl>
<dt>Web Browser
<dd>A software that enables the user to view web pages that are created in HTML codes.
<dt>HTML
<dd>HTML stands for Hyper Text Markup Language. It is a scripting language whose primary
purpose is to create pages that are used on the WWW (World Wide Web). HTML pages or
documents consist of codes called Tags embedded in the text of a document.
<dt>Tags
<dd>are codes in an HTML document which the internet browser reads and then interprets for
succeeding display to a reader. An HTML document should always start with the tag [HTML],
followed by the [HEAD], [TITLE] and the [BODY] that only occur once.
</dl>
<!--------------definition list tag end----------------->
</body>
</html>
List tags
Definition List Tag
Comments: <!-- --> Tag
⚫ Comments can exist anywhere between the
<html></html> tags
⚫ Comments start with <!– [data]-->
<!–- Logo (a JPG file) -->
<img src="[Link]" alt=“Logo">
<!–- Hyperlink to the web site -->
<a href="[Link]
<!–- Show the news table -->
<table class="newstable">
...
110
HTML vs. XHTML
⚫ XHTML is more strict than HTML
⚫ Tags and attribute names must be in lowercase
⚫ All tags must be closed (<br/>, <img/>) while
HTML allows <br> and <img> and implies
missing closing tags (<p>par1 <p>par2)
⚫ XHTML allows only one root <html> element
(HTML allows more than one)
⚫ !DOCTYPE is mandatory in XHTML
⚫ Head, body, title tags are mandatory
111
XHTML vs. HTML
⚫ Many element attributes are deprecated
in XHTML, most are moved to CSS
⚫ Attribute minimization is forbidden, e.g.
<input type="checkbox" checked>
<input type="checkbox" checked="checked" />
⚫ Note: Web browsers load XHTML faster
than HTML and valid code faster than
invalid!
112
DHTML
Dynamic Behavior at the Client Side
What is DHTML?
⚫ Dynamic HTML (DHTML)
⚫ Makes possible a Web page to react and change
in response to the user’s actions
⚫ DHTML = HTML + CSS + JavaScript
DHTML
XHTML CSS JavaScript DOM
114
DTHML = HTML + CSS + JavaScript
⚫ HTML defines Web sites content through semantic tags
(headings, paragraphs, lists, …)
⚫ CSS defines 'rules' or 'styles' for presenting every aspect of
an HTML document
⚫ Font (family, size, color, weight, etc.)
⚫ Background (color, image, position, repeat)
⚫ Position and layout (of any object on the page)
⚫ JavaScript defines dynamic behavior
⚫ Programming logic for interaction with the user, to handle events,
etc.
115
Style Tag
⚫ The <style> tag is used to define style
information (CSS) for a document.
⚫ Inside the <style> element you specify
how HTML elements should render in a
browser.
CSS style
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>