Web Programming Chapter Two

Chapter Two: Hyper Text Markup Language (HTML)
2.1. Introduction toHTML

HTML is an acronym which stands for Hyper Text Markup Language which is used for creating
web pages and web applications.
Unlike programming languages, such as C, C++, C#, Java and Visual Basic, HTML is a markup
language that specifies the structure and content of documents that are displayed in web browsers.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on
a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each
other.
Markup Language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the static
or dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the help
of styling, and which looks in a nice format on a web browser. An HTML document is made of
many HTML tags and each HTML tag contains different content.
Let's see a simple example ofHTML.
<!DOCTYPE html>
<html>
<head>
<title> Web page title </title>
</head
>
<body>
<h1> Write Your First Heading </h1>
<p> Write Your First Paragraph. </p>
</body
>
</html>
Page | 1
Description of the above HTML Example:
<!DOCTYPE html>: It defines the document type or it instruct the browser about the version of
HTML.
<html>: This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the metadata
(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close immediately.
<body>: Text between body tag describes the body content of the page that is visible to the end
user. This tag contains the main content of the HTML document.
<h1>: Text between <h1> tag describes the first level heading of the webpage.
<p>: Text between <p> tag describes the paragraph of the webpage.
HTML code with Notepad
Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all
versions of Windows, from where you easily access it.
Step 1: Open Notepad (Windows)
Step 2: Write code in HTML

Page | 2
Step 3: Save the HTML file with .htm or .html extension.
Step 4: Open the HTML page in your web browser.

To run the HTML page, you need to open the file location, where you have saved the file and
then either double-click on file or click on open with option.
Page | 3
2.2. Building Blocks of HTML
An HTML document consist of its basic building blocks which are:
• Tags: An HTML tag surrounds the content and apply meaning to it. It is written between
< and > brackets.
• Attribute: An attribute in HTML provides extra information about the element, and it is
applied within the start tag. An HTML attribute contains two fields: name & value.
Page | 4
Syntax
<tag name attribute_name= " attr_value"> content </ tag name>
• Elements: An HTML element is an individual component of an HTML file. In an HTML

file, everything written within tags are termed as HTML elements.
2.3. HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom and left to
right. HTML tags are used to create HTML documents and render their properties. Each HTML
tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.
• All HTML tags must enclosed within < > these brackets.
• Every tag in HTML perform different tasks.
• If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)
Syntax
<tag> content </tag>
HTML Tag Examples
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag </u>
Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.
Page | 5
2.4. HTML Attributes
• HTML attributes are special words which provide additional information about the
elements or attributes are the modifier of the HTML element.
• Each element or tag can have attributes, which defines the behavior of that element.
• Attributes should always be applied with start tag.
• The Attribute should always be applied with its name and value pair.
• The Attributes name and values are case sensitive, and it is recommended by W3C that it
should be written in Lowercase only.
• You can add multiple attributes in one HTML element, but need to give space between
two attributes.
Syntax:
<element attribute_name="value">content</element>
2.5. HTML Elements
An HTML file is made of elements. These elements are responsible for creating web pages and
define content in that webpage. An element in HTML usually consist of a start tag <tag
name>, close tag </tag name> and content inserted between them. Technically, an element
is a collection of start tag, attributes, end tag, content between them.
Such as:
<p> Hello world!!!
</p>
Example
<!DOCTYPE html>
<html>
<head>
<title> WebPage </title>
</head>
<body>
<h1>This is my first web page</h1>
<h2> How it looks? </h2>
<p> It looks Nice!!!!! </p>
</body>
</html>
• All the content written between body elements are visible on web page.
Page | 6
Void element: All the elements in HTML do not require to have start tag and end tag, some
elements does not have content and end tag such elements are known as Void elements or
empty elements. These elements are also called as unpaired tag. Some Void elements are <br>
(represents a line break), <hr> (represents a horizontal line), etc. Nested HTML Elements:
HTML can be nested, which means an element can contain another element.
Following are the list of the some main elements used in HTML:
Start tag Content End tag Description
<h1> These are headings </h1> These elements are used to provide the
<h6> of HTML </h6> headings of page.
This element is used to display a content in
<p> This is the paragraph </p>
form of paragraph.
This element is used to provide a section in
<div> This is div section </div>
web page.
This element is used to provide a line break.
<br>
( void element)
This element is used to provide a horizontal
<hr>
line. (void element)
2.6. HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML provides us
ability to format text without using CSS. There are many formatting tags in HTML. These tags
are used to make text bold, italicized, or underlined. There are almost 14 options available that
how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
• Physical tag: These tags are used to provide the visual appearance to the text.
• Logical tag: These tags are used to add some logical or semantic value to the text.
NOTE: There are some physical and logical tags which may give same visual appearance, but
they will be different in semantics.
Page | 7
Here are the basic 14 HTML formatting tags. Following is the list of HTML formatting text.
Element name Description
<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in
HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.
Example
<b> This text is bold </b>
<strong> This text is important! </strong>
<i> This text is italic </i>
<em> This text is emphasized </em>
<p> Do not forget to buy <mark> milk </mark> today. </p>
<p> My favorite color is <del> blue </del> red. </p>
<p> My favorite color is <del> blue </del> <ins> red </ins>. </p>
<p> This is <sub> subscripted </sub> text. </p>
<p> This is <sup>superscripted </sup> text. </p>
Page | 8
Output:
2.7. HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display
on the webpage. When you place the text within the heading tags <h1>.......</h1>, it is
displayed on the browser in the bold format and size of the text depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags, from
highest level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading
and h6 is used for least important.
Headings in HTML helps the search engine to understand and index the structure of web page.
See this example:
<h1> Heading no. 1 </h1>
Page | 9
Output:
• HTML headings can also be used with nested elements. Following are different codes to
display the way to use heading elements.
2.8. HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the
most important attribute of the HTML a tag and which links to destination page or URL.
href attribute of HTML anchor tag
The href attribute is used to define the address of the file to be linked. In other words, it points
out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>
Let's see an example of HTML anchor tag.
<a href="second.html">Click for Second Page</a>
Specify a location for Link using target attribute
If we want to open that link to another page then we can use target attribute of <a> tag. With the
help of this link will be open in next page.
Page | 10
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click on <a href="https://www.w3schools.com/" target="_blank">
this-link </a> to go on home page of W3Schools. </p>
</body>
</html>
Note: The target attribute can only use with href attribute in anchor tag.
If we will not use target attribute then link will open in same page.
Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue. A visited link displayed underlined and
purple. An active link is underlined and red.
2.9. HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.
Let's see an example of HTML image.
<h2>HTML Image Example</h2>
<img src="good_morning.jpg" alt="Good Morning Friends"/>
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image tag
are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the browser
where to look for the image on the server. The location of image may be on the same directory or
another server.
Page | 11
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the
alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.
4) height
It is the height of the image. The HTML height attribute also supports iframe, image and object
elements. It is not recommended now. You should apply CSS in place of height attribute.
Example:
<img src="animal.jpg" height="180" width="300" alt="animal image">
Output:
2.10. HTML Table

HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of
<tr>, <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data
is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body
content, footer section etc. But it is recommended to use div tag over table to manage the layout
of the page.
Page | 12
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each
column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
Example:
<!DOCTYPE html>
<html>
<head>
<title>table</title>
</head>
<body>
<h1>Students List</h1>
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
</tr>
<tr>
<td>Tola</td>
<td>Abdi</td>
<td>M</td>
</tr>
Page | 13
<tr>
<td>Lami</td>
<td>Hunde</td>
<td>M</td>
</tr>
<tr>
<td>Lalise</td>
<td>Hunduma</td>
<td>F</td>
</tr>
</table>
</body>
</html>
2.11. HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
Example:
<h2> Modern Programming Languages </h2>
<ol>
<li> Java </li>
<li> C# </li>
<li> Python </li>
<li> C++ </li>
</ol>
Page | 14
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted
list also. The Unordered list starts with <ul> tag and list items start with the <li> tag. Example:
<h2>Modern Programming Languages</h2>
<ul>
<li> Java </li>
<li> C# </li>
<li> Python </li>
<li> C++ </li>
</ul>
HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also
known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other
name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
2.12. Frames
Page | 15
HTML frames are used to divide your browser window into multiple sections where each section can load
a separate HTML document. A collection of frames in the browser window is known as a frameset. The
window is divided into frames in a similar way the tables are organized: into rows and columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages:
• Some smaller devices cannot cope with frames often because their screen is not big enough
to be divided up.
• Sometimes your page will be displayed differently on different computers due to different screen
resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers that do not support frame technology.
Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines,
how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame.
Following is the example to create three horizontal frames:
<!DOCTYPE html>
<html>
<head>
<title> HTML Frames </title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body> Your browser does not support frames. </body>
</noframes>
</frameset>
</html>
Example
Page | 16
Let's put the above example as follows, here we replaced rows attribute by cols and changed their width.
This will create all the three frames vertically.
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body> Your browser does not support frames. </body>
</noframes>
</frameset>
</html>
2.13. HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
Example
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
The <input> Element

Page | 17
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields
The <input type="text"> defines a single-line input field for text input. 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>
This is how the HTML code above will be displayed in a browser:
The <label> Element
Notice the use of the <label> element in the example above. The <label> tag defines a label for many
form elements. The <label> element is useful for screen-reader users, because the screen- reader will read
out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the
radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them
together.
Radio Buttons
Page | 18
The <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited
number of choices.
Example
A form with radio buttons:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html"> HTML </label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css"> CSS </label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript"> JavaScript </label>
</form>
Checkboxes
The <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or
MORE options of a limited number of choices.
Example
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike </label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car </label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat </label>
</form>
Page | 19
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form- handler. The
form-handler is typically a file on the server with a script for processing input data. The form-handler is
specified in the form's action attribute.
Example
A form with a submit button:
<form action="/action_page.php">
<input type="text" id="fname" name="fname" value="John"><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted. If the name attribute is omitted,
the value of the input field will not be sent at all.
Example
This example will not submit the value of the "First name" input field:
<label for="fname"> First name: </label><br>
<input type="text" id="fname" value="John"><br><br>
</form>
Page | 20
2.14. HTML Form Attributes
The Action Attribute

