SlideShare a Scribd company logo
Html, css and jquery introduction
What is HTML
 HTML stands for Hyper Text Markup Language
 HTML is used for describing web pages.
 HTML is a markup language.
 A markup language consist of markup tags.
 The tags defines document content.
 HTML documents include HTML tags and plain text.
HTML Tags
 HTML markup tags are usually called HTML tags.
 HTML tags are keywords surrounded by angle brackets like
<HTML>.
 Html tags normally come in pairs like <b>and </b>.
 The first tag in pair is the start tag and second tag is the
end tag.
 The end tag is written like the start tag , with a forward
slash before the tag name.
 Start and end tags are also called opening tags and closing
tags.
<tagname>Content</tagname>
Basic HTML page structure
 HTML
 HEAD: Non web displayable info and code like meta tags,
script, title etc.
 BODY: Includes <div>
div: Header – We can include branding and navigation
elements like logo, slogan, menu, etc.
div: Main content – We can include all kind of
elements like images, paragraphs, videos, links, etc.
div: Footer – We can include informational elements
like: copyright, sub menu, links, site info, etc.
Example
<html>
<head>
<title>HTML Form Validation Demo</title>
</head>
<body>
<form action=“” id=“”>
<h2>HTML Form</h2>
<div id=“form_data”>
<div class=“fieldgroup”>
<label>Email</label>
<input type=“text” name=“email”>
</div>
<div class=“fieldgroup”>
<label>Password</label>
<input type=“password” name=“password”>
</div>
<div class=“fieldgroup”>
<input type=“submit” value=“submit” class=“submit”>
</div>
</div>
</form>
</body>
</html>
What is CSS
 CSS stands for Cascading Style Sheet.
 Styles define how to display HTML elements.
 External style sheets can save a lot of work.
 External style sheets are stored in CSS file.
 A CSS file allows to separate web sites HTML content
from its style.
How to use CSS?
There are three types of stylesheets
 External style sheet
 Internal style sheet
 Inline style sheet
 External style sheet: An external style sheet is ideal when the style is applied to many
pages.
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<head>
 Internal style sheet: An internal style sheet should be used when a single document has a
unique style.
<head>
<style>
p {margin-left:200px}
body{background-image:url(“images/back40.gif”);}
</style>
</head>
 Inline styles: To use Inline styles use the style attribute in
the relevent tag. The style attribute can contain any CSS
property.
< p style=“color.#fafafa;margin-left:20px”>This is a
paragraph.</p>
 Multiple styles will cascade into one:
Cascading order:
 Inline style (inside an HTMLelement)
 Inline style sheet (in the head section)
 External style sheet
 Browser default
CSS Syntax
 A CSS rule has two main parts: a selector, and one or more declarations
 H1 {color:blue; font-size: 12px;}
In this example H1 is a selector
Color:blue and font-size:12px is a declaration.
Color is a property and blue is a value.
Font-size is a property and 12px is a value.
 Combining selectors:
h1, h2, h3, h4, h5, h6{
color: #009900;
font family: Georgia, sans-serif;
}
 The id selector
The id selector is used to specify a style for a single, unique
element.
The id selector uses the id attribute of the HTML element,
and is defined with a “#”.
Syntax: #selector-id {property:value;}
 The class selector
The class selector is used to specify a style for a group of
elements.
The class selector uses the HTML class attribute, and is
defined with a “.”
Syntax: selector-class {property: value;}
 Below are the various ways you can use CSS to style
