SlideShare a Scribd company logo
1 of 19
Download to read offline
HTML 101


                       8
                     It’s not rocket scie
                                         nce.
  A very basic intro to
understanding HTML code
Understanding HTML
      Simplified. There’s way more to HTML than this.




• Heading
 • Title
• Body
 • [Structured] Content
Step by Step
                  Let’s see how to code the following example in 8 steps.




               HTML can be easy!
        This is what content looks like in HTML
        (when you are viewing it in a browser).

                                  So Eric says...
 8




border not included
Step by Step: 1

                {        HTML can be easy! This is what content looks like in HTML (when
                         you are viewing it in a browser). So Eric says...
8




HTML code
       browser preview
         8




                {        HTML can be easy! This is what content looks like in HTML (when
                         you are viewing it in a browser). So Eric says...
Step by Step: 2
                           n’...
           any tag you ‘ope             ...must be ‘close
                                                         d’




                                               8
{
    8
    <p>HTML can be easy!</p>
    <p> This is what content looks like in HTML (when you are viewing it
    in a browser). </p>
    <p>So Eric says... </p>




                                   we now have par



{
                                                  agraphs
                                   8
    HTML can be easy!

    This is what content looks like in HTML (when you are viewing it in a
    browser).

    So Eric says...
Step by Step: 3

{
    <h1>HTML can be easy!</h1>
    <p> This is what content looks like in HTML (when you are viewing it
    in a browser). </p>
    <p>So Eric says... </p>



                                            larger, bold font




{                                        8
    HTML can be easy!
    This is what content looks like in HTML (when you are viewing it in a
    browser).

    So Eric says...
Step by Step: 4

{
    <h1>HTML can be easy!</h1>
    <p> This is what content looks like in HTML <br />(when you are
    viewing it in a browser). </p>




                                                8
    <p>So Eric says... </p>                                          g’
                                                ag is ‘seglf-fcolosin ages)
                                          this t g> ta s r im
                                       (so are <im




{
    HTML can be easy!                              we have a hard
                                                     within our parliange break


                                                 8
                                                                        raph
    This is what content looks like in HTML
    (when you are viewing it in a browser).

    So Eric says...
Step by Step: 5

{
    <h1>HTML can be easy!</h1>
    <p> This is what content looks like in <strong>HTML</strong> <br />
    <em>(when you are viewing it in a browser)</em>. </p>
    <p>So Eric says... </p>




{
    HTML can be easy!                              bold text




                                                   8
    This is what content looks like in HTML
    (when you are viewing it in a browser).
                                 8   italicized text
    So Eric says...
Step by Step: 6

{
    <h1 align=”center”>HTML can be easy!</h1>
    <p> This is what content looks like in <strong>HTML</strong> <br />
    <em>(when you are viewing it in a browser)</em>. </p>
    <p align=”center”>So Eric says... </p>



                                                   centered text




{                                                   8
      HTML can be easy!
    This is what content looks like in HTML
    (when you are viewing it in a browser).

                 So Eric says...
                              8    centered text
Step by Step: 7

{
    <h1 align=”center”>HTML can be easy!</h1>
    <p> This is what content looks like in <strong>HTML</strong> <br />
    <em>(when you are viewing it in a browser)</em>. </p>
    <p align=”center”><img src=”eric-the-great-01.jpg” alt=”Eric as an
    icon.” width=”125” height=”125” /> So Eric says... </p>




{
       HTML can be easy!
    This is what content looks like in HTML
    (when you are viewing it in a browser).

                  So Eric says...
         8
Image displayed
Step by Step: 8
    <html>
    <head>
       <title>HTML 101: Step-by-Step</title>




{
    </head>
    <body>
       <h1 align=”center”>HTML can be easy!</h1>
       <p> This is what content looks like in <strong>HTML</strong> <br />
       <em>(when you are viewing it in a browser)</em>. </p>
       <p align=”center”><img src=”eric-the-great-01.jpg” alt=”Eric as an icon.”
       width=”125” height=”125” />So Eric says... </p>
    </body>
    </html>                                   8     anything outside t
                                                    is not displayed he <body> tags
                                                                     in the broswer



{
       HTML can be easy!
    This is what content looks like in HTML
    (when you are viewing it in a browser).

                   So Eric says...
Classes & ID’s
    They serve as ways to describe content in our HTML document.

                                              these are HTML
                                                               102 concepts...




                                                       8
•   ID’s are unique

    •   Each element can have only one ID

    •   Each page can have only one element with that ID

•   Classes are not unique

    •   You can use the same class on multiple elements

    •   You can use multiple classes on the same element
Classes & ID’s: Example
    They serve as ways to describe content in our HTML document.



<ul id=”navigation”>
   <li class=”menu item1”><a href=”index.html” title=”Our Homepage” class=”active”>Home</a></li>
   <li class=”menu item2”><a href=”about.html” title=”About the OOC”>About Us</a></li>
   <li class=”menu item3”><a href=”contact.html” title=”Contact our company”>Contact Us</a></li>
</ul>


<ul>
   <li><a href=”index.html”>Home</a></li>
   <li><a href=”about.html”>About Us</a></li>
   <li><a href=”contact.html”>Contact Us</a></li>
</ul>


                  8      both these exam
                         the same visual ples have nearly
                          can do a whole result, but you
   • Home
   • About Us                the ‘starred’loex more with
                                            t
                                              ample...
   • Contact Us
Validating Your Work
                            Double-checking that you’re on the right track.



 •                  World Wide Web Consortium (W3C)
                    http://www.w3.org/

                    Validator Tool: http://validator.w3.org/

                      •   Smashing Magazine
                                                                   8
Awesome Resources




                                                                         good for checkin
                          http://www.smashingmagazine.com/                                g   your work

                      •   Chris Coyier/CSS-Tricks                  8   good for learning more
                          http://css-tricks.com/

                      •   Cheatsheets
                          http://j.mp/8szjMJ

                      •   Eric’s Twitter Favorites
                          http://twitter.com/EricRasch/favorites
Beautiful Code
Thanks, Chris Coyier: http://bit.ly/ciimDi
That’s it?
          Nope. That was just the beginning.

                                         ‘next steps’ and

• CSS
                                            extend basic Hways to




                                       8
                                                          TML


• SEO (Search Engine Optimization)
• Frameworks
• Databases
• Other Languages
Other Languages
These can piggyback on, and bring a lot of power to, HTML.


XML
JavaScript (AJAX, jQuery, MooTools, etc.)
PHP
JSP
.NET (ASP.NET,VB.NET, etc.)
ASP
Tools of the Trade
Dreamweaver
($399 | Mac/PC | http://www.adobe.com/dreamweaver/)


Coda
($99 | Mac | http://www.panic.com/coda/)


Textmate
($56 | Mac with a PC equivalent | http://macromates.com/)


Komodo Edit
(FREE | Mac/PC | http://www.activestate.com/komodo_edit/)

Other ‘Open Source’ Tools (Mac/PC)
Frontpage (PC)
Notepad (PC)
Thank you.
        Feel free to connect with me.
http://ericrasch.com/                         http://med.uth.tmc.edu/comm/

                                    at work   8
                        8 everywhere else

More Related Content

What's hot

An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScriptAn Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScriptTroyfawkes
 
A Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick ArmstrongA Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick ArmstrongNick Armstrong
 
05 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_201605 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_2016Rich Dron
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
How the Web Works Using HTML
How the Web Works Using HTMLHow the Web Works Using HTML
How the Web Works Using HTMLMarlon Jamera
 
HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2Sharon Wasden
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practiceshoctudau
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you needDipen Parmar
 
GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1Heather Rock
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS FilesLearningNerd
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
 

What's hot (20)

An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScriptAn Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
 
A Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick ArmstrongA Primer on HTML 5 - By Nick Armstrong
A Primer on HTML 5 - By Nick Armstrong
 
05 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_201605 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_2016
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
How the Web Works Using HTML
How the Web Works Using HTMLHow the Web Works Using HTML
How the Web Works Using HTML
 
HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2
 
HTML5 CSS3 Basics
HTML5 CSS3 Basics HTML5 CSS3 Basics
HTML5 CSS3 Basics
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
 
GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
 
HTML & XHTML Basics
HTML & XHTML BasicsHTML & XHTML Basics
HTML & XHTML Basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
Chapter14
Chapter14Chapter14
Chapter14
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 

Similar to HTML 101

Html (hypertext markup language)
Html (hypertext markup language)Html (hypertext markup language)
Html (hypertext markup language)Resty Jay Galdo
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLOlivia Moran
 
web development.pdf
web development.pdfweb development.pdf
web development.pdfBagHarki
 
HTML course.ppt
HTML course.pptHTML course.ppt
HTML course.pptRyanTeo35
 
Sitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_templateSitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_templateDaniel Downs
 
Lecture 4 - Adding XTHML for the Web
Lecture  4 - Adding XTHML for the WebLecture  4 - Adding XTHML for the Web
Lecture 4 - Adding XTHML for the Webphanleson
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhiCss Founder
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5nobel mujuji
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTMLabidibo Contini
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdfRamyaH11
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLGrayzon Gonzales, LPT
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptxshilpak0307
 

Similar to HTML 101 (20)

Let me design
Let me designLet me design
Let me design
 
Html (hypertext markup language)
Html (hypertext markup language)Html (hypertext markup language)
Html (hypertext markup language)
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
 
web development.pdf
web development.pdfweb development.pdf
web development.pdf
 
HTML course.ppt
HTML course.pptHTML course.ppt
HTML course.ppt
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
Sitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_templateSitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_template
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
Lecture 4 - Adding XTHML for the Web
Lecture  4 - Adding XTHML for the WebLecture  4 - Adding XTHML for the Web
Lecture 4 - Adding XTHML for the Web
 
Htmlcss1
Htmlcss1Htmlcss1
Htmlcss1
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
 
html
htmlhtml
html
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTML
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
 
Importance of HTML
Importance of HTMLImportance of HTML
Importance of HTML
 

Recently uploaded

Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationDianaGray10
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfwill854175
 
Transport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MITransport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MIRomil Mishra
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...stockholm university
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxKunal Gupta
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Antonio de Llamas
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemSafe Software
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdfHulkTheDevil
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 

Recently uploaded (20)

Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automation
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdf
 
Transport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MITransport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MI
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptx
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data Ecosystem
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdf
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 

HTML 101

  • 1. HTML 101 8 It’s not rocket scie nce. A very basic intro to understanding HTML code
  • 2. Understanding HTML Simplified. There’s way more to HTML than this. • Heading • Title • Body • [Structured] Content
  • 3. Step by Step Let’s see how to code the following example in 8 steps. HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... 8 border not included
  • 4. Step by Step: 1 { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... 8 HTML code browser preview 8 { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  • 5. Step by Step: 2 n’... any tag you ‘ope ...must be ‘close d’ 8 { 8 <p>HTML can be easy!</p> <p> This is what content looks like in HTML (when you are viewing it in a browser). </p> <p>So Eric says... </p> we now have par { agraphs 8 HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  • 6. Step by Step: 3 { <h1>HTML can be easy!</h1> <p> This is what content looks like in HTML (when you are viewing it in a browser). </p> <p>So Eric says... </p> larger, bold font { 8 HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  • 7. Step by Step: 4 { <h1>HTML can be easy!</h1> <p> This is what content looks like in HTML <br />(when you are viewing it in a browser). </p> 8 <p>So Eric says... </p> g’ ag is ‘seglf-fcolosin ages) this t g> ta s r im (so are <im { HTML can be easy! we have a hard within our parliange break 8 raph This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  • 8. Step by Step: 5 { <h1>HTML can be easy!</h1> <p> This is what content looks like in <strong>HTML</strong> <br /> <em>(when you are viewing it in a browser)</em>. </p> <p>So Eric says... </p> { HTML can be easy! bold text 8 This is what content looks like in HTML (when you are viewing it in a browser). 8 italicized text So Eric says...
  • 9. Step by Step: 6 { <h1 align=”center”>HTML can be easy!</h1> <p> This is what content looks like in <strong>HTML</strong> <br /> <em>(when you are viewing it in a browser)</em>. </p> <p align=”center”>So Eric says... </p> centered text { 8 HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... 8 centered text
  • 10. Step by Step: 7 { <h1 align=”center”>HTML can be easy!</h1> <p> This is what content looks like in <strong>HTML</strong> <br /> <em>(when you are viewing it in a browser)</em>. </p> <p align=”center”><img src=”eric-the-great-01.jpg” alt=”Eric as an icon.” width=”125” height=”125” /> So Eric says... </p> { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... 8 Image displayed
  • 11. Step by Step: 8 <html> <head> <title>HTML 101: Step-by-Step</title> { </head> <body> <h1 align=”center”>HTML can be easy!</h1> <p> This is what content looks like in <strong>HTML</strong> <br /> <em>(when you are viewing it in a browser)</em>. </p> <p align=”center”><img src=”eric-the-great-01.jpg” alt=”Eric as an icon.” width=”125” height=”125” />So Eric says... </p> </body> </html> 8 anything outside t is not displayed he <body> tags in the broswer { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  • 12. Classes & ID’s They serve as ways to describe content in our HTML document. these are HTML 102 concepts... 8 • ID’s are unique • Each element can have only one ID • Each page can have only one element with that ID • Classes are not unique • You can use the same class on multiple elements • You can use multiple classes on the same element
  • 13. Classes & ID’s: Example They serve as ways to describe content in our HTML document. <ul id=”navigation”> <li class=”menu item1”><a href=”index.html” title=”Our Homepage” class=”active”>Home</a></li> <li class=”menu item2”><a href=”about.html” title=”About the OOC”>About Us</a></li> <li class=”menu item3”><a href=”contact.html” title=”Contact our company”>Contact Us</a></li> </ul> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”about.html”>About Us</a></li> <li><a href=”contact.html”>Contact Us</a></li> </ul> 8 both these exam the same visual ples have nearly can do a whole result, but you • Home • About Us the ‘starred’loex more with t ample... • Contact Us
  • 14. Validating Your Work Double-checking that you’re on the right track. • World Wide Web Consortium (W3C) http://www.w3.org/ Validator Tool: http://validator.w3.org/ • Smashing Magazine 8 Awesome Resources good for checkin http://www.smashingmagazine.com/ g your work • Chris Coyier/CSS-Tricks 8 good for learning more http://css-tricks.com/ • Cheatsheets http://j.mp/8szjMJ • Eric’s Twitter Favorites http://twitter.com/EricRasch/favorites
  • 15. Beautiful Code Thanks, Chris Coyier: http://bit.ly/ciimDi
  • 16. That’s it? Nope. That was just the beginning. ‘next steps’ and • CSS extend basic Hways to 8 TML • SEO (Search Engine Optimization) • Frameworks • Databases • Other Languages
  • 17. Other Languages These can piggyback on, and bring a lot of power to, HTML. XML JavaScript (AJAX, jQuery, MooTools, etc.) PHP JSP .NET (ASP.NET,VB.NET, etc.) ASP
  • 18. Tools of the Trade Dreamweaver ($399 | Mac/PC | http://www.adobe.com/dreamweaver/) Coda ($99 | Mac | http://www.panic.com/coda/) Textmate ($56 | Mac with a PC equivalent | http://macromates.com/) Komodo Edit (FREE | Mac/PC | http://www.activestate.com/komodo_edit/) Other ‘Open Source’ Tools (Mac/PC) Frontpage (PC) Notepad (PC)
  • 19. Thank you. Feel free to connect with me. http://ericrasch.com/ http://med.uth.tmc.edu/comm/ at work 8 8 everywhere else