SlideShare a Scribd company logo
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

Recommended for you

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

Wouldn't it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that! When developing for iPhones, iPods, iPads and Android devices—mobile devices using webkit browsers—we can use CSS animations, transforms, multiple background images, rounded corners, text and box shadows, CSS columns, and HTML5 form elements. In this session we'll use some CSS3 features learned in earlier session to create a native looking iPhone web app. We'll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don't have to wait any longer to use CSS3!

webkitsafarihtml5
Div span__object_があればいい
Div  span__object_があればいいDiv  span__object_があればいい
Div span__object_があればいい

The document provides examples of HTML code using different HTML elements like div, span, img and their default display properties. It also demonstrates how to style elements using CSS properties like width, height, margin, padding, border, float, position etc. and different CSS concepts like cascading, selectors, stylesheet etc. The examples aim to explain the basic usage and behavior of common HTML elements and CSS properties.

CSS Selector
CSS SelectorCSS Selector
CSS Selector

The document provides an overview of CSS selectors including basics like element, id and class selectors. It also covers hierarchy selectors like descendant and child selectors. Attribute selectors like [attribute] and [attribute=value] are explained. Finally, pseudo classes like :hover and :active as well as pseudo elements like ::first-letter are summarized. The document serves as a reference for the different types of CSS selectors and how they can be used to select and style elements.

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"/>

Recommended for you

4.1 html lec 4
4.1 html lec 44.1 html lec 4
4.1 html lec 4

The document discusses HTML forms and form inputs. It provides code examples for creating basic forms with different input types like text, password, submit and reset. It demonstrates how to add labels, placeholders, fieldsets, required fields, autofocus and other attributes to form inputs. The document also covers setting the form method, action, and target, as well as how to process form data submitted via GET and POST requests in PHP.

html5htmlweb design
5.1 html lec 5
5.1 html lec 55.1 html lec 5
5.1 html lec 5

The document provides an overview of HTML forms, including how to create basic forms with different input types like text, password, submit and radio buttons. It covers various form attributes like name, value, placeholder, required and different ways to style labels. The document also discusses form elements like select dropdowns, checkboxes and textareas. It provides examples of how to use these different form features to collect user input through a web form.

