Download - 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.

Welcome to the Web Welcome to the Web Developers Boot CampDevelopers Boot Camp

Introduction to HTMLIntroduction to HTMLPublishing pages to a web serverPublishing pages to a web serverWeb GraphicsWeb GraphicsUsing FrontPageUsing FrontPageTesting your pagesTesting your pagesCommon reasons pages don’t workCommon reasons pages don’t work

Introduction to HTMLIntroduction to HTML

What is HTML?What is HTML? Hypertext Markup LanguageHypertext Markup Language Stage directions – tells browser (Internet Explorer, Netscape, Stage directions – tells browser (Internet Explorer, Netscape,

etc.) what to do and what props to useetc.) what to do and what props to use

Tags: Building blocks of an HTML pageTags: 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 abbreviationsTags made up of English words or abbreviations Distinguished from regular words by angle brackets “<“ and “>” Distinguished from regular words by angle brackets “<“ and “>”

(eg: <TAGNAME>)(eg: <TAGNAME>) Some tags dictate how the page will be formattedSome tags dictate how the page will be formatted

The paragraph tag <P> starts a new paragraphThe paragraph tag <P> starts a new paragraph Some tags dictate how words appearSome tags dictate how words appear

The bold tag <B> makes text boldThe bold tag <B> makes text boldSome tags travel in pairs – “/” denotes an ending tag, or end of Some tags travel in pairs – “/” denotes an ending tag, or end of that tags function: (eg: <TAGNAME>…</TAGNAME>)that tags function: (eg: <TAGNAME>…</TAGNAME>)


HTML Exercise/DemonstrationHTML Exercise/Demonstration All you need is a text editor (eg: Notepad)All you need is a text editor (eg: Notepad) Open NotepadOpen Notepad

Getting the stage readyGetting the stage ready Before adding content – create your document Before adding content – create your document

layoutlayout <HTML></HTML> - Creates an HTML document<HTML></HTML> - Creates an HTML document <HEAD></HEAD> - Where you create the title of the <HEAD></HEAD> - Where you create the title of the

page and other universal document informationpage and other universal document information <BODY></BODY> - The visible portion of the page<BODY></BODY> - The visible portion of the page

Giving your page a nameGiving your page a name <TITLE>My very first HTML page</TITLE><TITLE>My very first HTML page</TITLE>


Giving your page some contentGiving your page some content In-between the <BODY></BODY> tags add In-between the <BODY></BODY> tags add

the following lines of text:the following lines of text:Your nameYour nameYour job titleYour job titleYour departmentYour departmentYour office phone numberYour office phone numberYour e-mail addressYour e-mail address

Save your page to your desktopSave your page to your desktop Open browser to view your pageOpen browser to view your page


Add some line breaks / carriage returns at the end of each lineAdd some line breaks / carriage returns at the end of each line Line break tag: <BR>Line break tag: <BR>

Save your page and view it againSave your page and view it againAdd a header line for your contentAdd a header line for your content

Header tag <H1> (largest), <H2>, <H3>, <H4>, <H5>, <H6> (smallest)Header tag <H1> (largest), <H2>, <H3>, <H4>, <H5>, <H6> (smallest) <H3>My Information</H3><H3>My Information</H3>

Center all of your contentCenter all of your content Center tag <CENTER>All content</CENTER>Center tag <CENTER>All content</CENTER>

Save your page and view it againSave your page and view it againMake your name bolded textMake your name bolded text

Bold tag <B>Your Name</B>Bold tag <B>Your Name</B>Make your job title italicized textMake your job title italicized text

Italicize tag <I>Job Title</I>Italicize tag <I>Job Title</I>Save your page and view it againSave your page and view it again


Link to your department’s webpageLink to your department’s webpage Hyperlink tag Hyperlink tag <A HREF=http://www.usi.edu/>USI</A><A HREF=http://www.usi.edu/>USI</A> Save and view your page, click on link then click on Save and view your page, click on link then click on

the browser’s “Back” button to return to your page.the browser’s “Back” button to return to your page.

Link to your e-mail addressLink to your e-mail address Hyperlink tag with “mailto” referenceHyperlink tag with “mailto” reference <A HREF=mailto:[email protected]>My e-mail</A><A HREF=mailto:[email protected]>My e-mail</A>

Change your font of your contentChange your font of your content Font tag <FONT face=Arial>Content</FONT>Font tag <FONT face=Arial>Content</FONT>

Save and view your pageSave and view your page


