SlideShare uma empresa Scribd logo
1 de 28
Baixar para ler offline
Girl Geek Tea Party v5
                           HTML Express Intro!




Saturday, 3 July 2010
Sooo...




Saturday, 3 July 2010
Sooo...
                        •   What’s that Girl Geek thingy?




Saturday, 3 July 2010
Sooo...
                        • What’s that Girl Geek thingy?
                        • What’s the plan for today?




Saturday, 3 July 2010
Sooo...
                        • What’s that Girl Geek thingy?
                        • What’s the plan for today?
                         • Quick intro - view source




Saturday, 3 July 2010
Sooo...
                        • What’s that Girl Geek thingy?
                        • What’s the plan for today?
                         • Quick intro - view source
                         • HTML skeleton




Saturday, 3 July 2010
Sooo...
                        • What’s that Girl Geek thingy?
                        • What’s the plan for today?
                         • Quick intro - view source
                         • HTML skeleton
                         • Some elements...




Saturday, 3 July 2010
Sooo...
                        • What’s that Girl Geek thingy?
                        • What’s the plan for today?
                         • Quick intro - view source
                         • HTML skeleton
                         • Some elements...
                         • ... and attributes



Saturday, 3 July 2010
HTML what!?




Saturday, 3 July 2010
Hyper Text Markup Language




Saturday, 3 July 2010
Hyper Text Markup Language

                        • Whatever.




Saturday, 3 July 2010
Hyper Text Markup Language

                        • Whatever.
                        • View   source!!




Saturday, 3 July 2010
HTML Tags


                              <h1>
                              </h1>




Saturday, 3 July 2010
HTML Tags

                        • Look   like this
                                             <h1>
                                             </h1>




Saturday, 3 July 2010
HTML Tags

                        • Looklike this
                         • Opening tag: <h1>
                                       </h1>




Saturday, 3 July 2010
HTML Tags

                        • Look like this
                         • Opening tag: <h1>
                         • Closing tag: </h1>




Saturday, 3 July 2010
HTML Elements


                    <h1>This is a very large heading</h1>




Saturday, 3 July 2010
HTML Elements
                        • Have   an opening & closing tag

                    <h1>This is a very large heading</h1>




Saturday, 3 July 2010
HTML Documents

                        <html>
                             <head>
                                <title>title in browser</title>
                                other stuff that is not visible!
                             </head>
                             <body>
                                  all the content goes here!
                             </body>
                        </html>



Saturday, 3 July 2010
HTML Documents
                        • Must   have a certain structure:
                         <html>
                              <head>
                                 <title>title in browser</title>
                                 other stuff that is not visible!
                              </head>
                              <body>
                                   all the content goes here!
                              </body>
                         </html>



Saturday, 3 July 2010
HTML Attributes




Saturday, 3 July 2010
HTML Attributes

                        • Can   / must occur in a tag:




Saturday, 3 July 2010
HTML Attributes

                        • Can   / must occur in a tag:

                   <img src=”mypic.jpg” />




Saturday, 3 July 2010
HTML Attributes

                        • Can   / must occur in a tag:

                   <img src=”mypic.jpg” />

                  <img src=”mypic.jpg” alt=”lovely picture” />




Saturday, 3 July 2010
Most important tags




                        Browser interprets the style!

Saturday, 3 July 2010
Most important tags
               <p> text </p> - Paragraph

               <br /> - Line break

               <h1> text </h1> - Heading (up to h6)

               <img src=”filename.jpg” /> - Image

               <a href=”http://twitter.com"> text </a> - Link


                        Browser interprets the style!

Saturday, 3 July 2010
It’s your turn now. Yay!
                        http://www.w3schools.com/html/html_intro.asp

                         http://www.w3schools.com/tags/default.asp




Saturday, 3 July 2010
Thanks :)

                        manchestergirlgeeks@gmail.com




Saturday, 3 July 2010

Mais conteúdo relacionado

Semelhante a Barcamp Blackpool HTML workshop

Html5 coredevsummit
Html5 coredevsummitHtml5 coredevsummit
Html5 coredevsummitJen Simmons
 
Beyond Search
Beyond SearchBeyond Search
Beyond SearchLucy Gray
 
Unified Content Model and Joomla!
Unified Content Model and Joomla!Unified Content Model and Joomla!
Unified Content Model and Joomla!Mitch Pirtle
 
Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06Skills Matter
 
Twitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad ideaTwitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad ideaJason Lotito
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Zi Bin Cheah
 
In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010Mystic Coders, LLC
 
HTML5: About Damn Time
HTML5: About Damn TimeHTML5: About Damn Time
HTML5: About Damn TimeKevin Lawver
 
Building Brilliant APIs
Building Brilliant APIsBuilding Brilliant APIs
Building Brilliant APIsbencollier
 
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptDr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptRobotDeathSquad
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the WebTim Wright
 
HTML5 - getting started
HTML5 - getting startedHTML5 - getting started
HTML5 - getting startedTed Drake
 

Semelhante a Barcamp Blackpool HTML workshop (13)

Html5 coredevsummit
Html5 coredevsummitHtml5 coredevsummit
Html5 coredevsummit
 
Beyond Search
Beyond SearchBeyond Search
Beyond Search
 
Unified Content Model and Joomla!
Unified Content Model and Joomla!Unified Content Model and Joomla!
Unified Content Model and Joomla!
 
Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06
 
Twitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad ideaTwitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad idea
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010
 
In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010
 
HTML5: About Damn Time
HTML5: About Damn TimeHTML5: About Damn Time
HTML5: About Damn Time
 
Building Brilliant APIs
Building Brilliant APIsBuilding Brilliant APIs
Building Brilliant APIs
 
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptDr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
 
Enterprise Drupal
Enterprise DrupalEnterprise Drupal
Enterprise Drupal
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the Web
 
HTML5 - getting started
HTML5 - getting startedHTML5 - getting started
HTML5 - getting started
 

Último

The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
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 Processorsdebabhi2
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
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 2024The Digital Insurer
 
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.pptxHampshireHUG
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
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 2024Results
 
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...Neo4j
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
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?Antenna Manufacturer Coco
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
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 organizationRadu Cotescu
 
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 Scriptwesley chun
 
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?Igalia
 
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 DevelopmentsTrustArc
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 

Último (20)

The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.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
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
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
 
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
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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
 
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...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
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?
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
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
 
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
 
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?
 
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
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 

Barcamp Blackpool HTML workshop

  • 1. Girl Geek Tea Party v5 HTML Express Intro! Saturday, 3 July 2010
  • 3. Sooo... • What’s that Girl Geek thingy? Saturday, 3 July 2010
  • 4. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today? Saturday, 3 July 2010
  • 5. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today? • Quick intro - view source Saturday, 3 July 2010
  • 6. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today? • Quick intro - view source • HTML skeleton Saturday, 3 July 2010
  • 7. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today? • Quick intro - view source • HTML skeleton • Some elements... Saturday, 3 July 2010
  • 8. Sooo... • What’s that Girl Geek thingy? • What’s the plan for today? • Quick intro - view source • HTML skeleton • Some elements... • ... and attributes Saturday, 3 July 2010
  • 10. Hyper Text Markup Language Saturday, 3 July 2010
  • 11. Hyper Text Markup Language • Whatever. Saturday, 3 July 2010
  • 12. Hyper Text Markup Language • Whatever. • View source!! Saturday, 3 July 2010
  • 13. HTML Tags <h1> </h1> Saturday, 3 July 2010
  • 14. HTML Tags • Look like this <h1> </h1> Saturday, 3 July 2010
  • 15. HTML Tags • Looklike this • Opening tag: <h1> </h1> Saturday, 3 July 2010
  • 16. HTML Tags • Look like this • Opening tag: <h1> • Closing tag: </h1> Saturday, 3 July 2010
  • 17. HTML Elements <h1>This is a very large heading</h1> Saturday, 3 July 2010
  • 18. HTML Elements • Have an opening & closing tag <h1>This is a very large heading</h1> Saturday, 3 July 2010
  • 19. HTML Documents <html> <head> <title>title in browser</title> other stuff that is not visible! </head> <body> all the content goes here! </body> </html> Saturday, 3 July 2010
  • 20. HTML Documents • Must have a certain structure: <html> <head> <title>title in browser</title> other stuff that is not visible! </head> <body> all the content goes here! </body> </html> Saturday, 3 July 2010
  • 22. HTML Attributes • Can / must occur in a tag: Saturday, 3 July 2010
  • 23. HTML Attributes • Can / must occur in a tag: <img src=”mypic.jpg” /> Saturday, 3 July 2010
  • 24. HTML Attributes • Can / must occur in a tag: <img src=”mypic.jpg” /> <img src=”mypic.jpg” alt=”lovely picture” /> Saturday, 3 July 2010
  • 25. Most important tags Browser interprets the style! Saturday, 3 July 2010
  • 26. Most important tags <p> text </p> - Paragraph <br /> - Line break <h1> text </h1> - Heading (up to h6) <img src=”filename.jpg” /> - Image <a href=”http://twitter.com"> text </a> - Link Browser interprets the style! Saturday, 3 July 2010
  • 27. It’s your turn now. Yay! http://www.w3schools.com/html/html_intro.asp http://www.w3schools.com/tags/default.asp Saturday, 3 July 2010
  • 28. Thanks :) manchestergirlgeeks@gmail.com Saturday, 3 July 2010