Submit Search
Upload
Web tech html css js
•
Download as PPT, PDF
•
16 likes
•
510 views
C
Chetan Kothari
Follow
Introduction to web technologies basic like html , css and java script
Read less
Read more
Technology
Report
Share
Report
Share
1 of 131
Download now
Recommended
Html
Html
Lincoln School
HyperText Markup Language - HTML
HyperText Markup Language - HTML
Sun Technlogies
Learn HTML Step By Step
Learn HTML Step By Step
Satish Chandra
HTML by Telerik Akademy
HTML by Telerik Akademy
Ognyan Penkov
Html basics
Html basics
mcatahir947
HTML Basics by software development company india
HTML Basics by software development company india
iFour Institute - Sustainable Learning
HTML
HTML
CONNECTINGTO
Class 10th FIT Practical File(HTML)
Class 10th FIT Practical File(HTML)
Anushka Rai
Recommended
Html
Html
Lincoln School
HyperText Markup Language - HTML
HyperText Markup Language - HTML
Sun Technlogies
Learn HTML Step By Step
Learn HTML Step By Step
Satish Chandra
HTML by Telerik Akademy
HTML by Telerik Akademy
Ognyan Penkov
Html basics
Html basics
mcatahir947
HTML Basics by software development company india
HTML Basics by software development company india
iFour Institute - Sustainable Learning
HTML
HTML
CONNECTINGTO
Class 10th FIT Practical File(HTML)
Class 10th FIT Practical File(HTML)
Anushka Rai
HTML Fundamentals
HTML Fundamentals
BG Java EE Course
HTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
HTML practical guide for O/L exam
HTML practical guide for O/L exam
Anne Perera
Html coding
Html coding
Briana VanBuskirk
Introduction to HTML
Introduction to HTML
MayaLisa
Introduction to HTML
Introduction to HTML
Professional Guru
Html basics
Html basics
Vjay Vijju
Html example
Html example
Dorothy Dominic
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
actanimation
WWW and HTTP
WWW and HTTP
BG Java EE Course
Html basic
Html basic
Viccky Khairnar
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
Beqa Chacha
Learning HTML
Learning HTML
Md. Sirajus Salayhin
HTML practical file
HTML practical file
Kuldeep Sharma
Html Tutorial
Html Tutorial
DenMas Hengky
Html - Tutorial
Html - Tutorial
adelaticleanu
Learn html Basics
Learn html Basics
McSoftsis
Basic HTML
Basic HTML
Sayan De
Html
Html
Abhishek Kesharwani
Html ppt
Html ppt
Ruchi Kumari
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Sun Technlogies
Web forms and html lecture Number 2
Web forms and html lecture Number 2
Mudasir Syed
More Related Content
What's hot
HTML Fundamentals
HTML Fundamentals
BG Java EE Course
HTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
HTML practical guide for O/L exam
HTML practical guide for O/L exam
Anne Perera
Html coding
Html coding
Briana VanBuskirk
Introduction to HTML
Introduction to HTML
MayaLisa
Introduction to HTML
Introduction to HTML
Professional Guru
Html basics
Html basics
Vjay Vijju
Html example
Html example
Dorothy Dominic
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
actanimation
WWW and HTTP
WWW and HTTP
BG Java EE Course
Html basic
Html basic
Viccky Khairnar
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
Beqa Chacha
Learning HTML
Learning HTML
Md. Sirajus Salayhin
HTML practical file
HTML practical file
Kuldeep Sharma
Html Tutorial
Html Tutorial
DenMas Hengky
Html - Tutorial
Html - Tutorial
adelaticleanu
Learn html Basics
Learn html Basics
McSoftsis
Basic HTML
Basic HTML
Sayan De
Html
Html
Abhishek Kesharwani
Html ppt
Html ppt
Ruchi Kumari
What's hot
(20)
HTML Fundamentals
HTML Fundamentals
HTML (Web) basics for a beginner
HTML (Web) basics for a beginner
HTML practical guide for O/L exam
HTML practical guide for O/L exam
Html coding
Html coding
Introduction to HTML
Introduction to HTML
Introduction to HTML
Introduction to HTML
Html basics
Html basics
Html example
Html example
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
WWW and HTTP
WWW and HTTP
Html basic
Html basic
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
Learning HTML
Learning HTML
HTML practical file
HTML practical file
Html Tutorial
Html Tutorial
Html - Tutorial
Html - Tutorial
Learn html Basics
Learn html Basics
Basic HTML
Basic HTML
Html
Html
Html ppt
Html ppt
Similar to Web tech html css js
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Sun Technlogies
Web forms and html lecture Number 2
Web forms and html lecture Number 2
Mudasir Syed
Additional HTML
Additional HTML
Doeun KOCH
Html
Html
Trinity Dwarka
HTML- Hyper Text Markup Language
HTML- Hyper Text Markup Language
Trinity Dwarka
Html css java script basics All about you need
Html css java script basics All about you need
Dipen Parmar
Front end full stack development module 1pptx
Front end full stack development module 1pptx
MaruthiPrasad96
Html
Html
B. Randhir Prasad Yadav
02 HTML-01.pdf
02 HTML-01.pdf
EshaYasir1
20150211 seo in drupal presentation
20150211 seo in drupal presentation
Dagmar Muth
Html presentation
Html presentation
Jordan Dichev
IRJET- Training and Placement Database Management System
IRJET- Training and Placement Database Management System
IRJET Journal
Basics of html for web development by software outsourcing company india
Basics of html for web development by software outsourcing company india
Jignesh Aakoliya
Html week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandour
Osama Ghandour Geris
Ng init | EPI Sousse
Ng init | EPI Sousse
Hamdi Hmidi
HTML Repurposing Content.pptx
HTML Repurposing Content.pptx
Ayanda Zwane
4. html css-java script-basics
4. html css-java script-basics
Nikita Garg
4. html css-java script-basics
4. html css-java script-basics
xu fag
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
Aiman Hud
4. html css-java script-basics
4. html css-java script-basics
Minea Chem
Similar to Web tech html css js
(20)
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Web forms and html lecture Number 2
Web forms and html lecture Number 2
Additional HTML
Additional HTML
Html
Html
HTML- Hyper Text Markup Language
HTML- Hyper Text Markup Language
Html css java script basics All about you need
Html css java script basics All about you need
Front end full stack development module 1pptx
Front end full stack development module 1pptx
Html
Html
02 HTML-01.pdf
02 HTML-01.pdf
20150211 seo in drupal presentation
20150211 seo in drupal presentation
Html presentation
Html presentation
IRJET- Training and Placement Database Management System
IRJET- Training and Placement Database Management System
Basics of html for web development by software outsourcing company india
Basics of html for web development by software outsourcing company india
Html week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandour
Ng init | EPI Sousse
Ng init | EPI Sousse
HTML Repurposing Content.pptx
HTML Repurposing Content.pptx
4. html css-java script-basics
4. html css-java script-basics
4. html css-java script-basics
4. html css-java script-basics
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
4. html css-java script-basics
4. html css-java script-basics
Recently uploaded
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
Softradix Technologies
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
HostedbyConfluent
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
XfilesPro
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Mark Billinghurst
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Patryk Bandurski
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Paola De la Torre
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
OnBoard
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
carlostorres15106
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Recently uploaded
(20)
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
Web tech html css js
1.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor Web Technology Unit -1
2.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 2 • Overview of Internet and web • HTML Tags, Forms & Frames • Introduction to Java Script and • Cascading Style Sheets • DHTML • Using various Web Design Tools like Dream Weaver Learning Objective
3.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 3 Table of Contents 1. Introduction to HTML How the Web Works? What is a Web Page? My First HTML Page Basic Tags: Hyperlinks, Images, Formatting Headings and Paragraphs 1. HTML in Details 3
4.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 4 Table of Contents (2) 2. HTML in Details The <body> Section Text Styling and Formatting Tags Hyperlinks: <a>, Hyperlinks and Sections Images: <img> Lists: <ol>, <ul> and <dl> • The <div> and <span> elements • HTML Tables • HTML Forms 4
5.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 5 How the Web Works? • WWW use classical client / server architecture HTTP is text-based request-response protocol 55 Client running aClient running a Web BrowserWeb Browser Server runningServer running Web ServerWeb Server Software (IIS,Software (IIS, Apache, etc.)Apache, etc.) Server responseServer response HTTPHTTP HTTPHTTP
6.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 6 What is a Web Page? • Web pages are text files containing HTML • HTML – Hyper Text Markup Language A notation for describing document structure (semantic markup) formatting (presentation markup) Looks (looked?) like: A Microsoft Word document • The markup tags provide information about the page content structure 6
7.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 7 Creating HTML Pages • An HTML file must have an .htm or .html file extension • HTML files can be created with text editors: NotePad, NotePad ++. • Or HTML editors (WYSIWYG Editors): Microsoft FrontPage Macromedia Dreamweaver Netscape Composer Microsoft Word Visual Studio 7
8.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 8 HTML BasicsHTML Basics Text, Images, Tables, FormsText, Images, Tables, Forms
9.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 9 HTML Structure • HTML is comprised of “tags” Begins with <html> and ends with </html> • Elements (tags) are nested one inside another: • Tags have attributes: • HTML describes structure using two main sections: <head> and <body> 9 <html> <head></head> <body></body> </html><html> <head></head> <body></body> </html> <img src="logo.jpg" alt="logo" /><img src="logo.jpg" alt="logo" />
10.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 10 First HTML Page 10 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>My First HTML Page</title><title>My First HTML Page</title> </head></head> <body><body> <p>This is some text...</p><p>This is some text...</p> </body></body> </html></html> test.htmltest.html
11.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 11 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>My First HTML Page</title><title>My First HTML Page</title> </head></head> <body><body> <p>This is some text...</p><p>This is some text...</p> </body></body> </html></html> First HTML Page: Tags 11 OpeningOpening tagtag ClosingClosing tagtag An HTML element consists of an opening tag, a closing tag and the content inside.
12.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 12 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>My First HTML Page</title><title>My First HTML Page</title> </head></head> <body><body> <p>This is some text...</p><p>This is some text...</p> </body></body> </html></html> First HTML Page: Header 12 HTMLHTML headerheader
13.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 13 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>My First HTML Page</title><title>My First HTML Page</title> </head></head> <body><body> <p>This is some text...</p><p>This is some text...</p> </body></body> </html></html> First HTML Page: Body 13 HTMLHTML bodybody
14.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 14 Some Simple Tags • Hyperlink Tags • Image Tags • Text formatting tags 14 <a href=“http://www.bvicam.in”<a href=“http://www.bvicam.in” title=“BVICAM”>Link to BVICAM Web site</a>title=“BVICAM”>Link to BVICAM Web site</a> <img src="logo.gif" alt="logo" /><img src="logo.gif" alt="logo" /> This text is <em>emphasized.</em>This text is <em>emphasized.</em> <br />new line<br /><br />new line<br /> This one is <strong>more emphasized.</strong>This one is <strong>more emphasized.</strong>
15.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 15 Some Simple Tags – Example 15 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>Simple Tags Demo</title><title>Simple Tags Demo</title> </head></head> <body><body> <a href=“http://www.bvicam.in”<a href=“http://www.bvicam.in” title=“BVICAM”>Link to BVICAM Web site</a>title=“BVICAM”>Link to BVICAM Web site</a> <br /><br /> <img src="logo.gif" alt="logo" /><img src="logo.gif" alt="logo" /> <br /><br /> <strong>Bold</strong> and <em>italic</em> text.<strong>Bold</strong> and <em>italic</em> text. </body></body> </html></html> some-tags.htmlsome-tags.html
16.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 16 Some Simple Tags – Example (2) 16 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>Simple Tags Demo</title><title>Simple Tags Demo</title> </head></head> <body><body> <a href=“http://www.bvicam.in”<a href=“http://www.bvicam.in” title=“BVICAM”>Link to BVICAM Web site</a>title=“BVICAM”>Link to BVICAM Web site</a> <br /><br /> <img src="logo.gif" alt="logo" /><img src="logo.gif" alt="logo" /> <br /><br /> <strong>Bold</strong> and <em>italic</em> text.<strong>Bold</strong> and <em>italic</em> text. </body></body> </html></html> some-tags.htmlsome-tags.html
17.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 17 Tags Attributes • Tags can have attributes Attributes specify properties and behavior Example: Few attributes can apply to every element: id, style, class, title The id is unique in the document Content of title attribute is displayed as hint when the element is hovered with the mouse Some elements have obligatory attributes 17 <img src="logo.gif" alt="logo" /><img src="logo.gif" alt="logo" /> AttributeAttribute altalt with valuewith value ""logologo""
18.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 18 Headings and Paragraphs • Heading Tags (h1 – h6) • Paragraph Tags • Sections: div 18 <p>This is my first paragraph</p><p>This is my first paragraph</p> <p>This is my second paragraph</p><p>This is my second paragraph</p> <h1>Heading 1</h1><h1>Heading 1</h1> <h2>Sub heading 2</h2><h2>Sub heading 2</h2> <h3>Sub heading 3</h3><h3>Sub heading 3</h3> <div style="background: skyblue;"><div style="background: skyblue;"> This is a div</div>This is a div</div>
19.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 19 Headings and Paragraphs – Example 19 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><title>Headings and paragraphs</title></head><head><title>Headings and paragraphs</title></head> <body><body> <h1>Heading 1</h1><h1>Heading 1</h1> <h2>Sub heading 2</h2><h2>Sub heading 2</h2> <h3>Sub heading 3</h3><h3>Sub heading 3</h3> <p>This is my first paragraph</p><p>This is my first paragraph</p> <p>This is my second paragraph</p><p>This is my second paragraph</p> <div style="background:skyblue"><div style="background:skyblue"> This is a div</div>This is a div</div> </body></body> </html></html> headings.htmlheadings.html
20.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 20 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><title>Headings and paragraphs</title></head><head><title>Headings and paragraphs</title></head> <body><body> <h1>Heading 1</h1><h1>Heading 1</h1> <h2>Sub heading 2</h2><h2>Sub heading 2</h2> <h3>Sub heading 3</h3><h3>Sub heading 3</h3> <p>This is my first paragraph</p><p>This is my first paragraph</p> <p>This is my second paragraph</p><p>This is my second paragraph</p> <div style="background:skyblue"><div style="background:skyblue"> This is a div</div>This is a div</div> </body></body> </html></html> Headings and Paragraphs – Example (2) 20 headings.htmlheadings.html
21.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 21 Introduction to HTMLIntroduction to HTML HTML Document Structure in DepthHTML Document Structure in Depth
22.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 22 Preface • It is important to have the correct vision and attitude towards HTML HTML is only about structure, not appearance Browsers tolerate invalid HTML code and parse errors – you should not. 22
23.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 23 The <!DOCTYPE> Declaration • HTML documents must start with a document type definition (DTD) It tells web browsers what type is the served code Possible versions: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5 • Example: See http://w3.org/QA/2002/04/valid-dtd-list.html for a list of possible doctypes 23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
24.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 24 HTML vs. XHTML • XHTML is more strict than HTML Tags and attribute names must be in lowercase All tags must be closed (<br/>, <img/>) while HTML allows <br> and <img> and implies missing closing tags (<p>par1 <p>par2) XHTML allows only one root <html> element (HTML allows more than one) 24
25.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 25 XHTML vs. HTML (2) • Many element attributes are deprecated in XHTML, most are moved to CSS • Attribute minimization is forbidden, e.g. • Note: Web browsers load XHTML faster than HTML and valid code faster than invalid! 25 <input type="checkbox" checked><input type="checkbox" checked> <input type="checkbox" checked="checked" /><input type="checkbox" checked="checked" />
26.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 26 The <head> Section • Contains information that doesn’t show directly on the viewable page • Starts after the <!doctype> declaration • Begins with <head> and ends with </head> • Contains mandatory single <title> tag • Can contain some other tags, e.g. <meta> <script> <style> <!–- comments --> 26
27.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 27 <head> Section: <title> tag • Title should be placed between <head> and </head> tags • Used to specify a title in the window title bar • Many Search engines and people rely on titles 27 <title>Telerik Academy – Winter Season 2009/2010<title>Telerik Academy – Winter Season 2009/2010 </title></title>
28.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 28 <head> Section: <script> • The <script> element is used to embed scripts into an HTML document Script are executed in the client's Web browser Scripts can live in the <head> and in the <body> sections • Supported client-side scripting languages: JavaScript VBScript 28
29.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 29 The <script> Tag – Example 29 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>JavaScript Example</title><title>JavaScript Example</title> <script type="text/javascript"><script type="text/javascript"> function sayHello() {function sayHello() { document.write("<p>Hello World!</p>");document.write("<p>Hello World!</p>"); }} </script></script> </head></head> <body><body> <script type=<script type= "text/javascript">"text/javascript"> sayHello();sayHello(); </script></script> </body></body> </html></html> scripts-example.htmlscripts-example.html
30.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 30 <head> Section: <style> • The <style> element embeds formatting information (CSS styles) into an HTML page 30 <html><html> <head><head> <style type="text/css"><style type="text/css"> p { font-size: 12pt; line-height: 12pt; }p { font-size: 12pt; line-height: 12pt; } p:first-letter { font-size: 200%; }p:first-letter { font-size: 200%; } span { text-transform: uppercase; }span { text-transform: uppercase; } </style></style> </head></head> <body><body> <p>Styles demo.<br /><p>Styles demo.<br /> <span>Test uppercase</span>.<span>Test uppercase</span>. </p></p> </body></body> </html></html> style-example.htmlstyle-example.html
31.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 31 Comments: <!-- --> Tag • Comments can exist anywhere between the <html></html> tags • Comments start with <!-- and end with --> 31 <!–- Telerik Logo (a JPG file) --><!–- Telerik Logo (a JPG file) --> <img src="logo.jpg" alt=“Telerik Logo"><img src="logo.jpg" alt=“Telerik Logo"> <!–- Hyperlink to the web site --><!–- Hyperlink to the web site --> <a href="http://telerik.com/">Telerik</a><a href="http://telerik.com/">Telerik</a> <!–- Show the news table --><!–- Show the news table --> <table class="newstable"><table class="newstable"> ......
32.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 32 <body> Section: Introduction • The <body> section describes the viewable portion of the page • Starts after the <head> </head> section • Begins with <body> and ends with </body> 32 <html><html> <head><title>Test page</title></head><head><title>Test page</title></head> <body><body> <!-- This is the Web page body --><!-- This is the Web page body --> </body></body> </html></html>
33.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 33 Text FormattingText Formatting • Text formatting tags modify the text between the opening tag and the closing tag Ex. <b>Hello</b> makes “Hello” bold 33
34.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 34 Text Formatting – Example 34 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><html> <head><head> <title>Page Title</title><title>Page Title</title> </head></head> <body><body> <h1>Notice</h1><h1>Notice</h1> <p>This is a <em>sample</em> Web page.</p><p>This is a <em>sample</em> Web page.</p> <p><pre>Next paragraph:<p><pre>Next paragraph: preformatted.</pre></p>preformatted.</pre></p> <h2>More Info</h2><h2>More Info</h2> <p>Specifically, we’re using XHMTL 1.0 transitional.<br /><p>Specifically, we’re using XHMTL 1.0 transitional.<br /> Next line.</p>Next line.</p> </body></body> </html></html> text-formatting.htmltext-formatting.html
35.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 35 Text Formatting – Example (2) 35 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><html> <head><head> <title>Page Title</title><title>Page Title</title> </head></head> <body><body> <h1>Notice</h1><h1>Notice</h1> <p>This is a <em>sample</em> Web page.</p><p>This is a <em>sample</em> Web page.</p> <p><pre>Next paragraph:<p><pre>Next paragraph: preformatted.</pre></p>preformatted.</pre></p> <h2>More Info</h2><h2>More Info</h2> <p>Specifically, we’re using XHMTL 1.0 transitional.<br /><p>Specifically, we’re using XHMTL 1.0 transitional.<br /> Next line.</p>Next line.</p> </body></body> </html></html> text-formatting.htmltext-formatting.html
36.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 36 Hyperlinks: <a> Tag • Link to a document called form.html on the same server in the same directory: • Link to a document called parent.html on the same server in the parent directory: • Link to a document called cat.html on the same server in the subdirectory stuff: 36 <a href="form.html">Fill Our Form</a><a href="form.html">Fill Our Form</a> <a href="../parent.html">Parent</a><a href="../parent.html">Parent</a> <a href="stuff/cat.html">Catalog</a><a href="stuff/cat.html">Catalog</a>
37.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 37 Hyperlinks: <a> Tag (2) • Link to an external Web site: Always use a full URL, including "http://", not just "www.somesite.com" Using the target="_blank" attribute opens the link in a new window 37 <a href="http://www.devbg.org" target="_blank">BASD</a><a href="http://www.devbg.org" target="_blank">BASD</a>
38.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 38 Hyperlinks: <a> Tag (3) • Link to a document called apply-now.html On the same server, in same directory Using an image as a link button: 38 <a href="apply-now.html"><img<a href="apply-now.html"><img src="apply-now-button.jpg" /></a>src="apply-now-button.jpg" /></a>
39.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 39 Hyperlinks and Sections • Link to another location in the same document: • Link to a specific location in another document: 39 <a href="#section1">Go to Introduction</a><a href="#section1">Go to Introduction</a> ...... <h2 id="section1">Introduction</h2><h2 id="section1">Introduction</h2> <a href="chapter3.html#section3.1.1">Go to Section<a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a>3.1.1</a> <!–- In chapter3.html --><!–- In chapter3.html --> ...... <div id="section3.1.1"><div id="section3.1.1"> <h3>3.1.1. Technical Background</h3><h3>3.1.1. Technical Background</h3> </div></div>
40.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 40 Inserting an image withInserting an image with <img><img> tag:tag: Image attributes:Image attributes: Example:Example: Images:Images: <img><img> tagtag srcsrc Location of image fileLocation of image file (relative or absolute)(relative or absolute) altalt Substitute text for displaySubstitute text for display (e.g. in text mode)(e.g. in text mode) heightheight Number of pixels of the heightNumber of pixels of the height widthwidth Number of pixels of the widthNumber of pixels of the width borderborder Size of border, 0 for no borderSize of border, 0 for no border <img src="/img/basd-logo.png"><img src="/img/basd-logo.png"> <img src="./php.png" alt="PHP Logo" /><img src="./php.png" alt="PHP Logo" /> 40
41.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 41 Miscellaneous Tags • <hr />: Draws a horizontal rule (line): • <center></center>: Deprecated! • <font></font>: Deprecated! 41 <hr size="5" width="70%" /><hr size="5" width="70%" /> <center>Hello World!</center><center>Hello World!</center> <font size="3" color="blue">Font3</font><font size="3" color="blue">Font3</font> <font size="+4" color="blue">Font+4</font><font size="+4" color="blue">Font+4</font>
42.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 42 Miscellaneous Tags – Example 42 <html><html> <head><head> <title>Miscellaneous Tags Example</title><title>Miscellaneous Tags Example</title> </head></head> <body><body> <hr size="5" width="70%" /><hr size="5" width="70%" /> <center>Hello World!</center><center>Hello World!</center> <font size="3" color="blue">Font3</font><font size="3" color="blue">Font3</font> <font size="+4" color="blue">Font+4</font><font size="+4" color="blue">Font+4</font> </body></body> </html></html> misc.htmlmisc.html
43.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 43 a. Apple b. Orange c. Grapefruit Ordered Lists: <ol> Tag • Create an OOrdered LList using <ol></ol>: • Attribute values for type are 1, A, a, I, or i 43 1. Apple 2. Orange 3. Grapefruit A. Apple B. Orange C. Grapefruit I. Apple II. Orange III. Grapefruit i. Apple ii. Orange iii. Grapefruit <ol type="1"><ol type="1"> <li>Apple</li><li>Apple</li> <li>Orange</li><li>Orange</li> <li>Grapefruit</li><li>Grapefruit</li> </ol></ol>
44.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 44 Unordered Lists: <ul> Tag • Create an UUnordered LList using <ul></ul>: • Attribute values for type are: disc, circle or square 44 • Apple • Orange • Pear o Apple o Orange o Pear Apple Orange Pear <ul type="disk"><ul type="disk"> <li>Apple</li><li>Apple</li> <li>Orange</li><li>Orange</li> <li>Grapefruit</li><li>Grapefruit</li> </ul></ul>
45.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 45 Definition lists: <dl> tag • Create definition lists using <dl> Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag Renders without bullets Definition is indented 45 <dl><dl> <dt>HTML</dt><dt>HTML</dt> <dd>A markup language …</dd><dd>A markup language …</dd> <dt>CSS</dt><dt>CSS</dt> <dd>Language used to …</dd><dd>Language used to …</dd> </dl></dl>
46.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 46 Lists – Example 46 <ol type="1"><ol type="1"> <li>Apple</li><li>Apple</li> <li>Orange</li><li>Orange</li> <li>Grapefruit</li><li>Grapefruit</li> </ol></ol> <ul type="disc"><ul type="disc"> <li>Apple</li><li>Apple</li> <li>Orange</li><li>Orange</li> <li>Grapefruit</li><li>Grapefruit</li> </ul></ul> <dl><dl> <dt>HTML</dt><dt>HTML</dt> <dd>A markup lang…</dd><dd>A markup lang…</dd> </dl></dl> lists.htmllists.html
47.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 47 HTML Special CharactersHTML Special Characters ££££British PoundBritish Pound €€€€EuroEuro """"Quotation MarkQuotation Mark ¥¥¥¥Japanese YenJapanese Yen ————Em DashEm Dash Non-breaking SpaceNon-breaking Space &&&&AmpersandAmpersand >>>>Greater ThanGreater Than <<<<Less ThanLess Than ™™™™Trademark SignTrademark Sign ®®®®Registered Trademark SignRegistered Trademark Sign ©©©©Copyright SignCopyright Sign SymbolSymbolHTML EntityHTML EntitySymbol NameSymbol Name 47
48.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 48 Special Characters – Example 48 <p>[>> Welcome<p>[>> Welcome <<]</p> <<]</p> <p>►I have following cards:<p>►I have following cards: A♣, K♦ and 9♥.</p>A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫<p>►I prefer hard rock ♫ music ♫</p>music ♫</p> <p>© 2006 by Svetlin Nakov & his<p>© 2006 by Svetlin Nakov & his team</p>team</p> <p>Telerik Academy™</p><p>Telerik Academy™</p> special-chars.htmlspecial-chars.html
49.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 49 Special Chars – Example (2) 49 <p>[>> Welcome<p>[>> Welcome <<]</p> <<]</p> <p>►I have following cards:<p>►I have following cards: A♣, K♦ and 9♥.</p>A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫<p>►I prefer hard rock ♫ music ♫</p>music ♫</p> <p>© 2006 by Svetlin Nakov & his<p>© 2006 by Svetlin Nakov & his team</p>team</p> <p>Telerik Academy™</p><p>Telerik Academy™</p> special-chars.htmlspecial-chars.html
50.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 50 UsingUsing <DIV><DIV> andand <SPAN><SPAN> Block and Inline ElementsBlock and Inline Elements
51.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 51 Block and Inline Elements • Block elements add a line break before and after them <div> is a block element Other block elements are <table>, <hr>, headings, lists, <p> and etc. • Inline elements don’t break the text before and after them <span> is an inline element Most HTML elements are inline, e.g. <a> 51
52.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 52 The <div> Tag • <div> creates logical divisions within a page • Block style element • Used with CSS • Example: 52 <div style="font-size:24px; color:red">DIV<div style="font-size:24px; color:red">DIV example</div>example</div> <p>This one is <span style="color:red; font-<p>This one is <span style="color:red; font- weight:bold">only a test</span>.</p>weight:bold">only a test</span>.</p> div-and-span.htmldiv-and-span.html
53.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 53 The <span> Tag • Inline style element • Useful for modifying a specific portion of text Don't create a separate area (paragraph) in the document • Very useful with CSS 53 <p>This one is <span style="color:red; font-<p>This one is <span style="color:red; font- weight:bold">only a test</span>.</p>weight:bold">only a test</span>.</p> <p>This one is another <span style="font-size:32px;<p>This one is another <span style="font-size:32px; font-weight:bold">TEST</span>.</p>font-weight:bold">TEST</span>.</p> span.htmlspan.html
54.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 54 HTML TablesHTML Tables
55.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 55 HTML Tables • Tables represent tabular data A table consists of one or several rows Each row has one or more columns • Tables comprised of several core tags: <table></table>: begin / end the table <tr></tr>: create a table row <td></td>: create tabular data (cell) • Tables should not be used for layout. Use CSS floats and positioning styles instead 55
56.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 56 HTML Tables (2) • Start and end of a table • Start and end of a row • Start and end of a cell in a row 56 <table> ... </table><table> ... </table> <tr> ... </tr><tr> ... </tr> <td> ... </td><td> ... </td>
57.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 57 Simple HTML Tables – Example 57 <table cellspacing="0" cellpadding="5"><table cellspacing="0" cellpadding="5"> <tr><tr> <td><img src="ppt.gif"></td><td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture 1</a></td><td><a href="lecture1.ppt">Lecture 1</a></td> </tr></tr> <tr><tr> <td><img src="ppt.gif"></td><td><img src="ppt.gif"></td> <td><a href="lecture2.ppt">Lecture 2</a></td><td><a href="lecture2.ppt">Lecture 2</a></td> </tr></tr> <tr><tr> <td><img src="zip.gif"></td><td><img src="zip.gif"></td> <td><a href="lecture2-demos.zip"><td><a href="lecture2-demos.zip"> Lecture 2 - Demos</a></td>Lecture 2 - Demos</a></td> </tr></tr> </table></table>
58.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 58 <table cellspacing="0" cellpadding="5"><table cellspacing="0" cellpadding="5"> <tr><tr> <td><img src="ppt.gif"></td><td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture 1</a></td><td><a href="lecture1.ppt">Lecture 1</a></td> </tr></tr> <tr><tr> <td><img src="ppt.gif"></td><td><img src="ppt.gif"></td> <td><a href="lecture2.ppt">Lecture 2</a></td><td><a href="lecture2.ppt">Lecture 2</a></td> </tr></tr> <tr><tr> <td><img src="zip.gif"></td><td><img src="zip.gif"></td> <td><a href="lecture2-demos.zip"><td><a href="lecture2-demos.zip"> Lecture 2 - Demos</a></td>Lecture 2 - Demos</a></td> </tr></tr> </table></table> Simple HTML Tables – Example (2) 58
59.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 59 Complete HTML Tables • Table rows split into three semantic sections: header, body and footer <thead> denotes table header and contains <th> elements, instead of <td> elements <tbody> denotes collection of table rows that contain the very data <tfoot> denotes table footer but comes BEFORE the <tbody> tag <colgroup> and <col> define columns (most often used to set column widths) 59
60.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 60 Complete HTML Table: Example 60 <table><table> <colgroup><colgroup> <col style="width:100px" /><col /><col style="width:100px" /><col /> </colgroup></colgroup> <thead><thead> <tr><th>Column 1</th><th>Column 2</th></tr><tr><th>Column 1</th><th>Column 2</th></tr> </thead></thead> <tfoot><tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr><tr><td>Footer 1</td><td>Footer 2</td></tr> </tfoot></tfoot> <tbody><tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr><tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr><tr><td>Cell 2.1</td><td>Cell 2.2</td></tr> </tbody></tbody> </table></table> headerheader footerfooter Last comes the bodyLast comes the body (data)(data) thth columnscolumns
61.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 61 <table><table> <colgroup><colgroup> <col style="width:200px" /><col /><col style="width:200px" /><col /> </colgroup></colgroup> <thead><thead> <tr><th>Column 1</th><th>Column 2</th></tr><tr><th>Column 1</th><th>Column 2</th></tr> </thead></thead> <tfoot><tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr><tr><td>Footer 1</td><td>Footer 2</td></tr> </tfoot></tfoot> <tbody><tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr><tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr><tr><td>Cell 2.1</td><td>Cell 2.2</td></tr> </tbody></tbody> </table></table> Complete HTML Table: Example (2) 61 table-full.htmltable-full.html Although the footerAlthough the footer is before the data inis before the data in the code, it isthe code, it is displayed lastdisplayed last By default, headerBy default, header text is bold andtext is bold and centered.centered.
62.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 62 Nested Tables • Table data “cells” (<td>) can contain nested tables (tables within tables): 62 <table><table> <tr><tr> <td>Contact:</td><td>Contact:</td> <td><td> <table><table> <tr><tr> <td>First Name</td><td>First Name</td> <td>Last Name</td><td>Last Name</td> </tr></tr> </table></table> </td></td> </tr></tr> </table></table> nested-tables.htmlnested-tables.html
63.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 63 cellpaddingcellpadding Defines the emptyDefines the empty space around thespace around the cell contentcell content cellspacingcellspacing Defines theDefines the empty spaceempty space between cellsbetween cells Cell Spacing and Padding • Tables have two important attributes: 63 cellcell cellcell cellcell cellcell cellcell cellcell cellcell cellcell
64.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 64 Cell Spacing and Padding – Example 64 <html><html> <head><title>Table Cells</title></head><head><title>Table Cells</title></head> <body><body> <table cellspacing="15" cellpadding="0"><table cellspacing="15" cellpadding="0"> <tr><td>First</td><tr><td>First</td> <td>Second</td></tr><td>Second</td></tr> </table></table> <br/><br/> <table cellspacing="0" cellpadding="10"><table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr><tr><td>First</td><td>Second</td></tr> </table></table> </body></body> </html></html> table-table-cellscells.html.html
65.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 65 Cell Spacing and Padding – Example (2) 65 <html><html> <head><title>Table Cells</title><head><title>Table Cells</title> <style><style> table, th, td {table, th, td { border: 1px solid black;}</style>border: 1px solid black;}</style> </head></head> <body><body> <table<table cellspacing="15" cellpadding="0"cellspacing="15" cellpadding="0">> <tr><td>First</td><tr><td>First</td> <td>Second</td></tr><td>Second</td></tr> </table></table> <br/><br/> <table cellspacing="0" cellpadding="10"><table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr><tr><td>First</td><td>Second</td></tr> </table></table> </body></body> </html></html> table-table-cellscells.html.html
66.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 66 rowspanrowspan Defines howDefines how many rows themany rows the cell occupiescell occupies colspancolspan Defines howDefines how many columnsmany columns the cellthe cell Column and Row Span • Table cells have two important attributes: 66 cell[1,1cell[1,1 ]] cell[1,2]cell[1,2] cell[2,1]cell[2,1] colspan="colspan=" 1"1" colspan="colspan=" 1"1" colspan="colspan=" 2"2" cell[1,1]cell[1,1] cell[1,2cell[1,2 ]] cell[2,1cell[2,1 ]] rowspan="rowspan=" 2"2" rowspan="rowspan=" 1"1" rowspan="rowspan=" 1"1"
67.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 67 Column and Row Span – Example 67 <table cellspacing="0"><table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td><tr class="1"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr><td colspan="2">Cell[2,1]</td></tr> <tr class=“2"><td>Cell[1,2]</td><tr class=“2"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td><td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr><td>Cell[3,2]</td></tr> <tr class=“3"><td>Cell[1,3]</td><tr class=“3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr><td>Cell[2,3]</td></tr> </table></table> table-colspan-rowspan.htmltable-colspan-rowspan.html
68.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 68 <table cellspacing="0"><table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td><tr class="1"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr><td colspan="2">Cell[2,1]</td></tr> <tr class=“2"><td>Cell[1,2]</td><tr class=“2"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td><td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr><td>Cell[3,2]</td></tr> <tr class=“3"><td>Cell[1,3]</td><tr class=“3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr><td>Cell[2,3]</td></tr> </table></table> Column and Row Span – Example (2) 68 table-colspan-rowspan.htmltable-colspan-rowspan.html Cell[2,3]Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1]Cell[1,1]
69.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 69 HTML FormsHTML FormsEntering User Data from a WebEntering User Data from a Web PagePage
70.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 70 HTML Forms • Forms are the primary method for gathering data from site visitors • Create a form block with • Example: 70 <form></form><form></form> <form name="myForm" method="post"<form name="myForm" method="post" action="path/to/some-script.php">action="path/to/some-script.php"> ...... </form></form> The "action" attribute tellsThe "action" attribute tells where the form data shouldwhere the form data should be sentbe sent The “method" attribute tellsThe “method" attribute tells how the form data should behow the form data should be sent – via GET or POSTsent – via GET or POST requestrequest
71.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 71 Form Fields • Single-line text input fields: • Multi-line textarea fields: • Hidden fields contain data not shown to the user: Often used by JavaScript code 71 <input type="text" id="FirstName" value="This<input type="text" id="FirstName" value="This is a text field" />is a text field" /> <textarea id="Comments">This is a multi-line<textarea id="Comments">This is a multi-line text field</textarea>text field</textarea> <input type="hidden" id="Account" value="This<input type="hidden" id="Account" value="This is a hidden text field" />is a hidden text field" />
72.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 72 Fieldsets • Fieldsets are used to enclose a group of related form fields: • The <legend> is the fieldset's title. 72 <form method="post" action="form.aspx"><form method="post" action="form.aspx"> <fieldset><fieldset> <legend>Client Details</legend><legend>Client Details</legend> <input type="text" id="Name" /><input type="text" id="Name" /> <input type="text" id="Phone" /><input type="text" id="Phone" /> </fieldset></fieldset> <fieldset><fieldset> <legend>Order Details</legend><legend>Order Details</legend> <input type="text" id="Quantity" /><input type="text" id="Quantity" /> <textarea cols="40" rows="10"<textarea cols="40" rows="10" id="Remarks"></textarea>id="Remarks"></textarea> </fieldset></fieldset> </form></form>
73.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 73 Form Input Controls • Checkboxes: • Radio buttons: • Radio buttons can be grouped, allowing only one to be selected from a group: 73 <input type="checkbox" id="fruit" value="apple"<input type="checkbox" id="fruit" value="apple" />/> <input type="radio" id="title" value="Mr." /><input type="radio" id="title" value="Mr." /> <input type="radio" id="city" value="Lom" /><input type="radio" id="city" value="Lom" /> <input type="radio" id="city" value="Ruse" /><input type="radio" id="city" value="Ruse" />
74.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 74 Other Form Controls • Dropdown menus: • Submit button: 74 <select id="gender"><select id="gender"> <option value="Value 1"<option value="Value 1" selected="selected">Male</option>selected="selected">Male</option> <option value="Value 2">Female</option><option value="Value 2">Female</option> <option value="Value 3">Other</option><option value="Value 3">Other</option> </select></select> <input type="submit" id="submitBtn"<input type="submit" id="submitBtn" value="Apply Now" />value="Apply Now" />
75.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 75 Other Form Controls (2) • Reset button – brings the form to its initial state • Image button – acts like submit but image is displayed and click coordinates are sent • Ordinary button – used for Javascript, no default action 75 <input type="reset" name="resetBtn"<input type="reset" name="resetBtn" value="Reset the form" />value="Reset the form" /> <input type="image" src="submit.gif"<input type="image" src="submit.gif" name="submitBtn" alt="Submit" />name="submitBtn" alt="Submit" /> <button type="button"<button type="button" onclick="myFunction()">Try it</button>onclick="myFunction()">Try it</button>
76.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 76 Other Form Controls (3) • Password input – a text field which masks the entered text with * signs • Multiple select field – displays the list of items in multiple lines, instead of one 76 <input type="password" id="pass" /><input type="password" id="pass" /> <select id="products" multiple="multiple"><select id="products" multiple="multiple"> <option value="Value 1"<option value="Value 1" selected="selected">keyboard</option>selected="selected">keyboard</option> <option value="Value 2">mouse</option><option value="Value 2">mouse</option> <option value="Value 3">speakers</option><option value="Value 3">speakers</option> </select></select>
77.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 77 Other Form Controls (4) • File input – a field used for uploading files When used, it requires the form element to have a specific attribute: 77 <input type="file" id="photo" /><input type="file" id="photo" /> <form enctype="multipart/form-data"><form enctype="multipart/form-data"> ...... <input type="file" id="photo" /><input type="file" id="photo" /> ...... </form></form>
78.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 78 Labels • Form labels are used to associate an explanatory text to a form field using the field's ID. • Clicking on a label focuses its associated field (checkboxes are toggled, radio buttons are checked) • Labels are both a usability and accessibility feature and are required in order to pass accessibility validation. 78 <label for="fn">First Name</label><label for="fn">First Name</label> <input type="text" id="fn" /><input type="text" id="fn" />
79.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 79 HTML Forms – Example 79 <form method="post" action="apply-now.php"><form method="post" action="apply-now.php"> <input name="subject" type="hidden" value="Class" /><input name="subject" type="hidden" value="Class" /> <fieldset><legend>Academic information</legend><fieldset><legend>Academic information</legend> <label for="degree">Degree</label><label for="degree">Degree</label> <select name="degree" id="degree"><select name="degree" id="degree"> <option value="BA">Bachelor of Art</option><option value="BA">Bachelor of Art</option> <option value="BS">Bachelor of Science</option><option value="BS">Bachelor of Science</option> <option value="MBA" selected="selected">Master of<option value="MBA" selected="selected">Master of Business Administration</option>Business Administration</option> </select></select> <br /><br /> <label for="studentid">Student ID</label><label for="studentid">Student ID</label> <input type="password" name="studentid" /><input type="password" name="studentid" /> </fieldset></fieldset> <fieldset><legend>Personal Details</legend><fieldset><legend>Personal Details</legend> <label for="fname">First Name</label><label for="fname">First Name</label> <input type="text" name="fname" id="fname" /><input type="text" name="fname" id="fname" /> <br /><br /> <label for="lname">Last Name</label><label for="lname">Last Name</label> <input type="text" name="lname" id="lname" /><input type="text" name="lname" id="lname" /> form.htmlform.html
80.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 80 HTML Forms – Example (2) 80 <br /><br /> Gender:Gender: <input name="gender" type="radio" id="gm" value="m" /><input name="gender" type="radio" id="gm" value="m" /> <label for="gm">Male</label><label for="gm">Male</label> <input name="gender" type="radio" id="gf" value="f" /><input name="gender" type="radio" id="gf" value="f" /> <label for="gf">Female</label><label for="gf">Female</label> <br /><br /> <label for="email">Email</label><label for="email">Email</label> <input type="text" name="email" id="email" /><input type="text" name="email" id="email" /> </fieldset></fieldset> <p><p> <textarea name="terms" cols="30" rows="4"<textarea name="terms" cols="30" rows="4" readonly="readonly">TERMS AND CONDITIONS...</textarea>readonly="readonly">TERMS AND CONDITIONS...</textarea> </p></p> <p><p> <input type="submit" name="submit" value="Send Form" /><input type="submit" name="submit" value="Send Form" /> <input type="reset" value="Clear Form" /><input type="reset" value="Clear Form" /> </p></p> </form></form> form.html (continued)form.html (continued)
81.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 81 form.html (continued)form.html (continued) HTML Forms – Example (3) 81
82.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 82 TabIndex • The tabindex HTML attribute controls the order in which form fields and hyperlinks are focused when repeatedly pressing the TAB key tabindex="0" (zero) - "natural" order If X > Y, then elements with tabindex="X" are iterated before elements with tabindex="Y" Elements with negative tabindex are skipped, however, this is not defined in the standard 82 <input type="text" tabindex="10" /><input type="text" tabindex="10" />
83.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 83 HTML FramesHTML Frames <frameset><frameset>,, <frame><frame> andand <iframe><iframe>
84.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 84 HTML Frames • Frames provide a way to show multiple HTML documents in a single Web page • The page can be split into separate views (frames) horizontally and vertically • Frames were popular in the early ages of HTML development, but now their usage is rejected • Frames are not supported by all user agents (browsers, search engines, etc.) A <noframes> element is used to provide content for non- compatible agents. 84
85.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 85 HTML Frames – Demo 85 <html><html> <head><title>Frames Example</title></head><head><title>Frames Example</title></head> <frameset cols="180px,*,150px"><frameset cols="180px,*,150px"> <frame src="left.html" /><frame src="left.html" /> <frame src="middle.html" /><frame src="middle.html" /> <frame src="right.html" /><frame src="right.html" /> </frameset></frameset> </html></html> frames.htmlframes.html Note the target attribute applied to theNote the target attribute applied to the <a><a> elements in the left frame.elements in the left frame.
86.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 86 First Popular Web Browser Mosaic was developed at the National Center for Supercomputing Applications (NCSA)at the University of Illinois Urbana-Champaign beginning in late 1992. Mosaic was the web browser which led to the Internet boom of the 1990s.
87.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 87 Web Browser usage -2012
88.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 88 What is the Internet? a network of networks – an inter-network, or Internet What are Internet protocols? the rules for transferring information between programs HTTP - hypertext transfer protocol FTP - file transfer protocol SMTP – simple mail transfer protocol What is the World Wide Web? a set of HTML pages accessible using the HTTP protocol Internet / Protocols / WWW
89.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 89 Java Script
90.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 90 What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license
91.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 91 • The HTML DOM (Document Object Model) • When a web page is loaded, the browser creates a Document Object Model of the page. • The HTML DOM model is constructed as a tree of Objects: HTML DOM (Document Object Model)
92.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 92 With the HTML DOM, JavaScript can access all the elements of an HTML document. With a programmable object model, JavaScript gets all the power it needs to create dynamic HTML: JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can react to all the events in the page HTML DOM (Document Object Model)
93.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 93 Finding HTML Elements Finding HTML Elements • Often, with JavaScript, you want to manipulate HTML elements. • To do so, you have to find the elements first. • Finding HTML elements by id Finding HTML Elements by Id var x=document.getElementById("intro");
94.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 97 Programming Constructs • Variables Named elements that can change value • Data types Integer, floating-point, Boolean, string • Operators Assignment, comparison, arithmetic, Boolean, string, special • Control statements Conditions, loops • Keywords • Reserved words with special meaning
95.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 98 JavaScript Variables Variables are "containers" for storing information. JavaScript Variables • As with algebra, JavaScript variables are used to hold values or expressions. • A variable can have a short name, like x, or a more descriptive name, like carname. Rules for JavaScript variable names: • Variable names are case sensitive (y and Y are two different variables) • Variable names must begin with a letter or the underscore character. Note: Because JavaScript is case-sensitive, variable names are case-sensitive.
96.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 99 <html> <body> <h1>What Can JavaScript Do?</h1> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'"> Click Me!</button> </body> </html> Java script
97.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 100 <html> <body> <p>This example calls a function which performs a calculation, and returns the result:</p> <p id="demo"></p> <script> function myFunction(a, b) { return a * b; } document.getElementById("demo").innerHTML = myFunction(4, 3); </script> </body> </html> Javascript Cont...
98.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 101 For Loop Example <html> <body> <p id="demo"></p> <script> cars = ["BMW", "Volvo", "Saab", "Ford"]; text = ""; var i; for (i = 0; i < cars.length; i++) { text += cars[i] + "<br>"; } document.getElementById("demo").innerHTML = text; </script> </body> </html> Javascript Cont...
99.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 102 While / do while loop: while (i < 10) { text += "The number is " + i; i++; } _____________________________ do { text += "The number is " + i; i++; } while (i < 10); Javascript Cont...
100.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 103 Array Demo: <html> <body> <p id="demo"></p> <script> var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars[0]; </script> </body> </html> Javascript Cont...
101.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 104 Javascript Cont...
102.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 105 Javascript Cont...
103.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 106 <html> <body> <p>Click the button to display what day it is today:</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var day; switch (new Date().getDay()) { case 0: day = "Sunday"; break; Javascript Cont...
104.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 107 case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; Javascript Cont...
105.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 108 case 5: day = "Friday"; break; case 6: day = "Saturday"; break; } document.getElementById("demo").innerHTML = "Today is " + day; } </script> </body> </html> Javascript Cont...
106.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 109 JavaScript Try...Catch Statement JavaScript - Catching Errors • When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page. try { //Run some code here } catch(err) { //Handle errors here }
107.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 110 Ex: Try Catch <!DOCTYPE html> <html> <body> <p>Please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">Test Input</button> <p id="message"></p>
108.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 111 <script> function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "empty"; if(isNaN(x)) throw "not a number"; x = Number(x); if(x < 5) throw "too low"; if(x > 10) throw "too high"; }
109.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 112 catch(err) { message.innerHTML = "Input is " + err; } } </script> </body> </html>
110.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 113 CSS: Cascading Style Sheets
111.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 114 CSS:-Adding Style to HTML There are three ways of providing styling information for the Web browsers. •External style sheet •Internal style sheet •Inline style Benefits: •Authors and Web site managers may share style sheets across a number of documents (and sites). •Authors may change the style sheet without requiring modifications to the document. •User agents may load style sheets selectively (based on media descriptions).
112.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 115 External (Linking) style sheet • You can separate style sheets from HTML documents. Style sheet files are imported to HTML documents by <link>. [example.html] <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
113.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 116 • "myStyle.css" body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } External (Linking) style sheet
114.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 117 Internal style sheet • You can put style sheet rules in the head of the document by <style>. [example.html] <head> <style> p { color: red; font-size:120%; } </style> </head> <body> <p>This is a paragraph</p> </body>
115.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 118 Inline style sheet • The start tags can contain style sheet rules directly in HTML documents by the style attribute. [example.html] <p style="color: red; font-size:120%; "> This is a paragraph</p>
116.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 119 CSS Syntax Point of the syntax •This syntax has two parts, the selector and the declaration. Selector: Specifies the target of styling. Declaration: Specifies the property and value. •Declaration is contained between {" ... "}. •Declaration end with a semicolon. p{ color: red; }
117.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 120 Selectors Selectors are specify the target of styling. Selectors may range from simple element names to rich contextual representations. Kind of selector •Type selector •Class selector •ID selector •Grouping
118.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 121 Type selector A type selector is the name of HTML Tag. [index.html] •<p>This is a paragraph</p> •<p>This is a paragraph</p> • <p>This is a paragraph</p> [style.css] •p{ color: red; font-size: 12px; }
119.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 122 Class selector Class selector is used for one or more elements. It is described the value of class attribute of HTML document with ".(period)". [index.html] <p class="red">This is a paragraph</p> <p class="blue">This is a paragraph</p> <p class="red">This is a paragraph</p> <p class="blue">This is a paragraph</p> [style.css] p{ font-size: 12px; } .red{ color: red; } .blue{ color: blue; }
120.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 123 ID selector • ID selector is used for unique element. It is described the value of ID attribute of HTML document with "#". [index.html] • <p class="red">This is a paragraph</p> • <p class="blue">This is a paragraph</p> • <p class="red" id="small">This is a paragraph</p> [style.css] • p{ font-size: 12px; } • .red{ color: red; } • .blue{ color: blue; } • #small{ font-size: 9px; }
121.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 124 Grouping • A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list. [index.html] <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> [style.css] h1, h2, h3, h4{ color: red; font-size: 12px; }
122.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 125 DHTML
123.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 126 Dynamic HTML Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of : • a static markup language (such as HTML), • a client-side scripting language (such as JavaScript), • a presentation definition language (such as CSS), and the Document Object Model.
124.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 127 DHTML • DHTML is not a technology in and of itself; rather, it is the product of three related and complementary technologies: HTML, Cascading Style Sheets (CSS), and script. • To allow scripts and components to access features of HTML and CSS, the contents of the document were represented as objects in a programming model known as the Document Object Model (DOM).
125.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 128 Differences between HTML and DHTML • HTML 1. It is referred as a static HTML and static in nature. 2.A plain page without any styles and Scripts called as HTML. 3.HTML sites will be slow upon client-side technologies. DHTML 1.It is referred as a dynamic HTML and dynamic in nature. 2.A page with HTML, CSS, DOM and Scripts called as DHTML. 3.DHTML sites will be fast enough upon client-side technologies.
126.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 129 Short Questions 1. By which property you can select one Radio Button among multiple? 2. Give the names of four Button control present in Standard Toolbox? 3. Write code for a html table that will have one row and one column? 4. How to add JavaScript file reference in the web page? 5. What is external Style Sheet? How do you link it with a HTML Page? 6. How to write bulleted point in HTML using tag? 7. What is the alt property in <img> tag and give the full syntax of this tag ?
127.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 130 Long Questions 1. How a web page runs on a Client server architecture explain? 2. What are HTML Tags and write the steps of add CSS. 3. What is Java Script? Why it is helpful to add JS code in a web form. 4. What is HTML Page? Explain all Important Tags with a practical example. 5. Design the HTML website for a company with some linked pages and explain all pages with their use? 6. What is Cascading Style Sheets and describe all Selectors with their use and examples? 7. What is DHTML. Explain the role of it.
128.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 131 Research Problem Combinatorial pattern matching in images and audio. The signal processing community has traditionally addressed the problem of measuring the similarity between two images or audio segments (or parts thereof) despite of slight differences due to scale, orientation, lighting, stretching, etc. (in the first case) or timing, volume, tone, noise, etc. (in the second case). They have used an approach where the object is seen as a continuous signal to be processed.
129.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 132 Research Problem Contd… • A recent alternative approach to pattern matching in audio and images relies on combinatory rather than on signal processing. The audio or image is seen as a one or two dimensional text, where one or two dimensional patterns are sought. Several results on searching images permitting rotations, scaling, pixel differences and stretching have been obtained, in many of which we have been involved. The same has happened in searching music files, using techniques derived from the large body of knowledge acquired in the field of pattern matching of biological sequences. • Ref: http://www.cwr.cl/areas.html
130.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 133 Resources: Online W3C Website 1. http://www.w3.org/Style/CSS/ (CSS) 2. http://www.w3.org/DOM/ (DOM) 3. http://www.w3.org/MarkUp/ (HTML/XHTML) css-discuss listserv 1. http://www.css-discuss.org/ css-discuss Wiki 1. http://css-discuss.incutio.com/ JavaScript Message Board 1. http://www.aspmessageboard.com/forum/jscript.asp XMLHttpRequest() Information 1. http://developer.apple.com/internet/webcontent/xmlhttpreq.html 2. http://www.xml.com/lpt/a/2005/02/09/xml-http-request.html
131.
© Bharati Vidyapeeth’s
Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor U1. 134 References TEXT BOOKS: 1. K. K. Sharma, “Web Technology”, A.B. Publication Delhi, First Edition, 2008. 2. Stephen Walther, “ASP.NET 4”, Pearson Education. 3. Ethan Cerami, “Web Services”, O'Reilly Media, 2002. 4. Achyut S Godbole and Atul Kahate, “Web Technologies”, Tata McGraw Hill. 5. Heith Morneau, “Active Server Pages “, Vikas Publishing House. REFERENCES: 1. Raj Kamal , “Internet and Web Technologies”, TMH. 2. Deitel, “Internet & World Wide Web , How to Program”, PHI. 3. V. K. Jain, “Advanced programming in Web Design”, Cyber tech. 4. Rick Dranell, “HTML4 unleashed”, Techmedia Publication, 2000.
Download now