Assignment of Software Lab ON HTML (Hyper Text Markup Language)

ASSIGNMENT OF SOFTWARE LAB
ON
HTML (Hyper Text Markup Language)
Submitted To: Submitted by:

Mr. Rajwinder Singh Chet Ram
MBA-2nd year
Roll no.:-5889, Sec-C
School Of Management Studies

Punjabi University, Patiala
Contents
1
Topics Page No.
Introduction 3
HTML Tags 4, 5
HTML Headings 6, 7
HTML Lines 7
HTML Paragraphs 8
HTML Text Formatting 8
HTML Line Breaks 9
HTML Styles 10
HTML Tables 11
HTML Lists 13
HTML Forms 15
HTML Frames 17
HTML Colors 18
Introduction
HTML is a computer language devised to allow website creation. These
websites can then be viewed by anyone else connected to the Internet. It is
relatively easy to learn, with the basics being accessible to most people in
one sitting; and quite powerful in what it allows you to create. It is
constantly undergoing revision and evolution to meet the demands and
2
requirements of the growing Internet audience under the direction of the
organisation charged with designing and maintaining the language.
HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language

 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages
The definition of HTML is HyperText Markup Language.
 HyperText is the method by which you move around on the web — by

clicking on special text called hyperlinks which bring you to the next
page. The fact that it is hyper just means it is not linear — i.e. you can
go to any place on the Internet whenever you want by clicking on
links — there is no set order to do things in.
 Markup is what HTML tags do to the text inside them. They mark it
as a certain type of text (italicised text, for example).
 HTML is a Language, as it has code-words and syntax like any other
language.
How does it work?

HTML consists of a series of short codes typed into a text-file by the site
author — these are the tags. The text is then saved as a html file, and viewed
through a browser, like Internet Explorer or Netscape Navigator. This
browser reads the file and translates the text into a visible form, hopefully
rendering the page as the author had intended. Writing your own HTML
entails using tags correctly to create your vision. You can use anything from
a rudimentary text-editor to a powerful graphical editor to create HTML
pages.
HTML Tags
HTML markup tags are usually called HTML tags
 HTML tags are keywords surrounded by angle brackets like <html>

 HTML tags normally come in pairs like <b> and </b>
3
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags
What are the tags up to?

The tags are what separate normal text from HTML code. You might know
them as the words between the <angle-brackets>. They allow all the
cool stuff like images and tables and stuff, just by telling your browser what
to render on the page. Different tags will perform different functions. The
tags themselves don’t appear when you view your page through a browser,
but their effects do. The simplest tags do nothing more than apply formatting
to some text, like this:
<b>These words will be bold</b>, and these will

not.
In the example above, the <b> tags were wrapped around some text, and
their effect will be that the contained text will be bolded when viewed
through an ordinary web browser.
If you want to see a list of a load of tags to see what’s ahead of you, look at
this tag reference. Learning the tags themselves is dealt with in the next
section of this website, My First Site.
Is this going to take long?

Well, it depends on what you want from it. Knowing HTML will take only a
few days of reading and learning the codes for what you want. You can have
the basics down in an hour. Once you know the tags you can create HTML
pages.
However, using HTML and designing good websites is a different story,

which is why I try to do more than just teach you code here at HTML Source
— I like to add in as much advice as possible too. Good website design is
half skill and half talent, I reckon. Learning techniques and correct use of
your tag knowledge will improve your work immensely, and a good
understanding of general design and the audience you’re trying to reach will
improve your website’s chances of success. Luckily, these things can be
researched and understood, as long as you’re willing to work at it so you can
output better websites.
4
HTML Documents = Web Pages
 HTML documents describe web pages
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firebox ) is to read

HTML documents and display them as web pages. The browser does not display the
HTML tags, but uses the tags to interpret the content of the page:
Result
<html> My First Heading

<body>
My first paragraph.
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
5
If you type this the result will be in Result
next column.
This is heading 1
<html>
This is heading 2
<body>
This is heading 3
<h1>This is heading 1</h1>
This is heading 4
This is heading 5
<h3>This is heading 3</h3> This is heading 6
</body>
</html>
Headings Are Important
Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
Search engines use your headings to index the structure and content of your
web pages.
Since users may skim your pages by its headings, it is important to use
headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings,

