Confucius say

I do not enlighten those who are not eager to learn, nor arouse those
who are not anxious to give an explan...
first a few demos
•

webcam magic

•

working of the grid

•

css transitions

•

audio/video/geo_location
tech@pinstorm
of servers
•
•
•

request,params
processing, databases
response

tech@pinstorm
typical layout

sidebar

header

contents

footer
tech@pinstorm
yet another layout
header
navigation

contents

footer
tech@pinstorm
anatomy of a web page
content

opening tags

<html>
<body>
<h1 id=”page_section”>
wake up, this session ain’t that dull?
<...
lets HTML then
•
•
•
•
•

NOT a programming language
.htm .html
is markup for layout, browser inteprets tags etc
<title>.....
jazzying it up
•
•
•
•

the web experience = html + js + css …
html = markup
css = styling
js = programmatic interactivity...
css
•

<style></style>
wake up, this session ain’t that dull
wake up, this session ain’t that dull
h1 {
color: red;
font-w...
JavaScript
<script></script>

alert(“well hello there”);
document.getElementById("page_section").innerHTML = “may the forc...
goal_01
Responsive Design
●

Width

●

Media Queries

●

JavaScript

●

Frameworks

tech@pinstorm
goal_2

tech@pinstorm
</the_end>

tech@pinstorm
Upcoming SlideShare
Loading in …5
×

The html sessions (01) - an introduction to html5

231
-1

Published on

Starting with a skeleton of a web page, basic elements such tags, JavaScript, CSS and leading onto HTML5.
Get an overview of how HTML tags, JavaScript and CSS come together to form, pages just like the one you are viewing right now.

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
231
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The html sessions (01) - an introduction to html5

  1. 1. Confucius say I do not enlighten those who are not eager to learn, nor arouse those who are not anxious to give an explanation themselves. If I have presented one corner of the square and they cannot come back to me with the other three, I should not go over the points again. the <html> sessions @carlyleoliver tech@pinstorm
  2. 2. first a few demos • webcam magic • working of the grid • css transitions • audio/video/geo_location tech@pinstorm
  3. 3. of servers • • • request,params processing, databases response tech@pinstorm
  4. 4. typical layout sidebar header contents footer tech@pinstorm
  5. 5. yet another layout header navigation contents footer tech@pinstorm
  6. 6. anatomy of a web page content opening tags <html> <body> <h1 id=”page_section”> wake up, this session ain’t that dull? </h1> </body> </html> closing tags tech@pinstorm
  7. 7. lets HTML then • • • • • NOT a programming language .htm .html is markup for layout, browser inteprets tags etc <title>..</title> <b>..</b> <u>..</u> notepad, SciTe, dreamweaver etc tech@pinstorm
  8. 8. jazzying it up • • • • the web experience = html + js + css … html = markup css = styling js = programmatic interactivity tech@pinstorm
  9. 9. css • <style></style> wake up, this session ain’t that dull wake up, this session ain’t that dull h1 { color: red; font-weight: bold; } tech@pinstorm
  10. 10. JavaScript <script></script> alert(“well hello there”); document.getElementById("page_section").innerHTML = “may the force be with you”; window.open(); tech@pinstorm
  11. 11. goal_01 Responsive Design ● Width ● Media Queries ● JavaScript ● Frameworks tech@pinstorm
  12. 12. goal_2 tech@pinstorm
  13. 13. </the_end> tech@pinstorm

×