We Provide Skills For International Certification

HTML
• HTML- stands for Hyper Text Markup Language.it is

basically used To develop the static web page.
• Hyper:- highlight the text.
• Markup:-tags.
• HTML markup tags are usually called HTML tags, these
keywords (tag names) surrounded by angle brackets (<
>).
We provide skills for international certification 1

• Version Year
• HTML 1991
• HTML+ 1993
• HTML 2.0 1995
• HTML 3.2 1997
• HTML 4.01 1999
• XHTML 1.0 2000
• HTML5 2012
• XHTML5 2013

What Are HTML Tags

• HTML Tag:-tag is categorized in two category.
• 1)Singular Tag(Stand Alone Tag/Empty Tag)
• <br/> For Line Break
• <hr/> For Horizontal Rule(For a Horizontal Line)
• 2) Paired Tag(Container Tag)
• <b> For Bold </b>
• <i> For Italic </i>
• <u> For Underline </u>
• (Demo1.html)

Tag Attributes

Basic HTML Tags

Preview

• <h1>For Heading(Larger) </h1>
• <h6>(Smaller) </h6>
• Prg:-demo2.html
• Note:-World Wide Web Consortium (W3C) recommends

lowercase attributes/attribute values
• CENTERING TEXT:-
• <H2 ALIGN(Attribute)="CENTER">a heading goes here</H2>
• Or
• <P ALIGN="CENTER">a paragraph or block of text goes here</P>
• try also ALIGN="RIGHT" and ALIGN="LEFT"

• Commonlly used attribute of <body> Tag:-
• 1)bgcolor
• 2)text="red"
• 3)background="c:\abc.jpeg“
• Image format
• jpg,jpeg(Joint PhotoGraphic Expert
group),bmp(bitmap),gif(Graphic interchange
format),png(Portable Network Graphic).

Some Important Tags

HTML Fonts

Changing Font:-
• For that we use <font> tag
• Commonly used attributes:-

• color
• size
• face
• Ex:-
• <font color="red" face="Arial" size="+1"> DD Singh</font>
• by default -> 12 pt.

• +1 14 pt.
• +2 16 pt.
• +3 18 pt.
• +4 20 pt.
• Till 72 pt.
•

• -1 -> 10 pt.
• -2 -> 8 pt.
• -3 -> 6 pt.
• -4 -> 4 pt.
• Prg(Font.html)
• HTML Paragraph:-
• 1) <p> Paragraph </p>
• The <p> tag defines a paragraph.
• Browsers automatically add some space (margin) before
and after each <p> element
• <p> </p> (This is also known as Double line Break)

• Preformatted Tag:-
• <pre> </pre>
• <PRE> is one the handiest tag in the HTML toolbox.
• <PRE> marks the text as "preformatted" -- all the spaces and
carriage returns(enter) are rendered exactly as you type them.
• <blockquote> tag:-
• <blockquote> </blockquote>
• Is used to define a long quotation.
• Browsers usually indent(spacing left & right) <blockquote>
elements.
• (Paragraph.html)

• <EM> EMPHASIZE TEXT </EM>
• <STRONG>STRONGLY EMPHASIZE
TEXT</STRONG>
• (Emphasize.html)
• What is Element:-
• Element = (Opening Tag + Content + Closing Tag)
• Ex:- = <b>Hello</b>

List

1) Unordered List:-

• (Unordered.html)
• You can also change the appearance of your bullets by

using type attribute.
• By default the type is “disc”
• <UL TYPE="circle">
• <UL TYPE=“square">

2. Ordered List:-

• (OrderedList.html)

3.Definition List:-
• <Dl> definition list
• <Dt> Definition Term </Dt>

• <DD> Definition Description </DD>
• </Dl>

•

• (DefinitionList.html)

• COMBINING UNORDERED AND ORDERED
LISTS:-
• (CombiOrderedUnordered.html)
• CHANGING THE APPEARANCE OF AN ORDERED
LIST:-
• <OL TYPE="I">
• <LI>item 1
• <LI>item 2
• <LI>item 3
• </OL>

• The following replacements for the numbered list can
also be made:
• <OL TYPE="i">
• for lower case Roman Numerals (i, ii, iii, iv, and so on).
• <OL TYPE="A">
• for capital letters (A, B, C, and so on).
• <OL TYPE="a">
• for lower case letters (a, b, c, and so on).

• The START attribute:-
• The START attribute is used to begin an Ordered List
with any number or letter. For example,
• <OL START="3">
• as in:
• <OL START="3">
• <LI>item 3 </li>
• <LI>item 4 </li>
• </OL>

• <OL TYPE="I" START="3">
• will begin numbering with Roman Numeral III.
• <OL TYPE="i" START="3">
• will begin numbering with Roman Numeral iii.
• The VALUE attribute:-

