Download Step 1

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Transcript
Going Live with a
Basic Web Page
http://www.msu.edu/~hartdav2/
pfworkshop
Bill Hart-Davidson
[email protected]
AIM: billhd30
Step 1: Grab the Personal
Project Page Template
1.Go to http://www.msu.edu/~hartdav2/pfworkshop/
2. Find the Simple Page Template
3. Click the link to view the template in the browser.
3. Go back to the home page and right-click on the
link to download the source file to your desktop.
It will be called “ptemplate.html”
Step 2: Save to your AFS
You have access to an account provided by MSU–
your AFS Space.
http://www.msu.edu/~your_msunet_id
To put stuff there, FTP to ftp.msu.edu and store files
in the directory called web; Or, in a networked lab,
map the drive and navigate to your web directory
Did that last bit of jargon confuse you?
Try it now…
Post a copy of the project page template in your AFS
space.
1. Make a new folder inside the web folder; call it
“210”
2. Drag the file called ptemplate.html into it
3. Now open a new browser window and visit your
page at
http://www.msu.edu/~your_msunet_id/210/
ptemplate.html
Step 3: Play with HTML &
Dreamweaver
Try these:
•
Choose View > Page Source in your browser; this
is the HTML that makes the page render
•
Open a plain text editor (Wordpad on PC,
SubEthaEdit on the Mac)…play with the code. See
the “html reference info” in this set of slides.
–
–
•
Make a change to the file and save it
View that version of the file (now on your desktop) in the
browser or, if it is already loaded, hit refresh
Open Dreamweaver, a web editing program…this
lets you edit in WYSIWYG mode
Step 4: Grab the ZIP file with
the other portfolio sample
•
Right click to download it from the workshop page
•
Inside you should see:
–
–
–
–
–
•
index.html (the main page)
pflayout.css (a file creating the layout for the page)
pfpresentation.css (a file holding the colors, fonts, etc.)
pw_workshop_header.jpg (banner image)
covers.jpg, dogs.jpg, dogtug.jpg (images in body)
Play around with the contents here…try to get a
feel for how the various pieces work together
Step 5: Make a home page for
yourself
•
Either create a new html page or rename one of the
samples…call it
index.html
•
•
Save it in your AFS “web” folder
This will be what others see when they go to
http://www.msu.ed/~your_msunetid
•
You may want to use this space to house your
portfolio
HTML Reference
The following pages provide an overview
of the basic html tags.
Copy & Paste these into your html file,
save the file, then view the file in a
browser to see what they do.
HTML Document Basic
Structure
<HTML>
<HEAD>
<!– Page title and hidden info 
</HEAD>
<BODY>
<!– Browseable, visible text 
</BODY>
</HTML>
Note: Any
plain text file
with this basic
structure will
do …name it
with a .html
extension and
open it in any
web browser
Header Tags
<HEAD>
<TITLE>
Should match Web page heading
</TITLE>
<META>
</HEAD>
Body Tags 1: How does the
whole page look?
<BODY
BGCOLOR=“#FFFFFF”
BACKGROUND=“background.gif”
LINK=“#CC3333”
ALINK=“#CCFFFF”
VLINK=“#C0C0C0”
TEXT=“#000000”>
Body Tags 2: Six levels of
headings
Headings
<H1>Largest heading</H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6>Smallest heading</H6>
Body Tags 3: Basic “block”
level tag, the paragraph
Paragraphs
<P> </P>
<P>This is a short example of a
paragraph</P>
A simple text-only menu bar
<p>
<hr noshade size="1"><br>
Teams [
<a href="#team1">1</a> |
<a href="#team2">2</a> |
<a href="#team3">3</a> |
]
<br><br>
</p>
Body Tags 4: Lists, with
numbers and with bullets
Lists
Unordered
<UL>
<LI>Apples</LI>
<LI>Oranges</LI>
</UL>
Ordered
<OL>
<LI>Priority 1</LI>
<LI>Priority 2</LI>
</OL>
Body Tags 5: Other lists
Lists (continued)
Definition
<DL>
<DT>HTML</DT>
<DD>A tag language</DD>
</DL>
Example: Def. List for a team
project, 1
<dl>
<dt><b><a name="team1">Team 1 <a href="">Buy_It.com</a></b></dt>
<br><br>
<dd>Here's a description of this Web site.
<p><b>Team members</b>
<br>
Example: Def. List for each
team project, 2
Here are the names of the people involved.</p>
<p><b>Send us your comments</b>
<br>
Here's how to contact us.
<p><hr noshade size="1"></p>
</dd>
Body Tags 6: White Space!
Breaks
<BR>
<BR CLEAR=“left | right | all“>
Body Tags 7: Horizontal lines
for dividing a page
Horizontal Rules
<HR>
<HR NOSHADE SIZE=“1“>
Body Tags 8: Inserting an
inline image file
Graphics
<IMG SRC=“my.gif“
ALT=“My picture”
HEIGHT=“24“
WIDTH=“32“
ALIGN=“left | right | center“
HSPACE=“6”
VSPACE=“6”>
The SRC is the
“source” of the
image. The URL of
the source tells the
browser where to
find the image. In
this example, the
image is stored in
the same directory
as the page it is
sitting on.
Body Tags 9: Links, External &
Internal
Anchors (Links) Within a Page
“From” Link
<A HREF=“#Section 1”>
Go to Section 1</A>
“To” Link
<A NAME=“Section 1”>
Section 1</A>
Body Tags 10: Links, absolute
and relative
Anchors (Links) to Another Page
Absolute
<A HREF=“http://www.rpi.edu/
~hartdw/”>Bill’s page</A>
Relative
<A HREF=“wwww4.html”>Writing to the
World Wide Web, section 4</A>
Body Tags 12: The mailto link
Mailto Anchors
<A HREF=“mailto:[email protected]”>
Bill’s e-mail</A>
Body Tags 13: The old way to
do page layout, tables!
<TABLE>
<CAPTION>Simple table</CAPTION>
<TR>
<TH>Column heading</TH>
</TR>
<TR>
<TD>Column data</TD>
</TR>
</TABLE>
TR = table row
TD = table cell
..actually, TD
stands for
“table data,”
but you can
have a cell
with no data
in it…
Body Tags 14: Table attributes
<TABLE
BORDER=“1”
CELLPADDING=“4”
CELLSPACING=“0”
WIDTH=“450”>
Body Tags 15: A table row
<TR
BGCOLOR=“#C0C0C0”
ALIGN=“left | right | center”
VALIGN=“top | bottom | center”>
Body Tags 16: A table cell
<TD
BGCOLOR=“#C0C0C0”
ALIGN=“left | right | center”
VALIGN=“top | bottom | center”
COLSPAN=“2”
ROWSPAN=“2”>
Body Tags 17: Styles you can
apply to text
Text: We can specify
• Bold text
• Italics
• Font size
• Font face
• Font color
Body Tags 18: Style tags
(override style sheets)
• <B>Bold text</B>
• <I>Italicized text</I>
• <FONT SIZE=“3”
FACE=“ARIAL”
COLOR=“blue”>
Blue Arial text (normal/default size)
</FONT>
Body Tags 19: some codes for
special characters
• Special Characters
&lt; <
&gt;>
&amp;
&
&quot;
“
&#reg;
registered trademark
&#153; trademark
&nbsp; non-breaking space (eg. blank
table cell)