SlideShare a Scribd company logo
1 of 43
BATRA COMPUTER CENTRE
Web Development
ISO CERTIFIED
PHNO: 9729666670, 4000670
A web page, broken down
A web page, broken down
What is HTML ?
 HTML= HyperText Markup Language
A markup language designed for the creation of
web pages and other information viewable in a
browser.
The basic language used to write web pages.
File extension: .htm, .html
The Basic Tag
<html>
<head>
<title>My first web pages</title>
</head>
<body>
<h1>Hello Everyone</h1>
</body>
</html>
HTML Tags
A Tag is : Non-hierarchical keyword or term
assigned to a piece of information
Document Tags: The tags that are required for
every HTML page e create.
Tag usually goes with pair: an open tag (<b>)
and an end tag (</b>)
< > - Opening Tag
</ > - Closing Tag
HTML Syntax
The Element content is Everything between the
start and the end tag ( <p> Hello </p> )
Some HTML Element have empty content (<br />)
Most HTML Elements can have attributes
Its not case sensitive - <p> means the same as <P>
Step for Creating a HTML file
 Open a text editor (e.g. Notepad )
 Create your HTML document
 Head-not displayed with body
 Body
 Save the HTML (extension of .htm or .html)
 Display your HTML document in WWW browser
Window.
Check your work and modify as necessary
Upload It on the Web.
Working it Training…
HTML <body> Tag
The body element defines the document’s body
and contains all the contents of an HTML document,
such as text, hyperlinks, images, tables, lists, etc.
HTML <body> Tag (contd..)
OUTPUT
HTML <body> Tag (contd..)
 Attributes
 Bgcolor – Specifies a background-color for a HTML page.
<body bgcolor=“#000000”>
<body bgcolor=“rgb(0,0,0)”>
<body bgcolor=“black”>
 Background – Specifies a background-image for a HTML page.
<body background=“clouds.gif”>
<body background =“http://www.abc.com/clouds.gif”>
HTML <img> Tag
 The <img> tag embeds an image in an HTML page.
The <img> tag has attributes: src, alt, height, width.
<img src=“flower.jpg”
alt=“flower” height=“200”
width=“200” />
HTML code OUTPUT
HTML <p> Tag
The <p> tag defines a Paragraph
HTML <li> Tag
The <li> tag defines a List Item.
HTML <a> Tag Anchor
The <a> tag defines an anchor.
Attributes for <A…> HREF =“URL”
HREF indicates the URL being linked to.
A Hpertext link
<a href=“http://www.google.com”>Google</a>
Output: Google
A Email Link
<a href=“mailto:jatinbatra@gmail.com”>Email Me </a>
Output: Email me
HTML <pre> Tag
The <pre> tag defines preformatted text.
 Text in a pre element is displayed in a fixed-
width font (usually Courier ), and it preserves both
spaces and line breaks
HTML <table> Tag
 The <table> tag defines an HTML tables.
 A simple HTML table consists of the table
element and one or more tr, th, and td elements.
 Attributes Values
HTML <table> example
HTML <form> Tag
 A form is an area that can contain form
elements
 Commonly used form elements includes:
1. Text fields
2. Radio buttons
3. Checkboxes
4. List Boxes
5. Submit buttons
HTML <input> Tag
Attribute Values
HTML <input> Tag
 Text Input Fields
 Used when you want the user to type, letter,
number etc.
HTML <input> Tag contd…
Submit and Reset button
HTML <input> Tag contd…
 Checkboxes and Radio Button
HTML <marquee> Tag
HTML Header Tags
<h1> defines the largest heading and <h6>
defines the smallest heading.
What is CSS ?
 CSS= Cascading Style Sheets
 CSS is a way to style HTML. Whereas the HTML
is the content, the style sheet is the presentation
of that document.
A Style
Selector Property Value
p { color: red ; }
The property is followed by a colon (:) and
the value is followed by a semicolon(;)
Applying CSS
There are three ways to apply CSS to HTML
 Inline
Affects only the element applied to.
 Internal or Embedded
Affects only the elements in a single file.
 External
Linked to an unlimited number of files.
Inline Style Sheets
 Inline Styles are applied straight into the
HTML tags using the style attributes.
Internal Style Sheets
 Internal styles are used for the whole page. Inside
