Final by smit parekh

Explain basic structure
of HTML document.
QUESTION 1
2

<!DOCTYPE HTML>
 The <!Doctype html> decleration must be the very
first thing in your HTML document before the
<HTML> tag.
 The <!Doctype> decleration is not on HTML tag; it
is an instruction to the web browser about what
version of HTML the page is written in.
 HTML5 is not based on SGML, and so doesn’t
require a reference to DTD.
3

<HTML>.....</html>
 The HTML document itself begins with <html>
and ends with </HTML>
 The <HTML> element defines the whole HTML
document.
 This element tells the browser that this is an
HTML document.
 The tag is defined at the top of the HTML file.
4

<BODY>…..</BODY>
 The visible part of the HTML document is written
between <BODY> and </BODY> tags.
 The <BODY> element defines the body of the
HTML document.
 This tag shows the content of the web page
which is to be displayed.
5

<HEAD>…..</HEAD<>
 HTML heading are defined with the <H1> to <H6>
tags.
 <H1> defines the most important heading.
 <H6> defines the least important headiing.
 <HEAD> tag defines the information about the
document.
 <BASE>,<LINK>,<SCRIPT>,<STYLE>,<TITLE>
are some tags can be used in <head> section.
 <HEAD> is written between <HTML> & <BODY>
tags.
6

<TITLE>…..</TITlE>
 The <TITLE> tag is required in all the
HTML documents and it defines the title
of the document.
 The <TITLE> element,
o Defines a title in the browser toolbar.
o Provides a title for the page when it is added to
favourates.
o Displayes a title to the page in the Search-engine
results.
• NOTE: you cannot use more than one <TITLE>in
a HTML document.7

EXPLAIN TYPES OF
THE <HEAD>
ELEMENT.
Question 2
8

TYPES OF <HEAD> ELEMENTS
 The <HEAD> element is a container of metadata
and is placed between the <HTML> & <BODY>
tags.
 HTML metadata is data about the HTML
document.
 Metadata mainly defines the document title,
character set, styles, links, and other meta
information.
 The metadata is not displayed.
 <title>,<style>,<meta>,<link>,<script>,<base> ,
etc are some the tags that defines the metadata.
9

TYPES OF <HEAD> ELEMENTS
<TITLE> <STYLE>
 The <TITLE> element
defines the title of
document, and is
required in all HTML
document.
 A title in the browser
tab.
 Provides a title for the
page when it is added
to favourates.
 The <STYLE> tag is
define style
information for on
HTML document.
 Each HTML
document can contain
multiple <STYLE>
tags.
10

Types of <head> elements
<SCRIPT> <LINK>
 The <SCRIPT> tag is
used to define a clint
side script.
 The <SCRIPT>
element either
contains scripting
statements, or it
points to an external
script.
 The <LINK> element
is used to define a
relationship between
an HTML document
and an external
resource.
 Displayes a title for
the page in search
engine results.
11

EXPLAIN <TITLE> AND
<BODY> ELEMENT.
QUESTION 3
12

<title> tag
 The HTML <TITLE> element <TITLE> defines the
documents title that is shown in a browsers title
bar or a page’s tab.
 It only contains text and tags within the elegant
are ignored.
 Display a title for the page in search engine
results.
 It defines a title in the browser toolbar.
 It provides a title for the page when it is added to
favourates.
13

<body> tag
 The HTML <BODY> elements represents the
content of on HTML document.
 There can be only one <BODY> element in a
document.
 The <BODY> element contains all the contents of
an HTML document, such as text, hyperlink,
images, tables, lists, etc.
 The <BODY> element is part of the basic
structure of a document.
 The basic structure of a webpage, including the
<BODY> block.
14

EXPLAIN GROUPING TEXT.
(<P>,<DIV>,<SPAN>)TAGS
QUESTION 4
15

<P> tag
 It is also a blocked tag & arrange group
of text data in paragraph format.
 Span is a inline elements ans P is a
