1 / 11

Multimedia Journalism HTML Primer

Multimedia Journalism HTML 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?.

imaran
Download Presentation

Multimedia Journalism HTML Primer

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Multimedia JournalismHTML 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) • <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.

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

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

  7. Lists • You can create numbered, lettered, and bulleted lists in HTML. • Ordered List: LOOKS LIKE: <OL>Shopping List Shopping List <LI> Eggs 1. Eggs <LI> Milk 2. Milk <LI> Bread 3. Bread </OL> If you don’t want numbers, but letters, type <OL type=“a”> (or A, or i, or I—the latter 2 refer to roman numerals) If you want bullet points, just type <UL> and </UL> in place of <OL> and </OL> (UL means Unordered)

  8. 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 column Content  Content </td>  end column </tr>  end row </table>  end table

  9. Aligning your content • What if you want a sidebar? • Text box with 2 columns: Creates: <table> <tr>  Table row <td>  Table column 1 Content Content </td>  end column <td width=200 bgcolor=red>  Table column 2 Sidebar content Content </td> </tr>  end row </table>  end table

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

  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) • MSNBC slide shows • Or type “slide show” into Google News and see what happens. • BRING A CAMERAto 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.

More Related