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

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

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:

Tags

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.)

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.

Visual/HTML editor

Examples: Visual

Same page in HTML

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.

Picture example (visual)

Same page in HTML

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.

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.

Example

Example

Example

Example

Exercise

Exercise

Exercise

Exercise

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.

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