SlideShare a Scribd company logo
1 of 34
Hey! :-)
An Introduction to the Web, HTML, CSS & Javascript
45 minutes.
Objectives
• Familiarize the Web & the Browser
• First-steps into HTML, CSS & Javascript
• Motivate towards further exploration
HTML
   CSS
Javascript
HTML
(HyperText Markup Language)
HTML
(HyperText Markup Language)
           Tags
HTML
(HyperText Markup Language)
           Tags
      .html document
  <html> <head> <body>
HTML
(HyperText Markup Language)
           Tags
      .html document
 <html> <head> <body>
 </html> </head> </body>
Structure of an HTML
      Document
Structure of an HTML
      Document
 <html>
  <head>
   <!--header content here-->
  </head>
  <body>
   <!--body content here-->
  </body>
 </html>
CSS
Cascading Style-Sheets
CSS
          Cascading Style-Sheets


• Provides styling which defines how to
  display the HTML elements
CSS
          Cascading Style-Sheets


• Provides styling which defines how to
  display the HTML elements
• Separates the Data contents from the
  Presentation
CSS
           Cascading Style-Sheets


• Provides styling which defines how to
  display the HTML elements
• Separates the Data contents from the
  Presentation
• External Stylesheets can save a lot of work
Tables vs CSS
Tables vs CSS

• “Table” is an HTML element originally
  intended to display data in the form of a
  table.
Tables vs CSS

• “Table” is an HTML element originally
  intended to display data in the form of a
  table.
• HTML takes care of Data.
  Stylesheet (CSS) takes care of Design.
CSS Syntax
Selector      Declaration        Declaration



            Property Value   Property      Value
CSS Syntax
       Selector      Declaration        Declaration



                   Property Value   Property      Value



• Selectors can be tags, ids or classes.
CSS Syntax
       Selector      Declaration        Declaration



                   Property Value   Property      Value



• Selectors can be tags, ids or classes.
• Enclosed in braces.
CSS Syntax
       Selector      Declaration        Declaration



                   Property Value   Property      Value



• Selectors can be tags, ids or classes.
• Enclosed in braces.
• Property-Value pairs which end in semicolon.
Inserting CSS into a Page
Inserting CSS into a Page
• Internal CSS:
      <head>
         <style type="text/css">
            p { margin-left:20px; }
            body { background-image:url("images/back40.gif"); }
         </style>
      </head>
Inserting CSS into a Page
• Internal CSS:
        <head>
           <style type="text/css">
              p { margin-left:20px; }
              body { background-image:url("images/back40.gif"); }
           </style>
        </head>

•   External CSS:
       <head>
          <link rel="stylesheet" type="text/css" href="mystyle.css" />
       </head>
Inserting CSS into a Page
• Internal CSS:
         <head>
            <style type="text/css">
               p { margin-left:20px; }
               body { background-image:url("images/back40.gif"); }
            </style>
         </head>

•   External CSS:
        <head>
           <link rel="stylesheet" type="text/css" href="mystyle.css" />
        </head>


•   Inline CSS:
     <p style=" color:#FF0000; margin-left:20px ">This is a paragraph.</p>
CSS Box Model
JavaScript
• It is a client-side scripting language
• It is an interpreted language
• It was designed to add interactivity to
  webpages

         Java != JavaScript
• JavaScript was influenced by Scheme & Self
• It was designed by Brendan Eich of Netscape
• Originally called LiveScript
• JScript is Microsoft version of JavaScript
• JavaScript, JScript, ECMAScript etc are all
  essentially the same.
What can it do?

• It can read & write to HTML webpages
• It can react to events
• It can do mathematical calculations
• It can be used to validate data
• It can be used to create cookies
Inserting JavaScript
Inserting JavaScript
• Internal JavaScript:
         <script type="text/javascript">
            <!-- document.write(“Hello World”); -->
         </script>
Inserting JavaScript
• Internal JavaScript:
            <script type="text/javascript">
               <!-- document.write(“Hello World”); -->
            </script>



•   External JavaScript:
       <head>
          <script type=”text/javascript” src=”xxxx.js” /> </script>
       </head>
Further Reading

