Web Page Programming (Using HTML and JavaScript)

Chapter 4 HTML – Phrase Tags and Tables

The phrase tags have been desicolgned for specific purposes, though they are displayed in a similar way as other basic tags
like <b>, <i>, <pre>, and <tt>, you have seen in previous chapter. This chapter will take you through all the important phrase
tags, so let's start seeing them one by one.

Emphasized Text
Anything that appears within <em>...</em> element is displayed as emphasized text.
<p>The following word uses a <em>emphasized</em> typeface.</p>

Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
<p>The following word has been <mark>marked</mark> with yellow</p>

Strong Text
Anything that appears within <strong>...</strong> element is displayed as important text.
<p>The following word uses a <strong>strong</strong> typeface.</p>

Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute must
contain this full description and nothing else.
<p>My hero's name is <abbr title="Jose Rizal">Joriz</abbr>.</p>

Acronym Element
The <acronym> element allows you to indicate that the text between <acronym> and </acronym> tags is an acronym.
At present, the major browsers do not change the appearance of the content of the <acronym> element.
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>

Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

1|Page
 Web Page Programming (Using HTML and JavaScript)

Special Terms
The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a special term. It's
usage is similar to italic words in the midst of a paragraph.
Typically, you would use the <dfn> element the first time you introduce a key term. Most recent browsers render the content
of a <dfn> element in an italic font.
<p>The following word is a <dfn>special</dfn> term.</p>

Quoting Text
When you want to quote a passage from another source, you should put it in between<blockquote>...</blockquote> tags.
Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes
uses an italicized font.
<p>The following description of XHTML is taken from the W3C Web site:</p>

<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on

from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>

Short Quotations
The <q>...</q> element is used when you want to add a double quote within a sentence.
<p>Dalig is in Antipolo, <q>I think I am correct</q>.</p>

Text Citations
If you are quoting a text, you can indicate the source placing it between an opening <cite>tag and closing </cite> tag
As you would expect in a print publication, the content of the <cite> element is rendered in italicized text by default.
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>

Computer Code
Any programming code to appear on a Web page should be placed inside <code>...</code>tags. Usually the content of the
<code> element is presented in a monospaced font, just like the code in most programming books.
<p>Regular text. <code>This is code.</code> Regular text.</p>

2|Page
 Web Page Programming (Using HTML and JavaScript)

Keyboard Text
When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd>...</kbd>
element to indicate what should be typed in, as in this example.
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>

Programming Variables
This element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that element
is a variable.
<p><code>document.write("<var>user-name</var>")</code></p>

Program Output
The <samp>...</samp> element indicates sample output from a program, and script etc.
Again, it is mainly used when documenting programming or coding concepts.
<p>Result produced by the program is <samp>Hello World!</samp></p>

Address Text
The <address>...</address> element is used to contain any address.
<address>327 San Antonio St., Poblacion, Inopacan, Leyte</address>

Tables
Almost all Web sites are laid out using tables. Tables arrange and organize contents into columns and rows. Basicall y, they
can be made via the container tags <table></table>. Each row within the table is defined by the container tags <tr></tr>.
Moreover, each cell or data within a row is defined by the container tags <td></td>.
Remember that the cells (<td></td>) are placed inside rows (<tr></tr>) and rows are placed inside the table
(<table></table>).
A table by default has no borders.
There are various ways to change the appearance of your table; you can change the thickness and color of the border around
it, set its background color or image, etc. These various ways can be done through the table’s attributes.

3|Page
 Web Page Programming (Using HTML and JavaScript)

Attribute Table for <table></table>

ATTRIBUTE NAME DEFINITION EXAMPLE
align Indicates the horizontal alignment of the table. <table align=”center”></table>
background Indicates the background image of the table. <table background=”picture.jpeg”>
</table>
bgcolor Indicates the background color of the table. <table bgcolor=”red”></table>
border Indicates the thickness of the border in pixels. <table border=”2”></table>
bordercolor Indicates the color of the border. <table bordercolor=”red”></table>
cellpadding Indicates the distance between the contents of <table cellpadding=”2”></table>
the cells and border around it in pixel.
cellspacing Indicates the distance between the cells in pixels. <table cellspacing=”2”></table>
width Indicates the width of the table in pixels or percent <table width=”800”></table>
of the width displayed by the Web browser.