block elements.
 Span will cover the width as it required
but P will cover the entire width of the
screen.
16

<div> tag
 It can be used to group elements for
styling purposes or because they share
attribute values, such as long.
 It shoud be used only when no other
sematic elements is appropriate.
 <SPAN> is very much like a <DIV>
element, but <DIV> is a block-level
element where as a <SPAN> is an inline
element.
17

<SPAN> tag
 <SPAN> is also similar to <DIV> but it is
a inline element, it can’t have interaction
with CSS.
 It is also a blocked tag & arrange group
of text data in paragraph format.
<SPAN> is a inline elements and <P> is
a block element.
 <SPAN> will cover the width as it
required but <P> will cover the entire
width of the screen.18

EXPLAIN ALL CHARACTER
ENTITIES AND HOW TO
COMMENT TEXT.
Question 5
19

ALL CHARACTER ENTITIES
 Reserved characters in HTML must be
replaced with character entities.
 Character that are not present on your
keyboard can also be replaced by entities.
 Some character are reserved in HTML.
 If you use the the less than or greater than
signes in your text, the browser might mix with
the tags than.
 Characters entities are used to display
reserved characters in HTML.
20

How to comment text
 A common character entity used in HTML is
the non-breaking space; & nbsp; To add real
spaces to your text you can use the  
character entity.
 The first type we will discuss is the single line
comment.
 The single line comment tells the interpreter to
ignore everything that occurs on that ine to
the right of the comment.
 To do a single line comment type “//” or “#”
and all text to the right will be ignored by PHP
interpreter.
21

EXPLAIN <HR> WITH
ATTRIBUTES AND
<BR> TAG
Question 6
22

<HR> & <BR>
 The <HR> tag may still be displayed as a
horizontal ruler in visual browsers, but is now
defined in semantic terms, rather than presential
terms.
 All the layout attributes are removed.
 <HR> displayes the horizontal line.
 <BR> displayes the breaking of line.
23

explain all types of list with
example and nested list.
Question 7
24

Types of lists
 There are mainly three types of lists,
described as follows,
1. Ordered lists
2. Unordered lists
3. Defination lists
 All the three types are dissuced in the other
slides…
25

1. ORDERED LISTS
 Each itemlist start
start with <LI> tag.
 EXAMPLE
<OL>
<LI>COFFEE</LI
>
<LI>TEA</LI>
<LI>MILK</LI>
</OL>
 The type attribute of
<OL> defines the type
of the list item makes.
1. TYPE = “1”
2. TYPE = “A”
3. TYPE = “a”
4. TYPE = “i”
5. TYPE = “I”
26

2. UNORDERED LISTS
 An unordered list
starts with <UL> tag
each list item start
with <LI> tag.
 EXAMPLE
<UL>
<LI>COFFEE</LI
>
<LI>TEA</LI>
<LI>MILK</LI>
</UL>
 The important
property for list item
maker is list-style-
type.
 The values of property
are;
1. DISC
2. CIRCLE
3. SQUARE
4. NONE
27

3. Defination lists
 The <DL> function is
used in conjuction
with <DT> and <DD>.
 <DL> -define list
 <DT> -define
name/term
 <DD> -describe each
terms/name
 EXAMPLE
<DL>
<DT>COFFEE</DT>
<DT>TEA</DT>
<DT>MILK</DT>
</DL>
28

Nested lists
 A nested list is simply
a list that occurs as an
element of another list
course itself be an
element of another
list, common reasons
nested lists arise.
 List can be
nested(lists in lists)
EXAMPLE
<UL>
<LI>COFFEE</LI>
<LI>TEA
<UL>
<LI>MILK</LI>
<LI>SHAKE</LI>
</UL>
</LI>
<LI>MILK</LI>
</UL>
29

Explain <table> tag with all
its attributes and tags
Question 8
30