• W3Schools (HTML, CSS, JavaScript)
• CSS3 for Web Designers - Dan Cedarholm
• SitePoint CSS Reference
• Eloquent JavaScript - Marijn Haverbeke
• Mozilla Developer Network
Thank you!

More Related Content

What's hot

Web programming css
Web programming cssWeb programming css
Web programming css
Uma mohan
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
eShikshak
 
Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]
9574395990
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentals
Mike Bradshaw
 
Course outline Website Design & Development
Course outline   Website Design & DevelopmentCourse outline   Website Design & Development
Course outline Website Design & Development
VOvais
 
快速开发Css
快速开发Css快速开发Css
快速开发Css
tbmallf2e
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
Thinkful
 

What's hot (20)

Css
CssCss
Css
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Css1
Css1Css1
Css1
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentals
 
Css
CssCss
Css
 
Course outline Website Design & Development
Course outline   Website Design & DevelopmentCourse outline   Website Design & Development
Course outline Website Design & Development
 
Learn css step by step online course
Learn css step by step online course Learn css step by step online course
Learn css step by step online course
 
快速开发Css
快速开发Css快速开发Css
快速开发Css
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
 
Css(cascading style sheets)
Css(cascading style sheets)Css(cascading style sheets)
Css(cascading style sheets)
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
 

Viewers also liked

Budgetprocedure 2013 16 slidecast
Budgetprocedure 2013 16 slidecastBudgetprocedure 2013 16 slidecast
Budgetprocedure 2013 16 slidecast
Tommy Abildgaard
 
Pilgrimage; Irish Places of Pilgrimage
Pilgrimage; Irish Places of PilgrimagePilgrimage; Irish Places of Pilgrimage
Pilgrimage; Irish Places of Pilgrimage
Rorc Lodd
 
Profile Bpk Sumino
Profile Bpk SuminoProfile Bpk Sumino
Profile Bpk Sumino
kholis_mjd
 
Playground blues by Adrian Mitchell
Playground blues by Adrian MitchellPlayground blues by Adrian Mitchell
Playground blues by Adrian Mitchell
Rorc Lodd
 

Viewers also liked (13)

Budgetprocedure 2013 16 slidecast
Budgetprocedure 2013 16 slidecastBudgetprocedure 2013 16 slidecast
Budgetprocedure 2013 16 slidecast
 
Profile Evi Yunita
Profile Evi YunitaProfile Evi Yunita
Profile Evi Yunita
 
Modul 3
Modul 3Modul 3
Modul 3
 
Method rose
Method roseMethod rose
Method rose
 
Modul 1
Modul 1Modul 1
Modul 1
 
Modul 2
Modul 2Modul 2
Modul 2
 
film education
film educationfilm education
film education
 
Young People & Job Hunting
Young People & Job HuntingYoung People & Job Hunting
Young People & Job Hunting
 
Pilgrimage; Irish Places of Pilgrimage
Pilgrimage; Irish Places of PilgrimagePilgrimage; Irish Places of Pilgrimage
Pilgrimage; Irish Places of Pilgrimage
 
Profile Bpk Sumino
Profile Bpk SuminoProfile Bpk Sumino
Profile Bpk Sumino
 
Basic IT 1
Basic IT 1Basic IT 1
Basic IT 1
 
Basic IT 2 (General IT Knowledge-2)
Basic IT 2 (General IT Knowledge-2)Basic IT 2 (General IT Knowledge-2)
Basic IT 2 (General IT Knowledge-2)
 
Playground blues by Adrian Mitchell
Playground blues by Adrian MitchellPlayground blues by Adrian Mitchell
Playground blues by Adrian Mitchell
 

Similar to Web

Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers
Pai-Cheng Tao
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
tsengsite
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
Thinkful
 

Similar to Web (20)

Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
web dev
web devweb dev
web dev
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Web 102 INtro to CSS
Web 102  INtro to CSSWeb 102  INtro to CSS
Web 102 INtro to CSS
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 
DW unit 3.pptx
DW unit 3.pptxDW unit 3.pptx
DW unit 3.pptx
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
ARTDM 171, Week 5: CSS
ARTDM 171, Week 5: CSSARTDM 171, Week 5: CSS
ARTDM 171, Week 5: CSS
 
