SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
J309-14 Week One
1. Welcome to J309: Intro to
Online Media
P. Kim Bui, adjunct
@kimbui
pkimbuiUSC@gmail.com
805.215.0870
2. 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
3. 1. Who are you?
❖ What’s your name?
❖ What do you love about journalism?
❖ What do you want to learn?
5. What previous classes have done
On Jefferson
Two Blocks Around the Park:
Main St., LA
Central Stories
Southside Stories
6. 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: pkimbuiUSC@gmail.com
11. Let’s make your first
website
Well, first from scratch, anyway.
12. 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.
13. This is a tag.
<tag> some stuff here </tag>
( beginning tag) end tag
They always come in pairs.
14. <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.
15. <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>
16. 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.
17. 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)
19. 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
20. <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>
21. 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"/>
23. 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
24. ASSIGNMENT: Skills survey
Download Word doc: http://bit.ly/ascj-
skills-survey
Note: Rename the file with your name
E-mail: pkimbuiUSC@gmail.com
Subject: J309 Surveys
Deadline: Wednesday, Sept. 5, 5 pm
25. ASSIGNMENT: HTML tutorial
This interactive course is at: http://bit.
ly/w3html
You have two weeks to complete this
assignment.
(Sept. 12 by Noon)
