Scribd
Upload
69 views16 pages

Web Programming Notes

The document provides an overview of HTML programming and elements: 1. It introduces HTML, describes how it uses tags to structure and format text, images, and other content on web pages. 2. It explains common HTML tags for formatting text, including bold, italics, underline, and more. It also covers tags for forms, tables, and frames. 3. It provides examples of HTML elements for text formatting, forms, tables, frames, and defines HTML syntax and nested elements. The document serves as an introduction to basic HTML tags and concepts.

Uploaded by

aaush
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
69 views16 pages

Web Programming Notes

The document provides an overview of HTML programming and elements: 1. It introduces HTML, describes how it uses tags to structure and format text, images, and other content on web pages. 2. It explains common HTML tags for formatting text, including bold, italics, underline, and more. It also covers tags for forms, tables, and frames. 3. It provides examples of HTML elements for text formatting, forms, tables, frames, and defines HTML syntax and nested elements. The document serves as an introduction to basic HTML tags and concepts.

Uploaded by

aaush
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

INDEX – UNIT - I

S.no: Title Page no:

1. HTML Programming Introduction 02 - 03

Formatting Text-Forms & Formulating


2. 04 - 12
Elements

i. Formatting Text 04 - 05

ii. Formatting Forms 06 - 08

iii. Formulating Elements 09 - 12

Graphics in HTML Creating Tables & Frames


3. 13 - 22

i. Tables 13 - 19

ii. Frames 20 - 22

4. Web Design Principles 23 - 29

5. PROGRAMES WITH OUTPUT: 30 - 45

i. HTML Elements Formatting 30 - 30

ii. HTML Text Formatting 31 - 33

iii. HTML Tables 34 - 39

iv. HTML Frames 40 - 41

v. HTML Forms 42 - 45

HTML Programming Introduction

HTML, which stands for HyperText Markup Language, is the predominant markup languagefor web
pages. HTML is the basic building-blocks of webpages.
HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets(like
<html>), within the web page content. HTML tags normally come in pairs like <h1> and </h1>. The
first tag in a pair is the start tag, the second tag is the end tag (they are also calledopening tags and
closing tags). In between these tags web designers can add text, tables, images, etc.

The purpose of a web browser is to read HTML documents and compose them into visual or
audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the
content of the page.

HTML elements form the building blocks of all websites. HTML 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 webpages.

What is HTML?

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

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>
• 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

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 Firefox) 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:
Formatting Text-Forms & Formulating Elements –

HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are
called formatting tags
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 Text Formatting Tags

These are the tags for text formats:

<b>text</b> writes text as bold

<i>text</i> writes text in italics


<u>text</u> writes underlined text
<sub>text</sub> lowers text and makes it smaller
<sup>text</sup> lifts text and makes it smaller
<blink>text</blink> guess yourself! (Note: Netscape only.)
<strike>text</strike> strikes a line through the text
<tt>text</tt> writes text as on a classic typewriter
<pre>text</pre> writes text exactly as it is, including spaces.
<em>text</em> usually makes text italic
<strong>text<strong> usually makes text bold

HTML "Computer Output" Tags

Tag Description
<dfn> Defines a definition term
<code> Defines computer code text
<samp> Defines sample computer code
<kbd> Defines keyboard text
<var> Defines a variable part of a text
<cite> Defines a citation
<pre> Defines preformatted text

HTML Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

Formatting 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, textarea, fieldset, 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>

How the HTML code above looks in a browser:

First name:

Last name:

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:

Radio Buttons

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a
limited number of choices:

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

How the HTML code above looks in a browser:

Male
Female
Checkboxes

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE
or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a
bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a
car
</form>

How the HTML code above looks in a browser:

I have a bike
I have a car

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

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 Elements

An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />

* The start tag is often called the opening tag. The end tag is often called the closing
tag.

HTML Element Syntax

• An HTML element starts with a start tag / opening tag


• An HTML element ends with an end tag / closing tag
• The element content is everything between the start and the end tag
• Some HTML elements have empty content
• Empty elements are closed in the start tag
• Most HTML elements can have attributes

Tip: You will learn about attributes in the next chapter of this tutorial.

Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements). HTML

documents consist of nested HTML elements.

HTML Document Example

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

The example above contains 3 HTML elements.

HTML Example Explained

The <p> element:


<p>This is my first paragraph.</p>

The <p> element defines a paragraph in the HTML document. The


element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.

The <body> element:

<body>
<p>This is my first paragraph.</p>
</body>

The <body> element defines the body of the HTML document. The
element has a start tag <body> and an end tag </body>. The element
content is another HTML element (a p element).

The <html> element:

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

The <html> element defines the whole HTML document.


The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).

Graphics in HTML Creating Tables & Frames- HTML Tables:

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.

Tables are used on websites for two major purposes:

• The obvious purpose of arranging information in a table


• The less obvious - but more widely used - purpose of creating a page layout with
the use of hidden tables.

Using tables to divide the page into different sections is an extremely powerful tool.
Almost all major sites on the web are using invisible tables to layout the pages.

The most important layout aspects that can be done with tables are:

• Dividing the page into separate sections.


An invisible table is excellent for this purpose.
• Creating menus.
Typically with one color for the header and another for the links following in the next
lines.
• Adding interactive form fields.
Typically a gray area containing a search option.

• Creating fast loading headers for the page.


A colored table with a text on it loads like a bullet compared to even a small
banner.
• Easy alignment of images that have been cut into smaller pieces.

HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

HTML <table> Tag