Table Rows
Attribute Table for <tr></tr>
ATTRIBUTE NAME DEFINITION EXAMPLE
align Indicates the horizontal alignment of the table. <tr align=”center”></tr>
of the contents of the row.
valign Indicates the vertical alignment of the contents <tr valign=”bottom”></tr>
of the row.
bgcolor Indicates the background color of the row <tr bgcolor=”red”></tr>
height Indicates the height of the row in pixels. <tr height=”200”></tr>

By default, the contents of table rows are aligned vertically.

4|Page
 Web Page Programming (Using HTML and JavaScript)

<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table align="center" border="3" bordercolor="red" width="600"
cellpadding="4" cellspacing="6">
<cation><h3 align="center">Directory</h3></caption>
<tr height="35" bgcolor="yellow" align="center">
<td><b>Name</b></td>
<td><b>Mobile Number</b></td>
<td><b>Landline</b></td>
</tr>
<tr>
<td>John von Neumann</td>
<td>+361-1228-1903</td>
<td>+1301-02081957</td>
</tr>
<tr>
<td>Charles Babbage</td>
<td>+44 020-12261791</td>
<td>+44 020-10181871</td>
</tr>
<tr>
<td>Muḥammad ibn Mūsā al-Khwārizmī</td>
<td>+998 820</td>
<td>+964 850</td>
<tr>
<td>Alan Mathison Turing</td>
<td>+44 020-06231912</td>
<td>+44 020-06071954</td>
</tr>
</table>
</body>
</html>

5|Page
Web Page Programming (Using HTML and JavaScript)

6|Page
 Web Page Programming (Using HTML and JavaScript)

HTML – Forms, iFrames and Meta Tags

Forms
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements. Form elements are different types of input elements, like: text fields, checkboxes,
radio buttons, submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element is displayed in several ways, depending on the type attribute.

iFrames
An iframe is used to display a web page within a web page.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the
iframe:</p>
<iframe src="demo_iframe.htm" height="200" width="300"></iframe> 7|Page
</body>
</html>
 Web Page Programming (Using HTML and JavaScript)

HTML lets you specify metadata - additional important information about a document in a variety of ways. The META
elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date,
a list of keywords, document author etc.

The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing
tag but it carries information within its attributes.

You can include one or more meta tags in your document based on what information you want to keep in your document
but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not
matter if you include them or not.

Adding Meta Tags to your Documents

You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented
by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes:

Specifying Keywords
You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the
search engines while indexing your webpage for searching purpose. Following is an example, where we are adding HTML,
Meta Tags, Metadata as important keywords about the document. 8|Page
 Web Page Programming (Using HTML and JavaScript)

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Document Description
You can use <meta> tag to give a short description about the document. This again can be used by various search engines
while indexing your webpage for searching purpose.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Document Revision Date

You can use <meta> tag to give information about when last time the document was updated. This information can be used
by various web browsers while refreshing your webpage.

9|Page
 Web Page Programming (Using HTML and JavaScript)

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 4/17/2020" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Document Refreshing
A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.
If you want your page keep refreshing after every 5 seconds then use the following syntax.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 4/17/2020" />
<meta http-equiv="refresh" content="5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Page Redirection
You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect
the page after a certain number of seconds.
10immediately
Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page |Page

then do not specify content attribute.

 Web Page Programming (Using HTML and JavaScript)

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 4/17/2020" />
<meta http-equiv="refresh" content="5; url=http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Setting Cookies
Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to
keep track of various information based on your web application need.
You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a
site visitor.
Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately
then do not specify content attribute.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 4/17/2020" />

11 | P a g e