Scribd
Upload
15 views

HTML_Final_show

Uploaded by

dhruvv324
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

HTML_Final_show

Uploaded by

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

HTML

Introduction to HTML
 HTML Stands for Hyper Text Markup Language.

 Hyper Text means “Non sequential Writing “.

 Hypertext is text displayed on a computer or other


electronic device with references (hyperlinks) to other
text that the reader can immediately access, usually by a
mouse click or keypress sequence. Apart from running
text, hypertext may contain tables, images and other
presentational devices.

Hyper means Over or Beyond.


Introduction to HTML
Markup refers to the sequence of characters or other
symbols (Markup tabs ).
The language used to develop web pages is called Hyper
Text Markup Language (HTML).
HTML is the language interpreted by a browser. Web
pages are also called HTML documents.
HTML is a set of special codes that can be embedded in
text to add formatting & linking information .
HTML Tags
 Tags are instructions that are embedded directly in to
the text of the document .

 An HTML tag is a signal to a browser that it should


do
Something other than just throw text up on the screen .

 All tags begin with an open angle bracket (<) and


end
with a close angle bracket (>) and are case –
insensitive .
HTML Tags
Tag-sets as containers will help in another way: it will
help you remember that tags should always be
balanced.
Types of Tags
 HTML tags can be of two types.

Paired tags
Singular tags
Paired Tags
 A tag is said to be a paired tag if it , along with a
companion tag.

 In paired tags, the first tag (<B>) is often called the


opening tag and the second tag (</B>) is called the
closing tag.

 The opening tag activates the effect and the closing


tag turns the effect off.

 For example - <HTML>


</HTML>
Singular Tags
 A tag is said to be a singular tag if it ,does not along
with a companion tag.

 A singular tag is also called stand-alone tag . This tag


does not require any companion tag.

 For example - <BR>


The structure of an HTML program
<HTML>
<HEAD>
<TITLE> Document Title </TITLE>
</HEAD>

<BODY>
Hi!! This is my first web page.
</BODY>
</HTML>
Tag Attributes
 Some HTML tags require additional information
supplied to them . For instance, when a picture is placed
on the screen , information like the height and width
of the picture can be specified.

Additional information supplied to an HTML tag is


known as attributes of a tag.

Attributes are written immediately following the tag,


separated by a space.

Multiple attributes can be associated with a tag, also


separated by a space.
Attributes of <BODY> Tag
BGCOLOR Changes the default background color to whatever color is
specified with this tag. The user can specify a color by
name or its equivalent hexadecimal number.
Exam. - <BODY BGCOLOR = “black” >
<BODY BGCOLOR = “#000000” >
<BODY BGCOLOR = “rgb(0,0,0)” >
BACKGROUND Specifies the name of the GIF or JPEG file that will be
used as the background of document .
Exam. - <BODY BACKGROUND = “abc.gif” >
<BODY BACKGROUND = “../das.jpeg” >
<BODY BACKGROUND =
“http://www.w3schools.com/clouds.gif” >
TEXT Changes the body text color from its default value to the
color specified with this attributes.
Exam. - <BODY TEXT = “red” >
Text Formatting in
HTML
Headings
 The headings are defined with the <H1> to <H6> tags.
<H1> defines the largest heading. <H6> defines the
smallest heading.

HTML automatically adds an extra blank line before and


after a heading.
 <H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
Paragraphs
 Paragraphs are defined with the <P> tag.
 HTML automatically adds an extra blank line

before and after a paragraph.


 <P>This is a paragraph </P>
<P>This is another paragraph</P>
Line Breaks
 The <BR> tag is used when you want to end a line, but
don’t want to start a new paragraph .
 The <BR> tag forces a line break whenever you place it.

 The <BR> tag is an empty tag . It has no closing tag.


 <P> This <BR> is a para<BR>graph with line breaks. </p>
 Browser ignore multiple consecutive <P> tags, but
recognize multiple consecutive <BR> tags.
Comment lines
 The comment tag is used to insert a comment in the
HTML source code.
A comment will be ignored by the browser.
You can use comments to explain your code, which
can help you when edit the source code at a later date.
 <!-- This is the comment line -->
Text Formatting Tags
Tag Name Description
<B> Defines Bold text
<I> Defines Italic text
<U> Defines Underline text
<BIG> Defines Big text
<SMALL> Defines Small text
<SUB> Defines Subscripted text
<SUP> Defines Superscripted text
<STRONG> Defines Strong text
<DEL> Defines Deleted text
List & Font
Lists
 List is a list of items. The list is categorized in to three
