Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

Introduction to HTML5 and CSS3

190 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×