html5web designweb design and development
[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

This document provides an overview of scraping web pages, including: - Why scrape rather than use APIs - The difference between scraping and crawling - The anatomy of web pages including HTML, CSS, and XPath for selecting elements - Common files like robots.txt and sitemap.xml - Python libraries like urllib and requests for working with URLs and making HTTP requests

web scrapingscrapybeautiful soup
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>

</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>

Recommended for you

1.1 html lec 1
1.1 html lec 11.1 html lec 1
1.1 html lec 1

Web Design with HTML, CSS, Bootstrap Course Lecture 1. Topic: * HTML * Text Formatting * Heading * Link * Image

html5web designweb design and development
Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web Standards

Connecting with your audience is objective number one for any website. Findability—the discipline of helping users discover the content they seek—not only helps businesses get their message out, but it improves the user experience, too. The secret to attaining findability bliss, both with search engines and beyond, lies in the wisdom of web standards.

standardsseofindability
Html tags describe in bangla
Html tags describe in banglaHtml tags describe in bangla
Html tags describe in bangla

1. The document provides definitions and examples for 55 HTML tags, describing their purpose and any differences between HTML 4.01 and HTML 5 specifications. Key tags covered include headings, paragraphs, lists, links, images, forms, tables and more. 2. Many tags have new or removed attributes in HTML 5 to simplify usage or be replaced by CSS styling, like the <font> tag being replaced by CSS. Frames and <center> are also removed in HTML5. 3. New tags in HTML5 include <video>, <audio>, <canvas>, <footer>, <header> and <nav> to define common page sections, as well as <article>, <aside> and <section>

html bangla tag
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>

Recommended for you

Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行

This document discusses HTML5 and its features. It explains that HTML5 aims to provide clear and semantic markup. It highlights new HTML5 elements like <header>, <section>, <article>, and <footer> that divide a document into clearly defined parts. It also discusses new multimedia capabilities in HTML5 such as <audio> and <canvas> elements, forms, local storage, geolocation, and databases. The document advocates that HTML5 is beautiful, practical, and free to use. It provides examples and links to further resources on HTML5 features.

html5msdn
Html bangla
Html banglaHtml bangla
Html bangla

The document provides an introduction to HTML elements, tags, and attributes. It discusses common HTML elements like paragraphs, headings, and line breaks. It explains how to use opening and closing tags to define elements in an HTML document. Attributes are described which can customize elements, such as align attributes to control text alignment. The document also gives examples of how to code basic HTML elements and attributes.

Bangla html
Bangla htmlBangla html
Bangla html

The document provides information on HTML tags and elements for creating web pages. It discusses common tags like <p> for paragraphs, <h1>-<h6> for headings, and <body> for the content container. It also covers basic HTML structure with <html>, <head>, and <body> tags. Attributes are described along with examples for aligning, styling and providing additional information for elements. Different lists like ordered, unordered and definition lists are explained with <ol>, <ul> and <dl> tags.

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>

Recommended for you

計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205

The document contains information about HTML elements and tags for building web pages. It includes descriptions and examples of common HTML elements like headings, paragraphs, links, images, tables, lists, forms, layout using div, and more. Each item is presented with the HTML code example and a brief explanation. The document serves as a reference for basic HTML elements and syntax.

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

Creating tables: creating simple table, specifying the size of the table, specifying the width of the column, merging table cells, using tables for page layout, formatting tables: applying table borders, applying background and foreground fills, changing cell padding, spacing and alignment, creating user forms: creating basic form, using check boxes and option buttons, creating lists, additional input types in HTML5

fybsc it web programmingcreating tableshtml forms
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!

Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.

html5webglcss3
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>

Recommended for you

計算機概論20161212
計算機概論20161212計算機概論20161212
計算機概論20161212

This document provides an overview of important web development languages and JavaScript capabilities. It discusses HTML for defining content, CSS for layout and styling, and JavaScript for behavior. JavaScript can respond to events, modify HTML elements, validate input, get browser info, and create cookies. Examples are given for changing HTML content and styles using JavaScript, as well as hiding and showing elements. The document also covers JavaScript data types, conditions, and loops.

Museo de antequera
Museo de antequeraMuseo de antequera
Museo de antequera

The document summarizes a visit to the Antequera Museum located in Antequera, Spain. It describes the building as being located in the Najera Palace in Coso Viejo Square, with 20 permanent exhibition rooms. Key artifacts mentioned include the Efebo de Antequera bronze sculpture of a young boy that is over 2,000 years old. It also describes Acilia Plecusa's tomb, along with works by painter Cristóbal Toral. The summary encourages visitors to enjoy the museum and learn about the art, history and culture of Antequera.

educación secundaria inglés
Profunctor and Arrow
Profunctor and ArrowProfunctor and Arrow
Profunctor and Arrow

This document discusses ProFunctor, Arrow, and their relationships. [1] ProFunctors generalize Functors by allowing mapping of both the domain and codomain of a function, while Functors only allow mapping the codomain. [2] Arrows allow mapping of both domain and codomain like Profunctors, and provide additional operations. [3] The ProFunctor type class splits the constraints of Arrow into separate operations for mapping the domain and codomain.

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 ?

Recommended for you

HaskellDB
HaskellDBHaskellDB
HaskellDB

part of presentation at Haskell Party 2012-12 in Tokyo

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
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

More Related Content

What's hot

关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
Sofish Lin
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheet
goldenveizer
 
Front-End Methodologies
Front-End MethodologiesFront-End Methodologies
Front-End Methodologies
Arash 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 development
Estelle Weyl
 
Div span__object_があればいい
Div  span__object_があればいいDiv  span__object_があればいい
Div span__object_があればいい
Shuhei Iitsuka
 
CSS Selector
CSS SelectorCSS Selector
CSS Selector
Calos Kao
 
4.1 html lec 4
4.1 html lec 44.1 html lec 4
4.1 html lec 4
IoT Code Lab
 
5.1 html lec 5
5.1 html lec 55.1 html lec 5
5.1 html lec 5
IoT Code Lab
 
[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
Andrew Collier
 
1.1 html lec 1
1.1 html lec 11.1 html lec 1
1.1 html lec 1
IoT Code Lab
 
Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web Standards
Aarron Walter
 
Html tags describe in bangla
Html tags describe in banglaHtml tags describe in bangla
Html tags describe in bangla
Amrita Chandra Das
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行
Sofish Lin
 
Html bangla
Html banglaHtml bangla
Html bangla
bhorerpakhi
 
Bangla html
Bangla htmlBangla html
Bangla html
Shopnomoy Prantor
 
計算機概論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
Arti 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
志宇 許
 

What's hot (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
 

Viewers also liked

Museo de antequera
Museo de antequeraMuseo de antequera
Museo de antequera
palomatq
 
Profunctor and Arrow
Profunctor and ArrowProfunctor and Arrow
Profunctor and Arrow
Kei Hibino
 
HaskellDB
HaskellDBHaskellDB
HaskellDB
Kei Hibino
 
Lazy Pairing Heap
Lazy Pairing HeapLazy Pairing Heap
Lazy Pairing Heap
Kei Hibino
 
Adding simpl GVN path into GHC
Adding simpl GVN path into GHCAdding simpl GVN path into GHC
Adding simpl GVN path into GHC
Kei Hibino
 
Html5 101
Html5 101Html5 101
Html5 101
Mouafa Ahmed
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
In a Rocket
 

Viewers also liked (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
 

Similar to Html5 101

HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
Rahul Mishra
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
Pablo Garaizar
 
html5
html5html5
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
Timothy Fisher
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
www.netgains.org
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
 
Day1
Day1Day1
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
Kevin 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
 
HTML5
HTML5HTML5
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
Anthony Montalbano
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
Frédéric Harper
 
JavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptxJavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptx
VivekBaghel30
 
Html5
Html5Html5
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
Rômulo Reis de Oliveira
 
Html5 and css3
Html5 and css3Html5 and css3
Html5 and css3
Deniss Platonov
 
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
RORLAB
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
Wahyu 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
 

Similar to 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
 

Recently uploaded

The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 

Recently uploaded (20)

The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 

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