the head tags the style tags surround all of the styles
for the page.
External Style Sheets
 Internal styles are used for the whole page. Inside
the head tags the style tags surround all of the styles
for the page.
CSS class example
What is JavaScript ?
 A scripting language that works with HTML to
enhance web pages and make them more
interactive.
 Runs in a Web browser (client-side).
 Embedded in HTML files and can manipulates
the HTML itself.
Why use JavaScript ?
 To add dynamic function to your HTML.
JavaScript does things that HTML can’t –like logic.
You can change HTML on the fly
 JavaScript can validate the date the user enters
into the form, before it is sent to your Web
Application.
Add JavaScript to HTML
 In the HTML page itself:
<html>
<head>
<script language=“javascript”>
// JavaScript code
</script>
</head>
 As a file, linked from the HTML Page
<head>
<script language=“javascript” src=“script.js””>
</script>
</head>
JavaScript Examples
SCO 15, Dayal Bagh,
Ambala Cantt, Haryana
PIN CODE-133001
9729666670, 4000670PHNO:
EMAIL ID: info. jatinbatra@gmail.com
www.batracomputercentre.comWEBSITE:
ADDRESS:
BATRA COMPUTER CENTRE Web Development ISO CERTIFIED

More Related Content

What's hot

What's hot (20)

Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Images and Lists in HTML
Images and Lists in HTMLImages and Lists in HTML
Images and Lists in HTML
 
CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
 
Html coding
Html codingHtml coding
Html coding
 
HTML
HTMLHTML
HTML
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginners
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 
Html
HtmlHtml
Html
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 

Viewers also liked

Proyecto final luis cohen
Proyecto final luis cohenProyecto final luis cohen
Proyecto final luis cohenEfrén Ingledue
 
звучи, моя речь.....
звучи, моя речь.....звучи, моя речь.....
звучи, моя речь.....peace_duke
 
Master Social Media - January 27th Presentation
Master Social Media - January 27th PresentationMaster Social Media - January 27th Presentation
Master Social Media - January 27th PresentationMichael A. Howard
 
Presentación GCF Aprende Libre
Presentación GCF Aprende LibrePresentación GCF Aprende Libre
Presentación GCF Aprende LibreCRISEL BY AEFOL
 
Presentación Caso IBM Watson
Presentación Caso IBM WatsonPresentación Caso IBM Watson
Presentación Caso IBM WatsonCRISEL BY AEFOL
 
L’assistenza domiciliare in sicilia, realtà e prospettive
L’assistenza domiciliare in sicilia, realtà e prospettiveL’assistenza domiciliare in sicilia, realtà e prospettive
L’assistenza domiciliare in sicilia, realtà e prospettiveMassimo Di Gregorio
 

Viewers also liked (15)

Proyecto final luis cohen
Proyecto final luis cohenProyecto final luis cohen
Proyecto final luis cohen
 
Portofolio s
Portofolio sPortofolio s
Portofolio s
 
As revoltas regências
As revoltas regênciasAs revoltas regências
As revoltas regências
 
звучи, моя речь.....
звучи, моя речь.....звучи, моя речь.....
звучи, моя речь.....
 
Runas la nube
Runas la nubeRunas la nube
Runas la nube
 
ProjectsPX
ProjectsPXProjectsPX
ProjectsPX
 
Master Social Media - January 27th Presentation
Master Social Media - January 27th PresentationMaster Social Media - January 27th Presentation
Master Social Media - January 27th Presentation
 
Presentación Adams
Presentación AdamsPresentación Adams
Presentación Adams
 
Presentación GCF Aprende Libre
Presentación GCF Aprende LibrePresentación GCF Aprende Libre
Presentación GCF Aprende Libre
 
Presentación Learnsity
Presentación LearnsityPresentación Learnsity
Presentación Learnsity
 
Presentación Genially
Presentación GeniallyPresentación Genially
Presentación Genially
 
Presentación IIC
Presentación IICPresentación IIC
Presentación IIC
 
Presentación Vértice
Presentación VérticePresentación Vértice
Presentación Vértice
 
Presentación Caso IBM Watson
Presentación Caso IBM WatsonPresentación Caso IBM Watson
Presentación Caso IBM Watson
 