The action attribute defines the action to be performed when the form is submitted. Usually, the form
data is sent to a file on the server when the user clicks on the submit button.
In the example below, the form data is sent to a file called "action_page.php". This file contains a
server-side script that handles the form data.
Example
On submit, send form data to "action_page.php":
</form>
The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data. The form-
data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post"). The default HTTP method when submitting form data is GET. Example
This example uses the GET method when submitting the form data:
<form action="/action_page.php" method="get">
Example
This example uses the POST method when submitting the form data:
<form action="/action_page.php" method="post">
Notes on GET:
• Appends the form data to the URL, in name/value pairs

• NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
• The length of a URL is limited (2048 characters)
• Useful for form submissions where a user wants to bookmark the result
• GET is good for non-secure data, like query strings in Google
Notes on POST:
Page | 21
• Appends the form data inside the body of the HTTP request (the submitted form data is not shown
in the URL)
• POST has no size limitations, and can be used to send large amounts of data.
• Form submissions with POST cannot be bookmarked
2.15. HTML Form Elements
The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:
• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>
The <input> Element
One of the most used form element is the <input> element. The <input> element can be displayed
in several ways, depending on the type attribute.
Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
The <label> Element

The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the
label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the
radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input>
element to bind them together.
The <select> Element
Page | 22
The <select> element defines a drop-down list:
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> elements defines an option that can be selected. By default, the first item in the drop-down
list is selected.
To define a pre-selected option, add the selected attribute to the option:
<option value="fiat" selected>Fiat</option>
Visible Values:
Use the size attribute to specify the number of visible values:
<select id="cars" name="cars" size="3">
</select>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
<select id="cars" name="cars" size="4" multiple>
</select>
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden. </textarea>
The <button> Element
Page | 23
The <button> element defines a clickable button.
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form. The <legend> element
defines a caption for the <fieldset> element.
Example
<fieldset>
<legend>Personalia:</legend>
</fieldset>
</form>
2.16. HTML Multimedia
Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
Page | 24
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more. Web pages often contain
multimedia elements of different types and formats.
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files. The most common way to
discover the type of a file, is to look at the file extension. Multimedia files have formats and
different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
2.16.1. HTML Video
The HTML <video> element is used to show a video on a web page.

The HTML <video> Element
To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set,
the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.
Add muted after autoplay to let your video start playing automatically (but muted):
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Page | 25
2.16.2. HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute. Add muted after autoplay to let
your audio file start playing automatically (but muted):
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
2.16.3. HTML Plug-ins Embed
Plug-ins are computer programs that extend the standard functionality of the browser.
The <embed> Element
The <embed> element is supported in all major browsers. The <embed> element also defines an
embedded object within an HTML document. Web browsers have supported the <embed>
element for a long time. However, it has not been a part of the HTML specification before
HTML5.
Example
<embed src="audi.jpeg">
Note that the <embed> element does not have a closing tag. It can not contain alternative text.
The <embed> element can also be used to include HTML in HTML.
Example:
<embed width="100%" height="500px" src="snippet.html">
Page | 26

Web Programming Chapter Two

Uploaded by

Copyright:

Available Formats

Web Programming Chapter Two

Uploaded by

Document Information

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

Web Programming Chapter Two

Uploaded by

Copyright:

Available Formats

Chapter Two: Hyper Text Markup Language (HTML)

2.1. Introduction toHTML

HTML code with Notepad

Step 2: Write code in HTML

Step 4: Open the HTML page in your web browser.

• Elements: An HTML element is an individual component of an HTML file. In an HTML

2.3. HTML Tags

Unclosed HTML Tags

2.5. HTML Elements

2.6. HTML Formatting

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

2.7. HTML Heading

2.8. HTML Anchor

Appearance of HTML anchor tag

2.9. HTML Image

2.10. HTML Table

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

2.11. HTML Lists

1. Ordered List or Numbered List (ol)

HTML Ordered List or Numbered List

HTML Description List or Definition List

1. <dl> tag defines the start of the list.

The <form> Element

The <input> Element

The <label> Element

The Name Attribute for <input>

The Action Attribute

The Method Attribute

• Appends the form data to the URL, in name/value pairs

The HTML <form> Elements

The <label> Element

The <textarea> Element

2.16. HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

2.16.1. HTML Video

The HTML <video> element is used to show a video on a web page.

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

HTML <audio> Autoplay

2.16.3. HTML Plug-ins Embed

You might also like