HTML for Bloggers and Content Managers

Presented by Purple Pen Productions

Purple Pen Productionspurplepen.com

What we’ll learn

•History and definition of HTML

•Syntax of HTML

•Common elements and attributes

•Structure of an HTML document

•Validating your markup

•Web standards

HTML’s roots are older than computers

• HTML (and a family of similar markup languages) has its roots in the newspaper business

• Newspapers were made without computers for a long time

Newspapers without computers

• With his trusty pencil and paper, a reporter would take notes about what was happening

• Then he’d return to his office to type up his article on a manual typewriter

Newspapers without computers

• A photographer accompanied the reporter to take photos

• While the reporter wrote his article, the photographer developed his film in the dark room

Newspapers without computers

• The reporter would send his typewritten pages to the editor

• The photographer would send his photos to the editor

Newspapers without computers

• The editor would choose one or more photos

• The editor would make copyeditor’s marks on the typewritten page to show which text should be larger, smaller, underlined, bold, italic, etc.

Newspapers without computers

• The typesetter would follow the editor’s instructions and produce the final newspaper with different type sizes and treatments along with photos

The process is still basically the same

Writer Raw contentMarku

pInterpre

t

Documents stored on computers

•As people started using computers to store documents, they needed a way to give context to the content

•SGML (Standard General Markup Language) was developed to give context to different bits of content

•SGML is complex and difficult to learn

What is HTML?

•A special format for web documents

•Markup in the document tells a user agent how to interpret the document

World Wide Web•When Tim Berners-Lee was developing the

World Wide Web, he wanted a simpler way to give meaning to text and a way to link documents together

•He called the links to other document “hypertext”

•He took a subset of SGML that was simple and easy to learn - and HTML was born

Syntax of HTML

•Tags begin and and with angle brackets: <>

•A closing tag contains a slash </>

•<p>This is a paragraph of text.</p>

•The name of the tag and attributes are inside the angle brackets<a href=”http://google.com”>Google</a>

Web standards: Separation

•Efficiency of code

•Ease of maintenance

•Accessibility

•Device compatibility

•Web crawlers and search engines (SEO)

•Good practice

HTML is forsemantic meaning

•Use CSS for presentation, not HTML

•Avoid presentational HTML elements and attributes like font, valign, hspace, align, and bgcolor

•Use tables only to present tabular data and be sure to include summary and caption

Learn More

•Designing with Web Standards by Jeffery Zeldman

•HTML tutorials at W3Schools.com