then the less important H3 headings, and so on.
6
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Your Result:
Type this than your result will be
se in next column:
<html> The hr tag defines a horizontal rule:
<body>
<p>The hr tag defines a horizontal This is a paragraph

rule:</p>
<hr />
This is a paragraph
<p>This is a paragraph</p>
<hr />
This is a paragraph
<hr />
</body>
</html>
HTML Paragraphs
Paragraphs are defined with the <p> tag.
<html> This is a paragraph.

<body>
7
<p>This is a paragraph.</p> This is a paragraph.
<p>This is a paragraph.</p>
<p>This is a paragraph.</p> This is a paragraph.
</body>
</html>
HTML Text Formatting
<html> This text is bold

<body>
This text is strong
<p><b>This text is bold</b></p>
<p><strong>This text is This text is big
strong</strong></p>
<p><big>This text is big</big></p> This text is italic
<p><i>This text is italic</i></p>
This text is emphasized
<p><em>This text is
emphasized</em></p> This is computer output
<p><code>This is computer
output</code></p> This is subscript and superscript
<p>This is<sub> subscript</sub>
and <sup>superscript</sup></p>
</body>
</html>
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output,
like bold or italic text.
These HTML tags are called formatting tags (look at the bottom of this page
for a complete reference).
8
Often <strong> renders as <b>, and <em> renders as <i>.
However, there is a difference in the meaning of these tags:
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be rendered in a way that
the user understands as "important". Today, all major browsers render strong
as bold and em as italics. However, if a browser one day wants to make a
text highlighted with the strong feature, it might be cursive for example and
not bold!
HTML Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a
new paragraph:
Example
<p>This is<br />a para<br />graph with line breaks</p>
HTML Styles
The style attribute is used to style HTML elements.
<html>
<body style="background- Look! Styles and colors
color:PowderBlue;">
This text is in Verdana and red
<h1>Look! Styles and colors</h1>
This text is in Times and green
9
<p style="font-
family:verdana;color:red"> This text is 30 pixels high
This text is in Verdana and red</p>
<p style="font-
family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text

is 30 pixels high</p>
</body>
</html>
The HTML Style Attribute

The purpose of the style attribute is:
To provide a common way to style all HTML elements.
Styles was introduced with HTML 4, as the new and preferred way to style
HTML elements. With HTML styles, styles can be added to HTML elements
directly by using the style attribute, or indirectly in separate style sheets
(CSS files).
<html>
Norwegian Mountain Trip
<body>
<h2>Norwegian Mountain
Trip</h2>
<img border="0"
10
src="/images/pulpit.jpg"
alt="Pulpit rock"
width="304" height="228" />
</body>
</html>
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into
data cells (with the <td> tag). td stands for "table data," and holds the
content of a data cell. A <td> tag can contain text, links, images, lists, forms,
other tables, etc.
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
11
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without
borders. Sometimes this can be useful, but most of the time, we want the
borders to show.
To display a table with borders, specify the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers
Header information in a table are defined with the <th> tag.
The text in a th element will be bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
How the HTML code above looks in a browser:
Header 1 Header 2
12
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
HTML Definition Lists