L’assistenza domiciliare in sicilia, realtà e prospettive
L’assistenza domiciliare in sicilia, realtà e prospettiveL’assistenza domiciliare in sicilia, realtà e prospettive
L’assistenza domiciliare in sicilia, realtà e prospettive
 

Similar to BATRA COMPUTER CENTRE Web Development ISO CERTIFIED

Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratchAhmad Al-ammar
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfINTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfDineshKumar522328
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introductioncncwebworld
 
HTML Notes And Some Attributes
HTML Notes And Some AttributesHTML Notes And Some Attributes
HTML Notes And Some AttributesHIFZUR RAHMAN
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyshabab shihan
 
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptx
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptxWeb_Devp_HTML_CSS00jfhfghhdf0000000.pptx
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptxgauravpurola
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02Aditya Varma
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1Shawn Calvert
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvZahouAmel1
 

Similar to BATRA COMPUTER CENTRE Web Development ISO CERTIFIED (20)

Html5 css3
Html5 css3Html5 css3
Html5 css3
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratch
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfINTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdf
 
Html basic
Html basicHtml basic
Html basic
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introduction
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
HTML Notes And Some Attributes
HTML Notes And Some AttributesHTML Notes And Some Attributes
HTML Notes And Some Attributes
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptx
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptxWeb_Devp_HTML_CSS00jfhfghhdf0000000.pptx
Web_Devp_HTML_CSS00jfhfghhdf0000000.pptx
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
 
Html
HtmlHtml
Html
 

More from jatin batra

Best SMO Training &Coaching in Ambala
Best SMO Training &Coaching in AmbalaBest SMO Training &Coaching in Ambala
Best SMO Training &Coaching in Ambalajatin batra
 
Best HTML Training &Coaching in Ambala
Best HTML Training &Coaching in AmbalaBest HTML Training &Coaching in Ambala
Best HTML Training &Coaching in Ambalajatin batra
 
Best SEO Training & Coaching in Ambala
Best SEO Training & Coaching in AmbalaBest SEO Training & Coaching in Ambala
Best SEO Training & Coaching in Ambalajatin batra
 
Best Photoshop Training in Ambala
 Best Photoshop Training  in Ambala Best Photoshop Training  in Ambala
Best Photoshop Training in Ambalajatin batra
 
Best C Programming Training & Coaching in Ambala
Best C Programming Training & Coaching in AmbalaBest C Programming Training & Coaching in Ambala
Best C Programming Training & Coaching in Ambalajatin batra
 
BASIC COMPUTER TRAINING & COACHING CENTRE IN AMBALA CANTT
BASIC COMPUTER TRAINING & COACHING CENTRE IN AMBALA CANTTBASIC COMPUTER TRAINING & COACHING CENTRE IN AMBALA CANTT
BASIC COMPUTER TRAINING & COACHING CENTRE IN AMBALA CANTTjatin batra
 
Web Browser ! Batra Computer Centre
Web Browser ! Batra Computer CentreWeb Browser ! Batra Computer Centre
Web Browser ! Batra Computer Centrejatin batra
 
Search Engine Training in Ambala ! Batra Computer Centre
Search Engine Training in Ambala ! Batra Computer CentreSearch Engine Training in Ambala ! Batra Computer Centre
Search Engine Training in Ambala ! Batra Computer Centrejatin batra
 
Networking Training in Ambala ! Batra Computer Centre
Networking Training in Ambala ! Batra Computer CentreNetworking Training in Ambala ! Batra Computer Centre
Networking Training in Ambala ! Batra Computer Centrejatin batra
 
SQL Training in Ambala ! BATRA COMPUTER CENTRE
SQL Training in Ambala ! BATRA COMPUTER CENTRESQL Training in Ambala ! BATRA COMPUTER CENTRE
SQL Training in Ambala ! BATRA COMPUTER CENTREjatin batra
 
Networking ! BATRA COMPUTER CENTRE
Networking ! BATRA COMPUTER CENTRENetworking ! BATRA COMPUTER CENTRE
Networking ! BATRA COMPUTER CENTREjatin batra
 
Ms Office 2010 Training in Ambala ! BATRA COMPUTER CENTRE
Ms Office 2010 Training in Ambala ! BATRA COMPUTER CENTREMs Office 2010 Training in Ambala ! BATRA COMPUTER CENTRE
Ms Office 2010 Training in Ambala ! BATRA COMPUTER CENTREjatin batra
 
