CIS101 Introduction to Computing Week 05

Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML editor 1 st Page 2000 HTML Project One

Agenda cont. Uploading a file to your web space using WS-FTP Resume Project This week online Next class

Discussion Board This week’s forums are Jennifer & Meredith Plan to post several topics when it is your turn (3 or more) Please check your Pace on a regular basis

CIS101 Anonymous Survey This is a pilot for revised CIS101 Your feedback will help us assess and improve CIS101 Click on link in announcement and complete the survey

What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols are rules that specify the transmission of data

Internet protocols TCP/IP – network protocols that govern how data moves around the Internet FTP – allows files to be transferred HTTP –transmits of Web pages

What is the World Wide Web? The youngest part of the Internet (~1990) Part of the Internet that supports multimedia and consists of a collection of linked documents Multimedia supported with HTTP (Hypertext Transfer Protocol)

Web Servers Computer connected to the Internet that stores and sends Web pages and other files Any computer with server software and Internet connection can be a server Copying Web pages to a server is called publishing Once a Web page has been published it can be viewed on any computer with an Internet connection

Internet traffic These Web sites display the global distribution of the Internet: To view internet traffic To trace the connection to a server

Web sites Related collection of Web pages created and maintained by an individual, company, educational institution or other organization Each Web site has a starting document (usually index.html) Every Web site is stored on or runs from one or more Web servers

Web browser Software that interprets and displays Web pages Input ->HTML Output ->Graphical Display

URLs Web page location is defined as a URL (Uniform Resource Locator) URL is made up of protocol (ftp, http, etc), Web server, and (optional) Web page Example (Excel Quick Reference):

Web documents Web documents contain text, multimedia, and links to other documents Also know as Web pages, are written in HTML (Hypertext Markup Language)

What is HTML? Platform independent page description language Will display on any computer HTML describes what a Web document will look like Uses special instructions called tags to define the structure and layout of a Web document Web document combines HTML tags and text

HTML Resources Go to Blackboard site, click Course Material Text web site Web Design Group HTML Reference (zip file you can download to your computer), or see Web site at Barebones Guide to HTML

Elements of HTML document HTML elements include headings, paragraphs, hyperlinks, lists, images, and other graphical elements Most HTML elements follow this pattern: start tagcontentend tag example: This is now bold

Web editors In order to create HTML documents you need to be able to create a text file with an extension of.htm or.html Can use HTML editor or any text editor Text uses Notepad, available on most computers This class will use HTML editor 1 st Page 2000 (free download)

1 st Page 2000 Will use this software in class for HTML and JavaScript If you want to install 1 st Page 2000 on home computer go to Blackboard, Web Sites, Software for download link Start up 1 st Page 2000 in Normal mode

1 st Page Startup Select New Documents Select blank document for HTML Project One For other projects and resume assignment can select HTML document (includes standard HTML tags)

The elements of a Web page Title – first thing you see Displayed in bar above browser Used when bookmarking Web page Body – content that displays in browser window Background – like wallpaper in Windows, can be color or picture

Elements cont. Normal text – the bulk of most Web documents Lists – bulleted or numbered Formatted text – bold, italic, fonts Graphical elements – HR (horizontal rule), images Hyperlinks – connection to another document

Project One Will produce a Web page using headings, a list, text, and a background color We will use 1 st Page 2000 rather than Notepad to create file

Viewing your Web page Use preview tab in 1 st Page 2000 or Open up page in browser (IE or Netscape) to view Click File Open and select document Start entering text (p. 1.11)

Save file and upload Save your work following instructions in text (p. 1.17, save as page1.htm) Now start WS-FTP to upload this page to your Web space

Pace Webspace Access your Pace and print out confirmation of Webspace account Access your web site: where account is your id ALL CAPS

Set up WS-FTP Profile Name: WS_FTP32 (or anything else you like) Host Name/Address: webpage.pace.edu Host Type: Automatic detect

Set up cont. User ID: yourID (the one you receive in your registration confirmation , ALL CAPS) Password: ******** (also found in the registration confirmation) Account: (leave blank) Comment: (leave blank) Also, click on the Startup tab - In Initial Remote Site Folder: webpage.pace.edu

Upload file Left side displays file directory for the computer you are sitting at, right side is webpage.pace.edu Locate your HTML file on the left side First find the desktop folder, it should be inside the folder “Documents and Settings” Your file should be inside the desktop folder Upload by clicking arrow going into webpage.pace.edu

Test Upload Using Browser Go to your Web page, URL is where account is your id ALL CAPS You should see the page1.htm file you uploaded listed in the directory (hit re- load button if it does not appear) Click to open it

The Resume Project Over the course of the next four weeks you will be producing an online resume and posting it to your Web space Each week you will add new HTML elements from the week’s lab This week’s Resume Instructions are in Course Docs, week 05, Introduction to Web Design Course Docs, week 05, HTML Project One

This week online Readings HTML Text Introduction to HTML Project One: Creating and Editing a Web Page This week’s Quiz HTML Project One

Next class meeting Bring your HTML book to class Upload your resume homework, class will use your URLs to look at your work next week Go to Course Materials to see everyone’s Web link