html
TRANSCRIPT
![Page 1: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/1.jpg)
HTML
FaaDoOEngineers.comFaaDoO Engineers.com
![Page 2: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/2.jpg)
2
Part 1
FaaDoOEngineers.com
FaaDoO Engineers.com
![Page 3: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/3.jpg)
3
Objectives• Getting Started With HTML Introducing HTML How Web pages work Introduction to Tags Structure of HTML page
• Creating a Web Page Introduction table, tr, td tags.Paragraphs and Line breaksHeadingsCreating Ordered and Unordered List
• Text Formatting And AlignmentBoldfaces and Italics Font Size, Color and TypefaceSpecial Characters
FaaDoOEngineers.com
![Page 4: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/4.jpg)
4
• Using Links & Images
• Style SheetPurpose of Style SheetStyle RulesAttaching Style SheetDefining classesDiv tag, Span TagUsing Span
• Developing Forms Introducing Forms Using Standard Form Controls
ObjectivesObjectives
FaaDoOEngineers.com
![Page 5: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/5.jpg)
5
What is World Wide Web?
• The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:
A uniform naming scheme for locating resources on the Web (e.g., URIs).
Protocols, for access to named resources over the Web (e.g., HTTP).
Hypertext, for easy navigation among resources (e.g., HTML).
FaaDoOEngineers.com
![Page 6: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/6.jpg)
6
Introducing HTML
To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language).
What is HTML
FaaDoOEngineers.com
![Page 7: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/7.jpg)
7
Introducing HTML
HTML contains special markers, or tags, which define the style and structure of the page.
Tags are also referred
to as elements.
What is HTML
FaaDoOEngineers.com
![Page 8: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/8.jpg)
8
• Publish online documents with headings, texts, tables, lists, photos, etc.
• Retrieve online information via hypertexts links.
• Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
Introducing HTMLIntroducing HTML
Uses of HTML
FaaDoOEngineers.com
![Page 9: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/9.jpg)
9
How To Access An Web Page
Click To Proceed With
The Steps
FaaDoOEngineers.com
![Page 10: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/10.jpg)
10
Double Click on the
Internet Explorerbutton
FaaDoOEngineers.com
![Page 11: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/11.jpg)
11
Browser Window Opens
FaaDoOEngineers.com
![Page 12: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/12.jpg)
12
Type the url address &
Press Enter Key
http://www.google.co.in
FaaDoOEngineers.com
![Page 13: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/13.jpg)
13
HTML files
Web ServerInternet
RequestRequest
User makes a request
www.google.co.in
http://www.google.co.in
FaaDoOEngineers.com
![Page 14: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/14.jpg)
14
HTML files
Web ServerInternet
Web PageWeb Page
Google page is returned from the Web Server
FaaDoOEngineers.com
![Page 15: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/15.jpg)
15 FaaDoOEngineers.com
![Page 16: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/16.jpg)
16
Introducing HTML
A tag is a reference in an HTML document which describes the style and structure of the document.
All tag start with < (less than symbol) and end with
> (greater than symbol)
Tags which mark a beginning have no / (front slash). Tags which mark an ending have a / immediately after <,
as in </.
What is a Tag
FaaDoOEngineers.com
![Page 17: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/17.jpg)
17
Introducing HTML
Example on Tag
<HTML>, <BODY>, <TITLE>
</HTML>, </BODY>, </TITLE>
Sample Tags
Starting tags / elements
Ending tags / elements
FaaDoOEngineers.com
![Page 18: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/18.jpg)
18
Introducing HTML
Explanation of the HTML code
<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes. </BODY></HTML>
FaaDoOEngineers.com
![Page 19: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/19.jpg)
19
Introducing HTML
Explanation of the HTML code
<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes. </BODY></HTML>
Start of an HTML document.
FaaDoOEngineers.com
![Page 20: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/20.jpg)
20
Introducing HTML
Explanation of the HTML code
<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes. </BODY></HTML>
Indicates to the browser that this is an HTML document.
FaaDoOEngineers.com
![Page 21: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/21.jpg)
21
Introducing HTML
Explanation of the HTML code
<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes. </BODY></HTML>
HTML document is divided into two sections. 1. <HEAD> …. </HEAD>
FaaDoOEngineers.com
![Page 22: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/22.jpg)
22
Introducing HTML
Explanation of the HTML code
<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes. </BODY></HTML>
HTML document is divided into two sections. 2. <BODY> …. </BODY>
FaaDoOEngineers.com
![Page 23: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/23.jpg)
23
Introducing HTML
Explanation of the HTML code
<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes. </BODY></HTML>
Shows the contents in the browser title bar. Generally placed inside Head tag.
FaaDoOEngineers.com
![Page 24: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/24.jpg)
24
Introducing HTML
Explanation of the HTML code
<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes. </BODY></HTML>
Indicates comment tag. Can be placed anywhere in the document.
FaaDoOEngineers.com
![Page 25: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/25.jpg)
25
Introducing HTML
Explanation of the HTML code
<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes. </BODY></HTML>
Signal the end of HTML document.
FaaDoOEngineers.com
![Page 26: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/26.jpg)
26
Introducing HTML
1. Range / Container tags
2. Standalone / Point tags
Kinds of Tags
They are called so because they cover a range of text.
Example : <HTML>, <HEAD>, <BODY>, <TITLE>
Those tags which do not need an ending.
Example: <HR>, <BR>
FaaDoOEngineers.com
![Page 27: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/27.jpg)
27
Paragraphs &
Line Breaks
FaaDoOEngineers.com
![Page 28: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/28.jpg)
28
Line Separators
• Tags used for separating one line with other can be classifies as follows:-
1. <P> tag
2. <BR> tag
3. <HR> tag
FaaDoOEngineers.com
![Page 29: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/29.jpg)
29
The <P> Tag
• Normally all text in an HTML document is treated like one long paragraph. Indented or blank lines which normally indicate start of paragraphs in text are ignored.
• To separate your text into paragraphs use the
• The <P> tag forces an end of line and forces a blank line before the next paragraph.
<P> tag.
FaaDoOEngineers.com
![Page 30: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/30.jpg)
30
Requirement Analysis
FaaDoOEngineers.com
![Page 31: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/31.jpg)
31
<p>This is should be the end of my first paragraph in HTML.</p>
<p>This should be the start of my second paragraph in HTML.</p>
<p>And this is should be my third paragraph in HTML.</p>
Code Snippet To Fulfill the Requirement
FaaDoOEngineers.com
![Page 32: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/32.jpg)
32
<p>This is should be the end of my first paragraph in HTML.</p>
<p>This should be the start of my second paragraph in HTML.</p>
<p>And this is should be my third paragraph in HTML.</p>
<p> tag forces an end of line and forces a blank line before the next paragraph.
FaaDoOEngineers.com
![Page 33: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/33.jpg)
33
<p>This is should be the end of my first paragraph in HTML.</p>
<p>This should be the start of my second paragraph in HTML.</p>
<p>And this is should be my third paragraph in HTML.</p>
<p> tag forces an end of line and forces a blank line before the next paragraph.
Ends the paragraph tag.
FaaDoOEngineers.com
![Page 34: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/34.jpg)
34
The <BR> Tag
• Used to control the line breaks.
• Use single spacing among the lines unlike <p> tag that uses double spacing among the paragraph.
• Does not have a closing braces.
FaaDoOEngineers.com
![Page 35: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/35.jpg)
35
Requirement AnalysisRequirement Analysis
FaaDoOEngineers.com
![Page 36: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/36.jpg)
36
This is should be the end of my first paragraph in HTML.<br>
This should be the start of my second paragraph in HTML.<br>
<p>And this is should be my third paragraph in HTML.<br>
Code Snippet To Fulfill the Requirement
FaaDoOEngineers.com
![Page 37: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/37.jpg)
37
This is should be the end of my first paragraph in HTML.<br>
This should be the start of my second paragraph in HTML.<br>
<p>And this is should be my third paragraph in HTML.<br>
Forces line break with one line spacing between two lines.
FaaDoOEngineers.com
![Page 38: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/38.jpg)
38
The <HR> tag
• The <HR> tag draws a horizontal line across the page.
• It acts a paragraph break.
• There is no need to use the <BR> before or after the <HR> tag.
FaaDoOEngineers.com
![Page 39: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/39.jpg)
39
Requirement Analysis
FaaDoOEngineers.com
![Page 40: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/40.jpg)
40
This is should be the end of my first paragraph in HTML.<hr>
This should be the start of my second paragraph in HTML.<hr>
And this is should be my third paragraph in HTML.<hr>
Code Snippet To Fulfill the Requirement
FaaDoOEngineers.com
![Page 41: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/41.jpg)
41
This is should be the end of my first paragraph in HTML.<hr>
This should be the start of my second paragraph in HTML.<hr>
And this is should be my third paragraph in HTML.<hr>
Draws a horizontal line across the page.
FaaDoOEngineers.com
![Page 42: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/42.jpg)
42
<HR> tag Attributes
<hr color=“red”>
1. Color Attribute
How To Use
<hr color=“blue”>
<hr color=“pink”>
FaaDoOEngineers.com
![Page 43: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/43.jpg)
43
<HR> tag Attributes
<hr width=“50%”>
2. Width Attribute
How To Use
<hr color=“blue” width=“100%”>
<hr width=“500”>
Default alignment of HR is center.
FaaDoOEngineers.com
![Page 44: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/44.jpg)
44
<HR> tag Attributes
<hr align=“left” width=“50%”>
3. Align Attribute
How To Use
<hr align=“right” width=“50%”>
<hr align=“center” width=“50%”>
FaaDoOEngineers.com
![Page 45: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/45.jpg)
45
<HR> tag Attributes
<hr size=“5”>
4. Size Attribute
How To Use
<hr size=“3” color=“red”>
<hr align=“center” width=“50%” size=“2”>
FaaDoOEngineers.com
![Page 46: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/46.jpg)
46
The Headings Tags
• To add headings in the HTML document use tag where, n represent number from 1 to 6.
<Hn>
<H1> </H1>Some text here<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6>
Some text hereSome text hereSome text here
Some text here
Some text here
FaaDoOEngineers.com
![Page 47: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/47.jpg)
47
Listing In HTML
• A common applications of HTML is to display the list of items.
• The most popular types of lists that can be created using HTML are:
Unordered List
Ordered List
FaaDoOEngineers.com
![Page 48: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/48.jpg)
48
Unordered List
• When the list of contents that you want to display don’t have to follow any sequence then you can use Unordered list.
• Each item in the unordered list is indented.
For Example, while creating list of Electronic products, where sequence of occurrence does not matter.
<UL>
tag is used to create a Unordered list.
FaaDoOEngineers.com
![Page 49: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/49.jpg)
49
Unordered List
• When the list of contents that you want to display don’t have to follow any sequence then you can use Unordered list.
• Each item in the unordered list is indented.
For Example, while creating list of Electronic products, where sequence of occurrence does not matter.
<LI>
tag identifies a item in the list.
FaaDoOEngineers.com
![Page 50: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/50.jpg)
50
Unordered List
<HTML><BODY><H3>List of Electronic Products</H3><UL><LI>T.V.</LI><LI>VCD</LI><LI>DVD</LI><LI>REFRIGERATOR</LI><LI>WASHING MACHINE</LI><LI>MICRO OVEN</LI></UL></BODY></HTML>
Check Out An Example
FaaDoOEngineers.com
![Page 51: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/51.jpg)
51
Check Out The
Output
FaaDoOEngineers.com
![Page 52: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/52.jpg)
52
Ordered List
• When the list of contents that you want to display have to follow a sequence.
• Each item in the ordered list is indented.
• For Example, creating a list of students based on their merit.
<OL>
tag is used to create a Ordered list.
FaaDoOEngineers.com
![Page 53: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/53.jpg)
53
Ordered List
<HTML><BODY><H3>List of Fortune 500 Companies – Industry: Computers, Office
Equipment Year 2006 Survey </H3><OL><LI>IBM</LI><LI>HP</LI><LI>Dell</LI><LI>NEC</LI><LI>Fujitsu</LI><LI>Canon</LI></OL></BODY></HTML>
Check Out An Example
FaaDoOEngineers.com
![Page 54: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/54.jpg)
54
Check Out The
Output
FaaDoOEngineers.com
![Page 55: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/55.jpg)
55
Text Formatting and Alignment
FaaDoOEngineers.com
![Page 56: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/56.jpg)
56
1. <PRE> tag
Character Styles
2. <BLOCKQUOTE> tag
3. <ADDRESS> tag
4. Logical Character Highlighting tags
5. Physical Character Highlighting tags
Text Formatting
FaaDoOEngineers.com
![Page 57: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/57.jpg)
57
1. <PRE> tag
Character Styles
• It is used to include preformatted text into your HTML document.
• Text will appeared exactly as typed including, tabs and returns.
Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 58: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/58.jpg)
58
1. <PRE> tag
Character Styles
<pre>This is should be the end of my first paragraph in HTML.
This should be the start of my second paragraph in HTML.</pre>
And this is should be my third paragraph in HTML.
Sample Code
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 59: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/59.jpg)
59
1. <PRE> tag
Character Styles
Sample Output
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 60: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/60.jpg)
60
2. <BLOCKQUOTE> tag
Character Styles
• Used to include indented text in a document.
• Both the right and left margin are indented.
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 61: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/61.jpg)
61
2. <BLOCKQUOTE> tag
Character Styles
Most Popular Quote of Shakespeare :<BLOCKQUOTE>To Be, Or Not To Be: That Is The Question </BLOCKQUOTE>
Sample Code
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 62: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/62.jpg)
62
2. <BLOCKQUOTE> tag
Character Styles
Sample Output
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 63: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/63.jpg)
63
3. <ADDRESS> tag
Character Styles
• It defines text that gives an address or other contact information.
• It is displayed in italic.
• Generally, displayed in the bottom of the page.
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 64: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/64.jpg)
64
3. <ADDRESS> tag
Character Styles
IBM stands for International Business Machines.<hr color=“blue”>The HeadQuarter is located at:<ADDRESS>IBM Armonk, <BR>New York, USA.</ADDRESS>
Sample Code
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 65: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/65.jpg)
65
3. <ADDRESS> tag
Character Styles
Sample Output
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 66: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/66.jpg)
66
4.
Character Styles
• Logical Character Highlighters are also known as Idiomatic styles tags.
• The purpose of logical tags is to convey the basic semantic meaning of a piece of text rather than the absolute appearance.
• It is used to give your text a different look when displayed by browsers.
• Browser handle the look and feel of the logical tag.
Logical Character Highlighting tags
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 67: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/67.jpg)
67
4.
Character Styles
Logical Character Highlighting tags
Name Tag Example
Strong <STRONG> This is STRONG text
Emphasis <EM> This is EMphasized text
Code <CODE> This is CODEd text
Keyboard <KBD> This is “KeyBoarD” text
Variable <VAR> This is VARiable text
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 68: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/68.jpg)
68
5.
Character Styles
• Physical Character Highlighters are also known as Typographical styles tags.
• It is used to give your text a different look but exacting look.
• Not all browsers support physical styles.
Physical Character Highlighting tags
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 69: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/69.jpg)
69
5.
Character Styles
Physical Character Highlighting tags
Name Tag Example
Bold <B> This is Bold text
Italics <I> This is Italicized text
Underline <U> This is a underlined text
Teletype <TT> This is TeleType text
Superscript <SUP> X2Y3
Subscript <SUB> H2SO4
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 70: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/70.jpg)
70
Font Tag
• It is used to change the font color, fontsize,
font face of text in an HTML document.
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 71: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/71.jpg)
71
1. Size
Attributes of Font Tag
2. Color
3. Face
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 72: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/72.jpg)
72
1. Size
Attributes of Font Tag
Default font size is 3. Largest font size can be set is 7.Smallest is 1.
The primary <FONT> attribute is SIZE=x, where x is anabsolute value ranging from 1 to 7 or a relative vale (+/-).
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 73: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/73.jpg)
73
1. Size
Attributes of Font Tag
Html Code Output
<FONT SIZE=4>HTML is Fun</FONT> HTML is Fun
<FONT SIZE=+1>HTML is Fun</FONT> HTML is Fun
<FONT SIZE=1>HTML is Fun</FONT> HTML is Fun
<FONT SIZE=-2>HTML is Fun</FONT> HTML is Fun
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 74: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/74.jpg)
74
2. Color
Attributes of Font Tag
There are 3 different methods to set color.
i. Generic Coloring System
ii. RGB Coloring System
iii. Hexadecimal Coloring System
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 75: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/75.jpg)
75
2. Color
Attributes of Font Tag
i. Generic Coloring System
Generics colors are preset HTML coded colors where thevalue is simply the name of each color.
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 76: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/76.jpg)
76
2. Color
Attributes of Font Tag
i. Generic Coloring System
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal
Sample Generic
Basic Colors
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 77: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/77.jpg)
77
2. Color
Attributes of Font Tag
ii. RGB Coloring System
RGB stands for Red, Green, Blue. Each can have a valuefrom 0 (none of that color) to 255 (fully that color).
The format for RGB is – RGB (Red, Green, Blue)
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 78: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/78.jpg)
78
2. Color
Attributes of Font Tag
ii. RGB Coloring System
<font color=RGB(255,0,0)>Confidence</font> Confidence
<font color=RGB(255,255,0)>Confidence</font> Confidence
<font color=RGB(0,0,255)>Confidence</font> Confidence
<font color=RGB(255,255,255)>Confidence</font> Confidence
OutputExample
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 79: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/79.jpg)
79
2. Color
Attributes of Font Tag
iii. Hexadecimal Coloring System
A hexadecimal is a 6 digit representation of a color.
XX XX XXRed Green Blue
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 80: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/80.jpg)
80
2. Color
Attributes of Font Tag
iii. Hexadecimal Coloring System
<font color=“#FF0000”>Confidence</font> Confidence
<font color=“#FFFF00”>Confidence</font> Confidence
<font color=“#0000FF”>Confidence</font> Confidence
<font color=“#FFFFFF”>Confidence</font> Confidence
Example Output
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 81: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/81.jpg)
81
Color Color Name
Hexadecimal Value Color Color
NameHexadecimal
ValueBlack #000000 Green #008000Silver #c0c0c0 Lime #00ff00Gray #808080 Olive #808000White #ffffff Yellow #ffff00Maroon #800000 Navy #000080Red #ff0000 Blue #0000ffPurple #800080 Teal #008080Fushia #ff00ff Aqua #00ffff
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 82: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/82.jpg)
82
3. Face
Attributes of Font Tag
The font face attribute is used to specify the font name.
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 83: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/83.jpg)
83
3.
Attributes of Font Tag
<font face=“Serif”>Confidence</font> Confidence
<font face=“Courier”>Confidence</font> Confidence
<font face=“Palatino”>Confidence</font> Confidence
<font face=“Monotype Corsiva”>Confidence</font> Confidence
Output
ExampleFace
Code Snippet
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 84: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/84.jpg)
84
Special Characters
<html>
<body>
<h2><b><MARQUEE></b> is used to scroll the enclosing text.</h2>
</body>
</html>
Example
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 85: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/85.jpg)
85
Special Characters
Output
Text Formatting (Contd.)Text Formatting (Contd.)
FaaDoOEngineers.com
![Page 86: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/86.jpg)
86
Using Links &
Images
FaaDoOEngineers.com
FaaDoO Engineers.com
![Page 87: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/87.jpg)
87
Using Links
• The Anchor Tag HTML uses the <a> (anchor) tag to create a link to another document.
Attributes of <a>(anchor) tag
• href : is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
Syntax:<a href=”url”>Text to be displayed</a>
FaaDoOEngineers.com
![Page 88: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/88.jpg)
88
Using Links (Contd.)
Attributes of <a>(anchor) tag• target : The target attribute defines where the linked
document will be opened.Syntax:<a href=“http://w3.ibm.com” target=“where to place the
document”>Text to be displayed</a>• name :The name attribute is used to create a named
anchor. When using named anchors we can create links that can jump directly into a specific section on a page.
Syntax<a name=“label”>Text to be displayed</a>
FaaDoOEngineers.com
![Page 89: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/89.jpg)
89
Example of a Hyperlink
<html><head><title>Example of a
Hyperlink</title><head><body><a href=“http://w3.IBM.com”>
IBM</a><a href=“http://w3.IBM.com”
target=“_blank”>IBM</a>
---- other information within body tag-------
</body></html>
The word IBM will be highlighted , and on clicking IBM the user will be taken to the w3 pages of IBM, the page will be opened on the same window
The word IBM will be highlighted , and on clicking IBM the user will be taken to the w3 pages of IBM, the page will be opened on a new window.
FaaDoOEngineers.com
![Page 90: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/90.jpg)
90
Example of Naming a link and accessing it
<html>
<body>
<a name=“locations”> locations</a>
Kolkata, Bangalore, Hyd, Pune, Chandigarh, Gurgoan
----- other information
----------
<a href=“#locations”>IBM Location In India</a>
</body></html>
On Clicking on IBM Location in India you will be linked to the section which has been named as locations
FaaDoOEngineers.com
![Page 91: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/91.jpg)
91
Embedding Images
• The image tag In Html images are defined by using the <img> tagThe <img> tag is a open tag ( does not have a </img>)Attributes of <img> tag
• src : To display an image on a page, you need to use the src attribute . The value of the src is the url of the image to be displayed
• Syntax<img src=“url”>
FaaDoOEngineers.com
![Page 92: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/92.jpg)
92
Embedding images ( contd.)
Attributes of <img> tag• alt :The alt attribute is used to define an "alternate text" for
an image. The value of the alt attribute is an author-defined text:
• Syntax<img src=“url” alt=“user defined text”>• width & height : the size of the image can be controlled by
using the width and height attributes• Syntax<img src=“url” width=“size in pixels” height=“size in pixels”>
FaaDoOEngineers.com
![Page 93: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/93.jpg)
93
Embedding images(contd.)
Attributes of <img> tag• align : An image can be aligned with the surrounding text
by using the align attribute • Syntax<img src=“url” width=“value in pixels” height=“value in pixels”
align=“positon, ie left,right,top bottom…” >• Images can be used as hyperlinks also.
<a href=“http://w3.ibm.com”> <img src=“logo.gif” width=“30 height=“40” ></a>
FaaDoOEngineers.com
![Page 94: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/94.jpg)
94
Example of an embedded image
<html><body><p>An image <img src=“home.gif"align="bottom" width="48" height="48"> in the text</p><p>An image <img src ="home.gif"align="middle" width="48" height="48">in the text</p> </body> </html>
FaaDoOEngineers.com
![Page 95: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/95.jpg)
95
HTML Table
• Table allows to organize and present data in an orderly and concise manner.
• Tabular structures were introduced with HTML 3.2.• A table can contains wide variety of information, such as headers,
anchors, lists, paragraphs, forms, images, preformatted text and even nested tables.
• HTML tables are composed of rows and columns.
FaaDoOEngineers.com
![Page 96: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/96.jpg)
96
Requirement Analysis
FaaDoOEngineers.com
![Page 97: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/97.jpg)
97
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
Code Snippet To Fulfill the Requirement
FaaDoOEngineers.com
![Page 98: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/98.jpg)
98
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For starting a table
FaaDoOEngineers.com
![Page 99: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/99.jpg)
99
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
It is an attribute of table tag to specify the thickness of the border of the table in pixels.
FaaDoOEngineers.com
![Page 100: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/100.jpg)
100
Table Border set to 1
FaaDoOEngineers.com
![Page 101: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/101.jpg)
101
If Table Border set to 5
FaaDoOEngineers.com
![Page 102: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/102.jpg)
102
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For starting a table
For ending a tableFaaDoOEngineers.com
![Page 103: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/103.jpg)
103
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For starting a table caption, It is like a title which resides outside the border of the table. It is an optional attribute.
FaaDoOEngineers.com
![Page 104: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/104.jpg)
104
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For ending a table caption
For starting a table caption, It is like a title which resides outside the border of the table. It is an optional attribute.
FaaDoOEngineers.com
![Page 105: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/105.jpg)
105
Table Caption
FaaDoOEngineers.com
![Page 106: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/106.jpg)
106
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For starting a table row
FaaDoOEngineers.com
![Page 107: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/107.jpg)
107
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For starting a table row
For ending a table row.FaaDoOEngineers.com
![Page 108: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/108.jpg)
108
Row 1Row 2
FaaDoOEngineers.com
![Page 109: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/109.jpg)
109
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For providing a table heading. By default the header cell will appear in bolder type and the default alignment is center.
FaaDoOEngineers.com
![Page 110: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/110.jpg)
110
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For providing a table heading. By default the header cell will appear in bolder type and the default alignment is center.
For ending a table heading.FaaDoOEngineers.com
![Page 111: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/111.jpg)
111
Table Heading
FaaDoOEngineers.com
![Page 112: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/112.jpg)
112
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For providing the table data. By default the alignment is left.
FaaDoOEngineers.com
![Page 113: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/113.jpg)
113
<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr>
<tr><td>SWG</td><td>Software Group</td></tr></table></body></html>
For providing the table data. By default the alignment is left.
For ending a table data tag.FaaDoOEngineers.com
![Page 114: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/114.jpg)
114
Table Data
FaaDoOEngineers.com
![Page 115: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/115.jpg)
115
Requirement Analysis
FaaDoOEngineers.com
![Page 116: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/116.jpg)
116
<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td> <td ROWSPAN="4"> Group 2</td><td>2a</td></tr>
<tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr><tr><td>1d</td><td>2d</td></tr></table>
Code Snippet To Fulfill the Requirement
FaaDoOEngineers.com
![Page 117: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/117.jpg)
117
<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td> <td ROWSPAN="4"> Group 2</td><td>2a</td></tr>
<tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr><tr><td>1d</td><td>2d</td></tr></table>
This attribute is used to span cell more than one row. In this case it will span the 1st column into four rows including the current row.
FaaDoOEngineers.com
![Page 118: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/118.jpg)
118
This cell is spanned to 4 rows
FaaDoOEngineers.com
![Page 119: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/119.jpg)
119
<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td> <td ROWSPAN="4"> Group 2</td><td>2a</td></tr>
<tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr><tr><td>1d</td><td>2d</td></tr></table>
The 3rd column is spanning more 4 rows including the current row..
FaaDoOEngineers.com
![Page 120: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/120.jpg)
120
This cell is spanned to 4 rows
FaaDoOEngineers.com
![Page 121: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/121.jpg)
121
<table border="1"><caption>ROWSPAN Example</caption>
Analyzing The Code
FaaDoOEngineers.com
![Page 122: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/122.jpg)
122 FaaDoOEngineers.com
![Page 123: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/123.jpg)
123
<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr>
Analyzing The Code
FaaDoOEngineers.com
![Page 124: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/124.jpg)
124 FaaDoOEngineers.com
![Page 125: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/125.jpg)
125
<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td> <td ROWSPAN="4"> Group 2</td><td>2a</td></tr>
Analyzing The Code
FaaDoOEngineers.com
![Page 126: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/126.jpg)
126 FaaDoOEngineers.com
![Page 127: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/127.jpg)
127
<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td> <td ROWSPAN="4"> Group 2</td><td>2a</td></tr>
Analyzing The Code
<tr><td>1b</td><td>2b</td></tr>
FaaDoOEngineers.com
![Page 128: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/128.jpg)
128 FaaDoOEngineers.com
![Page 129: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/129.jpg)
129
<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td> <td ROWSPAN="4"> Group 2</td><td>2a</td></tr>
Analyzing The Code
<tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr>
FaaDoOEngineers.com
![Page 130: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/130.jpg)
130 FaaDoOEngineers.com
![Page 131: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/131.jpg)
131
<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td> <td ROWSPAN="4"> Group 2</td><td>2a</td></tr>
Analyzing The Code
<tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr><tr><td>1d</td><td>2d</td></tr></table>
FaaDoOEngineers.com
![Page 132: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/132.jpg)
132 FaaDoOEngineers.com
![Page 133: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/133.jpg)
133
RequirementRequirement AnalysisRequirement Analysis
FaaDoOEngineers.com
![Page 134: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/134.jpg)
134
<table border="1"><caption>COLSPAN Example</caption><tr><th colspan="5"> Product Description</th></tr><tr><th> Product Code</th><th> Product Name</th><th colspan="2"> Price</th></tr><tr><td colspan="2"> </td><td>Rs.</td><td>Ps.</td></tr>
<tr>
<td>A001</td><td>AAA</td>
<td>150</td><td>00</td>
</tr>
<tr>
<td>B002</td><td>BBB</td>
<td>120</td><td>99</td>
</tr>
<tr>
<td>C002</td><td>CCC</td>
<td>250</td><td>00</td>
</tr>
</table>
Code Snippet To Fulfill the Requirement
FaaDoOEngineers.com
![Page 135: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/135.jpg)
135
<table border="1"><caption>COLSPAN Example</caption><tr><th colspan="5"> Product Description</th></tr><tr><th> Product Code</th><th> Product Name</th><th colspan="2"> Price</th></tr><tr><td colspan="2"> </td><td>Rs.</td><td>Ps.</td></tr>
<tr>
<td>A001</td><td>AAA</td>
<td>150</td><td>00</td>
</tr>
<tr>
<td>B002</td><td>BBB</td>
<td>120</td><td>99</td>
</tr>
<tr>
<td>C002</td><td>CCC</td>
<td>250</td><td>00</td>
</tr>
</table>
This attribute is used to span cell more than one column. In this case it will span the 1st column into five more nested columns.
FaaDoOEngineers.com
![Page 136: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/136.jpg)
136
This cell is spanned to 5 columns
FaaDoOEngineers.com
![Page 137: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/137.jpg)
137
<table border="1"><caption>COLSPAN Example</caption><tr><th colspan="5"> Product Description</th></tr><tr><th> Product Code</th><th> Product Name</th><th colspan="2"> Price</th></tr><tr><td colspan="2"> </td><td>Rs.</td><td>Ps.</td></tr>
<tr>
<td>A001</td><td>AAA</td>
<td>150</td><td>00</td>
</tr>
<tr>
<td>B002</td><td>BBB</td>
<td>120</td><td>99</td>
</tr>
<tr>
<td>C002</td><td>CCC</td>
<td>250</td><td>00</td>
</tr>
</table>
It will span the 3rd column into two more nested columns.
FaaDoOEngineers.com
![Page 138: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/138.jpg)
138
This cell is spanned to 2 columns
FaaDoOEngineers.com
![Page 139: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/139.jpg)
139
<table border="1"><caption>COLSPAN Example</caption><tr><th colspan="5"> Product Description</th></tr><tr><th> Product Code</th><th> Product Name</th><th colspan="2"> Price</th></tr><tr><td colspan="2"> </td><td>Rs.</td><td>Ps.</td></tr>
<tr>
<td>A001</td><td>AAA</td>
<td>150</td><td>00</td>
</tr>
<tr>
<td>B002</td><td>BBB</td>
<td>120</td><td>99</td>
</tr>
<tr>
<td>C002</td><td>CCC</td>
<td>250</td><td>00</td>
</tr>
</table>
It will span the 3rd row 1st column into two columns. In other words, it will merge the 1st two columns of the 3rd row.
FaaDoOEngineers.com
![Page 140: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/140.jpg)
140
This cell is spanned to 2 columns
FaaDoOEngineers.com
![Page 141: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/141.jpg)
141
Some More Attributes of Table tag
• Cellspacing - The CELLSPACING attribute creates a space, or border, of the specified number of pixels, between each cell.
• Cellpadding - The CELLPADDING attribute separates text of the cell from the cell border with a padding with the specified number of pixels.
• Width - specify the width of the table
FaaDoOEngineers.com
![Page 142: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/142.jpg)
142
USING CELLSPACING ATTRIBUTE
<html><body><table cellspacing=“25" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>
FaaDoOEngineers.com
![Page 143: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/143.jpg)
143
USING CELLSPACING ATTRIBUTE
<html><body><table cellspacing=“25" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>
FaaDoOEngineers.com
![Page 144: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/144.jpg)
144
Vertical Cell spacing
Horizontal Cell spacing
FaaDoOEngineers.com
![Page 145: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/145.jpg)
145
USING CELLPADDING ATTRIBUTE
<html><body><table cellpadding=“25" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>
FaaDoOEngineers.com
![Page 146: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/146.jpg)
146
USING CELLPADDING ATTRIBUTE
<html><body><table cellpadding=“25" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>
FaaDoOEngineers.com
![Page 147: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/147.jpg)
147
Vertical Cell paddingHorizontal Cell padding
FaaDoOEngineers.com
![Page 148: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/148.jpg)
148
USING WIDTH ATTRIBUTE
<html><body><table width=“80%" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>
FaaDoOEngineers.com
![Page 149: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/149.jpg)
149
USING WIDTH ATTRIBUTE
<html><body><table width=“80%" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>
FaaDoOEngineers.com
![Page 150: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/150.jpg)
150
Cell Width
FaaDoOEngineers.com
![Page 151: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/151.jpg)
151
if Cell Width = 20%
FaaDoOEngineers.com
![Page 152: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/152.jpg)
152
Table Alignment Related Attribute• HTML tables can be aligned on the page, and cell content can be
aligned within the cell.
This attribute use to align HORIZONTALLY is
ALIGNCENTER
LEFT
RIGHT
Attribute values
are
This attribute use to align VERTICALLY is
VALIGNMIDDLE
TOP
BOTTOM
Attribute values
are
The blinking attribute value is the default value for VALIGN.FaaDoOEngineers.com
![Page 153: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/153.jpg)
153
VALIGN=“top”
Table Alignment
Cell1 Cell2 Cell3
Cell4 Cell5 Cell6
Cell7 Cell8 Cell9
ALIGN=“left”
VALIGN=“middle”
VALIGN=“bottom”
ALIGN=“center” ALIGN=“right”
FaaDoOEngineers.com
![Page 154: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/154.jpg)
154
Web StyleSheets
FaaDoOEngineers.com
FaaDoO Engineers.com
![Page 155: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/155.jpg)
155
Cascading Style Sheet
• Web style sheets are a form of separation of presentation and content for web design .
• Style sheet can decide the presentation of web pages.
• Style sheet takes care of all the layout, fonts, colors and overall look of the site.
FaaDoOEngineers.com
![Page 156: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/156.jpg)
156
Cascading Style Sheet (contd..)
• Principal means of Styling a document using Cascading style sheets are:
Inline style Sheet
External style Sheet
Embedded style Sheet
FaaDoOEngineers.com
![Page 157: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/157.jpg)
157
Benefits of a Cascading Style Sheet
• Pages download faster.
• Page contains less code, and the pages are shorter and neater.
• The look of the site is kept consistent throughout all the pages that work off the same stylesheet.
• Updating the design and general site maintenance are made much easier.
FaaDoOEngineers.com
![Page 158: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/158.jpg)
158
Parts of a Cascading Style Sheet
• CSS syntax is made up of three parts:
Selector
Property
Value
HTML tag that you wish to change
The attribute that you wish to change
Each property can take a value
FaaDoOEngineers.com
![Page 159: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/159.jpg)
159
Inline Style Sheet
• Inline style sheets are applied by coding style properties and values inside the tags to which they apply.
• An inline style sheet can appear inside any tag to directly set its style. All that is required is to enclose the applicable style properties and values inside a quoted style attribute.
• Syntax
<tag style=“property:value [;property:value]…”>
FaaDoOEngineers.com
![Page 160: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/160.jpg)
160
Inline Style Sheet(contd.)
<html>
<body>
<pre>
<h1> Inline Style Sheet</h1>
<p style="font-size: 12pt; color: red">
This is line one
This is line two
This is line three
</p>
</body>
</html>
FaaDoOEngineers.com
![Page 161: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/161.jpg)
161
Embedded Style sheet
• Embedded style sheets are used when a unique style is required for a document.
• Embedded style are defined in the <head> tag section by using the <style> tag
• When a large number of style settings are used on a Web page, there is convenience in packaging the settings together in one place as an embedded style sheet, rather than having them scattered as inline style sheets throughout the document.
FaaDoOEngineers.com
![Page 162: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/162.jpg)
162
Syntax of Style sheet
selector {property: value}
Example
p {color: green}
If the value consist of more than one word the value has to be embedded within quotes.
p {font-family: “sans-serif”}
If more than one property needs to be defined then the properties need to be separated by semi colon.
p {font-family: “sans-serif” ; color: green}
FaaDoOEngineers.com
![Page 163: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/163.jpg)
163
Example of an Embedded Style sheet<html><head><style type="text/css">p {font-family:"sans-serif"; color: green}hr {color: red}body {color:blue; background-color:pink}</style></head><body><p>This is paragraph one</p><hr><p> This is paragraph two</p><hr>This line is not within paragraph tag</body></html>
FaaDoOEngineers.com
![Page 164: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/164.jpg)
164
External Style Sheet
• Internal style sheets are used when a unique style is required for a document.
• Internal style are defined in the <head> tag section by using the <style> tag
• The different selectors, their properties and values should be defined within the external style sheet.
• The external style sheet should be saved within a file, with an extension of .css
FaaDoOEngineers.com
![Page 165: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/165.jpg)
165
External Style sheet
Background is defined
Paragraph font color is
defined
Horizontal color is defined
Mystyle.css
Requires the background,
Paragraph and horizontal
Rule setting defined
In Mystyle.css
FirstPage.html
SecondPage.html
Requires the background,
Paragraph and horizontal
Rule setting defined
In Mystyle.css
Both the html files uses
<link rel="stylesheet" type="text/css" href=“Mystyle.css" />
FaaDoOEngineers.com
![Page 166: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/166.jpg)
166
Example of External style sheetbody {background-color: yellow}h1 {font-size: 36pt}p {margin-left: 50px; background:
pink; color:blue}hr {color: red}
Mystyle.css
<html><head><link rel="stylesheet" type="text/css"
href="Mystyle.css" /></head><body><h1> This header is 36 pt </h1><p> This paragraph has a left margin of
50 pixels<br>The font color is blue<br>The background color is pink
</p><hr></body></html>
MyPage.html
FaaDoOEngineers.com
![Page 167: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/167.jpg)
167
Multiple Style sheet
h3 { color: red; text-align: left; font-size: 8pt }
Mystyle.css
<html><head><link rel=“stylesheet” type=“text/css”
href=“Mystyle.css”><style type=“text/css”>h3 {font-size: 20pt}</style></head><body><h3> This is a header </h3>---more text----</body></html>
MyPage.html
What will be the Font size
Of <h3>
8pt or 20 pt??
FaaDoOEngineers.com
![Page 168: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/168.jpg)
168
Multiple Style sheet Continued
• If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet .
h3 { color: red;
text-align: left;
font-size: 8pt }
Mystyle.css
<html><head><link rel=“stylesheet” type=“text/css” href=“Mystyle.css”><style type=“text/css”>h3 {font-size: 20pt}</style></head><body><h3> This is a header </h3>---more text----</body></html>
MyPage.html
Color: Red
Text-align-left
Font-size- 20pt
Font Size will be Inherited
From the Internal Style sheet
FaaDoOEngineers.com
![Page 169: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/169.jpg)
169
Some common selectors and attributes
Selector propertyH1,H2,H3….. font-size,Font-family,font-style , font-weight
Color, marginP font-size,Font-family,font-style , font-weight
Color, Background-color,text-align, margin
HR color
body Background-color, font-size,Font-family,font-style , font-weight, margin
FaaDoOEngineers.com
![Page 170: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/170.jpg)
170
Class Selector
• With the class selector you can define different styles for the same type of HTML element.
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“Mystyle.css”>
</head>
<body>
<p class=“one”>This paragraph is Right aligned </p>
<p class=“two”>This paragraph is Left aligned</p>
</body>
</html>
MyPage.html
p.one {text-align: right; color: white;
background-color: black}
p.two {text-align: left; color: black;
background-color: Red}
Mystyle.css
FaaDoOEngineers.com
![Page 171: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/171.jpg)
171
Uses of <DIV> Tag
1. <DIV> tag is a container for other tags.
2. DIV elements are block elements and work behind the scenes grouping other tags together.
Some of the attributes of <DIV> tag are:-> id-> width-> height-> title-> style
<DIV> tag
FaaDoOEngineers.com
![Page 172: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/172.jpg)
172
Uses of <DIV> Tag
<div id="menu" align="right"><a href="">HOME</a> | <a href="">CONTACT</a> | <a href="">ABOUT</a> | <a href="">LINKS</a></div><div id="content" align="left" ><h5>Content Articles</h5><p>This paragraph would be your content paragraph with all of your readable material.</p><h5 >Content Article Number Two</h5><p>Here's another content article right here.</p></div>
Example
<DIV> tag
FaaDoOEngineers.com
![Page 173: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/173.jpg)
173
Uses of <DIV> TagUses of <DIV> Tag
Output
<DIV> tag
FaaDoOEngineers.com
![Page 174: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/174.jpg)
174
Using <span> in CSS
• SPAN is a inline tag.
• It is used to format small chunks of data within another element.
• Combining <span> tag with CSS allows us to create custom tags.
What is the
Utility of <span> in
HTML
FaaDoOEngineers.com
![Page 175: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/175.jpg)
175
Using <span> in CSS (contd.)
p { color: white ; background-color: black}
.example1 {color:blue ; background-color: yellow ;font-family: "sans-serif"}
.example2 {color:red ; background-color: white ;font-family: times}
Mystyle.css
<html><head><link rel="stylesheet" type="text/css" href="Mystyle.css" /></head><body><p >This is the first line of the
paragraph<br>This is the second line of the
paragraph<br><span class="example1">This is the
third line of the paragraph<br> </span>
<span class="example2">This is the fourth line of the paragraph<br> </span>
This is the fifth line of the paragraph</p></body></html>
MyPage.htmlFaaDoOEngineers.com
![Page 176: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/176.jpg)
176
Developing HTML Forms
FaaDoOEngineers.com
FaaDoO Engineers.com
![Page 177: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/177.jpg)
177
Form
• An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
• Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
FaaDoOEngineers.com
![Page 178: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/178.jpg)
178
Form (Contd.)
• A form is defined with the <form> tag.
FaaDoOEngineers.com
![Page 179: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/179.jpg)
179
Form Controls
• TextField: Are used to accept user input. It is a single line input control.
• CheckBox Checkboxes are used when you want the user to select one or more options
of a limited number of choices.• RadioButton Radio Buttons are used when you want the user to select one of a limited
number of choices.• Select Are used when you want users to choose options from a selectable lists.
• TextArea Are used to accept user input. TextArea allows entry of multiple lines.
FaaDoOEngineers.com
![Page 180: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/180.jpg)
180
Form Controls (Contd.)
• PushButton Each push button may have client side script associated with the
element's event attributes. When an event occurs (e.g., the user presses the button, releases it, etc.), the associated script is triggered.
• Submit ButtonWhen activated, a submit button submits a form. A form may contain
more than one submit button. • Reset ButtonWhen activated, a reset button resets all controls to their initial
values.
FaaDoOEngineers.com
![Page 181: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/181.jpg)
181
Form Controls (Contd)
Form Component Tag Usage Output
TextField <input> type name value <input type="text" name="t1" value="Paul">Checkbox <input> type name value <input type="checkbox" name="c1" value="v1">RadioButton <input> type name value <input type="radio" name="r1" value="v2">
<select> name<option> value
TextArea<textarea> row col name <textarea name="n1" row="5" col="20">
<input> type name value <input type="button" name="b1" value="Click">
<input type="submit" name="s1" value="Submit">
<input type="reset" value="Reset">
PushButton
Attribute
ComboBox <select name="s1"><option value="v1">Display item</option></select>
Paul
OSelect an item
Click
Submit
Reset
FaaDoOEngineers.com
![Page 182: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/182.jpg)
182
Form Controls using Attributes:
INPUT Attribute definitions• type = text|password|checkbox|radio|submit|reset|file|hidden|image|button This attribute specifies the ‘type of control’ to create. The default value for
this attribute is "text".
• name = cdata This attribute assigns the ‘control name’.
• value = cdata This attribute specifies the ‘initial value’ of the control. It is optional except
when the ‘type’ attribute has the value "radio" or "checkbox".
• size = cdata This attribute tells the initial width of the control. The width is given in
pixels except when ‘type’ attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.
FaaDoOEngineers.com
![Page 183: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/183.jpg)
183
Form Controls using Attributes:
INPUT Attribute definitions (Contd …)• maxlength = numberWhen the ‘type’ attribute has the value "text" or "password", this
attribute specifies the maximum number of characters the user may enter. This number may exceed the specified ‘size’, in which case the user should offer a scrolling mechanism. The default value for this attribute is an unlimited number.
• CheckedWhen the ‘type’ attribute has the value "radio" or "checkbox", this
boolean attribute specifies that the button is on. • src = uriWhen the ‘type’ attribute has the value "image", this attribute
specifies the location of the image to be used to decorate the graphical submit button.
FaaDoOEngineers.com
![Page 184: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/184.jpg)
184
Form Controls using Attributes:
SELECT Attribute definitions
• name = cdata
This attribute assigns the control name.
• size = number
If a SELECT element is presented as a scrolled list box, this attribute specifies the number of rows in the list that should be visible at the same time.
• Multiple If set, this boolean attribute allows multiple selections. If not
set, the SELECT element only permits single selections.
FaaDoOEngineers.com
![Page 185: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/185.jpg)
185
Pre – Selected Options:
• Zero or more choices may be pre-selected for the user. Users should determine which choices are pre-selected as follows: If no ‘OPTION’ element has the ‘selected’ attribute set, the initial
state has the first option selected.
If one ‘OPTION’ element has the ‘selected’ attribute set, it should be pre-selected.
If the ‘SELECT’ element has the ‘multiple’ attribute set and more than one ‘OPTION’ element has the ‘selected’ attribute set, they should all be pre-selected.
It is considered an error if more than one ‘OPTION’ element has the ‘selected’ attribute set and the ‘SELECT’ element does not have the ‘multiple’ attribute set.
FaaDoOEngineers.com
![Page 186: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/186.jpg)
186
Example of a Form<html><head><title>Form Example</title></head><body bgcolor=pink ><center><h3> Data Entry Form</h3><form><table><tr><td>Name</td><td> <input
type="text" name="t1"> </td></tr><tr><td>Gender</td><td> <input
type="radio" name=“r1” value=“m”>Male
<input type="radio" name=“r1” value=“f”>Female</td></tr>
<tr><td>Qualification</td><td><select name=“s”>
<option >Select</option><option value=“M.Sc”>M Sc</option><option value=“M.A.”>MA</option><option
value="other">other</option></select>
</td></tr><tr><td> <input type="submit"
value="submit"> </td><td> <input type="reset" value="reset">
</td></tr></table></center></form></body></html>
FaaDoOEngineers.com
![Page 187: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/187.jpg)
187
Output of the Form
FaaDoOEngineers.com
![Page 188: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/188.jpg)
188
Fieldset & Legend Tag
• The fieldset tag is used to group the form elements whilst the legendtag provides a label for the fieldset.
• The HTML legend tag is used for labelling the fieldset element.
• By using the fieldset tag and the legend tag, you can make yourforms much easier to understand for your users.
FaaDoOEngineers.com
![Page 189: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/189.jpg)
189
Output Required
FaaDoOEngineers.com
![Page 190: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/190.jpg)
190
Code Snippet
<html>
<body>
<fieldset style="text-align:right;">
<legend><b>Address Details</b></legend>
Favorite Address <input type="text" /><br/>
Least Favorite Address <input type="text" /><br/>
Current Address <input type="text" /><br/>
Your Next Address <input type="text" /><br/>
</fieldset>
<br>
<fieldset align="left">
<legend>Personal Info</legend>
Name : <input type="text">
Age : <input type="text">
Gender :
<input type="radio" name="r1">Male
<input type="radio" name="r1">Female
</fieldset>
</body>
</html>
FaaDoOEngineers.com
![Page 191: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/191.jpg)
191
<fieldset> tag is used to group the form elements
<html>
<body>
<fieldset style="text-align:right;">
<legend><b>Address Details</b></legend>
Favorite Address <input type="text" /><br/>
Least Favorite Address <input type="text" /><br/>
Current Address <input type="text" /><br/>
Your Next Address <input type="text" /><br/>
</fieldset>
<br>
<fieldset align="left">
<legend>Personal Info</legend>
Name : <input type="text">
Age : <input type="text">
Gender :
<input type="radio" name="r1">Male
<input type="radio" name="r1">Female
</fieldset>
</body>
</html>
FaaDoOEngineers.com
![Page 192: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/192.jpg)
192
<legend> tag is used give a suitable label to the group.
<html>
<body>
<fieldset style="text-align:right;">
<legend><b>Address Details</b></legend>
Favorite Address <input type="text" /><br/>
Least Favorite Address <input type="text" /><br/>
Current Address <input type="text" /><br/>
Your Next Address <input type="text" /><br/>
</fieldset>
<br>
<fieldset align="left">
<legend>Personal Info</legend>
Name : <input type="text">
Age : <input type="text">
Gender :
<input type="radio" name="r1">Male
<input type="radio" name="r1">Female
</fieldset>
</body>
</html>
FaaDoOEngineers.com
![Page 193: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/193.jpg)
193
Given a Label using legend tag
Created groups using fieldset tag
FaaDoOEngineers.com
![Page 194: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/194.jpg)
194
Summary• HTML is used for publishing web page.• A tag is a reference in an HTML document which describes the style and
structure of the document.• <TABLE> with <TR>,<TH>,<TD> tags are used to construct a tabular
structure in HTML.• To create a List of items in HTML, tags used are <OL>and <UL>.• Tags that separate from one line to others are <P>, <BR>, <HR>.• It is used to include preformatted text into your HTML document. • <BLOCKQUOTE> tag is used to include indented text in a document.• The purpose of Logical Character Style tags is to convey the basic semantic
meaning of a piece of text rather than the absolute appearance.• Physical Character Style tags is used to give your text a different look but
exacting look.• <Font> tag is used to change the font size, color and face in a document.
FaaDoOEngineers.com
![Page 195: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/195.jpg)
195
Summary (Contd.)
• Special characters are those that has a special meaning in HTML and those are not found on English keyboards.
• HTML uses the <a> (anchor) tag to create a link to another document.• In Html images are defined by using the <img> tag• The <img> tag is a open tag ( does not have a </img>)• Web style sheets are a form of separation of presentation and content
for web design .• CSS syntax is made up of three parts: Selector, property and value• Internal style sheets are used when a unique style is required for a
document.• Internal style are defined in the <head> tag section by using the <style>
tag
FaaDoOEngineers.com
![Page 196: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/196.jpg)
196
Summary (Contd.)
• Internal style sheets are used when a unique style is required for a document.
• Internal style are defined in the <head> tag section by using the <style> tag
• With the class selector you can define different styles for the same type of HTML element
• <Span> is a inline tag.
• Span is used to format small chunks of data within another element.An HTML form is a section of a document containing normal content, markup, special elements called controls.
• Some of the common controls are checkboxes, radio buttons, Textfields, etc.
• Fieldset & Legend tags are used for grouping form elements and giving a suitable name to the group respectively.
FaaDoOEngineers.com
![Page 197: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/197.jpg)
197
Test Your Understanding
1. Select the correct option for making a hyperlink?
a. <a href="http://www.w3schools.com">W3Schools</a>
b. <a url="http://www.w3schools.com">W3Schools.com</a>
c. <a>http://www.w3schools.com</a>
d. <a name="http://www.w3schools.com">W3Schools.com</a>
2. Style Sheet can decide presentation of a web page
a. false
b. true
FaaDoOEngineers.com
![Page 198: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/198.jpg)
198
Test Your Understanding (Contd.)
3. The <style> tag should be embedded within:
a. <body>
b. <form>
c. <head>
d. <img>
4. With the _________selector you can define different styles for the same type of HTML element.
a. Form
b. Button
c. Span
d. class
FaaDoOEngineers.com
![Page 199: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/199.jpg)
199
Test Your Understanding (Contd.)
5. The ___________ attribute of table tag separates text from the cell border
a. CELLPADDING
b. CELLSPACING
c. BORDERSPACING
d. TABLESPACING
6. What is the default font size in a web page.
a. 1
b. 2
c. 3
d. 5
FaaDoOEngineers.com
![Page 200: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/200.jpg)
200
a. <TR>
b. <SPAN>
c. <STRONG>
d. <FIELDSET>
e. <HR>
iii. Creates a horizontal rule.
iv. Creates a new row in a table
v. Used to format small chunks of data.
i. Emphasizes the text enclosed within it.
ii. Used to group the form elements.
Match Group A with B
Group A Group B
Test Your Understanding (Contd.)Test Your Understanding (Contd.)
FaaDoOEngineers.com
![Page 201: html](https://reader031.vdocument.in/reader031/viewer/2022020217/54518969b1af9f553f8b46da/html5/thumbnails/201.jpg)
201
References
• http://www.pierobon.org/iis/url.htm
• http://w3schools.com/html
• http://www.ology.org/tilt/cgh/ - Things to consider while developing web page using HTML.
• http://www.tizag.com/htmlT
• http://www.1stsitefree.com
• http://www.quackit.com/html
FaaDoO Engineers.comFaaDoOEngineers.com