Basic Computer Training Centre in Ambala ! BATRA COMPUTER CENTRE
Basic Computer Training Centre in Ambala ! BATRA COMPUTER CENTREBasic Computer Training Centre in Ambala ! BATRA COMPUTER CENTRE
Basic Computer Training Centre in Ambala ! BATRA COMPUTER CENTREjatin batra
 
Corel Draw Training Institute in Ambala ! BATRA COMPUTER CENTRE
Corel Draw Training Institute in Ambala ! BATRA COMPUTER CENTRECorel Draw Training Institute in Ambala ! BATRA COMPUTER CENTRE
Corel Draw Training Institute in Ambala ! BATRA COMPUTER CENTREjatin batra
 
Basic Computer Training Institute ! BATRA COMPUTER CENTRE
Basic Computer Training Institute ! BATRA COMPUTER CENTREBasic Computer Training Institute ! BATRA COMPUTER CENTRE
Basic Computer Training Institute ! BATRA COMPUTER CENTREjatin batra
 
HTML Training Institute in Ambala ! Batra Computer Centre
HTML Training Institute in Ambala ! Batra Computer CentreHTML Training Institute in Ambala ! Batra Computer Centre
HTML Training Institute in Ambala ! Batra Computer Centrejatin batra
 
Benefits of Web Browser ! Batra Computer Centre
Benefits of Web Browser ! Batra Computer CentreBenefits of Web Browser ! Batra Computer Centre
Benefits of Web Browser ! Batra Computer Centrejatin batra
 
SEO Training in Ambala ! Batra Computer Centre
SEO Training in Ambala ! Batra Computer CentreSEO Training in Ambala ! Batra Computer Centre
SEO Training in Ambala ! Batra Computer Centrejatin batra
 
Internet Training Centre in Ambala ! Batra Computer Centre
Internet Training Centre in Ambala ! Batra Computer CentreInternet Training Centre in Ambala ! Batra Computer Centre
Internet Training Centre in Ambala ! Batra Computer Centrejatin batra
 
Basic Computer Training Centre in Ambala ! Batra Computer Centre
Basic Computer Training Centre in Ambala ! Batra Computer CentreBasic Computer Training Centre in Ambala ! Batra Computer Centre
Basic Computer Training Centre in Ambala ! Batra Computer Centrejatin batra
 

More from jatin batra (20)

Best SMO Training &Coaching in Ambala
Best SMO Training &Coaching in AmbalaBest SMO Training &Coaching in Ambala
Best SMO Training &Coaching in Ambala
 
Best HTML Training &Coaching in Ambala
Best HTML Training &Coaching in AmbalaBest HTML Training &Coaching in Ambala
Best HTML Training &Coaching in Ambala
 
Best SEO Training & Coaching in Ambala
Best SEO Training & Coaching in AmbalaBest SEO Training & Coaching in Ambala
Best SEO Training & Coaching in Ambala
 
Best Photoshop Training in Ambala
 Best Photoshop Training  in Ambala Best Photoshop Training  in Ambala
Best Photoshop Training in Ambala
 
Best C Programming Training & Coaching in Ambala
Best C Programming Training & Coaching in AmbalaBest C Programming Training & Coaching in Ambala
Best C Programming Training & Coaching in Ambala
 
BASIC COMPUTER TRAINING & COACHING CENTRE IN AMBALA CANTT
BASIC COMPUTER TRAINING & COACHING CENTRE IN AMBALA CANTTBASIC COMPUTER TRAINING & COACHING CENTRE IN AMBALA CANTT
BASIC COMPUTER TRAINING & COACHING CENTRE IN AMBALA CANTT
 
Web Browser ! Batra Computer Centre
Web Browser ! Batra Computer CentreWeb Browser ! Batra Computer Centre
Web Browser ! Batra Computer Centre
 
Search Engine Training in Ambala ! Batra Computer Centre
Search Engine Training in Ambala ! Batra Computer CentreSearch Engine Training in Ambala ! Batra Computer Centre
Search Engine Training in Ambala ! Batra Computer Centre
 
Networking Training in Ambala ! Batra Computer Centre
Networking Training in Ambala ! Batra Computer CentreNetworking Training in Ambala ! Batra Computer Centre
Networking Training in Ambala ! Batra Computer Centre
 
SQL Training in Ambala ! BATRA COMPUTER CENTRE
SQL Training in Ambala ! BATRA COMPUTER CENTRESQL Training in Ambala ! BATRA COMPUTER CENTRE
SQL Training in Ambala ! BATRA COMPUTER CENTRE
 
Networking ! BATRA COMPUTER CENTRE
Networking ! BATRA COMPUTER CENTRENetworking ! BATRA COMPUTER CENTRE
Networking ! BATRA COMPUTER CENTRE
 
Ms Office 2010 Training in Ambala ! BATRA COMPUTER CENTRE
Ms Office 2010 Training in Ambala ! BATRA COMPUTER CENTREMs Office 2010 Training in Ambala ! BATRA COMPUTER CENTRE
Ms Office 2010 Training in Ambala ! BATRA COMPUTER CENTRE
 
Basic Computer Training Centre in Ambala ! BATRA COMPUTER CENTRE
Basic Computer Training Centre in Ambala ! BATRA COMPUTER CENTREBasic Computer Training Centre in Ambala ! BATRA COMPUTER CENTRE
Basic Computer Training Centre in Ambala ! BATRA COMPUTER CENTRE
 
Corel Draw Training Institute in Ambala ! BATRA COMPUTER CENTRE
Corel Draw Training Institute in Ambala ! BATRA COMPUTER CENTRECorel Draw Training Institute in Ambala ! BATRA COMPUTER CENTRE
Corel Draw Training Institute in Ambala ! BATRA COMPUTER CENTRE
 
Basic Computer Training Institute ! BATRA COMPUTER CENTRE
Basic Computer Training Institute ! BATRA COMPUTER CENTREBasic Computer Training Institute ! BATRA COMPUTER CENTRE
Basic Computer Training Institute ! BATRA COMPUTER CENTRE
 
HTML Training Institute in Ambala ! Batra Computer Centre
HTML Training Institute in Ambala ! Batra Computer CentreHTML Training Institute in Ambala ! Batra Computer Centre
HTML Training Institute in Ambala ! Batra Computer Centre
 
Benefits of Web Browser ! Batra Computer Centre
Benefits of Web Browser ! Batra Computer CentreBenefits of Web Browser ! Batra Computer Centre
Benefits of Web Browser ! Batra Computer Centre
 
SEO Training in Ambala ! Batra Computer Centre
SEO Training in Ambala ! Batra Computer CentreSEO Training in Ambala ! Batra Computer Centre
SEO Training in Ambala ! Batra Computer Centre
 
Internet Training Centre in Ambala ! Batra Computer Centre
Internet Training Centre in Ambala ! Batra Computer CentreInternet Training Centre in Ambala ! Batra Computer Centre
Internet Training Centre in Ambala ! Batra Computer Centre
 
Basic Computer Training Centre in Ambala ! Batra Computer Centre
Basic Computer Training Centre in Ambala ! Batra Computer CentreBasic Computer Training Centre in Ambala ! Batra Computer Centre
Basic Computer Training Centre in Ambala ! Batra Computer Centre
 

Recently uploaded

Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting DataJhengPantaleon
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 

Recently uploaded (20)

Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 

BATRA COMPUTER CENTRE Web Development ISO CERTIFIED

  • 1. BATRA COMPUTER CENTRE Web Development ISO CERTIFIED PHNO: 9729666670, 4000670
  • 2. A web page, broken down
  • 3. A web page, broken down
  • 4.
  • 5. What is HTML ?  HTML= HyperText Markup Language A markup language designed for the creation of web pages and other information viewable in a browser. The basic language used to write web pages. File extension: .htm, .html
  • 6. The Basic Tag <html> <head> <title>My first web pages</title> </head> <body> <h1>Hello Everyone</h1> </body> </html>
  • 7. HTML Tags A Tag is : Non-hierarchical keyword or term assigned to a piece of information Document Tags: The tags that are required for every HTML page e create. Tag usually goes with pair: an open tag (<b>) and an end tag (</b>) < > - Opening Tag </ > - Closing Tag
  • 8. HTML Syntax The Element content is Everything between the start and the end tag ( <p> Hello </p> ) Some HTML Element have empty content (<br />) Most HTML Elements can have attributes Its not case sensitive - <p> means the same as <P>
  • 9. Step for Creating a HTML file  Open a text editor (e.g. Notepad )  Create your HTML document  Head-not displayed with body  Body  Save the HTML (extension of .htm or .html)  Display your HTML document in WWW browser Window. Check your work and modify as necessary Upload It on the Web.
  • 11. HTML <body> Tag The body element defines the document’s body and contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
  • 12. HTML <body> Tag (contd..) OUTPUT
  • 13. HTML <body> Tag (contd..)  Attributes  Bgcolor – Specifies a background-color for a HTML page. <body bgcolor=“#000000”> <body bgcolor=“rgb(0,0,0)”> <body bgcolor=“black”>  Background – Specifies a background-image for a HTML page. <body background=“clouds.gif”> <body background =“http://www.abc.com/clouds.gif”>
  • 14. HTML <img> Tag  The <img> tag embeds an image in an HTML page. The <img> tag has attributes: src, alt, height, width. <img src=“flower.jpg” alt=“flower” height=“200” width=“200” /> HTML code OUTPUT
  • 15. HTML <p> Tag The <p> tag defines a Paragraph
  • 16. HTML <li> Tag The <li> tag defines a List Item.
  • 17. HTML <a> Tag Anchor The <a> tag defines an anchor. Attributes for <A…> HREF =“URL” HREF indicates the URL being linked to. A Hpertext link <a href=“http://www.google.com”>Google</a> Output: Google A Email Link <a href=“mailto:jatinbatra@gmail.com”>Email Me </a> Output: Email me
  • 18. HTML <pre> Tag The <pre> tag defines preformatted text.  Text in a pre element is displayed in a fixed- width font (usually Courier ), and it preserves both spaces and line breaks
  • 19. HTML <table> Tag  The <table> tag defines an HTML tables.  A simple HTML table consists of the table element and one or more tr, th, and td elements.  Attributes Values
  • 21. HTML <form> Tag  A form is an area that can contain form elements  Commonly used form elements includes: 1. Text fields 2. Radio buttons 3. Checkboxes 4. List Boxes 5. Submit buttons
  • 23. HTML <input> Tag  Text Input Fields  Used when you want the user to type, letter, number etc.
  • 24. HTML <input> Tag contd… Submit and Reset button
  • 25. HTML <input> Tag contd…  Checkboxes and Radio Button
  • 27. HTML Header Tags <h1> defines the largest heading and <h6> defines the smallest heading.
  • 28.
  • 29. What is CSS ?  CSS= Cascading Style Sheets  CSS is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
  • 30. A Style Selector Property Value p { color: red ; } The property is followed by a colon (:) and the value is followed by a semicolon(;)
  • 31. Applying CSS There are three ways to apply CSS to HTML  Inline Affects only the element applied to.  Internal or Embedded Affects only the elements in a single file.  External Linked to an unlimited number of files.
  • 32. Inline Style Sheets  Inline Styles are applied straight into the HTML tags using the style attributes.
  • 33. Internal Style Sheets  Internal styles are used for the whole page. Inside the head tags the style tags surround all of the styles for the page.
  • 34. External Style Sheets  Internal styles are used for the whole page. Inside the head tags the style tags surround all of the styles for the page.
  • 36.
  • 37. What is JavaScript ?  A scripting language that works with HTML to enhance web pages and make them more interactive.  Runs in a Web browser (client-side).  Embedded in HTML files and can manipulates the HTML itself.
  • 38. Why use JavaScript ?  To add dynamic function to your HTML. JavaScript does things that HTML can’t –like logic. You can change HTML on the fly  JavaScript can validate the date the user enters into the form, before it is sent to your Web Application.
  • 39. Add JavaScript to HTML  In the HTML page itself: <html> <head> <script language=“javascript”> // JavaScript code </script> </head>  As a file, linked from the HTML Page <head> <script language=“javascript” src=“script.js””> </script> </head>
  • 41.
  • 42. SCO 15, Dayal Bagh, Ambala Cantt, Haryana PIN CODE-133001 9729666670, 4000670PHNO: EMAIL ID: info. jatinbatra@gmail.com www.batracomputercentre.comWEBSITE: ADDRESS: