SlideShare a Scribd company logo
1 of 10
Hammersmith Fundamentals

     HTML fundamentals
Technology
•   Editor
•   Webserver
•   Browser
•   Paths & URLs
Separate content and layout
• HTML, CSS, JS
HTML
• H1 – H6
  – <h1>big text</h1>
• P
  – <p>some text</p>
• Br
  – <br />
• Strong and emphasis
  – <strong>bold</strong>, <em>italics</em>
• Div
  – <div>blah blah</div>
Lists
• OL – numbered lists     <ol><li>item1</li>
                          <li>item2</li>
                          </ol>



• UL – bullet lists       <ul><li>item1</li>
                          <li>item2</li>
                          </ul>




• LI – list item
Links & Images
• A
  – <a href=“”>text</a>
• Img
  – <img src=“” alt=“” />
Box Model




http://www.w3.org/TR/CSS2/box.html
ID’s & Class
                          <html>

• ID => #
                          <head>
                           <style>
                            div {
                              background: #444;
  – Open per page           }
                              color: white;


• Class => .                div.padded {
                              padding-top: 10px;
                              padding-right: 0px;
  – Multiple per page         padding-bottom: 0.25in;
                              padding-left: 5em;
                            }
                           </style>
                          </head>
                          <body>
                           <div>
                            No padding (but some style added)
                           </div>
                           <br>
                           <div class="padded">
                            Padded<br>
                            Top: 10px; bottom: 0px<br>
                            Left: 5em; right: 0px
                           </div>
                          </body>
                          </html>
Exercise
  1. Simple web page        2. Add styles
• H1 and couple        • Float text left
  paragraphs           • Add styles
• Add picture            – boarders, margin,
                           sizes, classes
Resources
• Code Academy
• Wikipedia
• Mozilla Developer Network

• NOT W3Cschools

More Related Content

What's hot

快速开发Css
快速开发Css快速开发Css
快速开发Css
tbmallf2e
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPress
Anthony Montalbano
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
eShikshak
 

What's hot (20)

快速开发Css
快速开发Css快速开发Css
快速开发Css
 
Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Psd 2 Drupal
Psd 2 DrupalPsd 2 Drupal
Psd 2 Drupal
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPress
 
How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
 
Front end-design and best practices
Front end-design and best practicesFront end-design and best practices
Front end-design and best practices
 
Web
WebWeb
Web
 
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
 
Drupal - Introduction to Drupal Template Design
Drupal - Introduction to Drupal Template DesignDrupal - Introduction to Drupal Template Design
Drupal - Introduction to Drupal Template Design
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
Front End Web Development Basics
Front End Web Development BasicsFront End Web Development Basics
Front End Web Development Basics
 
Css
CssCss
Css
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Comparisons of web languages
Comparisons of web languagesComparisons of web languages
Comparisons of web languages
 
Css home
Css   homeCss   home
Css home
 
Bootstrap Workout 2015
Bootstrap Workout 2015Bootstrap Workout 2015
Bootstrap Workout 2015
 
Basic web designing 2
Basic web designing 2Basic web designing 2
Basic web designing 2
 

Viewers also liked (9)

Iesaf careers
Iesaf careersIesaf careers
Iesaf careers
 
Introduction to pitching
Introduction to pitchingIntroduction to pitching
Introduction to pitching
 
Gtm intro
Gtm introGtm intro
Gtm intro
 
PyConFI - dostuff()
PyConFI - dostuff()PyConFI - dostuff()
PyConFI - dostuff()
 
Startup sauna and_aaltovg_v3
Startup sauna and_aaltovg_v3Startup sauna and_aaltovg_v3
Startup sauna and_aaltovg_v3
 
TEDxAalto_ts2leweb
TEDxAalto_ts2lewebTEDxAalto_ts2leweb
TEDxAalto_ts2leweb
 
Unconference rules
Unconference rulesUnconference rules
Unconference rules
 
Introduction to pitching
Introduction to pitchingIntroduction to pitching
Introduction to pitching
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Similar to Hammersmith fundamentals html fundamentals

Howcssworks 100207024009-phpapp01
Howcssworks 100207024009-phpapp01Howcssworks 100207024009-phpapp01
Howcssworks 100207024009-phpapp01
Likitha47
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
tsengsite
 
LIS3353 SP12 Week 4
LIS3353 SP12 Week 4LIS3353 SP12 Week 4
LIS3353 SP12 Week 4
Amanda Case
 

Similar to Hammersmith fundamentals html fundamentals (20)

Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
HTML(5) and CSS(3) for beginners - I
HTML(5) and CSS(3) for beginners - IHTML(5) and CSS(3) for beginners - I
HTML(5) and CSS(3) for beginners - I
 
Howcssworks 100207024009-phpapp01
Howcssworks 100207024009-phpapp01Howcssworks 100207024009-phpapp01
Howcssworks 100207024009-phpapp01
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
Lecture 2 - HTML Basics
Lecture 2 - HTML BasicsLecture 2 - HTML Basics
Lecture 2 - HTML Basics
 
Html and-css
Html and-cssHtml and-css
Html and-css
 
Html and-css
Html and-cssHtml and-css
Html and-css
 
css v1 guru
css v1 gurucss v1 guru
css v1 guru
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
 
Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl
Source Ordered Templates - - Joomla!Days NL 2009 #jd09nlSource Ordered Templates - - Joomla!Days NL 2009 #jd09nl
Source Ordered Templates - - Joomla!Days NL 2009 #jd09nl
 
Web 102 INtro to CSS
Web 102  INtro to CSSWeb 102  INtro to CSS
Web 102 INtro to CSS
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
HTML News Packages Lesson
 
Web 101 intro to html
Web 101  intro to htmlWeb 101  intro to html
Web 101 intro to html
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
 
LIS3353 SP12 Week 4
LIS3353 SP12 Week 4LIS3353 SP12 Week 4
LIS3353 SP12 Week 4
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
 

Recently uploaded

Recently uploaded (20)

A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 

Hammersmith fundamentals html fundamentals

  • 1. Hammersmith Fundamentals HTML fundamentals
  • 2. Technology • Editor • Webserver • Browser • Paths & URLs
  • 3. Separate content and layout • HTML, CSS, JS
  • 4. HTML • H1 – H6 – <h1>big text</h1> • P – <p>some text</p> • Br – <br /> • Strong and emphasis – <strong>bold</strong>, <em>italics</em> • Div – <div>blah blah</div>
  • 5. Lists • OL – numbered lists <ol><li>item1</li> <li>item2</li> </ol> • UL – bullet lists <ul><li>item1</li> <li>item2</li> </ul> • LI – list item
  • 6. Links & Images • A – <a href=“”>text</a> • Img – <img src=“” alt=“” />
  • 8. ID’s & Class <html> • ID => # <head> <style> div { background: #444; – Open per page } color: white; • Class => . div.padded { padding-top: 10px; padding-right: 0px; – Multiple per page padding-bottom: 0.25in; padding-left: 5em; } </style> </head> <body> <div> No padding (but some style added) </div> <br> <div class="padded"> Padded<br> Top: 10px; bottom: 0px<br> Left: 5em; right: 0px </div> </body> </html>
  • 9. Exercise 1. Simple web page 2. Add styles • H1 and couple • Float text left paragraphs • Add styles • Add picture – boarders, margin, sizes, classes
  • 10. Resources • Code Academy • Wikipedia • Mozilla Developer Network • NOT W3Cschools