J309 Week One

Welcome to J309: Intro to Online Media P. Kim Bui,
adjunct @kimbui [email protected] 805.215.0870

Today’s Agenda 1) Who am I? Who are you? 2)
Review syllabus and class infrastructure ➢ What are we learning this semester? What tools will we use? 3) HTML ➢ Let’s make your first web page. 4) Skills Survey ➢ Due at the end of the week: 8.31.13

1. Who are you? ❖ What’s your name? ❖ What
do you love about journalism? ❖ What do you want to learn?

2. Review the syllabus: http://bit.ly/j309syllabus

What previous classes have done On Jefferson Two Blocks Around
the Park: Main St., LA Central Stories Southside Stories

How we’ll work ❖ You’ll each have server space (ascjweb.
org) ❖ We have a class blog: ➢ 309for2013.tumblr.com ❖ Our class hashtag (shared with other classes) ➢ #ascj309 ❖ Updates come from the class blog, Twitter and e-mail ➢ @kimbui ➢ easier to email me at: [email protected]

http://goo.gl/maps/8wLWT http://bit.ly/expo-line-factsheet The big project:

Our area: Culver City Station http://goo.gl/maps/8wLWT http://bit.ly/expo-line-factsheet The rules NO
friends NO family NO USC

Break? Or speed through and get out of here?

http://www.youtube.com/watch?v=ewrBalT_eBM

Let’s make your first website Well, first from scratch, anyway.

A place to store it. On your USB flash drive,
create a folder for class, then your name.Ex: j309/kbui You can make it on the desktop, but it’ll get erased after you log out.

This is a tag. <tag> some stuff here </tag> (
beginning tag) end tag They always come in pairs.

<html> tells a browser that this is an HTML/Web page.
Everything must be between the start tag and the end tag </html> <head></head> tag contains elements in the header, like the <title></title> In your editor, use these tags to start a page.

<html> tells a browser that this is an HTML/Web page.
Everything must be between the start tag and the end tag </html> <head></head> tag contains elements in the header, like the <title></title> In your editor, use these tags to start a page. <html><head><title>helloworld!</title></head></html>

Save your page 1. Save your file as mypage.html The
file extension . html also tells a browser this is a Web document. Make sure you save it to the folder you created on the desktop. 2. Start the browser FireFox (or IE) 3. Go to FILE --> OPEN and select mypage.html from the desktop folder.

More... <body> tag for the content that is visible on
the page. Everything must be between the start tag <body> and the end tag </body> <h1> </h1> displays as a heading. It can go from 1 (largest) to 6 (smallest)

What’s it look like now?

Structure tags <html> </html> → Tells the browser it’s a
HTML page <head></head> → contains elements in the header <title></title> → Title <body> </body> Everything in the body Body tags <h1> </h1> → Headings <p></p> → Paragraph tags <br /> → puts the content on another line, without adding space. No close tag is used here. <strong></strong> → Bold <em></em> → Italics

<html> <head> <title>I made a webpage!</title> </head> <body> <h1> There
will be cool stuff in here</h1> <p>Like this.</p> </body></html>

Other tags Links are done by the <a href> tag.
The tag’s attribute would be the destination. Ex.<a href="http://www.cnn.com">Link to CNN</a> <body> has the background color attribute bgcolor. It would be <body bgcolor="#green"> or hexacode colors. <Font> tag controls the text, through attributes like face, size and color. Ex. <font face="Helvetica; Verdana" size="100" color=" #090909">This is a test</font> <img> tag controls images, through attributes like width, height, border, src - which stands for source (location). <hr /> tag puts a horizontal rule, and can also have attributes like width and color. Also does not have a close tag. Ex. <hr width=" 75%" color="red"/>

Questions?

ASSIGNMENT: Make a web site Write and create a 500
to 800 word text Web “page” with your bio. Include why you want to be a journalist. Deadline: Wednesday, Sept. 5 Noon

ASSIGNMENT: Skills survey Download Word doc: http://bit.ly/ascj- skills-survey Note: Rename
the file with your name E-mail: [email protected] Subject: J309 Surveys Deadline: Wednesday, Sept. 5, 5 pm

ASSIGNMENT: HTML tutorial This interactive course is at: http://bit. ly/w3html
You have two weeks to complete this assignment. (Sept. 12 by Noon)

Resources: ❖ Journalists' Toolkit → http://jtoolkit.com/ ❖ Webplatform → http://www.webplatform.org
❖ W3Schools → http://www.w3schools.com/ ❖ Lynda → http://www.usc.edu/its/lynda ❖ KDMC’s tutorials → http://multimedia. journalism.berkeley.edu/tutorials/ ❖ Codeyear → codeyear.com ❖ Bonus: 20ThingsILearned → http://www. 20thingsilearned.com/en-US/what-is-the- internet/1

J309 Week One

J309 Week One

kimbui

More Decks by kimbui

Other Decks in Education

Featured

Transcript

Welcome to J309: Intro to Online Media P. Kim Bui,

Today’s Agenda 1) Who am I? Who are you? 2)

1. Who are you? ❖ What’s your name? ❖ What

2. Review the syllabus: http://bit.ly/j309syllabus

What previous classes have done On Jefferson Two Blocks Around

How we’ll work ❖ You’ll each have server space (ascjweb.

http://goo.gl/maps/8wLWT http://bit.ly/expo-line-factsheet The big project:

Our area: Culver City Station http://goo.gl/maps/8wLWT http://bit.ly/expo-line-factsheet The rules NO

Break? Or speed through and get out of here?

http://www.youtube.com/watch?v=ewrBalT_eBM

Let’s make your first website Well, first from scratch, anyway.

A place to store it. On your USB flash drive,

This is a tag. <tag> some stuff here </tag> (

<html> tells a browser that this is an HTML/Web page.

<html> tells a browser that this is an HTML/Web page.

Save your page 1. Save your file as mypage.html The

More... <body> tag for the content that is visible on

What’s it look like now?

Structure tags <html> </html> → Tells the browser it’s a

<html> <head> <title>I made a webpage!</title> </head> <body> <h1> There

Other tags Links are done by the <a href> tag.

Questions?

ASSIGNMENT: Make a web site Write and create a 500

ASSIGNMENT: Skills survey Download Word doc: http://bit.ly/ascj- skills-survey Note: Rename

ASSIGNMENT: HTML tutorial This interactive course is at: http://bit. ly/w3html

Resources: ❖ Journalists' Toolkit → http://jtoolkit.com/ ❖ Webplatform → http://www.webplatform.org