SlideShare a Scribd company logo
1 of 13
Download to read offline
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
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?
</h1>
</body>
</html>
closing tags
tech@pinstorm
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
jazzying it up
•
•
•
•

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

tech@pinstorm
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
JavaScript
<script></script>

alert(“well hello there”);
document.getElementById("page_section").innerHTML = “may the force be with you”;
window.open();

tech@pinstorm
goal_01
Responsive Design
●

Width

●

Media Queries

●

JavaScript

●

Frameworks

tech@pinstorm
goal_2

tech@pinstorm
</the_end>

tech@pinstorm

More Related Content

Similar to The html sessions (01) - an introduction to html5

Html week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourHtml week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourOsama Ghandour Geris
 
Survey on Script-based languages to write a Chatbot
Survey on Script-based languages to write a ChatbotSurvey on Script-based languages to write a Chatbot
Survey on Script-based languages to write a ChatbotNguyen Giang
 
Writing Commits for You, Your Friends, and Your Future Self
Writing Commits for You, Your Friends, and Your Future SelfWriting Commits for You, Your Friends, and Your Future Self
Writing Commits for You, Your Friends, and Your Future SelfAll Things Open
 
DevOps: Cultural and Tooling Tips Around the World
DevOps: Cultural and Tooling Tips Around the WorldDevOps: Cultural and Tooling Tips Around the World
DevOps: Cultural and Tooling Tips Around the WorldDynatrace
 
NUS Hackers Project Intern 2016
NUS Hackers Project Intern 2016NUS Hackers Project Intern 2016
NUS Hackers Project Intern 2016Vishnu Prem
 
CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)Future Insights
 
Pattern matching presentation
Pattern matching presentationPattern matching presentation
Pattern matching presentationMichael Dimmitt
 
Modeling Rich Narrative Content
Modeling Rich Narrative ContentModeling Rich Narrative Content
Modeling Rich Narrative ContentJeff Eaton
 
Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptxMaruthiPrasad96
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
 
[부스트캠프 Tech Talk] 고지형_내 자식 하나쯤은 있어야죠
[부스트캠프 Tech Talk] 고지형_내 자식 하나쯤은 있어야죠[부스트캠프 Tech Talk] 고지형_내 자식 하나쯤은 있어야죠
[부스트캠프 Tech Talk] 고지형_내 자식 하나쯤은 있어야죠CONNECT FOUNDATION
 
To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014James Bonham
 
Introduction to the intermediate Python - v1.1
Introduction to the intermediate Python - v1.1Introduction to the intermediate Python - v1.1
Introduction to the intermediate Python - v1.1Andrei KUCHARAVY
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeededm00se
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsLuís Bastião Silva
 
Untangling spring week8
Untangling spring week8Untangling spring week8
Untangling spring week8Derek Jacoby
 

Similar to The html sessions (01) - an introduction to html5 (20)

Html week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourHtml week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandour
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
Survey on Script-based languages to write a Chatbot
Survey on Script-based languages to write a ChatbotSurvey on Script-based languages to write a Chatbot
Survey on Script-based languages to write a Chatbot
 
Writing Commits for You, Your Friends, and Your Future Self
Writing Commits for You, Your Friends, and Your Future SelfWriting Commits for You, Your Friends, and Your Future Self
Writing Commits for You, Your Friends, and Your Future Self
 
DevOps: Cultural and Tooling Tips Around the World
DevOps: Cultural and Tooling Tips Around the WorldDevOps: Cultural and Tooling Tips Around the World
DevOps: Cultural and Tooling Tips Around the World
 
NUS Hackers Project Intern 2016
NUS Hackers Project Intern 2016NUS Hackers Project Intern 2016
NUS Hackers Project Intern 2016
 
CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)
 
Pattern matching presentation
Pattern matching presentationPattern matching presentation
Pattern matching presentation
 
Modeling Rich Narrative Content
Modeling Rich Narrative ContentModeling Rich Narrative Content
Modeling Rich Narrative Content
 
Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptx
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 
Code is art
Code is artCode is art
Code is art
 
[부스트캠프 Tech Talk] 고지형_내 자식 하나쯤은 있어야죠
[부스트캠프 Tech Talk] 고지형_내 자식 하나쯤은 있어야죠[부스트캠프 Tech Talk] 고지형_내 자식 하나쯤은 있어야죠
[부스트캠프 Tech Talk] 고지형_내 자식 하나쯤은 있어야죠
 
To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014
 
Introduction to the intermediate Python - v1.1
Introduction to the intermediate Python - v1.1Introduction to the intermediate Python - v1.1
Introduction to the intermediate Python - v1.1
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.js
 
Untangling11
Untangling11Untangling11
Untangling11
 
Untangling spring week8
Untangling spring week8Untangling spring week8
Untangling spring week8
 
NHibernate
NHibernateNHibernate
NHibernate
 

Recently uploaded

Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfchloefrazer622
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfchloefrazer622
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Disha Kariya
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajanpragatimahajan3
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024Janet Corral
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 

Recently uploaded (20)

Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 

The html sessions (01) - an introduction to html5