Multimedia JournalismMultimedia JournalismHTML Primer

Sec. C1 – Feb 09, 2009

Topics we’ll cover today

• Basic HTML– What is a tag?– Basic tags you should become familiar with– In-class demonstration and assignment

• Discussion with Maria Buckley• Assignments for next week

What is a Tag?

• In HTML: A type of instruction that browsers read and interpret when viewing a Web page– Any time you use your rich text editor, you are

creating or altering HTML tags.– Why you should learn some basic HTML even if text

editors will do the job for you:• It gives you more control over what you present—the RTEs on

Blogger and Google Sites are limited in what they’ll do for you.• It allows you to fix things your rich text editor isn’t displaying properly• You’ll be better off knowing this stuff as we go through the semester.

Final projects are worth 20 percent.

Tags: The basics• Two basic kinds of tags:– Those that need to open/close (containers)

– <a href=“http://www.link.com”>I am a link</a>– <font color=red>I am red.</font>– <center>I am centered</center>– <b><i><u>I am bold, italicized, and underlined.</u></i></b>

» Note the order of the open/close tags!

– Those that exist on their own– <img src=“http://www.picture.com/picture.jpg”>– <br> <p> (though in modern XHTML, <br> is actually <br />)

– Most tags need to be closed.» Remember to think of them like containers. If you only want

some of your text to be red, put it in a red font container.

Images• Basic image tags:

• <img src=“http://www.pic.com/pic.jpg”>– This displays an image from a given URL. Other filetypes can be

gifs, pngs, etc. If you don’t have a filetype, you might not have actually grabbed the image URL.

• <img src=“http://www.pic.com/pic.jpg” border=1 alt=“some text”>– This is the same image, only you have a border around it and

mouseover text like this. The yellow box is the alt text. Note the red border.

Links• Basic links

• <a href=“http://www.link.com”>Link</a>– The word “Link” opens in the same window

• <a href=“http://www.link.com” target=“_blank”>Link</a>– The word “Link” opens in another windo

• <a href=“http://www.link.com”><img src=“http://www.pic.com/pic.jpg”></a>– Not only can you link with words, but you can link with images,

too. Just put an image tag within a link container.

Lists

Aligning your content• HTML allows you to align images and text boxes

anywhere you want in your text.• For images: <img src=“http://www.pics.com/pics.jpg”

align=left> (or right). You can also put text or images and caption text in a text box aligned left or right.• Basic text box: Creates:

<table width=200 bgcolor=blue align=left border=2> <tr> Table row <td> Table columnContent Content </td> end column </tr> end row</table> end table

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Content

Aligning your content• What if you want a sidebar?

• Text box with 2 columns: Creates: <table> <tr> Table row <td> Table column 1Content Content </td> end column <td width=200 bgcolor=red> Table column 2Sidebar content Content </td> </tr> end row</table> end table

Content content Content content Content content Content content Content content Content content Content content Content content Content content

Sidebar content Sidebar contentSidebar contentSidebar content

HTML Tutorial

• In-class demonstration and assignment• Create a new page on your Google sites called “HTML

practice.” Follow along.

• Links you should use:• http://www.news-geek.com/jo540/lectures/codes.html• http://www.bu.edu/webcentral/learning/html/basics/• http://www.webmonkey.com/reference/Color_Charts

– A better way of picking Web colors. Instead of typing <font color=red>, why not try <font color=#FF3300>?

• http://www.w3schools.com/– FREE HTML and CSS Tutorials! This will help you, especially as you

start thinking about your final Web sites.

For Next Week(TUESDAY, February 17)

• Bring 3 picture story ideas to class– A picture story in this case will be a slide show of related images used to tell

a story.• For examples, see:

– The NY Times (1, 2, 3)– MSNBC slide shows– Or type “slide show” into Google News and see what happens.

• BRING A CAMERA to class on Tuesday.– You may bring your own digital camera if you have one. If not, heck them out in

pairs on the third floor– Make sure batteries are charged and that you have the associated cables for

uploading.

• Continue to play with HTML on your own. If you can’t figure something out, this is your chance to ask me.