Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 & CSS3
AN INTRODUCTION
1
Why HTML5?
HTML5
+
CSS3
+
Javascript
2
Semantic Syntax
with
Modern Styling
for
Better Interaction
 Semantic Tags
 New form elements & attributes
 CSS Selectors
 CSS Box model
 Responsive vs Adaptive Web Design
 Med...
Semantic Tags
 Literally means ‘relating to’
 Describes the content to both the developer and the
browser
 Non semantic...
5<header> defines the header of the document/ article/ section
<nav> defines the navigation links
<article> defines the pr...
Form elements
 Existing – text, password, radio button, checkbox, select,
button, file
 New tags –
 date, datetime, mon...
Cascading Style Sheets 7
 CSS Rule
 Selectors
 Box Model
 Display and Visibility
CSS Selectors
 Element selector – div, p
 Class selector - .className
 ID selector – #id
 Attribute selectors – input[...
CSS Box model 9
Display and visibility
div {
display: inline; /* default, takes content width, no line breaks*/
display: inline-block; /* ...
Responsive vs Adaptive Web
Design
11
 RWD
 relies on flexible and fluid grids
 Changes with browser
 Content breaks ap...
Media Query
@media not|only mediatype and (media feature) {
CSS-Code;
}
 Media Type
 Screen, print, handheld, all, etc.
...
Media Query implementation
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" hr...
Web Storage
 Store data in browser
 Client side key-value pairing
 Localstorage
 Persistent across sessions
 localSto...
Upcoming SlideShare
Loading in …5
×

Introduction to HTML5 and CSS3

172 views

Published on

A basic introduction to HTML5 and CSS3.
Handout for my session dated March 13, 2015

Published in: Technology
  • Be the first to comment

Introduction to HTML5 and CSS3

  1. 1. HTML5 & CSS3 AN INTRODUCTION 1
  2. 2. Why HTML5? HTML5 + CSS3 + Javascript 2 Semantic Syntax with Modern Styling for Better Interaction
  3. 3.  Semantic Tags  New form elements & attributes  CSS Selectors  CSS Box model  Responsive vs Adaptive Web Design  Media Queries  Web Storage 3 Not covered : • Media tags – audio, video • Canvas • Geolocation • Drag and drop • Web workers
  4. 4. Semantic Tags  Literally means ‘relating to’  Describes the content to both the developer and the browser  Non semantic elements – div, span  Described using ID and classes  Header, footer, nav, article, section, aside, figure & figcaption  Example 4
  5. 5. 5<header> defines the header of the document/ article/ section <nav> defines the navigation links <article> defines the primary content <section> defines the sections <aside> defines the extra content <footer> defines the footer of the document/ article/ section
  6. 6. Form elements  Existing – text, password, radio button, checkbox, select, button, file  New tags –  date, datetime, month, time , week  email, number, range, search, tel, url  Color, datalist  Example 6
  7. 7. Cascading Style Sheets 7  CSS Rule  Selectors  Box Model  Display and Visibility
  8. 8. CSS Selectors  Element selector – div, p  Class selector - .className  ID selector – #id  Attribute selectors – input[type=“text”]  Pseudo-selectors - :valid, :checked  Quiz! 8
  9. 9. CSS Box model 9
  10. 10. Display and visibility div { display: inline; /* default, takes content width, no line breaks*/ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* full width, line break before and after*/ display: none; /* Hide */ [visibility: hidden] } Others : Run-in, table, flex 10
  11. 11. Responsive vs Adaptive Web Design 11  RWD  relies on flexible and fluid grids  Changes with browser  Content breaks apart & realigns  AWD  relies on predefined screen sizes.  predefined sizes called breakpoints when different layouts are triggered  Controlled by media queries Responsive VS Adaptive
  12. 12. Media Query @media not|only mediatype and (media feature) { CSS-Code; }  Media Type  Screen, print, handheld, all, etc.  Media feature  Width, height  mi/n/max-device-width/height  Aspect ratio  Orientation, etc. 12
  13. 13. Media Query implementation <!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a stylesheet --> <style> @media (max-width: 600px) { selector{ display: none; } } </style> Example 13
  14. 14. Web Storage  Store data in browser  Client side key-value pairing  Localstorage  Persistent across sessions  localStorage.setItem("localKey", "localValue");  localStorage.getItem("localKey ");  Session storage  Lost at the end of session  When browser is closed, data stored is lost  sessionStorage.sessionKey="sessionValue"  sessionStorage.sessionKey 14

×