categories.
 Ordered List
 Unordered List
 Definition List
Ordered Lists
 The ordered List starts with the tag <OL> and end with
</OL>.
 Each list items start with the tag <LI>. The attributes of
<LI> are –
Attributes Description
Type Controls the numbering scheme to be used.
Exam. – TYPE = “A”
Start Alters the numbering sequence. Can be set
to any numeric value.
Value Changes the numbering sequence in the
middle of an ordered list. It is to be
specified with the <LI> tag.
Example of Ordered List
Name of cities :
<OL TYPE = “1” START = 4>
<LI> Delhi
<LI> Agra
<LI> Bangalore
</OL>

Output
Name of cities :
4 Delhi
5 Agra
6 Bangalore
Unordered Lists
 An unordered List starts with the tag <UL> and end
with </UL>.
Each list items start with the tag <LI>. The attributes of
<LI> are –

Attributes Description
TYPE Specifies the type of the bullet.
Examples-
TYPE = FILLROUND
TYPE = SQUARE
Example of Unordered List
<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
Output
• Monday
• Tuesday
• Wednesday
• Thursday
• Friday
Definition Lists
 Definition list start with the tag <DL> and end
with the tag </DL>.
Definition List has two sub tags.
 Definition term <DT>
 Definition Description <DD>
Example of Definition List
<DL>
<DT> Keyboard
<DD> An Input Device
<DT> Printer
<DD> An Output Device
</DL>

Output

Keyboard
An Input Device
Printer
An Output Device
Font
 All text specified within the tags <FONT> and </FONT>
will appear in the font, size and color as specified as
attributes of the tag <FONT>. The attributes are :
Attributes Description
FACE Sets the font to the specified font name.

SIZE Sets the size of the text .


SIZE can take value between 1 and 7.
The Default size is 3.
SIZE = +3 will display a size of 6.

COLOR Sets the color of the text.


Example of Font
<FONT FACE = “Arial” SIZE = 6 COLOR = “red”>
Welcome to my Web Page !!!
</FONT>

Output

Welcome to my Web Page !!!


Character Entities
 Some characters have a special meaning in HTML, called
character entities.
If we want the browser to actually display these characters
we must insert character entities in the HTML code.
A character entity has three parts :
An ampersand (&)
An entity name
OR
# and entity number
A semicolon ( ;)
Character Entities
 Note that the character entities are case sensitive.
 The most common character entity in HTML is the non-
breaking space. Normally HTML will truncate spaces in
your text. If you write 10 spaces ,HTML will remove 9 of
them .
To add spaces to your text, use the &nbsp; or &#160;
character entity.
To display a less than sign in an HTML we must write
&lt; or &#60;
Character Entities
RESULT DESCRIPTION ENTITY ENTITY
NAME NUMBER
Non-breaking space &nbsp; &#160;
< Less than &lt; &#60;
> Greater than &gt; &#62;
& Ampersand &amp; &#38;
“ Quotation mark &quot; &#34;
‘ Apostrophe &apos; &#39;
¢ Cent &cent; &#162;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
§ Section &sect; &#167;
© Copyright &copy; &#169;
® Registered Trademark &reg; &#174;
× Multiplication &times; &#215;
÷ Division &divide; &#247;
Graphics with HTML
Images
 Images are placed in Web documents using the IMG tag.

 Images are part of a Web document, but in reality an


HTML file and any graphics it refers to are actually all
separate files.

 The URL of the graphic is just like the URLs used in the

anchor tag, except in this case the location used is that of


the graphic file.
Insert Image in Document
 Other than text, HTML allows placing of static and/or
animated images in an HTML page.

HTML accepts two picture file formats .gif & .jpg. It


can be inserted into a web page using the <IMG>.

The <IMG SRC> takes the following attributes:


Special Effect Tags
Attributes Description
ALIGN Controls alignment of the text following the image. Exam. –
ALIGN = TOP
BORDER Specifies the size of the border to place around the image.

WIDTH Specifies the width of the image in pixels.

HEIGHT Specifies the height of the image in pixels.

HSPACE Indicates the amount of space to the left & right of the image.

VSPACE Indicates the amount of space to the top and bottom of the
image.
ALT Indicates the text to be displaced in case the browser is unable
to display the image specified in the SRC attribute.
Examples of <IMG SRC> Tag
<IMG SRC = “images/wallpaper.gif” ALIGN = right>

<IMG SRC = “images/paper.gif” WIDTH = “150”


HEIGHT = “130” BORDER=“2” ALIGN = Bottom>

<IMG SRC = “images/wallpaper.gif” ALIGN = right ALT


