This document provides an introduction to HTML basics, including: - HTML is a markup language used to describe web pages, not a programming language - HTML uses markup tags to describe web content and layout - Common tags include <strong> for bold text, <br> for line breaks, and <!--more--> to split articles - The visual Wordpress editor hides the HTML and makes formatting easier than typing raw HTML - For troubleshooting issues, it's sometimes necessary to view the HTML source to identify problems

1. S U M M E R / F A L L 2 0 1 0
HTML Basics

2. Basics
 HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a
markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages

3. Basics
 The purpose of a web browser (like Internet Explorer
or Firefox) is to read HTML documents and display
them as web pages. The browser does not display the
HTML tags, but uses the tags to interpret the content
of the page:

4. Tags

5. Tags
 In a nutshell, if a tag – for example <strong> - is
placed at the beginning of text the ending tag
- </strong> - needs to be placed somewhere to end
the command. The “strong” tag, as you might have
guessed indicates to make text bold.
 That’s generally the case. There are some tags that
don’t have closing tags. For example, a soft return is
just one <br>. The “jump tag” also is a standalone
tag: <!--more-->. (This is the tag that allows stories
to jump off the front page of your topical site.)

6. How does all this HTML stuff impact me?
 For our Wordpress editor you don’t have to write in
the HTML (1) editor but you can use that editor to
review tags, make simple changes or troubleshoot.
 The VISUAL (2) editor let’s you do many of the
things you need to do to post, but sometimes it’s
easier to use the HTML (1) editor.

7. Visual/HTML editor

8. Examples: Visual

9. Same page in HTML

10. Context
 Why is it important to know that there’s a red space?
Extra tags can mess with formatting but you
wouldn’t know what to change without looking in the
HTML. For example, if the red space is in the middle
of a paragraph of text you might have extra space.
 Delete when you see those things.

11. Picture example (visual)

12. Same page in HTML

13. Pictures/Video/Etc.
 Only shrink photos this way. Do not increase a
photo’s size this way. Make sure to keep the
proportions between the height and width the
same. For example, to shrink the picture by half its
size this: width="270" height="438” becomes this:
width="135" height="219”.
 You can do this with any dimensions smaller than the
initial size. Just make sure that the new width has the
same relationship to the new height as the old width had
to the old height.

14. HTML vs. Visual
 In general, it’s much easier to work in the VISUAL editor
as opposed to the HTML editor. Even when you are
“fluent” in HTML it can still take more time to type in:
 <strong>This sentence <span style="text-decoration:
underline;"> is </span> in bold.</strong>
 than typing in:
 This sentence is in bold.
 And then highlighting the correct parts of the sentence
and clicking on the button for the correct function.
 This sentence is in bold.
 But sometimes when you highlight a sentence you might
highlight too much. This could also show up in the
HTML.

15. Example

16. Example

17. Example

18. Example

19. Exercise

20. Exercise

21. Exercise

22. Exercise

23. Tip
 If you run into a specific problem Google for a
solution. For example, if you want to add a table,
Google: “How to add a HTML table.” If you want to
find out how to add padding around a picture search
for that.

24. Questions?
Comments
Please complete the test on your computer before you leave.