A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list)
and <dd> (describes the item in the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Lists
An ordered list: An unordered list:
1. The first list item  List item

2. The second list item  List item
3. The third list item  List item

HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
13
 Coffee
 Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li>
tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
HTML List Tags

Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list
HTML Forms
HTML forms are used to pass data to a server.
14
A form can contain input elements like text fields, checkboxes, radio-
buttons, submit buttons and more. A form can also contain select lists, text
area, field set, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>
HTML Forms - The Input Element
The most important form element is the input element.
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute.
An input element can be of type text field, checkbox, password, radio
button, submit button, and more.
The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
First name:
Last name:
15
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
Password Field
<input type="password" /> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>
Password:
Note: The characters in a password field are masked (shown as asterisks or

circles).
Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page
specified in the form's action attribute. The file defined in the action attribute usually
does something with the received input:
<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Submit
Username:
If you type some characters in the text field above, and click the "Submit"
button, the browser will send your input to a page called
"html_form_action.asp". The page will show you the received input.
16
HTML Frames
With frames, you can display more than one HTML document in the same
browser window. Each HTML document is called a frame, and each frame is
independent of the others.
The disadvantages of using frames are:
 The web developer must keep track of more HTML documents

 It is difficult to print the entire page
The HTML frameset Element
The frameset element holds two or more frame elements. Each frame
element holds a separate document.
The frameset element states only HOW MANY columns or rows there will
be in the frameset.
The HTML frame Element
The <frame> tag defines one particular window (frame) within a frameset.
In the example below we have a frameset with two columns.
The first column is set to 25% of the width of the browser window. The second column is
set to 75% of the width of the browser window. The document "frame_a.htm" is put into
the first column, and the document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
Note: The frameset column size can also be set in pixels (cols="200,500"),
and one of the columns can be set to use the remaining space, with an
asterisk (cols="25 %,*").
17
HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light.
Color Values
HTML colors are defined using a hexadecimal notation (HEX) for the
combination of Red, Green, and Blue color values (RGB).
The lowest value that can be given to one of the light sources is 0 (in HEX:
00). The highest value is 255 (in HEX: FF).
HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.
Color Values
Color Color HEX Color RGB

#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
18
TYPE THIS YOUR RESULT:
<html> Color set by using hex value

<body>
<p style="background-
color:#FF0000"> Color set by using rgb value
Color set by using hex value
</p>
Color set by using color name
<p style="background-
color:rgb(255,255,0)">
Color set by using rgb value
</p>
<p style="background-color:green">
Color set by using color name
</p>
</body>
</html>
19

Assignment of Software Lab ON HTML (Hyper Text Markup Language)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Assignment of Software Lab ON HTML (Hyper Text Markup Language)

Diunggah oleh

Hak Cipta:

Format Tersedia

ASSIGNMENT OF SOFTWARE LAB

HTML (Hyper Text Markup Language)

Submitted To: Submitted by:

School Of Management Studies

HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language

The definition of HTML is HyperText Markup Language.

 HyperText is the method by which you move around on the web — by

How does it work?

 HTML tags are keywords surrounded by angle brackets like <html>

What are the tags up to?

<b>These words will be bold</b>, and these will

Is this going to take long?

However, using HTML and designing good websites is a different story,

The purpose of a web browser (like Internet Explorer or Firebox ) is to read

<html> My First Heading

<p>My first paragraph.</p>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Headings Are Important

H1 headings should be used as main headings, followed by H2 headings,

The hr element can be used to separate content:

<p>The hr tag defines a horizontal This is a paragraph

<html> This is a paragraph.

HTML Text Formatting

<html> This text is bold

HTML Formatting Tags

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<p style="font-size:30px">This text

The HTML Style Attribute

To provide a common way to style all HTML elements.

To display a table with borders, specify the border attribute:

Header information in a table are defined with the <th> tag.

The text in a th element will be bold and centered.

How the HTML code above looks in a browser:

HTML Definition Lists

The <dl> tag defines a definition list.

1. The first list item  List item

3. The third list item  List item

How the HTML code above looks in a browser:

HTML Ordered Lists

The list items are marked with numbers.

How the HTML code above looks in a browser:

HTML List Tags

The <form> tag is used to create an HTML form:

HTML Forms - The Input Element

The most important form element is the input element.

The input element is used to select user information.

The most used input types are described below.

How the HTML code above looks in a browser:

<input type="password" /> defines a password field:

How the HTML code above looks in a browser:

Note: The characters in a password field are masked (shown as asterisks or

<input type="submit" /> defines a submit button.

<form name="input" action="html_form_action.asp" method="get">

How the HTML code above looks in a browser:

The disadvantages of using frames are:

 The web developer must keep track of more HTML documents

The HTML frameset Element

The HTML frame Element

In the example below we have a frameset with two columns.

Color Color HEX Color RGB