Scribd
Upload
37 views51 pages

The Web at Fuqua and You

The document discusses an introductory session on web publishing at Fuqua. It provides an overview of new opportunities at Fuqua including the selection of Dreamweaver as the standard editing software. The session focuses on conceptual understanding, technical introduction to HTML codes, and a panel discussion. Survey results from attendees show their current web use, experience levels, and interest in publishing and topics. The document then covers the basics of HTML codes including examples of common codes for formatting text, creating lists, and adding links. It emphasizes that knowing some HTML can help debug issues or understand how pages are constructed.

Uploaded by

Vincent Bumas-ang Acapen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
37 views51 pages

The Web at Fuqua and You

The document discusses an introductory session on web publishing at Fuqua. It provides an overview of new opportunities at Fuqua including the selection of Dreamweaver as the standard editing software. The session focuses on conceptual understanding, technical introduction to HTML codes, and a panel discussion. Survey results from attendees show their current web use, experience levels, and interest in publishing and topics. The document then covers the basics of HTML codes including examples of common codes for formatting text, creating lists, and adding links. It emphasizes that knowing some HTML can help debug issues or understand how pages are constructed.

Uploaded by

Vincent Bumas-ang Acapen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 51

The Web

at Fuqua
and You
New opportunities
 Selection of DreamWeaver as Fuqua’s
standard web editing software.
 The imminent selection of easy-to-use version
control software for publishing web files.
 Improvements in Fuqua’s web computer
hardware.
 The development of Fuqua web page
templates.
Today’s focus
 Conceptual
– an understanding of Fuqua’s web-related
challenges and opportunities
 Technical
– an introduction to HTML codes in
preparation for DreamWeaver training
 Colleague-to-colleague
– panel discussion/Q&A on web experience
Session Agenda
 Fuqua’s web site: Your critical role in its
development and maintenance
 Where web publishing at Fuqua is
headed
 TSC support for your work on the web
 HTML coding basics
 Panel discussion
Your responses to the e-mail survey...
What do you use the web for?
 Personal research: 17
 Work-related research: 20
 Purchases: 9
 Music: 7
 Software downloads: 8
 Communication: 14
 Other: 4
GEMBA work, completing on-line surveys, marketing.
Your current level of web
publishing experience
 Absolutely none: 10
 Enough to be dangerous: 4
 Moderate knowledge: 5
 Solid knowledge: 1
 Expert 0
Your interest in publishing
Enthusiasm Level
12

10

0
Not at all Not sure Moderately Very

 Not at all enthusiastic: 0


 Not sure yet: 3
 Moderately enthusiastic: 6
 Very enthusiastic: 11
Your interest in topics
12

10
History
8 Future
HTML
6

0
Next...
Fuqua’s web site
and your critical role
Nevin Fouts

Direction of web TSC support


work at Fuqua Diane Reynolds
Paul Hilburger
Intro to HTML Codes

 What are they?


 Why should I care about them?
What are HTML codes?

 Every web page you see with your


browser is formatted with HTML codes.
 HTML is an acronym for
• Hyper
• Text
• Markup
• Language
For example...
In Netscape: View, Page Source
a closer look
HTML codes control the look of the page
when a reader views the page in a browser like Netscape.
Why care about HTML codes?

 Maybe you don’t care…


– With a web page editing tool (like
DreamWeaver) you may never have to
see an HTML code.
– The HTML codes may look strange and
boring to you.
– That’s OK!
 Some reasons you might care
– Remember WordPerfect codes?
– Even Word makes some codes available.
– Knowing something about HTML codes can
help you:
• debug when things aren’t quite right
• tinker when you want something special
• understand how some cool web page was
constructed (by viewing the page source)
The idea is:

 Use a high-end software tool like


DreamWeaver to do most of your web
editing work.
 But also…
Know a little about HTML codes so you
can tell what’s going on behind the
scenes (if you need to know).
You don’t have to be an expert
 “Codes” don’t mean programming.
 There is a relatively small set of basic
HTML codes.
 Many of the codes are logical and easy
to remember.
 Once you understand the general rules,
most codes will make sense.
What do HTML codes do?
 Codes establish the formatting for a web
page. For example:
– What typeface to use
– What color background for the page
– What graphic and where to position it
– What kind of indentation for text
– When to use bullet points
– Etcetera
What are the HTML code rules?

 There are really only a few “rules”.


 (And -- of course -- there are some
exceptions to the rules.)

 HTML codes appear in brackets.


 HTML codes are “paired”.
Example
 To “turn on” bolding: <b>
 To “turn off” bolding: </b>
 This code:
The quick <b> red fox </b> jumped over
the lazy dog.
 Appears as:
The quick red fox jumped over the lazy
dog.
Another concept
 You can stack up codes to get multiple