Definition and Usage
The <table> tag defines an HTML table.

A simple HTML table consists of the table element and one or more tr, th, and td
elements.

The tr element defines a table row, the th element defines a table header, and the td
element defines a table cell.
A more complex HTML table may also include caption, col, colgroup, thead, tfoot, and tbody
elements.

HTML <th> Tag


Definition and Usage

The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells:
• Header cells - contains header information (created with the th element)
• Standard cells - contains data (created with the td element) The text in a th element is bold
and centered.
The text in a td element is regular and left-aligned.

HTML <tr> Tag


Definition and Usage

The <tr> tag defines a row in an HTML table.

A tr element contains one or more th or td elements.

HTML <td> Tag


Definition and Usage

The <td> tag defines a standard cell in an HTML table. An HTML table has two kinds of cells:
• Header cells - contains header information (created with the th element)
• Standard cells - contains data (created with the td element) The text in a th element is bold
and centered.
The text in a td element is regular and left-aligned.

HTML <caption> Tag


Definition and Usage

The <caption> tag defines a table caption.


The <caption> tag must be inserted immediately after the <table> tag. You can specify only one
caption per table. Usually the caption will be centered above the table.
HTML <colgroup> Tag

Definition and Usage

The <colgroup> tag is used to group columns in a table for formatting.

The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles
for each cell, for each row.

The <colgroup> tag can only be used inside a table element.

HTML <col> Tag

Definition and Usage

The <col> tag defines attribute values for one or more columns in a table.

The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for
each cell, for each row.

The <col> tag can only be used inside a table or a colgroup element.

HTML <thead> Tag

Definition and Usage

The <thead> tag is used to group the header content in an HTML table.

The thead element should be used in conjunction with the tbody and tfoot elements.

The tbody element is used to group the body content in an HTML table and the tfoot element is
used to group the footer content in an HTML table.

Note: <tfoot> must appear before <tbody> within a table, so that a browser can render the foot
before receiving all the rows of data.

Notice that these elements will not affect the layout of the table by default. However, you can use
CSS to let these elements affect the table's layout.

HTML <tbody> Tag


Definition and Usage

The <tbody> tag is used to group the body content in an HTML table.

The tbody element should be used in conjunction with the thead and tfoot elements.
The thead element is used to group the header content in an HTML table and the tfoot element is
used to group the footer content in an HTML table.

Note: <tfoot> must appear before <tbody> within a table, so that a browser can render the foot
before receiving all the rows of data.

Notice that these elements will not affect the layout of the table by default. However, you can use
CSS to let these elements affect the table's layout.

HTML <tfoot> Tag


Definition and Usage

The <tfoot> tag is used to group the footer content in an HTML table.

The tfoot element should be used in conjunction with the thead and tbody elements.

The thead element is used to group the header content in an HTML table and the tbody element
is used to group the body content in an HTML table.

Note: <tfoot> must appear before <tbody> within a table, so that a browser can render the foot
before receiving all the rows of data.

Notice that these elements will not affect the layout of the table by default. However, you can use
CSS to let these elements affect the table's layout.

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>
</tr>
</table>

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2


row 2, cell 1 row 2, cell 2
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.

All major browsers will display the text in the <th> element as 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>

How the HTML code above looks in your browser:

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Frames:

Frames can divide the screen into separate windows.


Each of these windows can contain an HTML document.

A file that specifies how the screen is divided into frames is called a frameset.

If you want to make a homepage that uses frames you should:

• make an HTML document with the frameset

• make the normal HTML documents that should be loaded into each of these frames.

When a frameset page is loaded, the browser automatically loads each of the pages associated
with the 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:

• Frames are not expected to be supported in future versions of HTML


• Frames are difficult to use. (Printing the entire page is difficult).
• The web developer must keep track of more HTML documents

The HTML frameset Element

The frameset element holds one or more frame elements. Each frame element can hold a
separate document.

The frameset element states HOW MANY columns or rows there will be in the frameset, and
HOW MUCH percentage/pixels of space will occupy each of them.

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:

Basic Notes - Useful Tips


Tip: If a frame has visible borders, the user can resize it by dragging the border. To prevent a user
from doing this, you can add noresize="noresize" to the <frame> tag.

Note: Add the <noframes> tag for browsers that do not support frames.

Important: You cannot use the <body></body> tags together with the
<frameset></frameset> tags! However, if you add a <noframes> tag containing some text for
browsers that do not support frames, you will have to enclose the text in <body></body> tags!
See how it is done in the first example below.

HTML Frame Tags

Tag Description
<frameset> Defines a set of frames
<frame /> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames

HTML <frameset> Tag

Definition and Usage

The <frameset> tag defines a frameset.

The frameset element holds one or more frame elements. Each frame element can hold a
separate document.

The frameset element states HOW MANY columns or rows there will be in the frameset,
and HOW MUCH percentage/pixels of space will occupy each of them.

HTML <frame> Tag

Definition and Usage

The <frame> tag defines one particular window (frame) within a frameset.

Each frame in a frameset can have different attributes, such as border, scrolling, the ability
to resize, etc.

HTML <noframes> Tag

Definition and Usage


The <noframes> tag is used for browsers that do not handle frames.

The noframes element can contain all the elements that you can find inside the body
element of a normal HTML page.

The noframes element is most used to link to a non-frameset version of the web site or to
display a message to users that frames are required.

The noframes element goes inside the frameset element.

Prepared By:- Pankaj Mishra(Microsoft Certified System engineer)


Email: [email protected] mob: 9819660645, 9849195609 Page 16

You might also like