1 / 44

Welcome to the Web Developers Boot Camp

Welcome to the Web Developers Boot Camp. Introduction to HTML Publishing pages to a web server Web Graphics Using FrontPage Testing your pages Common reasons pages don’t work. Introduction to HTML. What is HTML? Hypertext Markup Language

brooke-fowler
Download Presentation

Welcome to the Web Developers Boot Camp

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

  1. Welcome to the Web Developers Boot Camp Introduction to HTML Publishing pages to a web server Web Graphics Using FrontPage Testing your pages Common reasons pages don’t work

  2. Introduction to HTML • What is HTML? • Hypertext Markup Language • Stage directions – tells browser (Internet Explorer, Netscape, etc.) what to do and what props to use • Tags: Building blocks of an HTML page • Directions/Layout instructions are taken from “TAGS” • Tags made up of English words or abbreviations • Distinguished from regular words by angle brackets “<“ and “>” (eg: <TAGNAME>) • Some tags dictate how the page will be formatted • The paragraph tag <P> starts a new paragraph • Some tags dictate how words appear • The bold tag <B> makes text bold • Some tags travel in pairs – “/” denotes an ending tag, or end of that tags function: (eg: <TAGNAME>…</TAGNAME>)

  3. Introduction to HTML • HTML Exercise/Demonstration • All you need is a text editor (eg: Notepad) • Open Notepad • Getting the stage ready • Before adding content – create your document layout • <HTML></HTML> - Creates an HTML document • <HEAD></HEAD> - Where you create the title of the page and other universal document information • <BODY></BODY> - The visible portion of the page • Giving your page a name • <TITLE>My very first HTML page</TITLE>

  4. Introduction to HTML • Giving your page some content • In-between the <BODY></BODY> tags add the following lines of text: • Your name • Your job title • Your department • Your office phone number • Your e-mail address • Save your page to your desktop • Open browser to view your page

  5. Introduction to HTML • Add some line breaks / carriage returns at the end of each line • Line break tag: <BR> • Save your page and view it again • Add a header line for your content • Header tag <H1> (largest), <H2>, <H3>, <H4>, <H5>, <H6> (smallest) • <H3>My Information</H3> • Center all of your content • Center tag <CENTER>All content</CENTER> • Save your page and view it again • Make your name bolded text • Bold tag <B>Your Name</B> • Make your job title italicized text • Italicize tag <I>Job Title</I> • Save your page and view it again

  6. Introduction to HTML • Link to your department’s webpage • Hyperlink tag • <A HREF=http://www.usi.edu/>USI</A> • Save and view your page, click on link then click on the browser’s “Back” button to return to your page. • Link to your e-mail address • Hyperlink tag with “mailto” reference • <A HREF=mailto:sklassen@usi.edu>My e-mail</A> • Change your font of your content • Font tag <FONT face=Arial>Content</FONT> • Save and view your page

  7. Introduction to HTML • Page cosmetics • Changing your background color • Using the bgcolor attribute in the <BODY> tag • <BODY bgcolor=blue> • Choose a background color (white is default) • Possible bgcolor values • Color names (eg: blue, red, purple) • Simple colors • Hex values (#6633FF, #CC3300, #993399) • More complex colors • See reference for more hex colors • Save and view your page

  8. Introduction to HTML • Changing your foreground color or text color • Using the “text” attribute in the <BODY> tag • <BODY bgcolor=blue text=green> • Choose your foreground color • Changing your link color • Using “link” attribute in the <BODY> tag • <BODY bgcolor=blue text=green link=red alink=purple vlink=white> • Three different link states • Choose your link colors • Save and view your page

  9. Questions • Pause for questions

  10. Introduction to HTML • Exercise: Writing HTML using Notepad • Create standard HTML structure • Make a title for your page • Create a background color for your page • Type two small paragraphs of content with a paragraph tag in between the two • Put a line break tag after the last paragraph • Use the font tag to make the first paragraph a different color and font size

  11. Introduction to HTML • Exercise: Writing HTML using Notepad, continued • Bold some content in the second paragraph • Italicize some content in the second paragraph • Grab an image from the internet and use the image tag to display it on your page using a relative reference • Now reference the same image using an absolute reference • Add a hyperlink pointing to www.usi.edu • Add a hyperlink pointing to your page

  12. Publishing pages • Viewing your pages via the internet • Send pages to a web server • How a page is distributed • Server space maintenance • Common ways (protocols) of sending pages to a web server • FTP • SSH • Through a mapped drive

  13. Publishing pages • Sending pages via FTP to a web server • File Transfer Protocol • Plain-text data transfer • Microsoft’s FTP client • ftp://username:password@www.ftpserver.com • ftp://username@www.ftpserver.com • Other FTP clients • WS_FTP • CuteFTP

  14. Publishing pages • Exercise: Publish pages to usiweb.usi.edu through an FTP client • Go to your desktop • Open “My Computer” or “Internet Explorer” • Type in the following URL into the address field: ftp://fpageuser:bootcamp@usiweb.usi.edu/class

  15. Publishing pages • Sending pages via SSH • Secure Shell • Encrypted data transfer • More secure than FTP • SSH used with www.usi.edu for off-campus access • SSH clients • SSH Secure Shell • PuTTY (Free Win32 SSH client)

  16. Publishing pages • Sending pages through a mapped drive • Method used to publish on campus to www.usi.edu. Normally labeled “Q:” or “the Q drive”.

  17. Publishing pages • Creating a mapped drive for www.usi.edu • Make sure you have access to on the web server • If not: Have your fiscal agent send an e-mail to Web Services approving access • Go to your computer’s desktop • Right click on the “My Computer” icon • Select “Map Network Drive…” • Enter Q: as the drive letter • Enter \\www\www_usi as the folder • Click on Finish or OK • Traverse to your folder you have access to using FrontPage or another web publishing application

  18. Publishing pages • Exercise: Publish pages to the backup web server through a mapped drive • Create a mapped drive using the drive letter “Q:” and folder name \\www2\class • Click on “different user name” in the “map a drive” dialog box and type in “class” as the username and “bootcamp” as the password • Upload your web page and its images to this mapped drive using “My Computer” • View your page on the internet using the following URL: http://www2.usi.edu/class/mypage.html

  19. Questions • Pause for questions

  20. Publishing pages on Campus Pipeline • USI’s Campus Pipeline has a personal homepage facility (EzSiteBuilder) • How to use Campus Pipeline’s web page editor • Go to Campus Pipeline (www.usieagles.org) • Use your USI domain account login and your six-digit PIN to login • PIN is accessible at the Registrar’s Office (x1762) • Go to the Campus Life tab • Click on “Create your own website (USI hosted)” • Login again using your Campus Pipeline credentials • If authenticated, click on “Click here to proceed”

  21. Publishing pages on Campus Pipeline • How to use Campus Pipeline’s web page editor, continued • Enter the name of your site and your password for your site • Fill out the Personal Information form • Click on “Click Here” to edit your new site • Logon to the editor using your site’s name as your username and the password that you just setup • Click on “Next” to edit your index page • Now you can create your page using the interface provided • Once you’re finished editing, save your page and view it

  22. Publishing pages on Campus Pipeline • Uploading pages to EzSiteBuilder • Within EzSiteBuilder, click on “Upload Files” • Browse to your file that made earlier • Click on “Click Here to Upload This File” • Upload and images that are associated with this page

  23. Publishing pages on Campus Pipeline • Exercise: Create a link from your index page to your page you’ve uploaded • Go to “Edit Pages” within EzSiteBuilder • Select index.html • Add a link to your new page

  24. Questions and Break • Pause for questions

  25. Web Graphics • Why should we use graphics? • Can be used to display information, such as a map, or a statistical graph. • Can also create a certain look and feel to the site, also when used consistently, can create a unified look on your site that your audience can identify with.

  26. Web Graphics • Two main types of Web graphic files • GIF (Graphics Interchange Format) • Great for logos, charts, buttons • JPG (Joint Photographic Experts Group) • Great for photographs

  27. Web Graphics • Important points about graphics • Keep graphic files size small: Most users are impatient when it comes to pages loading. • Add ALTernative text to identify graphics in non-graphic browsers. • Resize the image in a graphic editor rather than sizing the graphic in HTML

  28. Web Graphics • File Size • Image resolution should be set at 72 dpi (dots per inch) • ALT (alternative) text • <IMG SRC=“usilogo.gif” ALT=“USI Logo”> For example, the USI homepage has graphic links to “Students” and “Alumni”, there is an ALT equivalent so if you were unable to see the graphic, the ALT text will tell you what it reads.

  29. Web Graphics • Resizing the Image • The Internet uses pixel widths instead of inches. Pixels refers to the monitor resolution. • Think in terms of a page being 650 pixels wide. Images should be around 200 pixels wide. Sometimes more or less depending on situation. • Resizing the image in a graphics program will decrease the file size. Whereas resizing the image in HTML will distort the image appearance and the computer will still have to load the original sized image, then resize it. So it doesn’t cut down on load time.

  30. Web Graphics • Where to find graphics/how to get in digital format • www.google.com search for images • Right click on image you want, save locally on your machine. • Use a desktop scanner to scan images. • Film developing, select digital format for a CD of your roll of film.

  31. Web Graphics Exercise: Manipulate an image and insert it in a Web page. • Part 1 • Open Microsoft Photo Editor • Open file • Check resolution • Resize image • Save image • Part 2 – next slide • Insert image into your Web page • Save file • View Web page in browser

  32. Web Graphics • Adding a graphic to a Web page • HTML code: <IMG SRC=“usilogo.gif” ALT=“USI Logo”> • Modifying graphic • Add a border <IMG SRC=“usilogo.gif” ALT=“USI Logo” BORDER=“1”> • Change alignment <IMG SRC=“usilogo.gif” ALT=“USI Logo” ALIGN=“RIGHT”>

  33. Questions? Graphics,Images, Photos

  34. Using FrontPage • FrontPage is a great Web editing tool for people with limited knowledge and time for HTML coding. • It’s similar to using Microsoft Word and it allows for two different editing modes, Normal and HTML view. • As you are bolding text and inserting graphics in Normal view, FP is writing the HTML code for you.

  35. Using FrontPage • To help make your pages compatible in most browsers, change your FP settings by going to: Go to Tools-->Page Options, Select the Compatibility tab.Change the settings to this:Enable only commands supported by the following:Browsers: Internet Explorer and NavigatorBrowser Versions: 4.0 browsers and laterServers: CustomUNCHECK Enable with Microsoft FrontPage Server Extensions.

  36. Using FrontPage • One problem with using FrontPage and Microsoft Word: • When copying text from a Word document, and pasting into FrontPage. Word carries over unnecessary HTML code and may cause problems with your Web page working in non-Microsoft brand browsers, like Netscape. • Solutions: • When copying from Word to FrontPage, Right Click in the area you want to paste to, then in the pop up window, select Paste Special, then select Normal Paragraphs with Line Breaks. • Another option is to paste your text from Word into Notepad, then copy the text from there and paste into FrontPage. Notepad will strip out all the bad code and formatting.

  37. Using FrontPage Exercise: Create a Web page using FrontPage. • Insert a graphic • Use different colors, bold, font faces • Save on backup web server (WWW2) • View in Web browser

  38. Questions Using FrontPage

  39. USI Templates • The USI Templates were created to: • Give a consistent look/presence on the USI Web site. • Allow Web Services to easily change the layout and design during our annual site redesign without the involvement and work of departments. • Make Web development easier for developers by creating an easy-to-use template.

  40. Testing Your Pages • It’s always important to test your work. • Check your page in different browsers like Microsoft Explorer and Netscape. • Check your page in older versions of those browsers. People may be using old machines and do not have the latest versions of browsers. • Check for Accessibility. • Check to make sure you have used ALT tags on graphics • Use Bobby site to test for accessibility issues. • http://bobby.watchfire.com/bobby/html/en/index.jsp

  41. Common Reasons Why Pages Don’t Work • Copied text from Word that hasn’t been stripped of it’s formatting. • File names of HTML pages or graphics with more than eight characters. • Using spaces and special characters in file names. • Incorrect HTML coding. Just because FrontPage wrote the code for the work you did, doesn’t mean it’s perfect. After several edits and moving things around on a page, HTML coding can be lost or moved out of sequence. • Redundant HTML tags, for example: <FONT FACE=“arial”><FONT FACE=“times” size “9”>Welcome to my homepage</FONT>

  42. Questions? • For further assistance, contact Web Services at: • Tim Lockridge, tlockridge@usi.edu Assistant Director, Computer Center • Brandi Hess, bhess@usi.edu Graphic Designer, Web Services • Scott Klassen, sklassen@usi.edu Network Technician, Computer Center

  43. Book Recommendations • Castro, Elizabeth. HTML For the World Wide Web. Berkeley: Peachpit Press, 1998. ISBN: 0-201-69696-7 • Castro, Elizabeth. HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide (5th Edition).Berkeley: Peachpit Press, 2002. ISBN: 0321130073 • Bebak, Arthur and Smith, Bud E. Creating Web Pages for Dummies. Wiley, John & Sons, Inc. ISBN: 0764516434

  44. Questionnaire • Feedback for the conference: • http://www.usi.edu/webservices/survey.asp

More Related