Learning HTML

Level 1 (beginner)
Andrew Betts, FT Labs

@triblondon, @FTLabs

Paid readership, digital vs print

HTML

HTML is a language used to describe content and give it meaning

(not to dicate what it should look like)

Markup (pre-HTML)

Markup (HTML)

The governor said there was
<strong>a high chance</strong> of a rate rise

An HTML element

<strong>a high chance</strong>

Rules

  • An element is created by enclosing content in an
    opening tag and a closing tag
  • An opening tag must be matched by a closing tag
  • Tags are enclosed in angle brackets
EU exit will block UK bank trade,
top Brussels official says

Headings

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

Looking after Shadow

  • Food
  • Where to go for walks
    • Holland park
    • Brook green
    • Shepherds Bush green
  • Commands she understands
    • Sit
    • Stay
  • Vet's details

Exercise 1!

http://jsbin.com/kujem/1/edit

Add the appropriate heading tags to the list of headings so it makes sense.

Reminders:

Heading tags are <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

For an element you need an opening tag, content and a closing tag

HTML is a vocabulary,
XML is the grammar

HTML's tags are useful for describing documents.

FpML (Financial markup language)


  
    GOOG
    Google, Inc. ordinary shares
    NSQ
  
  
    PSON
    Pearson Plc ordinary shares
    LSE

RSS (News feed)



 RSS Title
 This is an example of an RSS feed
 http://www.example.com/main.html
 1800

 
  Example entry
  Here is some text containing an interesting description.
  http://www.wikipedia.org/
  unique string per item
  Mon, 06 Sep 2009 16:20:00 +0000

Well formed

HTML elements

  • Headings (H1, H2, H3, H4, H5, H6)
  • Paragraphs (P)
  • Emphasis (EM, STRONG)
  • Lists (UL, OL)
  • Links (A)
  • Images (IMG)
  • Tables (TABLE)
Nay, do not think I flatter; For what advancement may I hope from thee
that no revenue hast but thy good spirits, to feed and clothe thee?
Why should the poor be flatter'd?



No, let the candied tongue lick absurd pomp, and crook the
pregnant hinges of the knee where thrift may follow fawning.  Dost thou hear?

Exercise 2!

http://jsbin.com/malap/2/edit

Improve on Henry V by adding emphasis and strong emphasis where appropriate.

Reminders:

Emphasis tags are <em>, <strong>

Close all the tags you open. Close in the reverse order to the order you open in.

Recap

  • HTML is a standard vocabulary of tags that give meaning to content
  • HTML follows a set of rules (a grammar, if you like) called XML
  • An HTML element consists of an opening tag, some content and a closing tag
  • Any tags we open, we have to close, and they must be closed in the right order
  • We can 'nest' elements inside of one another
  • Indentation helps us verify that the code is well formed

Lists

  • <ul> Unordered list
  • <ol> Ordered list

Semantics

<ul>
  <li>Learn HTML</li>
  <li>Feed the cat</li>
  <li>Pick up dry cleaning</li>
</ul>

Exercise 3!

http://jsbin.com/qafoj/1/edit

Mark up the shopping list so it makes sense semantically, and it's rendered correctly by the browser.

Reminders:

You'll need <h1> (heading), <h2> (subheading), <ul> (list), <li> (list item), <em> (emphasis)

Recap

  • HTML elements are semantic, they convey meaning, not visual style
  • Some tags work together to create more complex structures like lists
  • As ever, every tag we open, we have to close, and indenting them helps to keep the code well formed

Links

Links

...one good source is the
Financial Times

Attributes

breed="labrador"

name="Shadow"

color="black"

 
See the <a href="http://www.nytimes.com/...">New York Times piece</a> on
inflation trends for more information.

Exercise 4!

Use your existing shopping list exercise.

I'm fussy about brands. Link the brand names to their respective companies' websites.

Reminders:

A link is marked by the <a> tag

To specify the destination of the link, use the href="" attribute

Origami demo

Thanks for listening!

Contact me: