SlideShare a Scribd company logo
2
Agenda
•
•
•
•
•

Basics to Html, CSS, JavaScript
Where this fits in Website development
Debugging
Examples
Q/A
Most read
6
HTML
•
•

HTML is not a programming language, it is a markup language
HTML markup tags are usually called HTML tags
o
o
o
o

•
•

•

HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags

HTML documents describe web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to
read HTML documents and display them as web pages. The browser
does not display the HTML tags, but uses the tags to interpret the
content of the page
Note:
•
•
•
•

The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
Most read
7
HTML
•
•

When you save an HTML file, you can use either the .htm or the .html
file extension
Elements:
Start tag *
<p>

<a
href="default.ht
m" >
<br />

Element content End tag *
This is a
</p>
paragraph
This is a link
</a>
Most read
HTML,
JAVASCRIPT &
CSS
Web is a book outlet and our website is a
book
Agenda
•
•
•
•
•

Basics to Html, CSS, JavaScript
Where this fits in Website development
Debugging
Examples
Q/A
Introduction
•

Core Concept of web development
•
•

HTML + CSS + JavaScript
Content + Style + Behavior
HTML
• What?
• Web server: a system on the internet contains one or more web site
• Web site: a collection of one or more web pages
• Web pages: single disk file with a single file name
• Home pages: first page in website

o What for ?
• Think about the sort of information(content) you want to put on the Web.
• Set the goals for the Web site.
• Organize your content into main topics.
• Come up with a general structure for pages and topics.
HTML
HTML
•
•

HTML is not a programming language, it is a markup language
HTML markup tags are usually called HTML tags
o
o
o
o

•
•

•

HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags

HTML documents describe web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to
read HTML documents and display them as web pages. The browser
does not display the HTML tags, but uses the tags to interpret the
content of the page
Note:
•
•
•
•

The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
HTML
•
•

When you save an HTML file, you can use either the .htm or the .html
file extension
Elements:
Start tag *
<p>

<a
href="default.ht
m" >
<br />

Element content End tag *
This is a
</p>
paragraph
This is a link
</a>
HTML
•

HTML Attributes
o
o
o
o

•

HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value“

Sample Attributes:
Attribute Value
Description
class
classname Specifies a classname for an
element
id
id
Specifies a unique id for an
element
style
style_defin Specifies an inline style for an
ition
element
title
tooltip_tex Specifies extra information
t
about an element (displayed
as a tool tip)
HTML
•

Website Layouts
o

•

HTML Different Doctypes
o

•

External style sheet
Internal style sheet
Inline styles

Html head element:
o

•

The doctype declaration is not an HTML tag; it is an instruction to the web browser
about what version of the markup language the page is written in.

There are three ways of inserting a style sheet:
o
o
o

•

Most websites have put their content in multiple columns (formatted like a magazine
or newspaper)

Head,Script,Base,Style,meta,title

The HTML noscript Element
o

The <noscript> tag is used to provide an alternate content for users that have
disabled scripts in their browser or have a browser that doesn’t support client-side
scripting.
HTML
CSS
•

•
•

The biggest advantage of using CSS is that, if you place the CSS
code in an external style sheet, your site becomes MUCH EASIER to
maintain. You can change the layout of all your pages by editing
one file
Separates design elements from structural logic
Rule Structure:
CSS
•

Class Selectors
<H1 CLASS=“warning”>Danger!</H1>
<P CLASS=“warning”>Be careful…</P>
…….
In your HTML code H1.warning {color: red;}
OR to an entire class…
.warning {color:red;}
• Css are not even
• Make sure your CSS properties are supported
CSS
Pattern

Meaning

*

Universal selector: matches any element.

E

Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P).

EF

Descendant selector: matches any F element that is a descendant of an E element.

E>F

Child selector: matches any F element that is a child of an element E.

E+F

Adjacent siblings selector: Matches any F element immediately preceded by an element E.

E[foo]

Attribute selector: matches any E element with the "foo" attribute set (whatever the value).

E[foo="warning"]

Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning".

E[foo~="warning"]

Attribute selector: matches any E element whose "foo" attribute value is a list of space-separated
values, one of which is exactly equal to "warning".

E[lang|="en"]

Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list of
values beginning (from the left) with "en“ (e.g. en-US).

DIV.warning

HTML only. The same as DIV[class~="warning"].

E#myid

ID selector: matches any E element ID equal to "myid".

E:lang(c)

Pseudo-class selector: matches element of type E if it is in (human) language c (the document
language specifies how language is determined).

E:first-child

Pseudo-class selector: matches element E when E is the first child of its parent.

E:link, E:visited

Pseudo-class selector: matches element E if E is the source anchor of a hyperlink of which the
target is not yet visited (:link) or already visited (:visited).

E:active, E:hover, E:focus

Dynamic Pseudo-class selector: matches E during certain user actions.

E:first-line, E:first-letter

Pseudo-element selector: matches the first formatted line or letter of element E.
JavaScript
•
•
•

•
•
•
•
•
•

JavaScript: The World's Most Misunderstood Programming Language
JavaScript is THE scripting language of the Web.
JavaScript is a dynamic scripting language that allows you to build
interactivity
into otherwise static HTML pages
JavaScript Functions should be defined in the <head> tag
JavaScript runs in client software.
JavaScript enables shopping carts, form validation, calculations, special
graphic and text effects, image swapping, image mapping, clocks, and
more.
JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)
With traditional programming languages, like C++ and Java, each code
statement has to end with a semicolon (;).
Many programmers continue this habit when writing JavaScript, but in
general, semicolons are optional! However, semicolons are required if
you want to put more than one statement on a single line.
JavaScript
• Events
o Events are mostly caused by user actions.
o We want our JavaScript program to react to certain events. This
can be done with the help of event-handlers
o example of the event-handler onClick: <form><input
type="button" value="Click me" onClick="alert(’Yo’)"></form> why
not onClick="alert(“Yo”)“?
o Events are normally used in combination with functions, and the
function will not be executed before the event occurs!
o Eg: <html> <head> <script type="text/javascript"> <!-- function
popup() { alert("Hello World") } //--> </script> </head> <body>
<input type="button" value="Click Me!" onclick="popup()"><br />
<a href="#" onmouseover="" onMouseout="popup()"> Hover
Me!</a> </body> </html>
JavaScript
• Events
Event

Attribute

Description

DOM

click

onclick

The event occurs when the user clicks on an element

2

dblclick

ondblclick

The event occurs when the user double-clicks on an
element

2

mousedown

onmousedown

The event occurs when a user presses a mouse button
over an element

2

mousemove

onmousemove

The event occurs when a user moves the mouse pointer 2
over an element

mouseover

onmouseover

The event occurs when a user mouse over an element

mouseout

onmouseout

The event occurs when a user moves the mouse pointer 2
out of an element

mouseup

onmouseup

The event occurs when a user releases a mouse button
over an element

2

2
JavaScript
• Variables
o Variables are used to store data.
o A variable is a "container" for information you
want to store. A variable's value can change
during the script. You can refer to a variable by
name to see its value or to change its value.
o Rules for variable names:
o Variable names are case sensitive
o They must begin with a letter or the underscore
character
• strname – STRNAME (not same)
JavaScript
• Event Hierarchy
o Take the case of a Login Page
JavaScript
• JavaScript No's
o Global variables
• var foo = "global"; //Don't do this function(){ var bar = "local"; //This is ok }();
• function(){ foo = "global"; //Don't do this var bar = "local"; //This is ok }();

o Inline JavaScript
• Inline JavaScript is any JavaScript code that is mixed with HTML. There are two
primary ways in which you can do this:

o Eval
• Also like most other programming languages, using eval in JavaScript is
considered.. well, evil. If you find yourself using eval, there’s a big chance your
approach is wrong.
• Eg:var strJSON = '{"result":true,"count":1}';
var objJSON = eval("(function(){return " + strJSON + ";})()");
alert(objJSON.result);
alert(objJSON.count);
JavaScript
• JavaScript No's
o alert("In your face")
• Most of the time, using the alert method is unnecessary. The most prevalent
misuse of this method is for debugging purposes, but using tools such as Firebug
and equivalents for other browsers is a much better and more efficient way to
debug JavaScript code.

o element.style
• You can change an element’s style directly by changing properties on its style
property:
• el.style.backgroundColor = "#ff0000";el.style.color = "#00ff00"; This is usually not a
good idea because you want to keep the styling separate from the behaviour
and changing an element’s style directly will override anything you’ve defined
in your CSS. Better way here is to add a class to the element
Debugging
• Firebug
Q/A

More Related Content

What's hot (20)

Css
CssCss
Css
shanmuga rajan
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
CSS
CSSCSS
CSS
venkatachalam84
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
Ian Lintner
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
Biswadip Goswami
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
fantasticdigitaltools
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Php mysql ppt
Php mysql pptPhp mysql ppt
Php mysql ppt
Karmatechnologies Pvt. Ltd.
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
Priya Goyal
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Walid Ashraf
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & video
Hamza Zahid
 
Html introduction
Html introductionHtml introduction
Html introduction
Dalia Elbadry
 
Css
CssCss
Css
Hemant Saini
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Walid Ashraf
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & video
Hamza Zahid
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
 

Viewers also liked (20)

@Html
@Html@Html
@Html
Monojit Ghosh
 
Putting SOAP to REST
Putting SOAP to RESTPutting SOAP to REST
Putting SOAP to REST
Igor Moochnick
 
HTML & JavaScript Introduction
HTML & JavaScript IntroductionHTML & JavaScript Introduction
HTML & JavaScript Introduction
Alexe Bogdan
 
Fundamentos técnicos de internet
Fundamentos técnicos de internetFundamentos técnicos de internet
Fundamentos técnicos de internet
Aitor Andrés Sánchez
 
Fundamentos técnicos de internet
Fundamentos técnicos de internetFundamentos técnicos de internet
Fundamentos técnicos de internet
Sandra Cecilia Regel
 
Web 2.0 Introduction
Web 2.0 IntroductionWeb 2.0 Introduction
Web 2.0 Introduction
Steven Tuck
 
Fundamentos técnicos de internet
Fundamentos técnicos de internetFundamentos técnicos de internet
Fundamentos técnicos de internet
David Cava
 
DNS & HTTP overview
DNS & HTTP overviewDNS & HTTP overview
DNS & HTTP overview
Roman Wlodarski
 
An introduction to Web 2.0: The User Role
An introduction to Web 2.0: The User RoleAn introduction to Web 2.0: The User Role
An introduction to Web 2.0: The User Role
Kiko Llaneras
 
Web basics
Web basicsWeb basics
Web basics
Sagar Pudi
 
Introduction to Web 2.0
Introduction to Web 2.0Introduction to Web 2.0
Introduction to Web 2.0
Jane Hart
 
Dns introduction
Dns   introduction Dns   introduction
Dns introduction
sunil kumar
 
Web of Science: REST or SOAP?
Web of Science: REST or SOAP?Web of Science: REST or SOAP?
Web of Science: REST or SOAP?
Duncan Hull
 
TCP/IP and DNS
TCP/IP and DNSTCP/IP and DNS
TCP/IP and DNS
Biswadip Dey
 
Kanchan Ghangrekar_SrTestingAnalyst
Kanchan Ghangrekar_SrTestingAnalystKanchan Ghangrekar_SrTestingAnalyst
Kanchan Ghangrekar_SrTestingAnalyst
Kanchan Ghangrekar
 
TCP/IP Protocols
TCP/IP ProtocolsTCP/IP Protocols
TCP/IP Protocols
Danial Mirza
 
Software Deployment Principles & Practices
Software Deployment Principles & PracticesSoftware Deployment Principles & Practices
Software Deployment Principles & Practices
Thyagarajan Krishnan
 
Web Application Development
Web Application DevelopmentWeb Application Development
Web Application Development
Whytespace Ltd.
 
Restful web services by Sreeni Inturi
Restful web services by Sreeni InturiRestful web services by Sreeni Inturi
Restful web services by Sreeni Inturi
Sreeni I
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browser
Sabin Buraga
 
HTML & JavaScript Introduction
HTML & JavaScript IntroductionHTML & JavaScript Introduction
HTML & JavaScript Introduction
Alexe Bogdan
 
Web 2.0 Introduction
Web 2.0 IntroductionWeb 2.0 Introduction
Web 2.0 Introduction
Steven Tuck
 
Fundamentos técnicos de internet
Fundamentos técnicos de internetFundamentos técnicos de internet
Fundamentos técnicos de internet
David Cava
 
An introduction to Web 2.0: The User Role
An introduction to Web 2.0: The User RoleAn introduction to Web 2.0: The User Role
An introduction to Web 2.0: The User Role
Kiko Llaneras
 
Introduction to Web 2.0
Introduction to Web 2.0Introduction to Web 2.0
Introduction to Web 2.0
Jane Hart
 
Dns introduction
Dns   introduction Dns   introduction
Dns introduction
sunil kumar
 
Web of Science: REST or SOAP?
Web of Science: REST or SOAP?Web of Science: REST or SOAP?
Web of Science: REST or SOAP?
Duncan Hull
 
Kanchan Ghangrekar_SrTestingAnalyst
Kanchan Ghangrekar_SrTestingAnalystKanchan Ghangrekar_SrTestingAnalyst
Kanchan Ghangrekar_SrTestingAnalyst
Kanchan Ghangrekar
 
Software Deployment Principles & Practices
Software Deployment Principles & PracticesSoftware Deployment Principles & Practices
Software Deployment Principles & Practices
Thyagarajan Krishnan
 
Web Application Development
Web Application DevelopmentWeb Application Development
Web Application Development
Whytespace Ltd.
 
Restful web services by Sreeni Inturi
Restful web services by Sreeni InturiRestful web services by Sreeni Inturi
Restful web services by Sreeni Inturi
Sreeni I
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browser
Sabin Buraga
 
Ad

Similar to Html,javascript & css (20)

Presentation
PresentationPresentation
Presentation
Chetan Kataria
 
Tech Winter Break GDG Oncampus Sri Vasavi Engineering College
Tech Winter Break GDG Oncampus Sri Vasavi Engineering CollegeTech Winter Break GDG Oncampus Sri Vasavi Engineering College
Tech Winter Break GDG Oncampus Sri Vasavi Engineering College
umar630934
 
Presentation on htmlcssjs-130221085257-phpapp02.pdf
Presentation on  htmlcssjs-130221085257-phpapp02.pdfPresentation on  htmlcssjs-130221085257-phpapp02.pdf
Presentation on htmlcssjs-130221085257-phpapp02.pdf
MeetRajani2
 
Dsc Charusat Learning React Part 1
Dsc Charusat Learning React Part 1 Dsc Charusat Learning React Part 1
Dsc Charusat Learning React Part 1
JainamMehta19
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
GDSCVJTI
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Dhtml chapter2
Dhtml chapter2Dhtml chapter2
Dhtml chapter2
FLYMAN TECHNOLOGY LIMITED
 
Web Development Fundamentals UNIT 1 & 2.pptx
Web Development Fundamentals UNIT 1 & 2.pptxWeb Development Fundamentals UNIT 1 & 2.pptx
Web Development Fundamentals UNIT 1 & 2.pptx
GayathriPG3
 
Bootcamp - Web Development Session 2
Bootcamp - Web Development Session 2Bootcamp - Web Development Session 2
Bootcamp - Web Development Session 2
GDSCUniversitasMatan
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
ssuser568d77
 
Fccwc326
Fccwc326Fccwc326
Fccwc326
Shannon Gallagher
 
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxWELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
Web technologies-course 07.pptx
Web technologies-course 07.pptxWeb technologies-course 07.pptx
Web technologies-course 07.pptx
Stefan Oprea
 
HTML_CSS_JS Workshop
HTML_CSS_JS WorkshopHTML_CSS_JS Workshop
HTML_CSS_JS Workshop
GDSC UofT Mississauga
 
Before start
Before startBefore start
Before start
Medhat Dawoud
 
Web
WebWeb
Web
Sreejith Ramakrishnan
 
WEB DEVELOPMENT20CS41.pdf
WEB DEVELOPMENT20CS41.pdfWEB DEVELOPMENT20CS41.pdf
WEB DEVELOPMENT20CS41.pdf
DeepakMeena597272
 
A quick guide to Css and java script
A quick guide to Css and  java scriptA quick guide to Css and  java script
A quick guide to Css and java script
AVINASH KUMAR
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
DaniyalSardar
 
Tech Winter Break GDG Oncampus Sri Vasavi Engineering College
Tech Winter Break GDG Oncampus Sri Vasavi Engineering CollegeTech Winter Break GDG Oncampus Sri Vasavi Engineering College
Tech Winter Break GDG Oncampus Sri Vasavi Engineering College
umar630934
 
Presentation on htmlcssjs-130221085257-phpapp02.pdf
Presentation on  htmlcssjs-130221085257-phpapp02.pdfPresentation on  htmlcssjs-130221085257-phpapp02.pdf
Presentation on htmlcssjs-130221085257-phpapp02.pdf
MeetRajani2
 
Dsc Charusat Learning React Part 1
Dsc Charusat Learning React Part 1 Dsc Charusat Learning React Part 1
Dsc Charusat Learning React Part 1
JainamMehta19
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
GDSCVJTI
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Web Development Fundamentals UNIT 1 & 2.pptx
Web Development Fundamentals UNIT 1 & 2.pptxWeb Development Fundamentals UNIT 1 & 2.pptx
Web Development Fundamentals UNIT 1 & 2.pptx
GayathriPG3
 
Bootcamp - Web Development Session 2
Bootcamp - Web Development Session 2Bootcamp - Web Development Session 2
Bootcamp - Web Development Session 2
GDSCUniversitasMatan
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
ssuser568d77
 
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxWELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
Web technologies-course 07.pptx
Web technologies-course 07.pptxWeb technologies-course 07.pptx
Web technologies-course 07.pptx
Stefan Oprea
 
A quick guide to Css and java script
A quick guide to Css and  java scriptA quick guide to Css and  java script
A quick guide to Css and java script
AVINASH KUMAR
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
DaniyalSardar
 
Ad

Recently uploaded (20)

Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
Secure Access with Azure Active Directory
Secure Access with Azure Active DirectorySecure Access with Azure Active Directory
Secure Access with Azure Active Directory
VICTOR MAESTRE RAMIREZ
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry ReportThe State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME FlowProviding an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdfEdge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent IntegrationPyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Impelsys Inc.
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
Secure Access with Azure Active Directory
Secure Access with Azure Active DirectorySecure Access with Azure Active Directory
Secure Access with Azure Active Directory
VICTOR MAESTRE RAMIREZ
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry ReportThe State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME FlowProviding an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdfEdge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent IntegrationPyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Impelsys Inc.
 

Html,javascript & css

  • 1. HTML, JAVASCRIPT & CSS Web is a book outlet and our website is a book
  • 2. Agenda • • • • • Basics to Html, CSS, JavaScript Where this fits in Website development Debugging Examples Q/A
  • 3. Introduction • Core Concept of web development • • HTML + CSS + JavaScript Content + Style + Behavior
  • 4. HTML • What? • Web server: a system on the internet contains one or more web site • Web site: a collection of one or more web pages • Web pages: single disk file with a single file name • Home pages: first page in website o What for ? • Think about the sort of information(content) you want to put on the Web. • Set the goals for the Web site. • Organize your content into main topics. • Come up with a general structure for pages and topics.
  • 6. HTML • • HTML is not a programming language, it is a markup language HTML markup tags are usually called HTML tags o o o o • • • HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags HTML documents describe web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page Note: • • • • The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph
  • 7. HTML • • When you save an HTML file, you can use either the .htm or the .html file extension Elements: Start tag * <p> <a href="default.ht m" > <br /> Element content End tag * This is a </p> paragraph This is a link </a>
  • 8. HTML • HTML Attributes o o o o • HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value“ Sample Attributes: Attribute Value Description class classname Specifies a classname for an element id id Specifies a unique id for an element style style_defin Specifies an inline style for an ition element title tooltip_tex Specifies extra information t about an element (displayed as a tool tip)
  • 9. HTML • Website Layouts o • HTML Different Doctypes o • External style sheet Internal style sheet Inline styles Html head element: o • The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. There are three ways of inserting a style sheet: o o o • Most websites have put their content in multiple columns (formatted like a magazine or newspaper) Head,Script,Base,Style,meta,title The HTML noscript Element o The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting.
  • 10. HTML
  • 11. CSS • • • The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file Separates design elements from structural logic Rule Structure:
  • 12. CSS • Class Selectors <H1 CLASS=“warning”>Danger!</H1> <P CLASS=“warning”>Be careful…</P> ……. In your HTML code H1.warning {color: red;} OR to an entire class… .warning {color:red;} • Css are not even • Make sure your CSS properties are supported
  • 13. CSS Pattern Meaning * Universal selector: matches any element. E Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P). EF Descendant selector: matches any F element that is a descendant of an E element. E>F Child selector: matches any F element that is a child of an element E. E+F Adjacent siblings selector: Matches any F element immediately preceded by an element E. E[foo] Attribute selector: matches any E element with the "foo" attribute set (whatever the value). E[foo="warning"] Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning". E[foo~="warning"] Attribute selector: matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". E[lang|="en"] Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en“ (e.g. en-US). DIV.warning HTML only. The same as DIV[class~="warning"]. E#myid ID selector: matches any E element ID equal to "myid". E:lang(c) Pseudo-class selector: matches element of type E if it is in (human) language c (the document language specifies how language is determined). E:first-child Pseudo-class selector: matches element E when E is the first child of its parent. E:link, E:visited Pseudo-class selector: matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). E:active, E:hover, E:focus Dynamic Pseudo-class selector: matches E during certain user actions. E:first-line, E:first-letter Pseudo-element selector: matches the first formatted line or letter of element E.
  • 14. JavaScript • • • • • • • • • JavaScript: The World's Most Misunderstood Programming Language JavaScript is THE scripting language of the Web. JavaScript is a dynamic scripting language that allows you to build interactivity into otherwise static HTML pages JavaScript Functions should be defined in the <head> tag JavaScript runs in client software. JavaScript enables shopping carts, form validation, calculations, special graphic and text effects, image swapping, image mapping, clocks, and more. JavaScript is an interpreted language (means that scripts execute without preliminary compilation) With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon (;). Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.
  • 15. JavaScript • Events o Events are mostly caused by user actions. o We want our JavaScript program to react to certain events. This can be done with the help of event-handlers o example of the event-handler onClick: <form><input type="button" value="Click me" onClick="alert(’Yo’)"></form> why not onClick="alert(“Yo”)“? o Events are normally used in combination with functions, and the function will not be executed before the event occurs! o Eg: <html> <head> <script type="text/javascript"> <!-- function popup() { alert("Hello World") } //--> </script> </head> <body> <input type="button" value="Click Me!" onclick="popup()"><br /> <a href="#" onmouseover="" onMouseout="popup()"> Hover Me!</a> </body> </html>
  • 16. JavaScript • Events Event Attribute Description DOM click onclick The event occurs when the user clicks on an element 2 dblclick ondblclick The event occurs when the user double-clicks on an element 2 mousedown onmousedown The event occurs when a user presses a mouse button over an element 2 mousemove onmousemove The event occurs when a user moves the mouse pointer 2 over an element mouseover onmouseover The event occurs when a user mouse over an element mouseout onmouseout The event occurs when a user moves the mouse pointer 2 out of an element mouseup onmouseup The event occurs when a user releases a mouse button over an element 2 2
  • 17. JavaScript • Variables o Variables are used to store data. o A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. o Rules for variable names: o Variable names are case sensitive o They must begin with a letter or the underscore character • strname – STRNAME (not same)
  • 18. JavaScript • Event Hierarchy o Take the case of a Login Page
  • 19. JavaScript • JavaScript No's o Global variables • var foo = "global"; //Don't do this function(){ var bar = "local"; //This is ok }(); • function(){ foo = "global"; //Don't do this var bar = "local"; //This is ok }(); o Inline JavaScript • Inline JavaScript is any JavaScript code that is mixed with HTML. There are two primary ways in which you can do this: o Eval • Also like most other programming languages, using eval in JavaScript is considered.. well, evil. If you find yourself using eval, there’s a big chance your approach is wrong. • Eg:var strJSON = '{"result":true,"count":1}'; var objJSON = eval("(function(){return " + strJSON + ";})()"); alert(objJSON.result); alert(objJSON.count);
  • 20. JavaScript • JavaScript No's o alert("In your face") • Most of the time, using the alert method is unnecessary. The most prevalent misuse of this method is for debugging purposes, but using tools such as Firebug and equivalents for other browsers is a much better and more efficient way to debug JavaScript code. o element.style • You can change an element’s style directly by changing properties on its style property: • el.style.backgroundColor = "#ff0000";el.style.color = "#00ff00"; This is usually not a good idea because you want to keep the styling separate from the behaviour and changing an element’s style directly will override anything you’ve defined in your CSS. Better way here is to add a class to the element
  • 22. Q/A