links.
a:link {color: #009900}
a:visited{color: #999999}
a:hover {color: #333333}
a:focus {color: #333333}
a:active {color: #009900}
The CSS Box Model
 All HTML elements can be considered as boxes. In CSS
the term “box model” is used when talking about
design and layout.
 The CSS box model is essentially a box that wraps
aroun HTML elements and consists of: margin, border,
padding and the actual content.
 The box model allows to place a border around
elements and space elements in relation to other
elements.
What is jQuery
 jQuery is a lightweight, “write less, do more”, Javascript library.
 The purpose of jQuery is to make it much easier to use javascript on your
website.
 jQuery takes a lot of common tasks that requires many lines of javascript
code to accomplish, and wraps it into methods that you can call with a
single line of code.
 jQery also simplifies a lot of the complicated things from javascript like
Ajax call and DOM manipulation.
Features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 Ajax
jQuery Syntax
Basic syntax
$(selector).action()
 A $ sign to define jQuery
 A(selector) to find HTML elements
 AjQuery action to be performed on the elements.
Example:
$(“p”).hide() – hides all <p> elements
How to use jQuery:
<head>
<script
src=“//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></
script>
</head>
The element, id and class selector
The jQuery element selector selects elements based on their tag
names.
 $(“<tag-name>”) //element selector
 $(“#<id-name>”) //id selector
 $(“.<class-name>”) //class selector
Example
$(document).ready(function(){
$(“button”).click (function(){
$(“p”).hide();
$(“#test”).hide(); //#id selector
$(“.test”).hide(); //.class selector
});
});
jQuery Event
All the different visitors actions that a web page can respond
to are called events.
An event represents the precise moment when something
happens.
 Mouse events:
Click
Dblclick
Mouseenter
Mouseleave
 Keyboard events:
Keypress
Keydown
Keyup
• Form events:
Submit
Change
Focus
Blur
• Document events:
Load
Resize
Scroll
Unload
Example:
$(“p”).click(function(){
//action goes here
});
jQuery Effects
 Jquery hide(), show() and toggle() method
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
 Jquery fadeIn(), fadeOut(), fadeToggle() and fadeTo()
method.
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector). fadeToggle (speed,callback);
$(selector). fadeTo(speed,callback);

More Related Content

What's hot (20)

Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
Aditya Dwivedi
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Folasade Adedeji
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
Dipen Parmar
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
html-css
html-csshtml-css
html-css
Dhirendra Chauhan
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
Syed Sami
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markerters
SEO SKills
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
Ashwin Shiv
 
Css Basics
Css BasicsCss Basics
Css Basics
Jay Patel
 
Css
CssCss
Css
Hemant Saini
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
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
 
3 Layers of the Web - Part 1
3 Layers of the Web - Part 13 Layers of the Web - Part 1
3 Layers of the Web - Part 1
Jeremy White
 
Css notes
Css notesCss notes
Css notes
Computer Hardware & Trouble shooting
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
JainilSampat
 
Html introduction
Html introductionHtml introduction
Html introduction
Nuhu Abdul Razak
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Meghan Frisco
 
Css
CssCss
Css
Anuj Singh Rajput
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
Aditya Dwivedi
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
Dipen Parmar
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
Syed Sami
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markerters
SEO SKills
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
Ashwin Shiv
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
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
 
3 Layers of the Web - Part 1
3 Layers of the Web - Part 13 Layers of the Web - Part 1
3 Layers of the Web - Part 1
Jeremy White
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Meghan Frisco
 

Similar to Html, css and jquery introduction (20)

Presentation on htmlcssjs-130221085257-phpapp02.pdf
Presentation on  htmlcssjs-130221085257-phpapp02.pdfPresentation on  htmlcssjs-130221085257-phpapp02.pdf
Presentation on htmlcssjs-130221085257-phpapp02.pdf
MeetRajani2
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Html,Css,Js INTERNSHIP REPORT By SELF pptx
Html,Css,Js  INTERNSHIP REPORT By  SELF pptxHtml,Css,Js  INTERNSHIP REPORT By  SELF pptx
Html,Css,Js INTERNSHIP REPORT By SELF pptx
deepuranjankumar08
 
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
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
DaniyalSardar
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratch
Ahmad Al-ammar
 
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxWELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
presentation in html,css,javascript
presentation in html,css,javascriptpresentation in html,css,javascript
presentation in html,css,javascript
FaysalAhammed5
 
Languages for web(HTML,CSS,JS)
Languages for web(HTML,CSS,JS)Languages for web(HTML,CSS,JS)
Languages for web(HTML,CSS,JS)
MHR11
 
Presentation
PresentationPresentation
Presentation
Chetan Kataria
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get started
Dimitris Tsironis
 
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
MrunmayiLohakare
 
Shreyansh_patni web developer
Shreyansh_patni web developerShreyansh_patni web developer
Shreyansh_patni web developer
Shreyanshpatni5
 
HTML Lesson HTML FormsHTML Formsvv4.pptx
HTML Lesson HTML FormsHTML Formsvv4.pptxHTML Lesson HTML FormsHTML Formsvv4.pptx
HTML Lesson HTML FormsHTML Formsvv4.pptx
gacayte0906
 
xhtml_css.ppt
xhtml_css.pptxhtml_css.ppt
xhtml_css.ppt
fakeaccount225095
 
Web Development basics with WordPress
Web Development basics with WordPressWeb Development basics with WordPress
Web Development basics with WordPress
Rashna Maharjan
 
Html starting
Html startingHtml starting
Html starting
Rahul Dihora
 
Web development it slideWeb development it slidemy web development slide-...
Web development  it slideWeb development  it slidemy web development   slide-...Web development  it slideWeb development  it slidemy web development   slide-...
Web development it slideWeb development it slidemy web development slide-...
AliyuUmarIsa
 
Presentation on htmlcssjs-130221085257-phpapp02.pdf
Presentation on  htmlcssjs-130221085257-phpapp02.pdfPresentation on  htmlcssjs-130221085257-phpapp02.pdf
Presentation on htmlcssjs-130221085257-phpapp02.pdf
MeetRajani2
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Html,Css,Js INTERNSHIP REPORT By SELF pptx
Html,Css,Js  INTERNSHIP REPORT By  SELF pptxHtml,Css,Js  INTERNSHIP REPORT By  SELF pptx
Html,Css,Js INTERNSHIP REPORT By SELF pptx
deepuranjankumar08
 
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
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
DaniyalSardar
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratch
Ahmad Al-ammar
 
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxWELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
presentation in html,css,javascript
presentation in html,css,javascriptpresentation in html,css,javascript
presentation in html,css,javascript
FaysalAhammed5
 
Languages for web(HTML,CSS,JS)
Languages for web(HTML,CSS,JS)Languages for web(HTML,CSS,JS)
Languages for web(HTML,CSS,JS)
MHR11
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get started
Dimitris Tsironis
 
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
MrunmayiLohakare
 
Shreyansh_patni web developer
Shreyansh_patni web developerShreyansh_patni web developer
Shreyansh_patni web developer
Shreyanshpatni5
 
HTML Lesson HTML FormsHTML Formsvv4.pptx
HTML Lesson HTML FormsHTML Formsvv4.pptxHTML Lesson HTML FormsHTML Formsvv4.pptx
HTML Lesson HTML FormsHTML Formsvv4.pptx
gacayte0906
 
Web Development basics with WordPress
Web Development basics with WordPressWeb Development basics with WordPress
Web Development basics with WordPress
Rashna Maharjan
 
Web development it slideWeb development it slidemy web development slide-...
Web development  it slideWeb development  it slidemy web development   slide-...Web development  it slideWeb development  it slidemy web development   slide-...
Web development it slideWeb development it slidemy web development slide-...
AliyuUmarIsa
 
Ad

More from cncwebworld (8)

Php framework
Php frameworkPhp framework
Php framework
cncwebworld
 
Introduction to android app development
Introduction to android app developmentIntroduction to android app development
Introduction to android app development
cncwebworld
 
Php Framework
Php FrameworkPhp Framework
Php Framework
cncwebworld
 
Angular JS tutorial
Angular JS tutorialAngular JS tutorial
Angular JS tutorial
cncwebworld
 
ANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNE
cncwebworld
 
.Net the begining
.Net the begining.Net the begining
.Net the begining
cncwebworld
 
Best programming language to learn in 2018
Best programming language to learn in 2018 Best programming language to learn in 2018
Best programming language to learn in 2018
cncwebworld
 
Best tech jobs in present scenario
Best tech jobs in present scenarioBest tech jobs in present scenario
Best tech jobs in present scenario
cncwebworld
 
Introduction to android app development
Introduction to android app developmentIntroduction to android app development
Introduction to android app development
cncwebworld
 
Angular JS tutorial
Angular JS tutorialAngular JS tutorial
Angular JS tutorial
cncwebworld
 
ANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNE
cncwebworld
 
.Net the begining
.Net the begining.Net the begining
.Net the begining
cncwebworld
 
Best programming language to learn in 2018
Best programming language to learn in 2018 Best programming language to learn in 2018
Best programming language to learn in 2018
cncwebworld
 
Best tech jobs in present scenario
Best tech jobs in present scenarioBest tech jobs in present scenario
Best tech jobs in present scenario
cncwebworld
 
Ad

Recently uploaded (20)

How to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time OffHow to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time Off
Celine George
 
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based EducatorDiana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda
 
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdfপ্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
Pragya - UEM Kolkata Quiz Club
 
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
Sritoma Majumder
 
Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..
faizanaltaf231
 
State institute of educational technology
State institute of educational technologyState institute of educational technology
State institute of educational technology
vp5806484
 
How to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo SlidesHow to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo Slides
Celine George
 
Multicultural approach in education - B.Ed
Multicultural approach in education - B.EdMulticultural approach in education - B.Ed
Multicultural approach in education - B.Ed
prathimagowda443
 
Exploring Identity Through Colombian Companies
Exploring Identity Through Colombian CompaniesExploring Identity Through Colombian Companies
Exploring Identity Through Colombian Companies
OlgaLeonorTorresSnch
 
Order Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptxOrder Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptx
Arshad Shaikh
 
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptxQUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
Sourav Kr Podder
 
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
Arshad Shaikh
 
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo SlidesHow to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
Celine George
 
"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx
Arshad Shaikh
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
A Brief Introduction About Jack Lutkus
A Brief Introduction About  Jack  LutkusA Brief Introduction About  Jack  Lutkus
A Brief Introduction About Jack Lutkus
Jack Lutkus
 
Swachata Quiz - Prelims - 01.10.24 - Quiz Club IIT Patna
Swachata Quiz - Prelims - 01.10.24 - Quiz Club IIT PatnaSwachata Quiz - Prelims - 01.10.24 - Quiz Club IIT Patna
Swachata Quiz - Prelims - 01.10.24 - Quiz Club IIT Patna
Quiz Club, Indian Institute of Technology, Patna
 
How to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guidesHow to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guides
Celine George
 
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 
Pragya Champion's Chalice 2025 Set , General Quiz
Pragya Champion's Chalice 2025 Set , General QuizPragya Champion's Chalice 2025 Set , General Quiz
Pragya Champion's Chalice 2025 Set , General Quiz
Pragya - UEM Kolkata Quiz Club
 
How to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time OffHow to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time Off
Celine George
 
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based EducatorDiana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda
 
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdfপ্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
Pragya - UEM Kolkata Quiz Club
 
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
Sritoma Majumder
 
Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..
faizanaltaf231
 
State institute of educational technology
State institute of educational technologyState institute of educational technology
State institute of educational technology
vp5806484
 
How to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo SlidesHow to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo Slides
Celine George
 
Multicultural approach in education - B.Ed
Multicultural approach in education - B.EdMulticultural approach in education - B.Ed
Multicultural approach in education - B.Ed
prathimagowda443
 
Exploring Identity Through Colombian Companies
Exploring Identity Through Colombian CompaniesExploring Identity Through Colombian Companies
Exploring Identity Through Colombian Companies
OlgaLeonorTorresSnch
 
Order Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptxOrder Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptx
Arshad Shaikh
 
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptxQUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
Sourav Kr Podder
 
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
Arshad Shaikh
 
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo SlidesHow to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
Celine George
 
"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx
Arshad Shaikh
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
A Brief Introduction About Jack Lutkus
A Brief Introduction About  Jack  LutkusA Brief Introduction About  Jack  Lutkus
A Brief Introduction About Jack Lutkus
Jack Lutkus
 
How to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guidesHow to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guides
Celine George
 
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 

Html, css and jquery introduction

  • 2. What is HTML  HTML stands for Hyper Text Markup Language  HTML is used for describing web pages.  HTML is a markup language.  A markup language consist of markup tags.  The tags defines document content.  HTML documents include HTML tags and plain text.
  • 3. HTML Tags  HTML markup tags are usually called HTML tags.  HTML tags are keywords surrounded by angle brackets like <HTML>.  Html tags normally come in pairs like <b>and </b>.  The first tag in pair is the start tag and second tag is the end tag.  The end tag is written like the start tag , with a forward slash before the tag name.  Start and end tags are also called opening tags and closing tags. <tagname>Content</tagname>
  • 4. Basic HTML page structure  HTML  HEAD: Non web displayable info and code like meta tags, script, title etc.  BODY: Includes <div> div: Header – We can include branding and navigation elements like logo, slogan, menu, etc. div: Main content – We can include all kind of elements like images, paragraphs, videos, links, etc. div: Footer – We can include informational elements like: copyright, sub menu, links, site info, etc.
  • 5. Example <html> <head> <title>HTML Form Validation Demo</title> </head> <body> <form action=“” id=“”> <h2>HTML Form</h2> <div id=“form_data”> <div class=“fieldgroup”> <label>Email</label> <input type=“text” name=“email”> </div> <div class=“fieldgroup”> <label>Password</label> <input type=“password” name=“password”> </div> <div class=“fieldgroup”> <input type=“submit” value=“submit” class=“submit”> </div> </div> </form> </body> </html>
  • 6. What is CSS  CSS stands for Cascading Style Sheet.  Styles define how to display HTML elements.  External style sheets can save a lot of work.  External style sheets are stored in CSS file.  A CSS file allows to separate web sites HTML content from its style.
  • 7. How to use CSS? There are three types of stylesheets  External style sheet  Internal style sheet  Inline style sheet  External style sheet: An external style sheet is ideal when the style is applied to many pages. <head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css”> <head>  Internal style sheet: An internal style sheet should be used when a single document has a unique style. <head> <style> p {margin-left:200px} body{background-image:url(“images/back40.gif”);} </style> </head>
  • 8.  Inline styles: To use Inline styles use the style attribute in the relevent tag. The style attribute can contain any CSS property. < p style=“color.#fafafa;margin-left:20px”>This is a paragraph.</p>  Multiple styles will cascade into one: Cascading order:  Inline style (inside an HTMLelement)  Inline style sheet (in the head section)  External style sheet  Browser default
  • 9. CSS Syntax  A CSS rule has two main parts: a selector, and one or more declarations  H1 {color:blue; font-size: 12px;} In this example H1 is a selector Color:blue and font-size:12px is a declaration. Color is a property and blue is a value. Font-size is a property and 12px is a value.  Combining selectors: h1, h2, h3, h4, h5, h6{ color: #009900; font family: Georgia, sans-serif; }
  • 10.  The id selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a “#”. Syntax: #selector-id {property:value;}  The class selector The class selector is used to specify a style for a group of elements. The class selector uses the HTML class attribute, and is defined with a “.” Syntax: selector-class {property: value;}
  • 11.  Below are the various ways you can use CSS to style links. a:link {color: #009900} a:visited{color: #999999} a:hover {color: #333333} a:focus {color: #333333} a:active {color: #009900}
  • 12. The CSS Box Model  All HTML elements can be considered as boxes. In CSS the term “box model” is used when talking about design and layout.  The CSS box model is essentially a box that wraps aroun HTML elements and consists of: margin, border, padding and the actual content.  The box model allows to place a border around elements and space elements in relation to other elements.
  • 13. What is jQuery  jQuery is a lightweight, “write less, do more”, Javascript library.  The purpose of jQuery is to make it much easier to use javascript on your website.  jQuery takes a lot of common tasks that requires many lines of javascript code to accomplish, and wraps it into methods that you can call with a single line of code.  jQery also simplifies a lot of the complicated things from javascript like Ajax call and DOM manipulation. Features:  HTML/DOM manipulation  CSS manipulation  HTML event methods  Effects and animations  Ajax
  • 14. jQuery Syntax Basic syntax $(selector).action()  A $ sign to define jQuery  A(selector) to find HTML elements  AjQuery action to be performed on the elements. Example: $(“p”).hide() – hides all <p> elements How to use jQuery: <head> <script src=“//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></ script> </head>
  • 15. The element, id and class selector The jQuery element selector selects elements based on their tag names.  $(“<tag-name>”) //element selector  $(“#<id-name>”) //id selector  $(“.<class-name>”) //class selector Example $(document).ready(function(){ $(“button”).click (function(){ $(“p”).hide(); $(“#test”).hide(); //#id selector $(“.test”).hide(); //.class selector }); });
  • 16. jQuery Event All the different visitors actions that a web page can respond to are called events. An event represents the precise moment when something happens.  Mouse events: Click Dblclick Mouseenter Mouseleave  Keyboard events: Keypress Keydown Keyup
  • 17. • Form events: Submit Change Focus Blur • Document events: Load Resize Scroll Unload Example: $(“p”).click(function(){ //action goes here });
  • 18. jQuery Effects  Jquery hide(), show() and toggle() method $(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback);  Jquery fadeIn(), fadeOut(), fadeToggle() and fadeTo() method. $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector). fadeToggle (speed,callback); $(selector). fadeTo(speed,callback);