SlideShare a Scribd company logo
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 JavaScript
Troyfawkes
 
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
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
Rich Dron
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
Pamela Fox
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
Trần Khải Hoàng
 
How the Web Works Using HTML
How the Web Works Using HTMLHow the Web Works Using HTML
How the Web Works Using HTML
Marlon Jamera
 
HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2
Sharon Wasden
 
HTML5 CSS3 Basics
HTML5 CSS3 Basics HTML5 CSS3 Basics
HTML5 CSS3 Basics
Srinivas Tamada
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
BG Java EE Course
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
hoctudau
 
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
Dipen 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 1
Heather 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 Files
LearningNerd
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
Randy Oest II
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
University of Technology
 
HTML & XHTML Basics
HTML & XHTML BasicsHTML & XHTML Basics
HTML & XHTML Basics
Hossein Zahed
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
tutorialsruby
 
Chapter14
Chapter14Chapter14
Chapter14
DeAnna Gossett
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
Scottperrone
 
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

Let me design
Let me designLet me design
Let me design
Anurag Deb
 
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 HTML
Olivia Moran
 
web development.pdf
web development.pdfweb development.pdf
web development.pdf
BagHarki
 
HTML course.ppt
HTML course.pptHTML course.ppt
HTML course.ppt
RyanTeo35
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
Christian Heilmann
 
Sitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_templateSitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_template
Daniel Downs
 
Web development basics
Web development basicsWeb development basics
Web development basics
Kalluri Vinay Reddy
 
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
phanleson
 
Htmlcss1
Htmlcss1Htmlcss1
Htmlcss1
mreckman
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
Css Founder
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
nobel mujuji
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
abidibo Contini
 
html
htmlhtml
html
elife5
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
DenMas Hengky
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
RamyaH11
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTML
Grayzon Gonzales, LPT
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
adelaticleanu
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
shilpak0307
 
Importance of HTML
Importance of HTMLImportance of HTML

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

Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 

Recently uploaded (20)

Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 

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