• The VALUE attribute is used to change the number WITHIN A LIST
and is used as part of the <Li> Tag
• <OL>
• <LI>This is List Item 1
• <LI VALUE="7">This is List Item 7
• </OL>

• CombiOrderedUnOrdered.html

Images

<img> Attributes

Alignment of Images

• <img> tag:-
• <img src=“Image.jpg">
• Commonly used attribute of the <img> tag

• border
• width
• height
• alt
• src

• 1)width and Height:-
• <img src="xyz.jpg" width=50 height=50> (in pixel)
• <img src="c:\xyz.jpg" width="50%" height="50%">(in
image size)
• 2)border:-
• <img src="xyz.jpg" border="3">
• 3)alt:-
• <img src="xyz.jpg" alt="This is alternate text">
• (ImageDemo.html)

Hyper Links
• Use Anchor Tag <a> to create a link
• <a href=“url”>Text To Be Displayed</a>
• The href attribute is used to indicate the page we are

linking to.

• Anchor tag <a> is used for Hyperlink
• There are three different kinds of links you can have on

your website:
• 1)Links to anchors on the current page (Internal).

• 2)Links to other pages within the current site (Local)
• 3)Links to pages outside the current site (Global).

• The tags used to produce links are the
• <a> and </a>.

• For Local Link:-
• With the help of it we can go from one page to other page
• Within same website.
• Ex:-
• <a href=“SecondPage.html"> Click Here for Next Page </a>
• For Global Link:-
• With the help it we can go out side the current website
• <a href="http://www.yahoo.com"> Click Here For
Yahoo</a>
• <a href=http://www.yahoo.com><img src="Koala.jpg“> </a>
• Anchor.html

Internal Link
• To offer a page jump, you need two items:
• The command that points or sends the browser to

another section on your web page.
• The place or point on the page where you want the

browser to jump to.

• Para-1
• <a href=“#p2”>Click Here</a>
• ----------------
• ----------------
• ----------------
• <a id=“p2”>Para 2 </a>

• -----------------
• -----------------
• -----------------
• LinkDemo.html
•

• <br/> tag:-
• it is used for the Single Line Break
• <hr/>
• It is used to draw horizontal line
• <hr/> (Horizontal Rule)
• attributes of <hr/> tag
• align,size,width,color
• <hr size=5 width=50% align="left“ color=“yellow” />

Problem

HTML Character Entities

INDENTING A LINE and CREATING SPACES:-
• Here are some popular symbols and their ampersand
commands that work in all browsers
• Non-breaking space

• Copyright © ©
• Trademark ™
• Registered ® ®
• Less Than < <

• Greater Than > >
• Ampersand & &
• Quote " "
• Apostrophe ' '
• Degrees ° °
• Larger middle dot •
• These are also known as General Entity
• GeneralEntity.html

• Super Script and Sub Script Tag:-
• -> a<sup> 2 </sup>

• -> H<sub> 2 </sub> O

Nested Tag

• -------------------------------------------------------------
• <form> tag:-
• these fields can be added to your forms
• 1) Text Field:-
• Text field is one line area that allow the user to input
text.
• <input type="text">
• other commonly used attributes:-

• 1)size:-
• The size option defines the width of the field. That is how
many visible characters it can contain.
• 2)maxlength:-
• This option defines the maximum length of the field.
That is how many characters can be entered in the field.
• If you do not specify a maxlength, the user can easily

enter more characters than are visible in the field at one
time.

• 3)name:-
• is used to uniquely identify the field
• 4)value
• Value attribute defines the default value.

2)PASSWORD FIELD:-
• password field is similar to text field.
• The only difference is that what is entered into a

password field shows up as dots on the screen.
• Ex:-
• <input type="password“>

• 3) HIDDEN FIELD:-
•
• Hidden field is similar to text fields, with one very important
difference!
• The difference is that the hidden field does not show on the
page.
• Therefore the user can't type anything into a hidden field,
which leads to the purpose of the field:
• To submit information that is not entered by the visitor.

•
• Syntax:-
• <input type="hidden" name="Language" value="English">

Input Attributes

4)TEXT AREA:-
• Text area is the kind of text field that can span into multi
lines.
• Unlike most other form fields, text areas are not defined
with an <input> tag.
• Instead you enter a <textarea> </textarea> tag
• Everything written between these tags will be presented

in the text area box.

• Commonly used attributes are as follows
• 1) rows and cols

• 2)name
• etc.

• ex:-
• <textarea cols=“25" rows="5" name=“txtAddress">
• Plz Type Here
• </textarea>

• CHECK BOX:-
• Check boxes are used when you want to let the user
select one or more options from a set of alternatives.
• Ex:-
• <input type="checkbox" name=“cbChoice1"
value="Milk">Milk

