j309-14 week one
DESCRIPTION
Week one slides for USC's J309TRANSCRIPT
Welcome to J309: Intro to Online Media
P. Kim Bui, adjunct
@kimbui
805.215.0870
Today’s Agenda1) 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 doneOn 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?
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 page1. 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