1 / 29

Basic Web Publishing BA209

Web is a communication protocol. The Internet is. A net of nets. That ... Save to your test directory with same name as in your HTML code: index.htm ...

ryanadan
Download Presentation

Basic Web Publishing BA209

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

    Slide 1:Basic Web Publishing BA209

    Arturo Perez-Reyes

    Slide 2: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

    Slide 3: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

    Slide 4: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

    Slide 5: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

    Slide 6: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;

    Slide 7:Basic page

    <HTML> <HEAD> <TITLE>Descriptive title for each page</TITLE> </HEAD> <BODY> Anything placed here is visible to the world. </BODY> </HTML>

    Slide 8: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

    Slide 9: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>

    Slide 10: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

    Slide 11:It should look like

    If not, then Reload or Refresh the browser

    Slide 12: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

    Slide 13:Common links

    <IMG SRC=“your_photo.jpg”> <A HREF=“resume.html”>Check out my resume </A> <A HREF="mailto:yourID@haas.berkeley.edu”>Mail me!</A>

    Slide 14: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:yourID@haas.berkeley.edu”>Mail me!</A> One space in tag. Initiates an e-mail to you from them.

    Slide 15: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>

    Slide 16: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:yourID@haas.berkeley.edu">Mail me!</A> </BODY> </HTML>

    Slide 17:And displays like this

    Slide 18: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

    Slide 19:Using Composer

    Slide 20: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

    Slide 21: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

    Slide 22: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

    Slide 23: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

    Slide 24:Edit to make it yours

    Delete tables by selecting on either side Beware of center-weighted formats Update email link

    Slide 25: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

    Slide 26: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

    Slide 27:Try some Javascript

    http://www.haas.berkeley.edu/~perezre/Intersession/ <FORM> <INPUT TYPE=BUTTON VALUE="Click me" onClick="alert(‘Your text goes here')"> </FORM> See the example in action and get more at

    Slide 28:Helpful resources

    A brief guide to the code An excellent place to see it in action http://www.mountaindragon.com/html/ http://www.werbach.com/barebones/ http://haas.berkeley.edu/~perezre/How_To.html My list of resources and help files

    Slide 29:The End

More Related