Lesson 3 (E)

3.
0 Hypertext Mark-up Language (HTML)

Lesson Introduction
Previous lesson, you have learned about markup languages and HTML as web a markup
language. During this week you will learn designing web pages using XHTM/HTML syntax. You
will also discuss about basic webpage formatting elements of HTML. Here, we will use simple
text pad as a startup coding environment.
Learning Outcomes
After completion of this lesson, the learner will be able to perform web page creation and basic
formatting using HTML elements.
• Create web pages by using HTML
• Write HTML codes with basic formatting elements
• Describe special usage of each basic element
• Describe HTML/XHTML design standards with respect to W3C
• Describe main differences of HTML and XHTML
Lesson Outline:
• How to create web page with a text editor?
• Use of basic HTML page structure
html, head, title, body, and text elements
• Common html elements and design formatting elements
Headings, paragraph, breaks, horizontal rulers, bold, italic, delete, etc.
• Web element attributes and their usage with examples
Images, text colors, background colors, videos, alignments etc.
• Hyperlinks and referential web structures
Internal links and external links and relative paths
3.1 How to create web page with a text editor?
As mentioned in previous lesson there are so many HTML editors. For a beginner the best way
is to use a TXT editor. Following are the steps to make a simple HTML file using notepad. Follow
the steps and try by yourself.
 Go to Start> All Programs> Accessories> Notepad or simply right click on your desktop>
New> Text Document.
 Type the HTML Code.
 Save as yourtitle.html
 Double click on your html file to view in the web browser.
Figure 1: Step 1
Figure 2: Step 2
Make sure the extension of this file

should be .html
Figure 3: Step 3
File will be select a web browser to open with. So it will looks like this. Final step is to double
click on this html file so it will open from a web browser. It will looks like the following image.
Figure 3.1: output on browser
Figure 3.2: output on browser
3.2 Creating HTML Pages

In this section we elaborate the use of different HTML tags with their attributes to show the
usage of those tags in web pages.
3.2.1 HTML Headers

The following example in figure 5 represent the application of the following features listed.
 Use of document header in HTML body.

 Starting and closing tags for header: <h1>……</h1>
 There are six levels of headings, from Heading 1 through Heading 6.
 Those tags are written as <h1><h2><h3><h4><h5><h6>
 <h1> to <h6> is highest to lowest.
Further, the final output on a web browser also given. The title of the page is given as ‘Web
Authoring’. Left hand side of the figure shows the HTML code and right hand sideof it shows
the output on a web browser.
EXAMPLE:
<html>
<head>
<title>Web Authoring</title>
</head>
<body>
<p>HTML is easy!!</p>
<h1>This line using h1</h1>
</body>
</html>
Figure 2: Different sizes of headers
Activity 3.1: - Tryout the code above and see the difference of each header.
3.2.2 HTML Font element

a. Font type
HTML text content styles are given by Font combinations determine how a browser displays
text in your web page. A browser uses the first font in the combination that is installed on the
user’s system; if none of the fonts in the combination are installed, the browser displays the
text as specified by the user’s browser preferences.
When a web designer wants to specify a specific font type as a style for the given text, the
<font> tag has to be used. The face is the attribute name use to assign the font type.
Tag : <font face = xxxxx>
Syntax example:
<font face=“Arial, Tahoma, Lucida Sans”> This is Arial, Tahoma, and Lucida Sans font </font>
EXAMPLE:
<html>
<head>
</head>
<body>
<p><font face=“Arial, Tahoma, Lucida Sans”> This is Arial, Tahoma, and Lucida
sans font </font></p>
<p><font face=“Times New Roman, Times, serif”> This is Times New Roman,
Times, serif font </font></p>
</body>
</html>
Activity 3.2: - Implement the above code and observe the output of the code.
Figure 3: output for the activity 3.2

