SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
HTML5 101
THE INTRO
THE INTRO
•
•
•
•
•
•

HTML4
XHTML
WHATWG (Web Hypertext Application Technology Working Group)
W3C adopte HTML5
XHTML 2 versus HTML5/HTML 5
in 2009 HTML5 had “won.”
THE INTRO

HTML5 = HTML 5 + CSS3 + JS
Content

Presentation

Script
HTML5 technologies:
• Device Access
• 3D, Graphics & Effects
• CSS3
• Semantics
• Multimedia
• Connectivity
• Performance & Integration
• Offline & Storage
HTML5 gives us new standards for how we can
create web applications, with powerful APIs for things
such as canvas for drawing, drag and drop, offline
storage, and native video in the browser.
When Will HTML5 Be Ready for Use?

2022
Do I Have to Wait Until 2022 ?

NO
New Structural Elements in HTML5
●

Old Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
●

Old Character Encoding

<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
●

Old JavaScript and CSS Links

●

New Doctype

<!DOCTYPE html>
●

New Character Encoding

<meta charset="utf-8" />
●

New JavaScript and CSS Links

<script type="text/javascript" src="script.js"></script>

<script src="script.js"></script>

<link rel="stylesheet" type="text/css" href="style.css"/>

<link rel="stylesheet" href="style.css"/>
New Structural Elements in HTML5
HTML5 Starting Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>page title</title>
<script src="my-script.js"></script>
<link rel="stylesheet" href="my-css.css" />
</head>
<body>
<!-- add your HTML5 here :) -->
</body>
Header Markup
<header>
<img alt="my logo" src="logo.png" />
<h1><a href="#">my site</a></h1>
</header>
Navigation Markup
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Multi Navigation Markup
<nav>
<h2>title 1</h2>
<ul>
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
</ul>
<h2>title 2</h2>
<ul>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul> </nav>
Article Markup
<article>
<header>
<h1>title</h1> <p>14nd Feb 2014</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</article>
Section Markup
<section>
<h1> heading </h2>

<section>
<h3> title </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

</section>
Aside Markup
<aside>
<h2>links</h2>
<nav>
<ul>
<li><a href="#">10 things about HTML5</a></li>
<li><a href="#">10 things about CSS3</a></li>
<li><a href="#">10 things about JavaScript</a></li>
</ul>
</nav>
</aside>
Footer Markup
<footer>
<p>This article was published on <time>13 FEB 2014</time></p>
<small>&copy; Copyright HTML5 101</small>
</footer>
Details Markup
<details open>
<summary>details 1</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</details>
<details>
<summary>details 2</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</details>
Order list Markup
<ol reversed>
<li>Red</li> <li>Green</li> <li>Blue</li>
</ol>

<ol start="2" type="I">
<li>Red</li> <li>Green</li> <li>Blue</li>
</ol>

type="1" = 1, 2, 3,4, 5
type="a" = a, b, c, d, e
type="A" = A, B, C, D, E
type="i" = i, ii, iii, iv, v
type="I" = I, II, III, IV, V
Definition list Markup
<h1>course infos</h1>
<dl>
<dt>Title:</dt>
<dd>HTML5 ISI</dd>
<dt>cover:</dt>
<dd>HTML5</dd>
<dd>CSS3</dd>
<dd>JS</dd>
<dt>Club:</dt>
<dd>Creative Lab</dd>
</dl>
Form Markup
<form><fieldset>
<legend>Fieldset legend </legend>
<label for="date">What date do you leave?</label>
<input required type="date" id="date" name="date" />
<textarea id="textarea" rows="5" cols="40">This is a textarea</textarea>
<select id="select">
<option>Option 1</option> <option>Option 2</option>
<option>Option 3</option> <option>Option 4</option>
</select>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</fieldset></form>
Input type Markup
<input type="text" />
<input type="date" />
<input type="checkbox" />
<input type="radio" />
<input type="file" />
<input type="password" />
<input type="email" />
<input type="tel" />
<input type="url"/>
<input type="search" />
<input type="color">
<input type="number" />
<input type="range" />
Input attributes
●

