Web Designing Presentation 2 PDF

BSc IT
Web Designing
Semester - III
Copyright @ Amity University

Contents
• Introduction to HTML
• HTML Document Structure
• Main HTML Elements
• Creating Hypertext Links
• Adding Images to documents
• Building Tables
• Creating Forms

Cont…
• Form Controls
• Building Frames
• Special HTML
• Other Elements

HTML
• The Hyper Text Markup Language

• Language used to design web pages
• It is not designed to be the language of a
WYSIWYG word processor such as Word
or WordPerfect.
• This choice was made because the same
HTML document may be viewed by many
different "browsers", of very different
abilities.
HTML
• 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 documents are structured into two
parts, the HEAD, and the BODY. Both of
these are contained within the HTML
element

HTML Document Structure
• <HTML>
• <HEAD>
• <TITLE> Web Page </TITLE> </HEAD>
• <BODY>
• <h1> Web Shoppe </h1>
• <p>So how will we do this. Well we do the
following
• </BODY>
• </HTML>
Extension
• .HTM or .HTML File Extension?
To save an HTML file, use either the .htm

or the .html file extension.

<HTML>
<HEAD>
<TITLE> Web Page </TITLE> </HEAD>
<BODY>
<CENTER>
<h1> Web Shoppe </h1>
</CENTER>
<p>So how will we do this. Well we do the
following
</BODY>
</HTML>

HTML Tags
• HTML tags are keywords surrounded by

angle brackets like < >
• 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 Headings
HTML headings are defined with the <h1>

to<h6> tags.
<h1>This is a heading</h1>

HTML Paragraphs
• HTML paragraphs are defined with the

<p> tag
1. <p>This is a paragraph.</p>
2. <p>This is another paragraph.</p>

Creating Hypertext Links
• Hypertext documents contain hypertext links,

items that you can select to view another topic or
document, often called the destination of the
link.
• These links can point to:
– another section
– the same document
– to a different document
– to a different Web page
– to a variety of other Web objects
Hypertext Links
• A hyperlink (or link) is a word, group of

words, or image that you can click on to
jump to a new document or a new section
within the current document.
• When you move the cursor over a link in a
Web page, the arrow will turn into a little
hand.
• Links are specified in HTML using the <a>
tag.
HTML Links
• HTML links are defined with the <a> tag.
<a href="http://www.amity.edu">This is a
link</a>

• <HTML>
• <HEAD>
• <TITLE> Web Page </TITLE> </HEAD>
• <BODY>
• <center>
• <h1> Web Shoppe </h1>
• <a href=“www.amity.edu">LINK</a>
• </BODY>
• </HTML>

Images
A picture or an image in the web page can be inserted using the <img>
tag.
The < img> tag has several attributes to inform the source, height of the
picture, width of the picture alignment etc. The following are its
important attributes.
• Src
• Height
• Width
• Align
• alt
The SRC attribute specifics the location of an image that you would like
incorporated into your HTML document.

HTML Images
• HTML images are defined with the <img>

tag.
<img src=“www.amity.edu" width="104"

height="142" />

HTML The Alt Attribute
• alt attribute specifies an alternate text for

an image, if the image cannot be
displayed.
SYNTAX
• <img src="boat.gif" alt="Big Boat" />
• The alt attribute provides alternative

information for an image if a user for some
reason cannot view it
HTML Attributes
• HTML elements can have attributes

• Attributes provide additional information
about an element
• Attributes are always specified in the start
tag
• Attributes come in name/value pairs like:
name="value"

Attribute Example
<a href="http://www.amity.edu">This is a
link</a>
• HTML links are defined with the <a> tag.

The link address is specified in the href
attribute

HTML Comments
• Comments can be inserted into the HTML

code to make it more readable and
understandable. Comments are ignored by
the browser and are not displayed.


Comments
• 
• 

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

Basic Tags
• <hr> horizontal rule
• <br> new line
• <b>...</b> bold
• <i>...</i> italicize text in between

HTML Text Formatting
• This text is bold
This text is big
This text is italic
This is computer output
This is subscript and superscript

Basic HTML Body Tags by Example
The following HTML code shows the basic HTML body tags in action.
<HTML>
<HEAD>
<TITLE>Hello World</TITLE>
</HEAD>
<BODY>
This is a very simple web page. Notice that
the browser does not pay attention too spaces that
we
add to our document unless you specify what type of
spacing you want
<P>
Like when you use a paragraph tag or a <BR>
break line tag
<P>
And here is a hard rule
<P>
<HR ALIGN = "CENTER" SIZE = "10" WIDTH = "50%“
COLOR = "AA0000" NOSHADE>
</BODY>
</HTML>

HTML Styles
• The style attribute is used to style HTML

elements.
• The purpose of the style attribute is:
• To provide a common way to style all
HTML elements.

HTML Style Example -
Background Color
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a
heading</h2>
<p style="background-color:green">This is
a paragraph.</p>
</body>
</html>
Cont…
• The <a> tag can be used in two ways:

• To create a link to another document, by
using the href attribute
• To create a bookmark inside a document,
by using the name attribute

LISTS
• The most common HTML lists are ordered and
unordered 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
• <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Output
• 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>
Output
• Coffee
• Milk
Nested Lists
• Can be nested o Apples
1. Fuji
2. Granny Smith
o Oranges

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):