= “Sorry file not found”>
Tables with HTML
Table
 A table is a two dimensional matrix, consisting of rows and
columns.
 Tables are intended for displaying data in columns on a web
page.
All table related tags are included between the <TABLE>
and</TABLE>.
Each row of a table is described between the <TR> and
</TR>.
Each column of a table is described between the <TD> and
</TD>.
Table Tag
The attributes of <TABLE> tag are :

Attributes Description
ALIGN Horizontal alignment is controlled by the ALIGN attribute. It
can be LEFT,CENTER or RIGHT.
VALIGN Controls the vertical alignment of cell contents. It accepts the
values TOP, MIDDLE or BOTTOM.
WIDTH Sets the WIDTH to a specific number of pixels or to a
percentage of the variable screen width . The data cell is
adjusted based on the cell data value.
BORDER Controls the border to be placed around the table. The border
thickness is specified in pixels.
CELLPADDING This attribute controls the distance between the data in a cell and
the boundaries of the cell.
CELLSPACING Controls the spacing between adjacent cells.
Table Tag
The attributes of <TD> tag are :

Attributes Description
COLSPAN The COLSPAN attribute inside a <TH> or <TD>
tag instructs the browser to make the cell defined
by the tag to take up more than one column. The
attribute can be set by giving a numeric value .
Exam. COLSPAN = 2

ROWSPAN The ROWSPAN attribute works in the same way


as the COLSPAN attribute except that it allows a
cell to take up more than one row. Exam
ROWSPAN = 3
Caption Tag
 Table headings are called Captions.
 Captions can be provided to a table by using
<CAPTION></CAPTION> tags .
 This paired tag appears within the <TABLE></TABLE> tags.
 The table caption can be made to appear above or below the
table structure with the attribute ALIGN .