<TABLE> TAG
 The <TABLE> tag defines an HTML table.
 An HTML table is a combination of the rows &
columns, which are further divided into cells
where you can enter the data.
 It allows you to arrange data, such as text,
images, links, forms and the other tables in a
proper format.
 An HTML table consists of the <TABLE> element
and one or more <TR>,<TH> and <TB>
elements.
31

ATTRIBUtEs OF <table> tag
 The <TABLE> tag
defines a HTML table.
 An HTML table consists
of the <TABLE> element
and one or mre
<TR>,<TH> and <TD>
elements.
 <TR>defines Table row.
 <TH>defines Table
header.
 <TD>defines Table cell.
 ATTRIBUTES
o Align
o Bgcolor
o Border
o Cellpadding
o Cellspacing
o Frame
o Height
o Width, etc
32

ATTributes
ATTRIBUTES VALUE DESCREPTION
ALIGN Left, Center, Right Specifies alignment of the table.
BGCOLOR Rgb(xxx), #xxxx,
colorname
Specifies the Bgcolor for a table.
BORDER 1, 0 Specifies wheather or not the
table is being used for layout
purposes.
CELLPADDING Pixels Specifies spaces between cells.
WIDTH Pixels, % Specifies the width of the table.
33

EXPLAIN FRAMES
AND
IFRAMES.
34
Question 9

Frames and iframe
 The <frame> tag defines one particular window within a
<frameset>..
 Each <frame> in a <frameset> can have different attributes,
such as borders, scrolling, the ability to resize etc.
 In HTML the <frame> tag has no end tag.
 An iframe is used to display a webpage within a webpage.
 The src attribute specifies the URL of the inline frame page.
 Use the height and width attributes to specify the size of the
iframe.
 The attribute values are specified in pixels by default, but
they can also be in present.
 By default, an iframe has a border around it.
 An Iframe can be used as the target frame for a link.
35

EXPLAIN TYPES OF
LINKS WITH EXAMPLE
AND ATTRIBUTES.
36
Question 10

TYPES OF LINKS AND ATTRIBUTES
 There are three types of links that can be used in a
web page, relative, site root relative, absolute which
one is correct to use depends on the location of the
page to which it links.
 Relative Links :
 A relative link points to a location that is relative to
the current page having a link to “index.html” is a
relative link that points to the “index.html” page in the
same directory as the current page. Links can also
use links like “__/images/mypic.jpg” to find an image
in the images directory inside the parent directory of
current page.37

 Site Root-Relative links :
 A site root – relative link points to a location that is
relative to the root directory of the site Note that you may
get unexpected results when you use preview in
Browser from within Expression Web. This is because
your browser shows your page from a local file –
something
like’c:/users/myname/document/mywebsites/mysite/inde
x.html” for a site root – relative link, your browser doesn’t
know which directory to use for the sites root so it will
simply use “c:”.
 Now when you hit PREVIEW in Browser address that
has the sites root set correctly and your site root – links
will work correctly in your browser.
38

 Absolute links :
 An Absoulte link is simply one that includes the
entire path to the file like
http://www.contoso.com/news/index.html There
are generally used for links that need to point to a
different site than the one on which your page is
located.
39

ATTRIBUTE VALUE DESCRIPTION
charset char__encoding Specifies the character
encoding of the linked
document
href URL Specifes the location of
the linked document.
type media_type Specifies the media
type of the linked
document
media Media__query Specifies on what
device the linked
document will be
displayed.
target _blank
_self
_top
_parent
Frame_nsme
Specifes where the
linked document is to be
loaded.
hreflang language__code Specifes the language
40

Explain <img> with attributes
and how to set link on <img>.
41
QUESTION 11

<img> with attributes & link on <img>
 The <img> tag defines an image in HTML page.
 The <img> tag has two required attributes src and alt.
 <a> is the link tag.
 Href attribute sets the URL to link.
 <img> is the image start tag.
 Src attribute sets the image file.
 Title attribute sets the image tooltip text.
 Alt is the image tag alt text attribute.
 Style attribute sets with css the width and height of the