• RADIO BUTTON:-
• Radio buttons are used when you want to let the user
select one - and just one - option from a set of
alternatives.
• ex:-
• <input type="radio" name=“Gender" value=“M"> Male
<br/>
• <input type="radio" name=“Gender" value=“F"> Female

• DROP DOWN MENU:-
• Depending on your settings, drop-down menus can serve
the same purpose as radio buttons (one selection only) or
check boxes (multiple selections allowed).
• Drop-down menus use two tags these are

• <select> and <option>.
• Both tags have an opening and a closing tag.

• Ex:-
• <select>
• <option>Milk</option>
• <option>Coffee</option>
• <option>Tea</option>
• </select>
•

• Commonly used attribute of <select> tag are as follows
• 1)name
• 2)size
• ->Name attribute uniquly identify the drop down listbox.
• ->size attribute defines how many items should be visible
at a time. By default one item is visible.
• Note:-
• multiple setting will allow for multiple selections if
present.
• Ex:-
• <select name="s1" size="2" multiple>

• The <option> tag defines the single items in the menu.
• Nationality:-
• <select name="s1">
• <option value="USA">USA</option>
• <option value="India">India</option>
• </select>

• Button:-
• <input type="submit" value="ok">
• <input type="button" value="ok">
• <input type="reset" value=“reset">
• submit:-The button is a submit button (submits form-
data)
• button:-A clickable button, that activates a JavaScript
when it is clicked.
Reset:-resets the form-data to its initial values
Reg.html

• Marquee Tag:-
• This tag is basically used to scroll the text .
• commonlly used attribute of marquee tag:-
• 1)direction:-
• <marquee direction="left">DD</marquee>
• <marquee direction="right">fateh</marquee>
• <marquee direction="up">shekhar</marquee>
• <marquee direction="down">Amit</marquee>

• 2) behavior:-
• 2.1)Scroll
• 2.2)Alternate
• 2.3)slide
•
• <marquee behavior="Scroll">fateh</marquee>

• 3)scrollamount:-
• slow->fast
• <marquee scrollamount="100">
• ="500 "

• 4)scrolldelay:-
• fast->slow
• <marquee scrolldelay="100">
• 5)width and height
• 6)bgcolor
• 7)loop
• <marquee loop="3">Amit</marquee>

• <marquee bgcolor="red" behavior="alternate"
scrollamount="10"><font face="vardana"
size="5">Amit</marquee>
• <marquee bgcolor="red" behavior="alternate"

scrollamount="10"><font face="vardana"
size="5"><img src="1.jpg"/>
• </marquee>

We Provide Skills For International Certification

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

We Provide Skills For International Certification

Hochgeladen von

Copyright:

Verfügbare Formate

HTML

• HTML- stands for Hyper Text Markup Language.it is

We provide skills for international certification 1

We provide skills for international certification 2

We provide skills for international certification 3

We provide skills for international certification 4

We provide skills for international certification 5

We provide skills for international certification 6

We provide skills for international certification 7

• Note:-World Wide Web Consortium (W3C) recommends

We provide skills for international certification 8

We provide skills for international certification 9

We provide skills for international certification 10

We provide skills for international certification 11

• Commonly used attributes:-

• by default -> 12 pt.

We provide skills for international certification 12

We provide skills for international certification 13

We provide skills for international certification 14

We provide skills for international certification 15

We provide skills for international certification 16

We provide skills for international certification 17

• You can also change the appearance of your bullets by

We provide skills for international certification 18

We provide skills for international certification 19

We provide skills for international certification 20

• <Dl> definition list

• <Dt> Definition Term </Dt>

We provide skills for international certification 21

We provide skills for international certification 22

We provide skills for international certification 23

We provide skills for international certification 24

We provide skills for international certification 25

We provide skills for international certification 26

• The VALUE attribute:-

We provide skills for international certification 27

We provide skills for international certification 28

We provide skills for international certification 29

We provide skills for international certification 32

We provide skills for international certification 33

• Commonly used attribute of the <img> tag

We provide skills for international certification 34

We provide skills for international certification 35

• The href attribute is used to indicate the page we are

We provide skills for international certification 36

• There are three different kinds of links you can have on

• 1)Links to anchors on the current page (Internal).

We provide skills for international certification 38

We provide skills for international certification 39

We provide skills for international certification 40

• The command that points or sends the browser to

• The place or point on the page where you want the

We provide skills for international certification 41

• <a id=“p2”>Para 2 </a>

We provide skills for international certification 42

We provide skills for international certification 43

We provide skills for international certification 44

We provide skills for international certification 45

• Non-breaking space &nbsp;

We provide skills for international certification 46

• These are also known as General Entity

We provide skills for international certification 47

• -> a<sup> 2 </sup>

• Non-breaking space