Transcript web
Basic Web Publishing BA209 Arturo Perez-Reyes Web is a communication protocol The Internet is • A net of nets • That use the TCP/IP protocol To publish on it, you need • • • • A server that runs the HTTP protocol A folder that has been de-cloaked HTML text files as well as media like images Some way to move files: drag and drop or FTP Publishing to a UNIX server Set privileges for web directory chmod -R 755 public_HTML Create server shortcut to homepage chmod 711 ~yourID Then FTP upload all files to shell account ftp://haas.berkeley.edu/home/mba99/userID/ View at HTTP://haas.berkeley.edu/~userID Publishing to our NT server Privileges and shortcuts already set by staff Save files from desktop to your “I” drive I:\yourID\file.html View at HTTP://web.haas.berkeley.edu/www/yourID Help on the desktop Your desktop already has shortcuts to Your Web directory on “I” A sample homepage on “I” You can Modify the existing file with Composer Or write over the sample with better First let’s learn to code HTML is just text You can create and edit it with Notepad or save as “text” in WP It is case insensitive <blink> is the same as <BLINK> It does not recognize returns or tabs To return you use <p> or <br> To create spaces, use nbsp; Basic page <HTML> <HEAD> <TITLE>Descriptive title for each page</TITLE> </HEAD> <BODY> Anything placed here is visible to the world. </BODY> </HTML> Basic tags for BODY Text <H1>Your name</H1> Format <P> Creates a double space <BR> Creates a single space Line <HR> Creates a line It should like this <HTML> <HEAD> <TITLE>Descriptive title for each page</TITLE> </HEAD> <BODY> <H1>Your name</H1> <P> <HR> <P> Some text that about yourself or this page. </BODY> </HTML> Save it In your “I” drive, create a folder called test Save the file to I:\yourID\test\ Call it index.htm View it with a browser It should look like If not, then Reload or Refresh the browser Common tags <B>TEXT</B> TEXT <I>TEXT</I> TEXT <U>TEXT</U> TEXT <STRIKE>TEXT</STRIKE> TEXT <BLINK>TEXT</BLINK> makes it blink TEXT <CENTER>TEXT</CENTER> centers TEXT Common links <IMG SRC=“your_photo.jpg”> <A HREF=“resume.html”>Check out my resume </A> <A HREF="mailto:[email protected]”>Mail me!</A> Links explained <IMG SRC=“your_photo.jpg”> Note the space between IMG and SRC. It’s the only one. The filename has no path, so it must be in the same folder. <A HREF=“resume.html”>Check out my resume </A> Ditto. Only one space in tag. Text can be anything. If filename was “http://www.yahoo.com”, you’d go there Use relative links for local files; absolute for external <A HREF="mailto:[email protected]”>Mail me!</A> One space in tag. Initiates an e-mail to you from them. Go get an image HTTP://ftp.sunet.se/pub/pictures/ Save it to the your test directory Memorize the exact title. Is it GIF or JPG? Type it into tag: <img src=“image.jpg> Code looks like this <HTML> <HEAD> <TITLE>Descriptive title</TITLE> </HEAD> <BODY> <H1>Your name</H1> <P> <HR> <img src=”image.gif"><p> Some text about the image or about you.<p> <A HREF=“resume.html”>Check out my resume </A><p> <A HREF="mailto:[email protected]">Mail me!</A> </BODY> </HTML> And displays like this Beautify with an editor View your page in Netscape Navigator • Go to the File menu • Select Edit Page You are now in Netscape Composer • The interface is WYSIWYG • Save to your test directory Using Composer Use Save, not Publish on NT Inserts internal anchor Inserts hyperlink Just like a word processor Inserts picture Line Table Format image and name Put cursor near top of page Insert a Table from Composer toolbar In dialog box, set to one row and two columns Now drag and drop your photo into one cell Copy and paste the your name in to the other Save the file and then Preview it in a browser Don’t like border? Change with Format/Table Change your color scheme Go to the Format menu Choose Page properties Pick a ready-made scheme Or create your own Try a background image Things to try You can alter border thickness or turn off You can change the alignment of text You can define the width of a table in pixels or percentages Tables & cells can have background images Now visit Haas-made page Open in Netscape, either I:\yourID\index.htm http://web.haas.berkeley.edu/www/yourID/ Examine the alternatives and chose • The staff has produced six different schemes • View the most promising with Composer Edit to make it yours Delete tables by selecting on either side Beware of centerweighted formats Update email link Now get a sample resume Use Netscape Communicator to go to http://haas.berkeley.edu/~perezre/Resume.html Now steal the code Go to File menu Select Edit Page Change some text and then view Save to your test directory with same name as in your HTML code: index.htm Alternatives for resume Start from scratch with the Word web wizard Change a Word or WordPerfect file • From File menu, Save as HTML • The resulting file will have too many spaces • Edit it with Composer or Frontpage You’ll have better results importing the file • Start MS Frontpage • Open the document, edit, and save Try some Javascript <FORM> <INPUT TYPE=BUTTON VALUE="Click me" onClick="alert(‘Your text goes here')"> </FORM> See the example in action and get more at http://www.haas.berkeley.edu/~perezre/Intersession/ Helpful resources A brief guide to the code http://www.werbach.com/barebones/ An excellent place to see it in action http://www.mountaindragon.com/html/ My list of resources and help files http://haas.berkeley.edu/~perezre/How_To.html The End