effects
 This code:
The quick <b><i><u>red fox</u></i></b>
jumped over the lazy dog.
 Appears as:
The quick red fox jumped over the lazy
dog.
3 HTML codes
 Bolding: <b> </b>
 Italicizing: <i> </i>
 Underlining: <u> </u>

 “Rules” for these codes: They


– appear in brackets
– are paired
– surround the text they affect
Examples of exceptions
 Examples of codes that affect layout:
<br> generates a line break
<p> starts a new paragraph
&nbsp; adds a space

 These codes do not have to be paired.


 And notice that the “space” code does
not appear in brackets.
<br> code example
 This code:
The quick, <br> red fox <br> jumped
over the lazy dog.

 Appears as:
The quick,
red fox
jumped over the lazy dog.
<p> code example
 This code:
Where’s the fox? <p> Where’s the lazy
dog?

 Appears as:
Where’s the fox?

Where’s the lazy dog?


&nbsp; code example
 This code:
The quick red dog &nbsp; &nbsp;
&nbsp; &nbsp; jumped over the lazy fox.

 Appears as:
The quick red dog jumped over the
lazy fox.
Another layout code
 <center> </center>

 This code:
<center>The Story of the Fox</center>

 Appears like:
The Story of the Fox
Some codes provide “canned” services

 <h1>This is a main header</h1>


 <h2>This is a secondary header</h2>
 <h3>This is a tertiary header</h3>

 These “header tags” are a convenient


way to control both font size and
bolding.
“Canned” headers might look like this

This is a main header


This is a secondary header
This is a tertiary header

The text on the web page would be sized proportionately smaller.


A set of “list codes” formats a list
 Code for an “ordered” (numbered) list:

<OL>My favorite trees:


<li> oak
<li> beech
<li> maple
</OL>
Another set of list codes
 Code for an “un-ordered” (bulleted) list:

<UL>My favorite trees:


<li> oak
<li> beech
<li> maple
</UL>
The list results
 Ordered List  Unordered List

My favorite trees: My favorite trees:


1. oak • oak
2. beech • beech
3. maple • maple
Linking

 A very important web page topic.


 Kinds of links include links:
– to another part of the same page
– to an entirely different web page
– to a document (for download)
– to an e-mail screen (a “mail-to” link)
– to an electronic bulletin board
What about linking codes?

 HTML link codes are special.


 A simple link has 4 components:
– 1. An “anchor reference” to start.
– 2. The item to link to.
– 3. What the reader sees underlined.
– 4. A “close link” code to end.
Example: A link to another web page
 How do we write the code for this sentence:

Birds native to North Carolina include the


fantastic-looking pileated woodpecker.

 …so when the reader clicks the underlined link


they go to a page about this particular bird?
How to link to another web page
 1. The starting “anchor reference”:
<A HREF=
 2. The item to link to:
“woodpecker.htm”>
 3. What the reader sees underlined:
pileated woodpecker
 4. A “close link” code to end:
</A>
Put it all together
 This code:
Birds native to North Carolina include the
fantastic-looking <A
HREF=“woodpecker.htm”>pileated
woodpecker</A>.
 Appears as:
Birds native to North Carolina include the
fantastic-looking pileated woodpecker.
One more link code example
 This code:
For problems with Microsoft products, send
electronic mail to Bill <A
HREF="mailto:Bill.Gates@Microsoft.
com">Gates</A>.
 Appears as:
For problems with Microsoft products, send
electronic mail to Bill Gates.
[email protected]

Clicking the mail-to link opens up a special


e-mail window in the web browser.
Key concepts to remember
 It’s useful to know a little about HTML
codes if you need to:
– fix a problem on one of your web pages
– see what’s “really” going on behind the
scenes
 There’s a small set of basic codes.
 You can always look up the meaning of
any code you don’t know.
How can you look up an html code?

 Use the handout for quick reference to


basic codes.
 Fuqua’s library has HTML books in its
collection.
 Do a web search on the word “HTML”.
Practice recognizing
how HTML codes work.
Appendix

Other link examples

 Link to a document for download


 This code:
For more information get this <A
HREF=“Excel.xls”>Excel</A>file.
 Reads like this:
For more information get this Excel file.
Appendix

Other link examples


 Link to a bulletin board
 This code:
<A HREF=
"news://news.fuqua.duke.edu/Announce.
General”>Announce</A>Bulletin board.
 Reads like this:
Announce Bulletin board.
Appendix

Other link examples


 Link to another location on the same page
 Enter this code:
<A HREF="#PPT">Excel Overview</A>.
Then further down the page enter this code:
<A NAME="PPT">
 The link reads like this:
Excel Overview.
Click this link to jump to the part of the page
that has the <A NAME> code.

You might also like