Attribute Description
ALIGN It controls placing of the caption with respect to
the table.
ALIGN = BOTTOM
ALIGN = TOP
Caption Tag
 Header Rows ( A row that spans across columns of a
table.A table header row is defined using <TH></TH>
tags.The content of a table header row is automatically
centered and appears in boldface.
 Data rows ( Individual data cells placed in the horizontal
plane creates a data row )
 There could be a single data cell or multiple data
cells.
 Data cells hold data that must be displayed in
the table.
 A data row is defined using <TR></TR> tags.
<marquee> Tag

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction = "up">The direction of text will be from
bottom to top.</marquee> </body>
</html>
Specific Attributes
Attribute Value Description
scroll
behavior slide Defines the type of scrolling.
alternate
rgb(x,x,x)
Deprecated − Defines the direction of
bgcolor #xxxxxx
scrolling the content.
colorname
up
down Defines the direction of scrolling the
direction
left content.
right

height pixels or % Defines the height of marquee.

Specifies horizontal space around the


hspace pixels
marquee.

Specifies how many times to loop. The


loop number default value is INFINITE, which means
that the marquee loops endlessly.

Defines how long to delay between


scrolldelay seconds
each jump.

scrollamount number Defines how how far to jump.

width pixels or % Defines the width of marquee.

Specifies vertical space around the


vspace pixels
marquee.
Graphics with HTML
Special Effect Tags
 The "correct" way to highlight text is to use the logical
tags, which do not directly specify the type of
highlighting they will employ.

 The tags will cover here are sometimes called forced


style tags, because their very nature forces a certain
style within the document.

 The HTML 2.0 Specification does allow the mixing of


these styles, but does not require that a consistent
appearance be maintained.
Anchors
 Simplest possible anchor starts with <A> and ends
with </A>. However, you will never ever use the <A>
tag by itself, because it doesn't do anything.

 Most anchors are in the form <A HREF="URL">,


where URL is the location of the resource to which you
want the link to point.

 The words between the open and close of the anchor


would be displayed as a hyperlink.
 The target attribute is supported in all major browsers.
Definition and Usage
 The target attribute specifies where to open the linked
document.
Syntax
 <a target="_blank|_self|_parent|_top|framename">
Attribute Values
 Value Description _blank Opens the linked document in a new
window or tab _self Opens the linked document in the same
frame as it was clicked (this is default) _parent Opens the linked
document in the parent frame _top Opens the linked document
in the full body of the window framename Opens the linked
document in a named frame
Forms
 The <form> tag is used to create an HTML form for
user input.

 A form can contain input elements like text fields,


checkboxes, radio-buttons, submit buttons and more.

 A form can also contain select menus, textarea,


fieldset, legend, and label elements.
Text Input Controls
There are three types of text input used on forms −
Single-line text input controls − This control is used for items
that require only one line of user input, such as search boxes or
names. They are created using HTML <input> tag.
Password input controls − This is also a single-line text input
but it masks the character as soon as a user enters it. They are
also created using HTML <input> tag.
Multi-line text input controls − This is used when the user is
required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML
<textarea> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
Attributes
Type Indicates the type of input control and for text input
control it will be set to text.
Name Used to give a name to the control which is sent to
the server to be recognized and get the value.
Value This can be used to provide an initial value inside
the control.
Size Allows to specify the width of the text-input control in
terms of characters.
Maxlength Allows to specify the maximum number of
characters a user can enter into the text box.
Example
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" /><br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form> Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here... </textarea>
</form></body></html>
Checkbox Control
Checkboxes are used when more than one option is required to
be selected. They are also created using HTML <input> tag but
type attribute is set to checkbox..
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on">
Physics </form> </body></html>
Attributes
Type
Indicates the type of input control and for checkbox input
control it will be set to checkbox..
name
Used to give a name to the control which is sent to the
server to be recognized and get the value.
value
The value that will be used if the checkbox is selected.
checked
Set to checked if you want to select it by default.
Radio Button Control
Radio buttons are used when out of many options, just one option is required
to be selected. They are also created using HTML <input> tag but type
attribute is set to radio.
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form> </body> </html>
Select Box Control
A select box, also called drop down box which provides option to list down
various options in the form of drop down list, from where a user can select
one or more options.
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
File Upload Box
If you want to allow a user to upload a file to your web site, you will need to
use a file upload box, also known as a file select box. This is also created
using the <input> element but type attribute is set to file.
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" >
</form>
</body>
</html>
Button Controls
submit
This creates a button that automatically submits a form.
reset
This creates a button that automatically resets form controls to their initial
values.
button
This creates a button that is used to trigger a client-side script when the user
clicks that button.
image
This creates a clickable button but we can use an image as background of the
button.
Examples
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src =
"/html/images/logo.png" /> </form> </body> </html>
New input types

1. email
2. url
3. tel
4. number
5. range
6. date
7. color
HTML5 form attributes
1. placeholder
2. Required
3. Autofocus
4. Pattern
Product Number:
<input pattern="[0-9][A-Z]{3}" name="product" type="text"/>
5. list and the datalist element
<label>Your favorite fruit:
<datalist id="fruits">
<option value="Blackberry">Blackberry</option>
<option value="Blackcurrant">Blackcurrant</option>
<option value="Blueberry">Blueberry</option>
<!-- … -->
</datalist>
If other, please specify:
<input type="text" name="fruit" list="fruits">
</label>
HTML Frames
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.
Example
 <!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>
Frameset Attributes
cols This attribute specifies the number and size of
horizontal spaces in a frameset.
rows This attribute specifies the number and size of vertical
spaces in a frameset.
Frame Attributes
src This attribute is specify document which will be
displayed by frame.
name This attribute is used to labeling frames. Without
labeling all links will open in the frame that they are in.
noresize This attribute avoid resizing of frames by users.
scrolling This attribute defines existence of scrollbar. If this
attribute is not used, browser put a scrollbar when
necessary. There are two choices; "yes" for showing a
scrollbar even when it is not necessary and "no" for do not
showing a scrollbar even when it is necessary.
Embedding Video
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
Embedding Audio
<audio src = "foo.wav" controls>
Your browser does not support the <audio> element.
</audio>
Multimedia
Multimedia refers to content that uses more than one medium.
The categories of media are slippery, but they generally include:
Text
Sound
Graphics/images
Animation/video (live footage as opposed to animation)
Multimedia became an important concept as the Web moved
away from a largely textual layout to a graphical one. Many sites
were competing to become true multimedia sites with a mixture
of text, sound, images and videos.
Multimedia
Multimedia refers to content that uses more than one medium.
The categories of media are slippery, but they generally include:
Text
Sound
Graphics/images
Animation/video (live footage as opposed to animation)
Multimedia became an important concept as the Web moved
away from a largely textual layout to a graphical one. Many sites
were competing to become true multimedia sites with a mixture
of text, sound, images and videos.
VRML
Virtual Reality Modeling Language (VRML) is an open-standard
programming language created to design three-dimensional (3-
D) and Web-based models, textures and illusion.

VRML is used to illustrate 3-D objects, buildings, landscapes or


other items requiring 3-D structure and is very similar to
Hypertext Markup Language (HTML).

VRML also uses textual representation to define 3-D illusion


presentation methods.
VRML is also known as Virtual Reality Markup Language.
THANK YOU

You might also like