SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Downloaden Sie, um offline zu lesen
HTML5 CSS3 Basics
HTML5
• Less Header Code
• More Semantic HTML tags Media Tags
• Input Types
• Form Validation
• Geolocation
• Draggable
• Local Storage Cross-Domain Messaging Web
Sockets
• Canvas
Less Header Code
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 5
<!DOCTYPE HTML>
<html> <head><meta charset=”utf-8”>
<title>Page</title> </head>
Less Header Code
HTML 4
<script src="jquery.js” type="text/javascript"> </script>
<link href="style.css” type="text/css"></link>
HTML 5
<script src="jquery.js"> </script>
<link href="style.css"></link>
Less Header Code
You should avoid following tags and attributes in HTML5
<font>
<center>
<frame>
align
bgcolor
height
width
size
type
Semantic HTML tags
Semantic HTML tags
HTML5 CSS3 Basics
Media Tags
AUDIO
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
Media Tags
VIDEO
<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>
Input Types
Input Types
Input Types
Input Types
Input Types
Input Types
Form Validation
Placeholder
<input name="q" ” type=“text” placeholder="Go to a
Website”>
Form Validation
<form method='post' action=''>
Username:
<input name="username" type="text" required/>
Password:
<input name="password" type="password" required/>
Email:
<input name="email" type="email" required/>
<input type="submit" value=”SAVE"/>
</form>
Form Validation Support
IE
10.0+
FIREFOX
4.0+
SAFARI
5.0+
CHROME
10.0+
OPERA
9.0+
Geolocation
navigator.geolocation.getCurrentPosition( function(position){
position.coords.latitude,
position.coords.longitude }
);
Local Storage
mainfest.appcache
CACHE MANIFEST
index.html
style.css
logo.png
FALLBACK:
/ no-internet.html
NETWORK:
*
HTML5 Code
<!doctype html>
<html manifest="mainfest.appcache">
Reference URL
http://www.9lessons.info/2013/03/html5-application-cache.html
Canvas
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
<body>
<canvas id="myCanvas" width="200" height="100" ></canvas>
</body>
http://demos.9lessons.info/game.php
http://demos.9lessons.info/egg/
HTML5 Demos
Web Socket
http://demo.kaazing.com/livefeed/
Geo Location
http://demos.9lessons.info/geo2.html
Reference
http://html5demos.com/
http://www.html5rocks.com/en/
HTML5 CSS3 Basics
CSS3
• Responsive Design
• Border Radius
• Text Effects
• Web Fonts
• Transitions
Responsive Design
@media only screen and (min-width: 480px){
#header{ background-color: red }
}
@media only screen and (min-width: 768px){
#header{ background-color: blue }
}
@media only screen and (min-width: 1140px) {
#header{ background-color: green }
}
Responsive Design
Demos
http://www.smashingmagazine.com/
http://demos.9lessons.info/responsive/
Border Radius
Code
#button
{
-moz-border-radius: 15px; // Firefox
-webkit-border-radius: 15px; // Safari Crome
border-radius: 15px; // IE - 9/10
}
Online Tools
http://css3.me/
http://css3generator.com/
Text Effects
Code
#Effect
{
color: #ffffff;
text-shadow: 0 1px 0 #999,
0 2px 0 #999,
0 3px 0 #999,
0 4px 0 #999,
0 5px 0 #999,
0 6px 0 #000;
}
Text Effects
Online Tools
http://css3.me/
http://css3generator.com/
http://css3gen.com/text-shadow/
Web Fonts
@font-face
{
font-family: chandy;
src: url(’fonts/comesinhandy.ttf') format("opentype");
}
.myfont
{
font-family:”chandy”,arial; font-size:80px
}
// HTML Code
<div class="myfont”>Website Title</div>
Web Fonts
Google Fonts
http://www.google.com/fonts/
Transitions
.ant_left
{
top: -22px;
left: 15px;
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
transform:rotate(-30deg);
}
Transitions
Demos
http://jsfiddle.net/MZpgY/3/embedded/result/
http://jsfiddle.net/Z7daH/embedded/result/
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
<script src="modernizr.min.js"></script>
Questions
Thanks
Srinivas Tamada
http://9lessons.info

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
Html media
Html mediaHtml media
Html media
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Intro to web scraping with Python
Intro to web scraping with PythonIntro to web scraping with Python
Intro to web scraping with Python
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
HTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafHTML Dasar : #4 Paragraf
HTML Dasar : #4 Paragraf
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
 
WordPress Complete Tutorial
WordPress Complete TutorialWordPress Complete Tutorial
WordPress Complete Tutorial
 
Css Display Property
Css Display PropertyCss Display Property
Css Display Property
 
Html forms
Html formsHtml forms
Html forms
 
Jquery
JqueryJquery
Jquery
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
jQuery
jQueryjQuery
jQuery
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
 
Domain and hosting
Domain and hostingDomain and hosting
Domain and hosting
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 

Ähnlich wie HTML5 CSS3 Basics

Html&Browser
Html&BrowserHtml&Browser
Html&BrowserAlipay
 
Base HTML & CSS
Base HTML & CSSBase HTML & CSS
Base HTML & CSSNick Chan
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2mmvidanes29
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelalShub
 
Super quick introduction to html5
Super quick introduction to html5Super quick introduction to html5
Super quick introduction to html5Woody Pewitt
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web DevelopmentRahul Mishra
 
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
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 
GDSC HTML (Intro to Web Development) @Wagner College.pptx
GDSC HTML (Intro to Web Development) @Wagner College.pptxGDSC HTML (Intro to Web Development) @Wagner College.pptx
GDSC HTML (Intro to Web Development) @Wagner College.pptxAhmedEssam402
 
Seo cheat sheet_2-2013
Seo cheat sheet_2-2013Seo cheat sheet_2-2013
Seo cheat sheet_2-2013SEOBANK
 
Moz SEO Cheat Sheet
Moz SEO Cheat SheetMoz SEO Cheat Sheet
Moz SEO Cheat Sheetjnnydeep
 
The Web Developer's SEO Cheat Sheet 2.0 from the Moz Blog
The Web Developer's SEO Cheat Sheet 2.0 from the Moz BlogThe Web Developer's SEO Cheat Sheet 2.0 from the Moz Blog
The Web Developer's SEO Cheat Sheet 2.0 from the Moz BlogFoteini Vavitsa
 

Ähnlich wie HTML5 CSS3 Basics (20)

Html&Browser
Html&BrowserHtml&Browser
Html&Browser
 
Base HTML & CSS
Base HTML & CSSBase HTML & CSS
Base HTML & CSS
 
Html5
Html5Html5
Html5
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelal
 
Super quick introduction to html5
Super quick introduction to html5Super quick introduction to html5
Super quick introduction to html5
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
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
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
 
Html 5
Html 5Html 5
Html 5
 
HTML Basics by software development company india
HTML Basics by software development company indiaHTML Basics by software development company india
HTML Basics by software development company india
 
Html5
Html5Html5
Html5
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
 
Intro to-html5
Intro to-html5Intro to-html5
Intro to-html5
 
GDSC HTML (Intro to Web Development) @Wagner College.pptx
GDSC HTML (Intro to Web Development) @Wagner College.pptxGDSC HTML (Intro to Web Development) @Wagner College.pptx
GDSC HTML (Intro to Web Development) @Wagner College.pptx
 
Seo cheat sheet_2-2013
Seo cheat sheet_2-2013Seo cheat sheet_2-2013
Seo cheat sheet_2-2013
 
Moz SEO Cheat Sheet
Moz SEO Cheat SheetMoz SEO Cheat Sheet
Moz SEO Cheat Sheet
 
The Web Developer's SEO Cheat Sheet 2.0 from the Moz Blog
The Web Developer's SEO Cheat Sheet 2.0 from the Moz BlogThe Web Developer's SEO Cheat Sheet 2.0 from the Moz Blog
The Web Developer's SEO Cheat Sheet 2.0 from the Moz Blog
 

Kürzlich hochgeladen

Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 

Kürzlich hochgeladen (20)

Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 

HTML5 CSS3 Basics