Home >Documents >Welcome to the Web Developers Boot Camp Introduction to HTML Publishing pages to a web server Web...

Welcome to the Web Developers Boot Camp Introduction to HTML Publishing pages to a web server Web...

Date post:25-Dec-2015
Category:
View:220 times
Download:1 times
Share this document with a friend
Transcript:
  • Slide 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 dont work
  • Slide 2
  • Introduction to HTML What is HTML? Hypertext Markup Language Hypertext Markup Language Stage directions tells browser (Internet Explorer, Netscape, etc.) what to do and what props to use 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 Directions/Layout instructions are taken from TAGS Tags made up of English words or abbreviations Tags made up of English words or abbreviations Distinguished from regular words by angle brackets (eg: ) Distinguished from regular words by angle brackets (eg: ) Some tags dictate how the page will be formatted Some tags dictate how the page will be formatted The paragraph tag starts a new paragraph Some tags dictate how words appear Some tags dictate how words appear The bold tag makes text bold Some tags travel in pairs / denotes an ending tag, or end of that tags function: (eg: )
  • Slide 3
  • Introduction to HTML HTML Exercise/Demonstration All you need is a text editor (eg: Notepad) All you need is a text editor (eg: Notepad) Open Notepad Open Notepad Getting the stage ready Before adding content create your document layout Before adding content create your document layout - Creates an HTML document - Creates an HTML document - Where you create the title of the page and other universal document information - Where you create the title of the page and other universal document information - The visible portion of the page - The visible portion of the page Giving your page a name My very first HTML page My very first HTML page
  • Slide 4
  • Introduction to HTML Giving your page some content In-between the tags add the following lines of text: In-between the 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 Save your page to your desktop Open browser to view your page Open browser to view your page
  • Slide 5
  • Introduction to HTML Add some line breaks / carriage returns at the end of each line Line break tag: Line break tag: Save your page and view it again Add a header line for your content Header tag (largest),,,,, (smallest) Header tag (largest),,,,, (smallest) My Information My Information Center all of your content Center tag All content Center tag All content Save your page and view it again Make your name bolded text Bold tag Your Name Bold tag Your Name Make your job title italicized text Italicize tag Job Title Italicize tag Job Title Save your page and view it again
  • Slide 6
  • Introduction to HTML Link to your departments webpage Hyperlink tag Hyperlink tag USI USI http://www.usi.edu/ Save and view your page, click on link then click on the browsers Back button to return to your page. Save and view your page, click on link then click on the browsers Back button to return to your page. Link to your e-mail address Hyperlink tag with mailto reference Hyperlink tag with mailto reference My e-mail My e-mail Change your font of your content Font tag Content Font tag Content Save and view your page
  • Slide 7
  • Introduction to HTML Page cosmetics Changing your background color Using the bgcolor attribute in the tag Using the bgcolor attribute in the tag Choose a background color (white is default) Choose a background color (white is default) Possible bgcolor values Possible bgcolor values Color names (eg: blue, red, purple) Simple colors Simple colors Hex values (#6633FF, #CC3300, #993399) More complex colors More complex colors See reference for more hex colors See reference for more hex colors Save and view your page
  • Slide 8
  • Introduction to HTML Changing your foreground color or text color Using the text attribute in the tag Using the text attribute in the tag Choose your foreground color Choose your foreground color Changing your link color Using link attribute in the tag Using link attribute in the tag Three different link states Three different link states Choose your link colors Choose your link colors Save and view your page
  • Slide 9
  • Questions Pause for questions
  • Slide 10
  • Introduction to HTML Exercise: Writing HTML using Notepad 1. Create standard HTML structure 2. Make a title for your page 3. Create a background color for your page 4. Type two small paragraphs of content with a paragraph tag in between the two 5. Put a line break tag after the last paragraph 6. Use the font tag to make the first paragraph a different color and font size
  • Slide 11
  • Introduction to HTML Exercise: Writing HTML using Notepad, continued 7. Bold some content in the second paragraph 8. Italicize some content in the second paragraph 9. Grab an image from the internet and use the image tag to display it on your page using a relative reference 10. Now reference the same image using an absolute reference 11. Add a hyperlink pointing to www.usi.edu www.usi.edu 12. Add a hyperlink pointing to your page
  • Slide 12
  • Publishing pages Viewing your pages via the internet Send pages to a web server Send pages to a web server How a page is distributed How a page is distributed Server space maintenance Server space maintenance Common ways (protocols) of sending pages to a web server Common ways (protocols) of sending pages to a web serverFTPSSH Through a mapped drive
  • Slide 13
  • Publishing pages Sending pages via FTP to a web server File Transfer Protocol File Transfer Protocol Plain-text data transfer Plain-text data transfer Microsofts FTP client Microsofts FTP client ftp://username:[email protected] ftp://[email protected] Other FTP clients Other FTP clientsWS_FTPCuteFTP
  • Slide 14
  • Publishing pages Exercise: Publish pages to usiweb.usi.edu through an FTP client Go to your desktop Go to your desktop Open My Computer or Internet Explorer Open My Computer or Internet Explorer Type in the following URL into the address field: ftp://fpageuser:[email protected]/cla ss Type in the following URL into the address field: ftp://fpageuser:[email protected]/cla ss ftp://fpageuser:[email protected]/cla ss ftp://fpageuser:[email protected]/cla ss
  • Slide 15
  • Publishing pages Sending pages via SSH Secure Shell Secure Shell Encrypted data transfer Encrypted data transfer More secure than FTP More secure than FTP SSH used with www.usi.edu for off-campus access SSH used with www.usi.edu for off-campus accesswww.usi.edu SSH clients SSH clients SSH Secure Shell PuTTY (Free Win32 SSH client)
  • Slide 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. Method used to publish on campus to www.usi.edu. Normally labeled Q: or the Q drive. www.usi.edu
  • Slide 17
  • Publishing pages Creating a mapped drive for www.usi.edu www.usi.edu Make sure you have access to on the web server 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 If not: Have your fiscal agent send an e-mail to Web Services approving access Go to your computers desktop Go to your computers desktop Right click on the My Computer icon Right click on the My Computer icon Select Map Network Drive Select Map Network Drive Enter Q: as the drive letter Enter Q: as the drive letter Enter \\www\www_usi as the folder Enter \\www\www_usi as the folder\\www\www_usi Click on Finish or OK Click on Finish or OK Traverse to your folder you have access to using FrontPage or another web publishing application Traverse to your folder you have access to using FrontPage or another web publishing application
  • Slide 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 Create a mapped drive using the drive letter Q: and folder name \\www2\class\\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 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 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 View your page on the internet using the following URL: http://www2.usi.edu/class/mypage.htmlhttp://www2.usi.edu/class/mypage.html
  • Slide 19
  • Questions Pause for questions
  • Slide 20
  • Publishing pages on Campus Pipeline USIs Campus Pipeline has a personal homepage facility (EzSiteBuilder) How to use Campus Pipelines web page editor Go to Campus Pipeline (www.usieagles.org) Go to Campus Pipeline (www.usieagles.org)www.usieagles.org Use your USI domain account login and your six- digit PIN to login Use your USI domain account login and your six- digit PIN to login PIN is accessible at the Registrars Office (x1762) PIN is accessible at the Registrars Office (x1762) Go to the Campus Life tab Go to the Campus Life tab Click on Create your own website (USI hosted) Click on Create your own website (USI hosted) Login again using your Campus Pipeline credentials Login again using your Campus Pipeline credentials If authenticated, click on Click here to proceed If authenticated, click on Click here to proceed
  • Slide 21
  • Publishing pages on Campus Pipeline How to use Campus Pipelines web page editor, continued Enter the name of your site and your password for your site Enter the name of your site and your password for your site Fill out the Personal Information form Fill out the Personal Information form Click on Click Here to edit your new site Click on Click Here to edit your new site Logon to the editor using your sites name as your username and the password that you just setup Logon to the editor using your sites name as your username and the password that you just setup Click on Next to edit your index page Click on Next to edit your index page Now you can create your page using the interface provided Now you can create your page using the interface provided Once youre finished editing, save your page and view it Once youre finished editing, save your page and view it
  • Slide 22
  • Publishing pages on Campus Pipeline Uploading pages to EzSiteBuilder Within EzSiteBuilder, click on Upload Files Within EzSiteBuilder, click on Upload Files Browse to your file that made earlier Browse to your file that made earlier Click on Click Here to Upload This File Click on Click Here to Upload This File Upload and images that are associated with this page Upload and images that are associated with this page
  • Slide 23
  • Publishing pages on Campus Pipeline Exercise: Create a link from your index page to your page youve uploaded Go to Edit Pages within EzSiteBuilder Go to Edit Pages within EzSiteBuilder Select index.html Select index.html Add a link to your new page Add a link to your new page
  • Slide 24
  • Questions and Break Pause for questions
  • Slide 25
  • Web Graphics Why should we use graphics? Can be used to display information, such as a map, or a statistical graph. 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. 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.
  • Slide 26
  • Web Graphics Two main types of Web graphic files Two main types of Web graphic files GIF (Graphics Interchange Format) GIF (Graphics Interchange Format) Great for logos, charts, buttons Great for logos, charts, buttons JPG (Joint Photographic Experts Group) JPG (Joint Photographic Experts Group) Great for photographs Great for photographs
  • Slide 27
  • Web Graphics Important points about graphics Important points about graphics Keep graphic files size small: Most users are impatient when it comes to pages loading. 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. Add ALTernative text to identify graphics in non-graphic browsers. Resize the image in a graphic editor rather than sizing the graphic in HTML Resize the image in a graphic editor rather than sizing the graphic in HTML
  • Slide 28
  • Web Graphics File Size File Size Image resolution should be set at 72 dpi (dots per inch) Image resolution should be set at 72 dpi (dots per inch) ALT (alternative) text 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.
  • Slide 29
  • Web Graphics Resizing the Image The Internet uses pixel widths instead of inches. Pixels refers to the monitor resolution. 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. 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 doesnt cut down on load time. 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 doesnt cut down on load time.
  • Slide 30
  • Web Graphics Where to find graphics/how to get in digital format www.google.com search for images www.google.com search for images www.google.com Right click on image you want, save locally on your machine. Use a desktop scanner to scan images. Use a desktop scanner to scan images. Film developing, select digital format for a CD of your roll of film. Film developing, select digital format for a CD of your roll of film.
  • Slide 31
  • Web Graphics Exercise: Manipulate an image and insert it in a Web page. Part 1 Part 1 Open Microsoft Photo Editor Open file Check resolution Resize image Save image Part 2 next slide Part 2 next slide Insert image into your Web page Save file View Web page in browser
  • Slide 32
  • Web Graphics Adding a graphic to a Web page HTML code: HTML code: Modifying graphic Add a border Add a border Change alignment Change alignment
  • Slide 33
  • Questions? Graphics,Images, Photos
  • Slide 34
  • Using FrontPage FrontPage is a great Web editing tool for people with limited knowledge and time for HTML coding. Its 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.
  • Slide 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 Navigator Browser Versions: 4.0 browsers and later Servers: Custom UNCHECK Enable with Microsoft FrontPage Server Extensions.
  • Slide 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. 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. 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. 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.
  • Slide 37
  • Using FrontPage Exercise: Create a Web page using FrontPage. Insert a graphic Insert a graphic Use different colors, bold, font faces Use different colors, bold, font faces Save on backup web server (WWW2) Save on backup web server (WWW2) View in Web browser View in Web browser
  • Slide 38
  • Questions Using FrontPage
  • Slide 39
  • USI Templates The USI Templates were created to: The USI Templates were created to: Give a consistent look/presence on the USI Web site. 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. 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. Make Web development easier for developers by creating an easy-to-use template.
  • Slide 40
  • Testing Your Pages Its always important to test your work. Its always important to test your work. Check your page in different browsers like Microsoft Explorer and Netscape. 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 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 for Accessibility. Check to make sure you have used ALT tags on graphics Check to make sure you have used ALT tags on graphics Use Bobby site to test for accessibility issues. Use Bobby site to test for accessibility issues. http://bobby.watchfire.com/bobby/html/en/index.jsp http://bobby.watchfire.com/bobby/html/en/index.jsp http://bobby.watchfire.com/bobby/html/en/index.jsp
  • Slide 41
  • Common Reasons Why Pages Dont Work Copied text from Word that hasnt been stripped of its 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, doesnt mean its 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: Welcome to my homepage Redundant HTML tags, for example: Welcome to my homepage
  • Slide 42
  • Questions? For further assistance, contact Web Services at: Tim Lockridge, [email protected] Tim Lockridge, [email protected]@usi.edu Assistant Director, Computer Center Brandi Hess, [email protected] Brandi Hess, [email protected]@usi.edu Graphic Designer, Web Services Scott Klassen, [email protected] Scott Klassen, [email protected]@usi.edu Network Technician, Computer Center
  • Slide 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
  • Slide 44
  • Questionnaire Feedback for the conference: http://www.usi.edu/webservices/survey.asp
Popular Tags:

Click here to load reader

Reader Image
Embed Size (px)
Recommended