Languages
Pages
Legal
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 1/20
ASSIGNMENT OF SOFTWARE LAB
ON
HTML
(Hyper Text Markup Language)
Submitted To: Submitted by:
Mr. Rajwinder Singh Nikhil
MBA-2nd year
Roll no.:-5889, Sec-C
School Of Management Studies
Punjabi University, Patiala
1
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 2/20
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 3/20
HTML elements consisting of "tags" surrounded by angle brackets within
the web page content. It is the building blocks of all basic websites.
It allows images and objects to be embedded and can be used to create
interactive forms. It provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists,
links, quotes and other items. It can embed scripts in languages such as
JavaScript which affect the behavior of HTML webpage.
HTML can also be used to include Cascading Style Sheets (CSS) to define
the appearance and layout of text and other material. The W3C, maintainer
of both HTML and CSS standards, encourages the use of CSS over explicit
presentational markup.
Origins-In 1980, physicist Tim Berners-Lee, who was a contractor at
CERN, proposed and prototyped ENQUIRE, a system for CERN researchers
to use and share documents. In 1989, Berners-Lee wrote a memo proposingan Internet-based hypertext system. Berners-Lee specified HTML and wrote
the browser and server software in the last part of 1990. In that year,
Berners-Lee and CERN data systems engineer Robert Cailliau collaborated
on a joint request for funding, but the project was not formally adopted by
CERN. In his personal note from 1990 he list "some of the many areas inwhich hypertext is used " and puts an encyclopedia first.
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).
3
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 4/20
• 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
4
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 5/20
• HTML tags are keywords surrounded by angle brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• 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
5
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 6/20
researched and understood, as long as you’re willing to work at it so you can
output better websites.
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:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Result
My First Heading
My first paragraph.
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
6
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 7/20
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
If you type this the result will be in
next column. Result
<html>
<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>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
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.
7
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 8/20
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.
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Type this than your result will be
se in next column:
Your Result:
<html>
<body>
<p>The hr tag defines a horizontal
rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
</body>
</html>
The hr tag defines a horizontal rule:
This is a paragraph
This is a paragraph
This is a paragraph
8
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 9/20
HTML Paragraphs
Paragraphs are defined with the <p> tag.
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
This is a paragraph.
This is a paragraph.
This is a paragraph.
HTML Text Formatting
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is
strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is
emphasized</em></p>
<p><code>This is computer
output</code></p><p>This is<sub> subscript</sub>
and <sup>superscript</sup></p>
</body>
</html>
This text is bold
This text is strong
This text is big
This text is italic
This text is emphasized
This is computer output
This is subscript andsuperscript
9
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 10/20
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).
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>
10
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 11/20
HTML Styles
The style attribute is used to style HTML elements.
<html>
<body style="background-
color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-
family:verdana;color:red">
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>
Look! Styles and colors
This text is in Verdana and red
This text is in Times and green
This text is 30 pixels high
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).
11
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 12/20
<html>
<body>
<h2>Norwegian Mountain
Trip</h2>
<img border="0"
src="/images/pulpit.jpg"
alt="Pulpit rock"
width="304" height="228" />
</body>
</html>
Norwegian Mountain Trip
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>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
12
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 13/20
</tr>
</table>
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>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr>
</table>
13
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 14/20
How the HTML code above looks in a browser:
Header 1 Header 2
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:
1. The first list item
2. The second list item
3. The third list item
An unordered list:
• List item
• 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>
14
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 15/20
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
• 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>
How the HTML code above looks in a browser:
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
15
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 16/20
HTML Forms
HTML forms are used to pass data to a server.
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>
16
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 17/20
How the HTML code above looks in a browser:
First name:
Last name:
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>
How the HTML code above looks in a browser:
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>
How the HTML code above looks in a browser:
Username:Submit
17
þÿ
þÿ
þÿ
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 18/20
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.
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>
18
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 19/20
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 %,*").
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)
19
8/7/2019 Nikhil asignment
http://slidepdf.com/reader/full/nikhil-asignment 20/20
TYPE THIS YOUR RESULT:
<html>
<body>
<p style="background-
color:#FF0000">
Color set by using hex value
</p>
<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>
Color set by using hex value
Color set by using rgb value
Color set by using color name
20