1. Multimedia Journalism Multimedia Journalism HTML Primer Sec. C1 – Feb 09, 2009

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

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

4. Tags: The basics Two basic kinds of tags: – Those that need to open/close (containers) – I am a link – I am red. – I am centered – I am bold, italicized, and underlined. » Note the order of the open/close tags! – Those that exist on their own – – (though in modern XHTML, is actually ) – 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.

5. Images Basic image tags: – 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. – 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.

6. Links Basic links Link – The word “Link” opens in the same window Link – The word “Link” opens in another windo – Not only can you link with words, but you can link with images, too. Just put an image tag within a link container.

7. Lists You can create numbered, lettered, and bulleted lists in HTML. – Ordered List:LOOKS LIKE: Shopping ListShopping List Eggs1. Eggs Milk2. Milk Bread3. Bread If you don’t want numbers, but letters, type (or A, or i, or I—the latter 2 refer to roman numerals) If you want bullet points, just type and in place of and (UL means Unordered)

8. Aligning your content HTML allows you to align images and text boxes anywhere you want in your text. For images: (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 row  Table column Content  Content  end column  end row  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 Content

9. Aligning your content What if you want a sidebar? Text box with 2 columns:Creates:  Table row  Table column 1 Content  Content  end column  Table column 2 Sidebar content  Content  end row  end table Content content Content content Content content Content content Content content Sidebar content

10. 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, why not try ? http://www.w3schools.com/ – FREE HTML and CSS Tutorials! This will help you, especially as you start thinking about your final Web sites.

11. 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)123 – MSNBC slide shows MSNBC – 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.