Required Input

<input required type="****" />
●

Autofocus

<input autofocus type="****" />
●

Placeholder

<input type="****" placeholder="sample text" />
●

Multiple File Uploads

<input multiple type="file" id="upload" name="upload" />

Value , id , class ...
Input & Datalist Markup
<label for="sport">What's your favourite sport?</label>
<input list="sportlist" type="text" id="sport" name="sport" />
<datalist id="sportlist">
<option label="Basketball" value="Basketball" />
<option label="Football " value="Football" />
<option label="Handball" value="Handball" />
</datalist>
Video Markup
<video src="movie.mp4"></video>

OR
<video src="movie.mp4" />

OR
<video width="320" height="240" controls >
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
<source src="movie.ogv" type="video/ogg" />
<p>Sorry, your browser is really old. Please upgrade.</p>
</video>

Option attributes: preload,

autoplay, poster="img.jpg", loop, audio="muted"
Audio Markup
<audio src="music.mp3" controls />

OR
<audio controls>
<source src="music.mp3" type="audio/mp3" />
<source src="music.ogg" type="audio/ogg" />
</audio>

Option attributes: controls, preload, autoplay, loop
Progress & Meter Markup
Progress
<p>You are downloading a very important file, please wait.</p>
<progress value="45" max="100"></progress><span> 45% complete</span>

Meter
<meter value="10" min="0" max="100" low="40" high="90" optimum="100"></meter>
<meter value="80" min="0" max="100" low="40" high="90" optimum="100"></meter>
<meter value="100" min="0" max="100" low="40" high="90" optimum="100"></meter>
Intro to the DOM
What's DOM ?
Why I should know it ?
How I use it ?
What's Next ?
HTML5 developing doesn't need more than a text editor and a latest browser ,
So , I advise you to use one from this list as a text editor :
Sublime text 2 , Bracket , Adobe Edge Code , Adobe DreamWeaver .

And use chrome (canary) or firefox (Nightly) as a browser
THANK YOU

Contenu connexe

Tendances

关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事Sofish Lin
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheetgoldenveizer
 
Front-End Methodologies
Front-End MethodologiesFront-End Methodologies
Front-End MethodologiesArash Manteghi
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Div span__object_があればいい
Div  span__object_があればいいDiv  span__object_があればいい
Div span__object_があればいいShuhei Iitsuka
 
CSS Selector
CSS SelectorCSS Selector
CSS SelectorCalos Kao
 
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet VikingAndrew Collier
 
Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web StandardsAarron Walter
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行Sofish Lin
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205志宇 許
 
FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media
FYBSC IT Web Programming Unit II  Html 5 Tables, Forms and MediaFYBSC IT Web Programming Unit II  Html 5 Tables, Forms and Media
FYBSC IT Web Programming Unit II Html 5 Tables, Forms and MediaArti Parab Academics
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
計算機概論20161212
計算機概論20161212計算機概論20161212
計算機概論20161212志宇 許
 

Tendances (19)

关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheet
 
Front-End Methodologies
Front-End MethodologiesFront-End Methodologies
Front-End Methodologies
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 
Div span__object_があればいい
Div  span__object_があればいいDiv  span__object_があればいい
Div span__object_があればいい
 
CSS Selector
CSS SelectorCSS Selector
CSS Selector
 
4.1 html lec 4
4.1 html lec 44.1 html lec 4
4.1 html lec 4
 
5.1 html lec 5
5.1 html lec 55.1 html lec 5
5.1 html lec 5
 
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
 
1.1 html lec 1
1.1 html lec 11.1 html lec 1
1.1 html lec 1
 
Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web Standards
 
Html tags describe in bangla
Html tags describe in banglaHtml tags describe in bangla
Html tags describe in bangla
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行
 
Html bangla
Html banglaHtml bangla
Html bangla
 
Bangla html
Bangla htmlBangla html
Bangla html
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205
 
FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media
FYBSC IT Web Programming Unit II  Html 5 Tables, Forms and MediaFYBSC IT Web Programming Unit II  Html 5 Tables, Forms and Media
FYBSC IT Web Programming Unit II Html 5 Tables, Forms and Media
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
計算機概論20161212
計算機概論20161212計算機概論20161212
計算機概論20161212
 

En vedette

Museo de antequera
Museo de antequeraMuseo de antequera
Museo de antequerapalomatq
 
Profunctor and Arrow
Profunctor and ArrowProfunctor and Arrow
Profunctor and ArrowKei Hibino
 
Lazy Pairing Heap
Lazy Pairing HeapLazy Pairing Heap
Lazy Pairing HeapKei Hibino
 
Adding simpl GVN path into GHC
Adding simpl GVN path into GHCAdding simpl GVN path into GHC
Adding simpl GVN path into GHCKei Hibino
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionIn a Rocket
 

En vedette (7)

Museo de antequera
Museo de antequeraMuseo de antequera
Museo de antequera
 
Profunctor and Arrow
Profunctor and ArrowProfunctor and Arrow
Profunctor and Arrow
 
HaskellDB
HaskellDBHaskellDB
HaskellDB
 
Lazy Pairing Heap
Lazy Pairing HeapLazy Pairing Heap
Lazy Pairing Heap
 
Adding simpl GVN path into GHC
Adding simpl GVN path into GHCAdding simpl GVN path into GHC
Adding simpl GVN path into GHC
 
Html5 101
Html5 101Html5 101
Html5 101
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 

Similaire à Html5 101

HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web DevelopmentRahul Mishra
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and ImprovedTimothy Fisher
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Mandakini Kumari
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckAnthony Montalbano
 
JavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptxJavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptxVivekBaghel30
 
Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2RORLAB
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBWahyu Putra
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]Dalibor Gogic
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System Channy Yun
 

Similaire à Html5 101 (20)

HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
Day1
Day1Day1
Day1
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
 
HTML5
HTML5HTML5
HTML5
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
JavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptxJavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptx
 
Html5
Html5Html5
Html5
 
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
 
Html5 and css3
Html5 and css3Html5 and css3
Html5 and css3
 
Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2Action View Form Helpers - 1, Season 2
Action View Form Helpers - 1, Season 2
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
 

Dernier

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Dernier (20)

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

