Tweet
Tweet

Slide 1

Slide 1 text

HTML Hypertext Markup Language Friday, February 24, 2012

Slide 2

Slide 2 text

What is HTML? • HTML is • A Human Readable way to • Define the Structure of Documents for • The web Friday, February 24, 2012

Slide 3

Slide 3 text

HTML != PRETTY Friday, February 24, 2012

Slide 4

Slide 4 text

Document Structure • Web pages are documents • They are nested (stuff goes inside stuff) • Collections of elements • Defined by tags Friday, February 24, 2012

Slide 5

Slide 5 text

Elements & Tags • An HTML document has many elements • You create elements using tags • Tags look like this:

A document major header

This is a paragraph tag

Google.com Friday, February 24, 2012

Slide 6

Slide 6 text

Many Different Tags •

- Document Header •

- Paragraphs • - Anchors (Links) •
    - Unordered lists •
      - Ordered Lists Friday, February 24, 2012

      Slide 7

      Slide 7 text

      Tag Anatomy

      My Projects

      Open Attributes Content Close Friday, February 24, 2012

      Slide 8

      Slide 8 text

      Attributes • Help identify particular elements • Define parameters for elements • Denote elements for styling Friday, February 24, 2012

      Slide 9

      Slide 9 text

      Attribute Examples •

      ...

      •
      ...
      • ... • ... Friday, February 24, 2012

      Slide 10

      Slide 10 text

      Important Attributes • id=”...” - Unique identifier • class=”...” - Allows you to “classify” elements with “class names” • Important! Elements can have many class names but only one id, and the one id must be unique Friday, February 24, 2012

      Slide 11

      Slide 11 text

      NESTING TAGS Tags (inside of tags (inside of tags (inside of tags (inside of tags (inside of tags ...))))) Friday, February 24, 2012

      Slide 12

      Slide 12 text

      Nesting Tags

      You must ensure that your tags are properly closed when nesting within other tags!

      (nesting action) (html awesomeness) Friday, February 24, 2012

      Slide 13

      Slide 13 text

      Full Page Example 01 02 03 04 My Page 05 06 07

      The Title of My Page

      08

      Welcome to my page, I hope you enjoy it!

      09

      10 You can reach me via email here: 11 12 email@example.com 13 14

      15 16 Friday, February 24, 2012

      Slide 14

      Slide 14 text

      BEHOLD Friday, February 24, 2012

      Slide 15

      Slide 15 text

      • Tells the browser that this is html • There used to be all kinds of these • There can be only one Friday, February 24, 2012

      Slide 16

      Slide 16 text

      Important Tags • - There can be only one • - Information about the document • - The document’s content Friday, February 24, 2012

      Slide 17

      Slide 17 text

      Tag Zoology Friday, February 24, 2012

      Slide 18

      Slide 18 text

      Headings •

      - Document title (site name, etc.) •

      - Section •

      - Sub-section •

      to

      - Sub-sub-sections... Friday, February 24, 2012

      Slide 19

      Slide 19 text

      Paragraphs •

      - Used to construct paragraphs • - For emphasizing • - Highlights importance Friday, February 24, 2012

      Slide 20

      Slide 20 text

      Unordered Lists • One little, • Two little, • Three little web designers
      • One little,
      • Two little,
      • Three little web designers
      Friday, February 24, 2012

      Slide 21

      Slide 21 text

      Ordered Lists 1. little, 2. little, 3. little web designers
      1. little,
      2. little,
      3. little web designers
      Friday, February 24, 2012

      Slide 22

      Slide 22 text

      Anchors • My Link • These are why the web works so well • href = hyper-reference = anywhere • In your page (with ids) • In your site • To any old random website/page/thing Friday, February 24, 2012

      Slide 23

      Slide 23 text

      Anchor Examples IN PAGE IN SITE WEB Friday, February 24, 2012

      Slide 24

      Slide 24 text

      OMG ANCHORS WOW Friday, February 24, 2012

      Slide 25

      Slide 25 text

      Images • • Images are fun and informative • DO NOT WANT: Friday, February 24, 2012

      Slide 26

      Slide 26 text

      SO MUCH MOAR • There are a lot of tags • These tags will suffice • Learn more in the further reading • Resistance is futile Friday, February 24, 2012

      Slide 27

      Slide 27 text

      Conclusion • HTML is for making documents • HTML is not pretty • HTML is nested (tags within tags) • Anchors totally rule Friday, February 24, 2012