image.
 </a> is the link end tag.
42

ATTRIBUTE VALUE DESCRIPTION
align Top
Bottom
Middle
Left
Right
Specfies the alignment of
an image according to
surrounding elements.
alt text Specifies and alternate
text for an image
border pixels Specifies the width of the
border around an image.
height pixels Specifies the height of an
image.
width pixels Specifies the width of an
image.
src URL Specifies the URL of an
image.
ismap Ismap Specifies an image as a
server-side image-map.
usemap #mapname Specifies an image as a
client-side image-map.43

Explain <imagemap>.
44
QUESTION 12

<imagemap>
 The usemap attribute specifies an image as a client
side image-map.
 The usemap attribute is associated with a <map>
elements name attribute, and creates a relationship
between the <img> and the <map>/
 The usemap attribute cannot be used if the <img>
element is a descendant of an <a> element.
 Syntax:
<img usemap=“#mapname”>
 Attribute values :Value Description
#mapname A hash character (“#”) plus the name of
the <map> element to use45

<IMAGEMAP>
 The image tag must have an attribute
usemap, which names the imagemap to
use for this image.
 A <map> element, and inside that
<area> elements, each of which defines
a single clickable area within the
imagemap.
46

EXPLAIN FORM WITH
ITS METHOD.
47
QUESTION 13

Forms
 The method is specified inside a form element,
using the method attribute, The difference between
method = “GET” and method = “POST” is primarily
defined in terms of form date encoding.
 Notes on GET :
 Appends forn-data into the URL in name/value
pairs.
 The length of a URL is limited. (almost 3000
characters)
 Never use GET to send sensitive data. (will be
visible in the URL)
 Useful for form submission where a user want to
bookmark the result.
48

Forms
Notes on POST:
 Appends form-data inside the body of
the HTTP request. (data is not shown is
in URL)
 Has no size limitations.
 Form submission with POST cannot be
bookmarked.
 Sends the form-data as an HTML post
transaction.
49

LIST AND EXPLAIN
<INPUT> TAGS.
50
QUESTION 14

<input> tag
 The list attribute refers to a <detalist> element
that contains pre-defined options for an <input>
element.
 Syntax:
<input list = “detailed_id”>
 Attribute Values:
Value Description
datalist_id Specifies the id of the
detailed to blind the <input>
element.
51

<input> tag
 The <input> tag specifies an nput field where the user can enter data.
 <input> elements are used within a <form> element to declare input controls that
allow user to input data.
 An input field can be inn many ways, depending on the type attribute.
Input button object
Input checkbox object
Input color object
Input radio object
Input date object
Input date time object
Input email object
Input image object
Input month object
Input number object
Input reset object
Input submit object
Input time object
Input week object
52

<input> tag
 Examples :
 <td> first name </td>
<td> <input type=“text” name=“frame”> </td>
 <td> Gender </td>
<td><input type=“radio” name=“g” value=“female”
checked> female </td>
 <td> hobby </td>
<td> <input type=“checkbox” name=“v1”
value=“dancing”> </td>
53

EXPLAIN
<DETAILEDLIST>,
<FIELDSET> AND
<LEGEND>54
QUESTION 15

<detailist>
 The <detailist> tag is used to provide an
“autocomplete” feature on <input> elements. Users
will see a drop-down list of pro-defined options as
they input data. Use the <input> elements list
attribute to bind it together with a <detailist>
element.
 The <detailist> tag is new in HTML5.
 The <detailist> tag also supports the Global
Attributes in HTML and the Event Attributes in
HTML.55

<fieldset>
 The <fieldset> tag is used to group
related elements in a form.
 The <fieldset> tag draws a box around
the related elements.
 The <fieldset> tag also supports the
Events Attributed in HTML and the
Global Attributes in HTML
56

<legend>
 The HTML <legend> tag is used for providing