Page cosmeticsPage cosmeticsChanging your background colorChanging your background color Using the bgcolor attribute in the <BODY> tagUsing the bgcolor attribute in the <BODY> tag <BODY bgcolor=blue><BODY bgcolor=blue> Choose a background color (white is default)Choose a background color (white is default) Possible bgcolor valuesPossible bgcolor values

Color names (eg: blue, red, purple)Color names (eg: blue, red, purple) Simple colorsSimple colors

Hex values (#6633FF, #CC3300, #993399)Hex values (#6633FF, #CC3300, #993399) More complex colors More complex colors See reference for more hex colorsSee reference for more hex colors



Changing your foreground color or text colorChanging your foreground color or text color Using the “text” attribute in the <BODY> tagUsing the “text” attribute in the <BODY> tag <BODY bgcolor=blue text=green><BODY bgcolor=blue text=green> Choose your foreground colorChoose your foreground color

Changing your link colorChanging your link color Using “link” attribute in the <BODY> tagUsing “link” attribute in the <BODY> tag <BODY bgcolor=blue text=green link=red <BODY bgcolor=blue text=green link=red

alink=purple vlink=white>alink=purple vlink=white> Three different link statesThree different link states Choose your link colorsChoose your link colors


QuestionsQuestions

Pause for questionsPause for questions


Exercise: Writing HTML using NotepadExercise: Writing HTML using Notepad1.1. Create standard HTML structureCreate standard HTML structure

2.2. Make a title for your pageMake a title for your page

3.3. Create a background color for your pageCreate a background color for your page

4.4. Type two small paragraphs of content with a Type two small paragraphs of content with a paragraph tag in between the twoparagraph tag in between the two

5.5. Put a line break tag after the last paragraphPut a line break tag after the last paragraph

6.6. Use the font tag to make the first paragraph Use the font tag to make the first paragraph a different color and font sizea different color and font size


Exercise: Writing HTML using Notepad, Exercise: Writing HTML using Notepad, continuedcontinued

7.7. Bold some content in the second paragraphBold some content in the second paragraph8.8. Italicize some content in the second paragraphItalicize some content in the second paragraph9.9. Grab an image from the internet and use the Grab an image from the internet and use the

image tag to display it on your page using a image tag to display it on your page using a relative referencerelative reference

10.10. Now reference the same image using an absolute Now reference the same image using an absolute referencereference

11.11. Add a hyperlink pointing to www.usi.eduAdd a hyperlink pointing to www.usi.edu12.12. Add a hyperlink pointing to your pageAdd a hyperlink pointing to your page

Publishing pagesPublishing pages

Viewing your pages via Viewing your pages via the internetthe internet

Send pages to a web Send pages to a web serverserver

How a page is distributedHow a page is distributed Server space maintenanceServer space maintenance Common ways (protocols) Common ways (protocols)

of sending pages to a web of sending pages to a web serverserver

FTPFTP

SSHSSH

Through a mapped driveThrough a mapped drive


Sending pages via FTP to a web serverSending pages via FTP to a web server File Transfer ProtocolFile Transfer Protocol Plain-text data transferPlain-text data transfer Microsoft’s FTP clientMicrosoft’s FTP client

ftp://username:[email protected]://username:[email protected]

ftp://[email protected]://[email protected] Other FTP clientsOther FTP clients

WS_FTPWS_FTP

CuteFTPCuteFTP


Exercise: Publish pages to Exercise: Publish pages to usiweb.usi.edu through an FTP clientusiweb.usi.edu through an FTP client Go to your desktopGo to your desktop Open “My Computer” or “Internet Explorer”Open “My Computer” or “Internet Explorer” Type in the following URL into the address Type in the following URL into the address

field: field: ftp://fpageuser:[email protected]/claftp://fpageuser:[email protected]/classss


Sending pages via SSHSending pages via SSH Secure ShellSecure Shell Encrypted data transferEncrypted data transfer More secure than FTPMore secure than FTP SSH used with SSH used with www.usi.eduwww.usi.edu for off-campus for off-campus

accessaccess SSH clientsSSH clients

SSH Secure ShellSSH Secure Shell

PuTTY (Free Win32 SSH client)PuTTY (Free Win32 SSH client)


Sending pages through a mapped driveSending pages through a mapped drive Method used to publish on campus to Method used to publish on campus to

www.usi.eduwww.usi.edu. Normally labeled “Q:” or “the Q . Normally labeled “Q:” or “the Q drive”.drive”.


Creating a mapped drive for Creating a mapped drive for www.www.usiusi..eduedu Make sure you have access to on the web serverMake sure you have access to on the web server If not: Have your fiscal agent send an e-mail to Web If not: Have your fiscal agent send an e-mail to Web

Services approving accessServices approving access Go to your computer’s desktopGo to your computer’s desktop Right click on the “My Computer” iconRight click on the “My Computer” icon Select “Map Network Drive…”Select “Map Network Drive…” Enter Q: as the drive letterEnter Q: as the drive letter Enter \\www\www_usi as the folderEnter \\www\www_usi as the folder Click on Finish or OKClick on Finish or OK Traverse to your folder you have access to using Traverse to your folder you have access to using

FrontPage or another web publishing applicationFrontPage or another web publishing application


Exercise: Publish pages to the backup web Exercise: Publish pages to the backup web server through a mapped driveserver through a mapped drive Create a mapped drive using the drive letter “Q:” Create a mapped drive using the drive letter “Q:”

and folder name \\www2\classand folder name \\www2\class Click on “different user name” in the “map a drive” Click on “different user name” in the “map a drive”

dialog box and type in “class” as the username and dialog box and type in “class” as the username and “bootcamp” as the password“bootcamp” as the password

Upload your web page and its images to this Upload your web page and its images to this mapped drive using “My Computer”mapped drive using “My Computer”

View your page on the internet using the following View your page on the internet using the following URL: http://www2.usi.edu/class/mypage.htmlURL: http://www2.usi.edu/class/mypage.html

QuestionsQuestions


Publishing pages on Campus Publishing pages on Campus PipelinePipeline

USI’s Campus Pipeline has a personal USI’s Campus Pipeline has a personal homepage facility (EzSiteBuilder)homepage facility (EzSiteBuilder)How to use Campus Pipeline’s web page editorHow to use Campus Pipeline’s web page editor Go to Campus Pipeline (www.usieagles.org)Go to Campus Pipeline (www.usieagles.org) Use your USI domain account login and your six-Use your USI domain account login and your six-

digit PIN to logindigit PIN to login PIN is accessible at the Registrar’s Office (x1762)PIN is accessible at the Registrar’s Office (x1762) Go to the Campus Life tabGo 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 credentialsLogin again using your Campus Pipeline credentials If authenticated, click on “Click here to proceed”If authenticated, click on “Click here to proceed”


How to use Campus Pipeline’s web page editor, How to use Campus Pipeline’s web page editor, continuedcontinued Enter the name of your site and your password for Enter the name of your site and your password for

your siteyour site Fill out the Personal Information formFill out the Personal Information form Click on “Click Here” to edit your new siteClick on “Click Here” to edit your new site Logon to the editor using your site’s name as your Logon to the editor using your site’s name as your

username and the password that you just setupusername and the password that you just setup Click on “Next” to edit your index pageClick on “Next” to edit your index page Now you can create your page using the interface Now you can create your page using the interface

providedprovided Once you’re finished editing, save your page and Once you’re finished editing, save your page and

view itview it


Uploading pages to EzSiteBuilderUploading pages to EzSiteBuilder Within EzSiteBuilder, click on “Upload Files”Within EzSiteBuilder, click on “Upload Files” Browse to your file that made earlierBrowse 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 Upload and images that are associated with

this pagethis page


Exercise: Create a link from your index Exercise: Create a link from your index page to your page you’ve uploadedpage to your page you’ve uploaded Go to “Edit Pages” within EzSiteBuilderGo to “Edit Pages” within EzSiteBuilder Select index.htmlSelect index.html Add a link to your new pageAdd a link to your new page

Questions and BreakQuestions and Break


Web GraphicsWeb Graphics

Why should we use graphics?Why should we use graphics? Can be used to display information, such as a map, or a Can be used to display information, such as a map, or a

statistical graph.statistical graph.

Can also create a certain look and feel to the site, also Can also create a certain look and feel to the site, also when used consistently, can create a unified look on when used consistently, can create a unified look on your site that your audience can identify with.your site that your audience can identify with.


Two main types of Web graphic filesTwo main types of Web graphic files

GIF (Graphics Interchange Format)GIF (Graphics Interchange Format) Great for logos, charts, buttonsGreat for logos, charts, buttons

JPG (Joint Photographic Experts Group)JPG (Joint Photographic Experts Group) Great for photographsGreat for photographs


Important points about graphicsImportant points about graphics Keep graphic files size small: Keep graphic files size small: Most users are Most users are

impatient when it comes to pages loading. impatient when it comes to pages loading.

Add ALTernative text to identify graphics in Add ALTernative text to identify graphics in non-graphic browsers.non-graphic browsers.

Resize the image in a graphic editor rather Resize the image in a graphic editor rather than sizing the graphic in HTMLthan sizing the graphic in HTML


File SizeFile Size Image resolution should be set at 72 dpi (dots per Image resolution should be set at 72 dpi (dots per

inch)inch)

ALT (alternative) textALT (alternative) text

<IMG SRC=“usilogo.gif” ALT=“USI Logo”><IMG SRC=“usilogo.gif” ALT=“USI Logo”>

For example, the USI homepage has graphic links to “Students” For example, the USI homepage has graphic links to “Students” and “Alumni”, there is an ALT equivalent so if you were unable to 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.see the graphic, the ALT text will tell you what it reads.


Resizing the ImageResizing the Image The Internet uses pixel widths instead of inches. Pixels The Internet uses pixel widths instead of inches. Pixels

refers to the monitor resolution.refers to the monitor resolution.

Think in terms of a page being 650 pixels wide. Images Think in terms of a page being 650 pixels wide. Images should be around 200 pixels wide. Sometimes more or should be around 200 pixels wide. Sometimes more or less depending on situation.less depending on situation.

Resizing the image in a graphics program will decrease Resizing the image in a graphics program will decrease the file size. Whereas resizing the image in HTML will the file size. Whereas resizing the image in HTML will distort the image appearance and the computer will still distort the image appearance and the computer will still have to load the original sized image, then resize it. So it have to load the original sized image, then resize it. So it doesn’t cut down on load time. doesn’t cut down on load time.


Where to find graphics/how to get in digital Where to find graphics/how to get in digital formatformat www.google.com search for imageswww.google.com search for images

Right click on image you want, save locally on Right click on image you want, save locally on your machine.your machine.

Use a desktop scanner to scan images.Use a desktop scanner to scan images. Film developing, select digital format for a CD Film developing, select digital format for a CD

of your roll of film.of your roll of film.


Exercise:Exercise: Manipulate an image and insert it in a Manipulate an image and insert it in a Web page.Web page.

Part 1Part 1Open Microsoft Photo EditorOpen Microsoft Photo EditorOpen fileOpen fileCheck resolutionCheck resolutionResize imageResize imageSave imageSave image

Part 2 – next slidePart 2 – next slideInsert image into your Web pageInsert image into your Web pageSave fileSave fileView Web page in browserView Web page in browser


Adding a graphic to a Web pageAdding a graphic to a Web page HTML code: <IMG SRC=“usilogo.gif” HTML code: <IMG SRC=“usilogo.gif”

ALT=“USI Logo”>ALT=“USI Logo”>

Modifying graphicModifying graphic Add a border <IMG SRC=“usilogo.gif” Add a border <IMG SRC=“usilogo.gif”

ALT=“USI Logo” BORDER=“1”>ALT=“USI Logo” BORDER=“1”> Change alignment <IMG SRC=“usilogo.gif” Change alignment <IMG SRC=“usilogo.gif”

ALT=“USI Logo” ALIGN=“RIGHT”>ALT=“USI Logo” ALIGN=“RIGHT”>

Questions?Questions?

Graphics,Images, PhotosGraphics,Images, Photos

Using FrontPageUsing FrontPage

FrontPage is a great Web editing tool for people FrontPage is a great Web editing tool for people with limited knowledge and time for HTML with limited knowledge and time for HTML coding.coding.

It’s similar to using Microsoft Word and it allows It’s similar to using Microsoft Word and it allows for two different editing modes, Normal and for two different editing modes, Normal and HTML view.HTML view.

As you are bolding text and inserting graphics in As you are bolding text and inserting graphics in Normal view, FP is writing the HTML code for Normal view, FP is writing the HTML code for you.you.


To help make your pages compatible in most To help make your pages compatible in most browsers, change your FP settings by going to: browsers, change your FP settings by going to: Go to Tools-->Page Options, Select the Compatibility tab.Go to Tools-->Page Options, Select the Compatibility tab.

Change the settings to this:Change the settings to this:Enable only commands supported by the following:Enable only commands supported by the following:Browsers: Internet Explorer and NavigatorBrowsers: Internet Explorer and Navigator

Browser Versions: 4.0 browsers and laterBrowser Versions: 4.0 browsers and later

Servers: CustomServers: Custom

UNCHECK Enable with Microsoft FrontPage Server Extensions.UNCHECK Enable with Microsoft FrontPage Server Extensions.


One problem with using FrontPage and One problem with using FrontPage and Microsoft Word:Microsoft Word:

When copying text from a Word document, and pasting into When copying text from a Word document, and pasting into FrontPage. Word carries over unnecessary HTML code and may FrontPage. Word carries over unnecessary HTML code and may cause problems with your Web page working in non-Microsoft cause problems with your Web page working in non-Microsoft brand browsers, like Netscape.brand browsers, like Netscape.

Solutions:Solutions: When copying from Word to FrontPage, Right Click in the area When copying from Word to FrontPage, Right Click in the area

you want to paste to, then in the pop up window, select Paste you want to paste to, then in the pop up window, select Paste Special, then select Normal Paragraphs with Line Breaks.Special, then select Normal Paragraphs with Line Breaks.

Another option is to paste your text from Word into Notepad, then Another option is to paste your text from Word into Notepad, then copy the text from there and paste into FrontPage. Notepad will copy the text from there and paste into FrontPage. Notepad will strip out all the bad code and formatting.strip out all the bad code and formatting.


Exercise:Exercise: Create a Web page using Create a Web page using FrontPage.FrontPage.

Insert a graphicInsert a graphic Use different colors, bold, font facesUse different colors, bold, font faces Save on backup web server (WWW2)Save on backup web server (WWW2) View in Web browserView in Web browser

QuestionsQuestions


USI TemplatesUSI Templates

The USI Templates were created to:The USI Templates were created to: Give a consistent look/presence on the USI Web Give a consistent look/presence on the USI Web

site.site.

Allow Web Services to easily change the layout and Allow Web Services to easily change the layout and design during our annual site redesign without the design during our annual site redesign without the involvement and work of departments.involvement and work of departments.

Make Web development easier for developers by Make Web development easier for developers by creating an easy-to-use template.creating an easy-to-use template.

Testing Your PagesTesting Your Pages

It’s always important to test your work.It’s always important to test your work. Check your page in different browsers like Microsoft Check your page in different browsers like Microsoft

Explorer and Netscape.Explorer and Netscape. Check your page in older versions of those Check your page in older versions of those

browsers. People may be using old machines and browsers. People may be using old machines and do not have the latest versions of browsers.do not have the latest versions of browsers.

Check for Accessibility. Check for Accessibility. Check to make sure you have used ALT tags on graphicsCheck 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.jsphttp://bobby.watchfire.com/bobby/html/en/index.jsp

Common Reasons Why Common Reasons Why Pages Don’t WorkPages Don’t Work

Copied text from Word that hasn’t been stripped of it’s Copied text from Word that hasn’t been stripped of it’s formatting.formatting.File names of HTML pages or graphics with more than File names of HTML pages or graphics with more than eight characters.eight characters.Using spaces and special characters in file names.Using spaces and special characters in file names.Incorrect HTML coding. Just because FrontPage wrote Incorrect HTML coding. Just because FrontPage wrote the code for the work you did, doesn’t mean it’s perfect. the code for the work you did, doesn’t mean it’s perfect. After several edits and moving things around on a page, After several edits and moving things around on a page, HTML coding can be lost or moved out of sequence.HTML coding can be lost or moved out of sequence.

Redundant HTML tags, for example: <FONT Redundant HTML tags, for example: <FONT FACE=“arial”><FONT FACE=“times” size “9”>Welcome FACE=“arial”><FONT FACE=“times” size “9”>Welcome to my homepage</FONT>to my homepage</FONT>

Questions?Questions?

For further assistance, contact Web For further assistance, contact Web Services at:Services at: Tim Lockridge, [email protected] Lockridge, [email protected]

Assistant Director, Computer CenterAssistant Director, Computer Center Brandi Hess, [email protected] Hess, [email protected]

Graphic Designer, Web ServicesGraphic Designer, Web Services Scott Klassen, [email protected] Klassen, [email protected]

Network Technician, Computer CenterNetwork Technician, Computer Center

Book RecommendationsBook Recommendations

Castro, Elizabeth. Castro, Elizabeth. HTML For the World Wide HTML For the World Wide Web.Web. Berkeley: Peachpit Press, 1998. ISBN: 0- Berkeley: Peachpit Press, 1998. ISBN: 0-201-69696-7201-69696-7

Castro, Elizabeth. Castro, Elizabeth. HTML for the World Wide HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Web with XHTML and CSS: Visual QuickStart Guide (5th Edition).Guide (5th Edition). Berkeley: Peachpit Press, Berkeley: Peachpit Press, 2002. ISBN: 03211300732002. ISBN: 0321130073Bebak, Arthur and Smith, Bud E. Bebak, Arthur and Smith, Bud E. Creating Creating Web Pages for DummiesWeb Pages for Dummies. Wiley, John & . Wiley, John & Sons, Inc. ISBN: 0764516434Sons, Inc. ISBN: 0764516434

QuestionnaireQuestionnaire

Feedback for the conference:Feedback for the conference:

http://www.usi.edu/webservices/survey.asphttp://www.usi.edu/webservices/survey.asp