Definition Lists
• <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Output
• Coffee
– - black hot drink
• Milk
– - white cold drink

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
• Header information in a table are defined

with the <th> tag.
• The text in a th element will be bold and
centered.

Tables
• <table>...</table>
• <tr>...</tr> for each row
• <td>...</td> for each element in a row
• <th>…</th> for header row

Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Table with Headers
• <table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>

Tables
• If we do not specify a border attribute, the

table will be displayed without borders.

HTML Forms
• HTML Forms are used to select different kinds of

user input
• 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,label elements.
• The <form> tag is used to create an HTML form

HTML Forms
• <form>
.
input elements
.
</form>

HTML Forms - The Input Element
• The input element is used to select user

information.

Text Fields
• <form>
First name: <input type="text"
name="firstname" /><br />
Last name: <input type="text"
name="lastname" />
</form>

Output
• First name:
Last name:

Password Field
• <form>
Password: <input type="password"
name="pwd" />
</form>
OUTPUT
Password:

Radio Buttons
• <input type="radio" />

• defines a radio button. Radio buttons let a
user select ONLY ONE of a limited
number of choices

Radio Buttons
• <form>
<input type="radio" name="sex"
value="male" /> Male<br />
<input type="radio" name="sex"
value="female" /> Female
</form>
• Male
• Female
Checkboxes
• <input type="checkbox" />

• defines a checkbox. Checkboxes let a
user select ONE or MORE options of a
limited number of choices.

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

Checkboxes
• I have a bike
• I have a car

Combo Box
<html>
<body>
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select
Bananas
</body>
</html>
List Box
• select name="drop1" id="Select1" size="4"

multiple="multiple">
<option value="1">item 1</option>
<option value="0">All</option>
</select>

List Box
• This will create a listbox with 5 items.
• As multiple attribute value is specified as
="multiple" so it gives ability to select more
than one item from the box by holding ctrl
key or by dragging through items from the
mouse. Item 1
• Item 2
Item 3
Item 4
Text Area
• <html>
• <body>
• <form>
• <textarea name="comment" rows="60"
• cols="20"></textarea>
• </body>
• </form>
Give suggestions
• </html>

Submit Button
• <input type="submit" />

• defines a submit button.
• A submit button is used to send form data
to a server.

Submit Button
• <form>
• <input type="submit" value="Submit" />
</form>
• Username: Submit

HTML Frames
• With frames, several Web pages can be

displayed in the same browser window
• Each HTML document is called a frame,
and each frame is independent of the
others.

HTML Frames
• HTML frames allow authors to present

documents in multiple views, which may
be independent windows or subwindows.
• Multiple views offer designers a way to
keep certain information visible,
• For example, within the same window, one
frame might display a static banner, a
second a navigation menu, and a third the
main document.
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

HTML frameset Element
• 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 frame Element
• The <frame> tag defines one particular

window (frame) within a frameset.
• <frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>

HTML frame Element
• 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. T
• The document "frame_a.htm" is put into
the first column,
• The document "frame_b.htm" is put into
the second column
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>This frameset document contains:
<UL> <LI>
<A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat
contents</A>
</UL> </NOFRAMES>
</FRAMESET>
</HTML>

Frame
1
Frame
3
Frame
2

Special HTML
• < → <
• > → >
• & → &
• → space

Other Elements
• Address Tag
• <address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email
us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
Output
• Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78

Thank You

Web Designing Presentation 2 PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Web Designing Presentation 2 PDF

Загружено:

Авторское право:

Доступные форматы

BSc IT

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

• The Hyper Text Markup Language

• HTML is not a programming language, it is

Copyright @ Amity University

Copyright @ Amity University

• .HTM or .HTML File Extension?

To save an HTML file, use either the .htm

Copyright @ Amity University

Copyright @ Amity University

• HTML tags are keywords surrounded by

HTML headings are defined with the <h1>

Copyright @ Amity University

• HTML paragraphs are defined with the

2. <p>This is another paragraph.</p>

Copyright @ Amity University

• Hypertext documents contain hypertext links,

• A hyperlink (or link) is a word, group of

• HTML links are defined with the <a> tag.

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

• HTML images are defined with the <img>

<img src=“www.amity.edu" width="104"

Copyright @ Amity University

• alt attribute specifies an alternate text for

• The alt attribute provides alternative

• HTML elements can have attributes

Copyright @ Amity University

• HTML links are defined with the <a> tag.

Copyright @ Amity University

• Comments can be inserted into the HTML

Copyright @ Amity University

Copyright @ Amity University

• HTML uses tags like <b> and <i> for

Copyright @ Amity University

Copyright @ Amity University

• This text is bold

This text is big

This text is italic

This is computer output

This is subscript and superscript

Copyright @ Amity University

Copyright @ Amity University

• The style attribute is used to style HTML

Copyright @ Amity University

• The <a> tag can be used in two ways:

Copyright @ Amity University

• An ordered list starts with the <ol> tag. Each list

Copyright @ Amity University

• A definition list is a list of items, with a

Copyright @ Amity University

Copyright @ Amity University

• Tables are defined with the <table> tag.

Copyright @ Amity University

• Header information in a table are defined

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

• If we do not specify a border attribute, the