a title or explanatory caption for the rest of the
contents of the legend elements parent
element. The <legend> element can be used
in conjuction with the <fieldset>, <figure>, and
<details> elements.
 By using the <legend> tag, you can make
your forms and other elements much easier to
under stand for your users.
 The <legend> tag defines a caption for the
<fieldset> element.
57

EXPLAIN
<QUOTE>,<BLOCKQUOTE>,<SUP>,<
SUB>,<STRIKE>,<MARK>,<U>,<I>,<B
>,<MARQUEE>
58
QUESTION 16

<quote>
 The <q> tag defines a short quotation.
 Browsers normally insert quotation
marks around the quotation.
 The <q> tag also supports the Global
Attributes in HTML and the Event
Attributes in HTML.
59

<blackquote>
 The <blackquote> tag specifies a section that is
quoted from another source
 Browsers usually indent <blackquote> elements.
 The blackquote element is an HTML tag pair that is
used to define long quotations. Here is the definition
of this element accouding html specification.
 The blackquote element represents a section that is
quoted from another source.
 The HTML <blackquote> tag is used for indication
long quotations. It should contain only block – level
elements within it, and not just plain text.
60

<sup>
 The <sup> tag defines
superscript text.
 Superscript text
apperars half a
character above the
normal line, and is
sometimes rendered in
a smaller font.
 Formulas like 22 + 32
 The <sub> tag defines
subscript text.
 Subscript text appears
half a character below
the normal line, and is
sometimes rendered
in a smaller font.
 Formulas like H2O
61

<strike>
 The <strike> tag was an inline element used to
draw a strikethrough on a section of text.
 You should use either the <s> or <del> tag in its
place.
 The following sections contain information about
the <strike> tag, including an example of it in
use, as well as related attributes and browser
compatibility.
 While the <strike> tag does not have any unique
attributes, it will utilize all of the standard
attributes untill it is removed in a future version of
HTML.62

<mark>
 The <mark> tag was introduced in HTML 5. The
HTML <mark> tag is used for indicating text as
marked or highlighted for reference purposes,
due to its relevance in another context. The
<mark> tag is supported in all major browsers.
 Use the <mark> tag if you want to highlight parts
of your text. We can mark the text using many
properties from global attributes of HTML 5.
 Example : by changing font, background color,
font color, etc. This tag is must have opening and
closing <mark> tag.
63

<u>
 The <u> tag represents some text, that
should be stylistically different from
normal text, such as misspelled words
or proper nouns in Chinese.
64

<i>
 The <i> tag defines a part of test in an alternate
voice. The content of the <i> tag is usually
displayed in italic.
 The <i> tag can be used to indicate a technical
term, a phrase from another language, a thought
or a ship name, etc.
 Use the <i> element only when there is not a
more appropriate element.
 Style sheet can be used to format the text inside
the <i> element.
65

<b>
 The HTML <b> tag is used to create a “b”
element, which represents bold text in an HTML
document.
 The <b> tag should be used to markup text as
bold without conveying any extra importance, for
example in article abstracts, where the beginning
of an article is set in bold text.
 It should not be used to convey extra importance.
To convey extra importance, use the <strong> tag
& To emphasize text, use <em>> tag.
 The <b> tag is written as <b> , </b> with the text
to be bold inserted between the start and end
tags.
66

<marquee>
 The <marquee> is a non-standard HTML tag
which was used to create a scrolling text or an
image.
 It was used to make the text/image scroll
horizontally across or vertically down the web
page.
 The <marquee> elemet comes in pairs. It
means that the tag has opening <marquee>
and closing </marquee> elements.
 The <marquee> tag also supports the Global
Attributes.67

Final by smit parekh

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Final by smit parekh

Similar to Final by smit parekh (20)

More from SMIT PAREKH

More from SMIT PAREKH (8)

Recently uploaded

Recently uploaded (20)

Final by smit parekh