b. Font Color
To change the color of the text, color attribute can be use inside the font tag.
Tag : <font color = xxxxx>
Syntax example : <font color=“#cc6699”>I don’t know what color it is</font>
The following figure 6.1 shows a code and its output by applying font color.
The colors of the fonts will be denoted by six numbers leading by a ‘#’ symbol. You can use this
site ( https://htmlcolorcodes.com/ ) to find the reference number any color.
EXAMPLE
<html>
<head>
</head>
<body>
<font color=“#cc6699”>I don’t
know what color it is</font>
</body>
</html>
Figure 4.1: Example for color font
Activity 3.3: Design the above text by using the code given on figure 6.1. Try to change the font
type and color together according to your preference.
Copy the web page created in activity 3.1 and modify it to display six (6) headers titles in six
different colours. Hint: you may use: <h…> <font ….> …… </font></h…>
Further to the above, please visit the following link and apply changes to the code where ever
necessary to obtain font types, size and colors.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_font
c. Set line break
There are several ways to keep breaks on the content we write on web pages. <p></p> tags is
used to enclose a paragraphs on webpages. The content which are to be in the paragraph
should be in between the start and end tags. New paragraph will get a break between 1st and
2nd paragraph. To have a break without paragraphs <br> or </br> tags can be used (also <br/>).
<p>……..</p>  to produce a new paragraph
<br> … </br>  to produce a new line break
The following example in figure 7 shows the application of <p> and <br> tags.
EXAMPLE
<html>
<head>
</head>
<body>
<p>Welcome to HTML!</p>
<p>This is a first paragraph</p>
<p><br/>This is a second paragraph</p>
</body>
</html>
Figure 7: Use of <p> tag
The <p> … </p> or <p/> tag separate the text content into paragraphs. Implement the above
example for your self-assessment.
d. Set various text formats
There are tags to manipulate the shapes and forms of the text. Few of those tags are described
below.
Tags Description
<b>...</b> ----------------------------------Bold
<i>...</i> ------------------------------------Italic
<u>...</u> ---------------------------------Underline
<sub>...</sub> ---------------------------Subscript
<sup>...</sup> ---------------------------Superscript
If a phrase or sentence were written in-between these tags those will have the shapes or forms
according to the tags behavior. The following in figure 8 shows the applications of above tags.
EXAMPLE
<html>
<head>
</head>
<body>
<p>
<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<sub>Subscript</sub>
<sup>Superscript</sup>
</p>
</body>
</html>
Figure 8: Text formatting

e. Set text size
There are 7 level size levels of font. The default size attribute value is 3. When a size is given
“+2”, it implies that size to be increase by two levels from the default.
Tags: <font size="+1">
Note that, html size attribute in <font> is incompatible with HTML5. The following example in
figure 9 shows the use of size attribute.
EXAMPLE
<html>
<head>
</head>
<body>
<p><font size="+5">Larger Font

Size</font></p>
<p>This is a second paragraph</p>
</body>
</html>
Figure 8: Text size formatting
f. Comments
Comment tags are used to insert comments in the HTML source code. These comments will
only be seen on the editor. Comments are not displayed by the browser, but they can help
document your HTML source code. You can add comments to your HTML source by using the
following syntax.
Syntax Example:


With comments you can place notifications and reminders in your HTML. And also comments
will be important when debugging the HTML code.
g. Text alignment
Alignment of text in a document is very important. The followings are the main alignment
attribute values which are used in HTML.
Syntax example:
<p align=”left”>  Left alignment.
<p align=”right”> Right alignment.
<p align=”center”>  Centre alignment.
Figure 10 shows the code and the output to illustrate the application of align attribute. Apply
the code and observe the output.
Example
<html>
<head>
</head>
<body>
<p align="left">This is a left alignment paragraph</p>
<p align="center">This is a center alignment paragraph</p>
<p align="right">This is a right alignment paragraph</p>
</body>
</html>
Figure 10: Text alignment

3.2.3 Add Image to a web page
Images can improve the design and the appearance of a web page. HTML element which use to
add an image is <img > tag and there are several attributes which can be given for this element.
Those elements contains several important properties.
Attribute src Image location (source path)
Attribute height Image height
Attribute width Image width
Tags: <img src = "mypic.bmp" height = "363" width = "552">
Adding all the attributes are not a must. You can neglect the attributes that you don’t want to
mention. Figure 11 shows an application of img tag with its’ common attributes.
Example:
<html>
<head>
</head>
<body>
<img src="file:///C:\Users\Rana\Desktop\HTML\bird.jpg"
height="363" width="552">
</body>
</html>
Figure 11: Application of img tag with its’ attributes
Activity 3.4
Examine the use of img tag with its’ attributes in the following link and design a web page by
inserting an image in between two text paragraphs (above and below). Align the image to the
center of the page horizontally. Create image caption under the image. Use “alt” attribute to
insert display message about image when move the mouse.
Include an image from outside source in the internet using src attribute at the end of the page.
Link: https://www.w3schools.com/tags/tag_img.asp
3.2.4 Add video to webpage
A video file can be inserted to html using <video> tag in the same way which we used to add an
image but there are common attributes as well as attributes which only compatible with videos.
The size and the type of the video should be given at the first place. The attributes and their
behaviors are as follows.
 autoplay - sets whether the file will run automatically after the page is loaded. Can have
the true or false value
 hidden - sets whether the buttons are hidden or not. Can have the true or false value.
 volume - can have any value from 0 to 100
 loop- sets whether the file will be replayed after it is finished. Can have the true or false
value.
 playcount - this establishes how many times the file will be replayed. For example
playcount="2" means it will be replayed two times and after it will stop
<html>
<head>
</head>
<body>
<video width="320" height="240" controls>
<source
src="C:\Users\Rana\Desktop\HTML\2.MP4"
type="video/mp4" >
</video></body>
</html>
Figure 12: Displaying a video on a page
The format of the video is also important. It depends in the web browser you use to display the
webpage. There are few well known formats. The most used are .mpeg and .swf, because of the
compact format. Figure 12 shows an example on attaching a video source in the given machine
by using src attribute of source child tag.
Activity 3.5
Refer the attributes and features available for the video tag described in the following link and
use the “try yourself” activities given on the links.
Links: https://www.w3schools.com/tags/tag_video.asp
https://www.w3schools.com/tags/att_video_poster.asp
Design a web page by inserting a video which is on the internet source. Further, add a poster
image as initial image for the video display. Set the size of the video as 480 x 320.
3.2.5 Hyperlinks
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks, the information organization and the power of the web relies on
hyperlinks. Perhaps the most important HTML element is the hyperlink, or ANCHOR tag. You
can click on a link and jump to another document. When you move the mouse over a link, the
mouse arrow will turn into a little hand (you may define it). A link does not have to be text. It
can be an image or any other HTML element (object).
Tag Syntax: <a href="URL">…</a> where URL is the Web address of the page to be displayed
when the user clicks on the link
 if the page is accessed over the Web, must start with http://
 if not, the browser will assume it is a name of a local file (local path)
Target attribute specify the place of new link to be display (self-overwrite or new page).
Tag : <a href="URL" target="_blank">…</a> causes the page to be loaded in a new window
Assigns the text Yahoo as the place to anchor the

Example tag hyperlink.
<p><a href = "http://www.yahoo.com"> Yahoo </a></p>
Attribute href of tag a assigned to Web page URL.

Anchor tag
Note: A link does not have to be text. It can be an image or any other HTML element.
The following example in figure 13 gives a code and output of a web page with hyperlinks.
Example
<html> <!—Hyperlink Demo -->
<head>
<title>Hyperlinks</title>
</head>
<body> <p> <a href="https://www.mrt.ac.lk/web/itfac/education/undergraduate/bachelor-
it"> BIT</a> <br>
<a href="pageOne.html" target="_blank"> Open page one in a new window</a>
</p>
</body>
</html>
Figure 13: Create web page with hyperlinks
Note: When you click BIT link in the page, it will redirect to the web address given in the code. If
you click the other link, it will open a new blanked tab in the browser with the title of pageone
on it. If there was a HTML file call pageOne.html on the same web page file location, it will be
displayed.
Activity 3.5
Refer and perform all the “try yourself” activities given in the following link.
https://www.w3schools.com/tags/tag_a.asp.
Create a web page with hyperlinks given to images. Examine on linking to sections in the same
page (links works within the same page).
3.3 HTML Forms
Web forms play a major role in web applications. Primarily the user interaction on web and
inputs for the web is taken through form elements. There are various Graphical User Interface
(GUI) widgets bundled under the form element as child elements. Followings are some of the
prominent features of web forms:
 HTML forms are used to create (rather primitive) GUIs on Web pages
 Usually the purpose is to ask the user for information (Inputs)
 The information is then sent back to the server or process in the same script
 Forms are created using the tags <form> … </form> pair
 Form elements (child) include: buttons, checkboxes, text fields, radio buttons, drop-
down menus, etc…
 A form usually contains a “Submit” button to send the information in the form elements
to the server or a specific program
 The parameters of the form starting tag define how to send the information
ACTION (attribute): Takes URL where the data will be sent.
METHOD: can be set to POST or GET (POST and GET features have different capabilities)
POST – The default method. User data is placed in the form collection of the request
object to be passed to the server.
GET – User data is passed to the server by adding it to the end of the URL address. The
data is sent as an encoded stream.
3.3.1 Form Elements (Child elements)
Code Element
<INPUT TYPE="text" NAME="name" VALUE ="value" SIZE=size> Creates Text Field
<INPUT TYPE="password" NAME="name" VALUE="value" SIZE=size> Password Field
<INPUT TYPE="hidden" NAME="name" VALUE="value"> Hidden Field
<INPUT TYPE="checkbox" NAME="name" VALUE="value"> Checkbox
<INPUT TYPE="radio" NAME="name" VALUE="value"> Radio Button

<SELECT NAME="name" SIZE=1>
<OPTION SELECTED>one
<OPTION>Two Dropdown List
</SELECT>
<SELECT NAME="name" SIZE=n MULTIPLE> Scrolling List
<TEXTAREA ROWS=yy COLS=xx NAME="name> .. </TEXTAREA> Multiple Test Fields
<INPUT TYPE="submit" VALUE="Submit" > Submit button
<INPUT TYPE="reset" VALUE="Reset" > Reset Button
Activity 3.6
Tryout the following HTML code and understand the behavior of each HTML form element.
<HTML>
<BODY>
<h1 ALIGN=CENTER><FONT SIZE=+2>USER INFORMATION FORM</FONT></h1>
<FORM ACTION="/Scripts/simple.pl" METHOD="post" >
User Name:<INPUT TYPE="text" NAME ="uname" SIZE=30>
<BR>
Service Type:<SELECT NAME="service">
<OPTION>CAS</OPTION>
<OPTION>CDRS</OPTION>
<OPTION>COPSAT</OPTION>
<OPTION>DDS</OPTION>
<OPTION>FDSS</OPTION>
<OPTION>ISS</OPTION>
<OPTION>OSS</OPTION>
<OPTION>SAS</OPTION>
<OPTION>DA</OPTION>
</SELECT>
<BR>
<H4><NOBR>SUBJECT AREA:</H4>
<INPUT TYPE="checkbox" NAME="agriculture" >Agriculture
<INPUT TYPE="checkbox" NAME="biology" >Biology
<INPUT TYPE="checkbox" NAME="biomedicine" >Biomedicine
<INPUT TYPE="checkbox" NAME="chemistry" >Chemistry
<BR>
<BR>
<INPUT TYPE="radio" NAME="database">AGRIS
<INPUT TYPE="radio" NAME="database">AHEAD
<INPUT TYPE="radio" NAME="database">BIOSIS
<INPUT TYPE="radio" NAME="database">CAB
<BR>
<BR>
Date Entered:<INPUT TYPE="text" NAME ="entrydate"
SIZE=10">(dd/mm/yyyy)
<BR>
<BR>
<CENTER>
<INPUT TYPE= "submit" VALUE="Submit Form">
<INPUT TYPE= "reset" VALUE="Clear Form">
<CENTER>
</FORM>
</BODY>
</HTML>
Refer the information given in the following link and perform all the activities given as “Try
yourself”: https://www.w3schools.com/tags/tag_form.asp
3.4 Advantages and Disadvantages of HTML
HTML was the first accessible way that data could be interactively processed
 Linking: Data is linked in HTML, letting one piece carry you to another.
 Simplicity: HTML is simple, making it easy to learn
 Portability: HTML is interpreted by the browsers, making it portable, especially in
distributed environment.
 Not a Strict language
 Easy to do the display formatting
Disadvantages of HTML:
HTML is a fixed language
 Lacks Extensibility: centralized standard, cannot be easily extended for special

applications
 Lacks strong Model-View concept: the underlying data and its visualization are not
clearly separated
 Most Web browsers will display an HTML document even when they contain errors
 Sometime inconsistent in different browsers and platforms
3.5 XHTML
So far we have looked at pure HTML where it is based on the SGML standard of markup
languages.
 SGML has now been largely replaced by XML (eXtensible Markup Language)
 XML is simpler and stricter than SGML more suitable for “lightweight” processing in
Web applications
 XHTML is an eXtensible and XML-compatible version of HTML 4
3.5.1 Main Features of XHTML
 XHTML elements must be properly nested
Ex: <b><i>bold and italic</b></i> is wrong
 XHTML documents must be well-formed (Syntax should be correct)
Ex: <html> <head> ... </head> <body> ... </body> </html>
 Tag names must be in lowercase

 All XHTML elements must be closed
 If an HTML tag has no closing tag, close it like this: <br />, <hr />, <image src="smile.gif"
/>
3.5.2 The History of HTML/XHTML
1992 – HTML first defined
1994 – HTML 2.0
1995 – Netscape specific non-standard HTML
1996 – HTML 3.2, compromise version
1997 – HTML 4.0, separates content from presentation
1998 – XML standard for writing Web languages
2000 – XHTML 1.0, XML compliant HTML
2002 – XHTML 2.0
3.5.3 XHTML
XHTML is a version of HTML modified to conform to the XML standard
 Designed to separate content from presentation

o Content in XHTML
o Presentation controlled by Cascading Style Sheets (CSS)
 Extensible –Additional elements can be defined
 XML Compatible – Other XML based languages can be embedded in XHTML documents
 Like a programming language
o Specific syntax to use
o Validators help you get it right (ex: https://validator.w3.org/ ) – it will check the
purity of the web markup codes you write.
3.5.4 XHTML Differences
 Case sensitive
 All elements must have start tags and end tags <p>Hello</p>
 Empty elements contain their own end tag <br />
 Attribute values must be enclosed in quotation marks
Refer more specific details available at http://www.w3.org/TR/xhtml1/#diffs

Lesson 3 (E)

Uploaded by

Copyright:

Available Formats

Lesson 3 (E)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 3 (E)

Uploaded by

Copyright:

Available Formats

3.

0 Hypertext Mark-up Language (HTML)

Make sure the extension of this file

Figure 3.1: output on browser

Figure 3.2: output on browser

3.2 Creating HTML Pages

3.2.1 HTML Headers

 Use of document header in HTML body.

Figure 2: Different sizes of headers

3.2.2 HTML Font element

Figure 3: output for the activity 3.2

Figure 4.1: Example for color font

<p>This is a first paragraph</p>

<p><br/>This is a second paragraph</p>

Figure 7: Use of <p> tag

Figure 8: Text formatting

<p><font size="+5">Larger Font

<p>This is a second paragraph</p>

Figure 8: Text size formatting

Figure 10: Text alignment

Figure 11: Application of img tag with its’ attributes

the true or false value

 volume - can have any value from 0 to 100

Assigns the text Yahoo as the place to anchor the

Attribute href of tag a assigned to Web page URL.

Figure 13: Create web page with hyperlinks

3.3.1 Form Elements (Child elements)

<INPUT TYPE="text" NAME="name" VALUE ="value" SIZE=size> Creates Text Field

<INPUT TYPE="password" NAME="name" VALUE="value" SIZE=size> Password Field

<INPUT TYPE="hidden" NAME="name" VALUE="value"> Hidden Field

<INPUT TYPE="checkbox" NAME="name" VALUE="value"> Checkbox

<INPUT TYPE="radio" NAME="name" VALUE="value"> Radio Button

<OPTION>Two Dropdown List

<SELECT NAME="name" SIZE=n MULTIPLE> Scrolling List

<TEXTAREA ROWS=yy COLS=xx NAME="name> .. </TEXTAREA> Multiple Test Fields

<INPUT TYPE="submit" VALUE="Submit" > Submit button

<INPUT TYPE="reset" VALUE="Reset" > Reset Button

3.4 Advantages and Disadvantages of HTML

HTML is a fixed language

 Lacks Extensibility: centralized standard, cannot be easily extended for special

3.5.1 Main Features of XHTML

 XHTML elements must be properly nested

Ex: <b><i>bold and italic</b></i> is wrong

 XHTML documents must be well-formed (Syntax should be correct)

Ex: <html> <head> ... </head> <body> ... </body> </html>

 Tag names must be in lowercase

1992 – HTML first defined

1994 – HTML 2.0

1995 – Netscape specific non-standard HTML

1996 – HTML 3.2, compromise version

1997 – HTML 4.0, separates content from presentation

1998 – XML standard for writing Web languages

2000 – XHTML 1.0, XML compliant HTML

2002 – XHTML 2.0

XHTML is a version of HTML modified to conform to the XML standard

 Designed to separate content from presentation

Refer more specific details available at http://www.w3.org/TR/xhtml1/#diffs

You might also like