Html5 101

  • 3. THE INTRO • • • • • • HTML4 XHTML WHATWG (Web Hypertext Application Technology Working Group) W3C adopte HTML5 XHTML 2 versus HTML5/HTML 5 in 2009 HTML5 had “won.”
  • 4. THE INTRO HTML5 = HTML 5 + CSS3 + JS Content Presentation Script
  • 5. HTML5 technologies: • Device Access • 3D, Graphics & Effects • CSS3 • Semantics • Multimedia • Connectivity • Performance & Integration • Offline & Storage
  • 6. HTML5 gives us new standards for how we can create web applications, with powerful APIs for things such as canvas for drawing, drag and drop, offline storage, and native video in the browser.
  • 7. When Will HTML5 Be Ready for Use? 2022 Do I Have to Wait Until 2022 ? NO
  • 8. New Structural Elements in HTML5 ● Old Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ● Old Character Encoding <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ● Old JavaScript and CSS Links ● New Doctype <!DOCTYPE html> ● New Character Encoding <meta charset="utf-8" /> ● New JavaScript and CSS Links <script type="text/javascript" src="script.js"></script> <script src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css"/> <link rel="stylesheet" href="style.css"/>
  • 10. HTML5 Starting Page <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>page title</title> <script src="my-script.js"></script> <link rel="stylesheet" href="my-css.css" /> </head> <body> <!-- add your HTML5 here :) --> </body>
  • 11. Header Markup <header> <img alt="my logo" src="logo.png" /> <h1><a href="#">my site</a></h1> </header>
  • 12. Navigation Markup <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
  • 13. Multi Navigation Markup <nav> <h2>title 1</h2> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> </ul> <h2>title 2</h2> <ul> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> </ul> </nav>
  • 14. Article Markup <article> <header> <h1>title</h1> <p>14nd Feb 2014</p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p> </article>
  • 15. Section Markup <section> <h1> heading </h2> <section> <h3> title </h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </section> </section>
  • 16. Aside Markup <aside> <h2>links</h2> <nav> <ul> <li><a href="#">10 things about HTML5</a></li> <li><a href="#">10 things about CSS3</a></li> <li><a href="#">10 things about JavaScript</a></li> </ul> </nav> </aside>
  • 17. Footer Markup <footer> <p>This article was published on <time>13 FEB 2014</time></p> <small>&copy; Copyright HTML5 101</small> </footer>
  • 18. Details Markup <details open> <summary>details 1</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </details> <details> <summary>details 2</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </details>
  • 19. Order list Markup <ol reversed> <li>Red</li> <li>Green</li> <li>Blue</li> </ol> <ol start="2" type="I"> <li>Red</li> <li>Green</li> <li>Blue</li> </ol> type="1" = 1, 2, 3,4, 5 type="a" = a, b, c, d, e type="A" = A, B, C, D, E type="i" = i, ii, iii, iv, v type="I" = I, II, III, IV, V
  • 20. Definition list Markup <h1>course infos</h1> <dl> <dt>Title:</dt> <dd>HTML5 ISI</dd> <dt>cover:</dt> <dd>HTML5</dd> <dd>CSS3</dd> <dd>JS</dd> <dt>Club:</dt> <dd>Creative Lab</dd> </dl>
  • 21. Form Markup <form><fieldset> <legend>Fieldset legend </legend> <label for="date">What date do you leave?</label> <input required type="date" id="date" name="date" /> <textarea id="textarea" rows="5" cols="40">This is a textarea</textarea> <select id="select"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> </fieldset></form>
  • 22. Input type Markup <input type="text" /> <input type="date" /> <input type="checkbox" /> <input type="radio" /> <input type="file" /> <input type="password" /> <input type="email" /> <input type="tel" /> <input type="url"/> <input type="search" /> <input type="color"> <input type="number" /> <input type="range" />
  • 23. Input attributes ● Required Input <input required type="****" /> ● Autofocus <input autofocus type="****" /> ● Placeholder <input type="****" placeholder="sample text" /> ● Multiple File Uploads <input multiple type="file" id="upload" name="upload" /> Value , id , class ...
  • 24. Input & Datalist Markup <label for="sport">What's your favourite sport?</label> <input list="sportlist" type="text" id="sport" name="sport" /> <datalist id="sportlist"> <option label="Basketball" value="Basketball" /> <option label="Football " value="Football" /> <option label="Handball" value="Handball" /> </datalist>
  • 25. Video Markup <video src="movie.mp4"></video> OR <video src="movie.mp4" /> OR <video width="320" height="240" controls > <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <p>Sorry, your browser is really old. Please upgrade.</p> </video> Option attributes: preload, autoplay, poster="img.jpg", loop, audio="muted"
  • 26. Audio Markup <audio src="music.mp3" controls /> OR <audio controls> <source src="music.mp3" type="audio/mp3" /> <source src="music.ogg" type="audio/ogg" /> </audio> Option attributes: controls, preload, autoplay, loop
  • 27. Progress & Meter Markup Progress <p>You are downloading a very important file, please wait.</p> <progress value="45" max="100"></progress><span> 45% complete</span> Meter <meter value="10" min="0" max="100" low="40" high="90" optimum="100"></meter> <meter value="80" min="0" max="100" low="40" high="90" optimum="100"></meter> <meter value="100" min="0" max="100" low="40" high="90" optimum="100"></meter>
  • 28. Intro to the DOM What's DOM ? Why I should know it ? How I use it ?
  • 29. What's Next ? HTML5 developing doesn't need more than a text editor and a latest browser , So , I advise you to use one from this list as a text editor : Sublime text 2 , Bracket , Adobe Edge Code , Adobe DreamWeaver . And use chrome (canary) or firefox (Nightly) as a browser