2 introduction css
2 introduction css2 introduction css
2 introduction css
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
Css basics
Css basicsCss basics
Css basics
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
WT CSS
WT  CSSWT  CSS
WT CSS
 
BITM3730Week4.pptx
BITM3730Week4.pptxBITM3730Week4.pptx
BITM3730Week4.pptx
 

Recently uploaded

1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 

Recently uploaded (20)

Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Magic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxMagic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Third Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptxThird Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptx
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 

Web

  • 1. Hey! :-) An Introduction to the Web, HTML, CSS & Javascript
  • 3. Objectives • Familiarize the Web & the Browser • First-steps into HTML, CSS & Javascript • Motivate towards further exploration
  • 4. HTML CSS Javascript
  • 7. HTML (HyperText Markup Language) Tags .html document <html> <head> <body>
  • 8. HTML (HyperText Markup Language) Tags .html document <html> <head> <body> </html> </head> </body>
  • 9. Structure of an HTML Document
  • 10. Structure of an HTML Document <html> <head> <!--header content here--> </head> <body> <!--body content here--> </body> </html>
  • 12. CSS Cascading Style-Sheets • Provides styling which defines how to display the HTML elements
  • 13. CSS Cascading Style-Sheets • Provides styling which defines how to display the HTML elements • Separates the Data contents from the Presentation
  • 14. CSS Cascading Style-Sheets • Provides styling which defines how to display the HTML elements • Separates the Data contents from the Presentation • External Stylesheets can save a lot of work
  • 16. Tables vs CSS • “Table” is an HTML element originally intended to display data in the form of a table.
  • 17. Tables vs CSS • “Table” is an HTML element originally intended to display data in the form of a table. • HTML takes care of Data. Stylesheet (CSS) takes care of Design.
  • 18. CSS Syntax Selector Declaration Declaration Property Value Property Value
  • 19. CSS Syntax Selector Declaration Declaration Property Value Property Value • Selectors can be tags, ids or classes.
  • 20. CSS Syntax Selector Declaration Declaration Property Value Property Value • Selectors can be tags, ids or classes. • Enclosed in braces.
  • 21. CSS Syntax Selector Declaration Declaration Property Value Property Value • Selectors can be tags, ids or classes. • Enclosed in braces. • Property-Value pairs which end in semicolon.
  • 23. Inserting CSS into a Page • Internal CSS: <head> <style type="text/css"> p { margin-left:20px; } body { background-image:url("images/back40.gif"); } </style> </head>
  • 24. Inserting CSS into a Page • Internal CSS: <head> <style type="text/css"> p { margin-left:20px; } body { background-image:url("images/back40.gif"); } </style> </head> • External CSS: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
  • 25. Inserting CSS into a Page • Internal CSS: <head> <style type="text/css"> p { margin-left:20px; } body { background-image:url("images/back40.gif"); } </style> </head> • External CSS: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> • Inline CSS: <p style=" color:#FF0000; margin-left:20px ">This is a paragraph.</p>
  • 27. JavaScript • It is a client-side scripting language • It is an interpreted language • It was designed to add interactivity to webpages Java != JavaScript
  • 28. • JavaScript was influenced by Scheme & Self • It was designed by Brendan Eich of Netscape • Originally called LiveScript • JScript is Microsoft version of JavaScript • JavaScript, JScript, ECMAScript etc are all essentially the same.
  • 29. What can it do? • It can read & write to HTML webpages • It can react to events • It can do mathematical calculations • It can be used to validate data • It can be used to create cookies
  • 31. Inserting JavaScript • Internal JavaScript: <script type="text/javascript"> <!-- document.write(“Hello World”); --> </script>
  • 32. Inserting JavaScript • Internal JavaScript: <script type="text/javascript"> <!-- document.write(“Hello World”); --> </script> • External JavaScript: <head> <script type=”text/javascript” src=”xxxx.js” /> </script> </head>
  • 33. Further Reading • W3Schools (HTML, CSS, JavaScript) • CSS3 for Web Designers - Dan Cedarholm • SitePoint CSS Reference • Eloquent JavaScript - Marijn Haverbeke • Mozilla Developer Network

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n