Transcript Step 1
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 < < >> & & " “ &#reg; registered trademark ™ trademark non-breaking space (eg. blank table cell)