Introduction to Computers Tim Berners-Lee Photo source: Tim Berners-Lee personal web page NCSA at the University of Illinois Photo source: Wikipedia

The World Wide Web Defined World Wide Web - a huge set of Internet pages that use hypertext to reference each other Hypertext is much like an online encyclopedia Can click hyperlinks that refer to other pages, taking you from one page to another and another Each individual display referred to as a Web page Internet usage exploded in the 1990’s due to the creation of the World Wide Web The Web now dominates the Internet But still a subset of overall activity on the Internet

Development of the world wide web Tim Berners-Lee conceived the Web by applying the idea of hypertext to the Internet in 1991 Creates hypertext transfer protocol (HTTP) TCP/IP protocol still governs rules of data transmission But HTTP protocol sets the rules for interpreting and displaying Web pages transmitted across the Internet Defines Hypertext Markup Language (HTML) Rules to follow when encoding web pages A formatting language, not a programming language

Popularizing the World Wide Web Marc Andreessen and Eric Bina create Mosaic, the first graphical Web browser in 1993 Funded by the National Center for Supercomputing Applications (NCSA) at the University of Illinois Expands on standards created by Berners-Lee Uses images in Web pages Written for Windows platform as well as Unix Internet usage takes off Source: www.InternetWorldStats.com

Momentous change from small ideas Berners-Lee Didn’t create the Internet or the hypertext concept But was the 1st to apply hypertext to the Internet Andreessen and Bina Didn’t create the World Wide Web But 1st to combine images and text on the Internet And do it in an easy-to-use format for Windows They stood on the shoulders of others But they were in the right place at the right time with the right idea and the skills to carry it out

Web pages Each Web page is basically a simple text file File holds Web page text & formatting instructions The formatting instructions are known as HTML Images stored in separate files referenced by HTML Each Web page is found at a unique address called a Uniform Resource Locator (URL) Often just called a web address… example below

web sites are made up of web pages A Web site is a collection of related Web pages under a single domain name or IP address Web sites are usually accessed by domain name For example, HCC’s web site is www.haywood.edu Web sites have a home page Initial page shown to a user Home page contains hyperlinks to other pages on the Web site A hand with an index finger pointing up is usually shown when scrolling over a link

Web Servers A Web server is a computer with the software needed to respond to web page requests A Web server may host hundreds of Web sites, or just one If hosting many Web sites, each site kept in a folder Domain name maps to folder at server IP address In order to make a Web page available on the Internet, it must be transferred to a Web server

A URL is similar to a file path Begins with the web page protocol http:// Then identifies a Web server by specifying the domain name or IP address of the Web site Rest of URL is a file path but with forward slash Shows folder path from web site root folder to file Then specifies the name of the html file

Web browsers Web browsers provide users with software designed to view the World Wide Web A browser simply fetches & displays Web pages Key web browsers by current popularity are: Chrome (Google) Firefox (Mozilla, open source) Internet Explorer (Microsoft) Safari (Apple) Edge (Microsoft, replacement for Internet Explorer) Internet Explorer usage fell due to security issues

Menu bar displays names of pull-down menus providing options to save, print, copy, navigate between pages, and configure your web browser. Web browser example Title bar shows current web page name. Go button fetches web page typed in address bar Address bar shows current URL and allows user to request a new URL. Tool bar provides buttons for frequently used tasks Links to other web pages Status bar shows the URL for any link you move your mouse over.

Browser navigation buttons Back returns to previously displayed web page Forward allowed only after back button Displays web page you “backed” out of Home displays home page for your browser Favorites can be used to hold a list of web page URL’s you tend to visit frequently

More Browser features Print lets you print an entire web page Often useful to print just a portion of a web page Click and drag over portion of web page to print Click Selection in page range section of print dialog box Copy lets you capture text from a web page History shows URLs visited by that web browser It’s easy to save web page images to your disk Right-click on an image Select Save Picture As from the short-cut menu Beware of violating copyright laws!

Search Engines Make finding information on the web fairly easy Helps you locate web pages on a certain topic Enter a few key words that describe your search There are many different search engines Google is currently the most frequently used There are many other search engines including Bing (Microsoft), Yahoo, Ask, etc. Advanced Search may give you better results Click Settings then Advanced search at Google.com

Advanced Search options Lets you be more specific about key words Find pages with all of these words this exact word or phrase any of these words none of these words For example, search for the name Russell Virgo Result includes lots of astrology sites Add the words horoscope astrology in the none these words box Most astrology sites removed from results

How HTML works How Stuff Works has a very good article on HTML Mixes web page text & formatting instructions Formatting instructions found inside < > signs Text to be displayed found outside < > signs How Stuff Works has a very good article on HTML The following line is an example of HTML <b>This is bold text.</b> This is normal text. Browser shows as “This is bold text. This is normal text.” Bold tag <b> makes all text that follows bold Bold text continues until an end bold tag </b> Tags do not appear in web page text shown to user

A simple web page example Begin with <html> to identify as an HTML file Use <head><title> to set up title bar text Use <body> to start text for rest of page Don’t forget to terminate each tag Use Notepad (in Accessories) to type in this text <html> <head><title>My First Page</title></head> <body>How cool is this… my first web page!</body> </html> Save file in Notepad with the name FirstPage.html Be sure to change the Save as type to “All Files”

Changing your web page Use File Explorer to find your HTML file Refresh Button Use File Explorer to find your HTML file Double click file to display in your web browser Edit the file in Notepad to add <b> before the word cool & </b> after it Save the file in Notepad Click the Refresh button in web browser Your web page reflects the change just made

More HTML tags Bold - <b> Italics - <i> Underline - <u> Center text on page - <center> Change font size <font size=nbr color="color"> Where nbr is from 1 to 7 and color is red, blue, yellow, etc. Insert a hyperlink <a href="URL">Text for link that a user sees</a> For example, the URL for the HCC home page is http://www.haywood.edu

More HTML tags The following tags do not require a terminating tag Start a new line - <br> Start a new paragraph - <p> Insert an image into a web page <img src="filename.ext"> Where filename.ext is the name of a file containing an image Insert a horizontal line <hr width=nbr align="left" color="color"> Where nbr is length of line in points Align can be left, right, or center Color is a standard color such as blue, red, yellow, etc.

Html tables Tables are often used in HTML to align items An example: <table> begins a table <tr> starts a new row of the table <td> starts a new column of the table Each of these tags must be terminated An example: <table> <tr><td>row 1 column 1</td><td>row 1 column 2</td></tr> <tr><td>row 2 column 1</td><td>row 2 column 2</td></tr> </table>

Web Page created using HTML Head and title tags Font and center tags hr tag Hyperlink tag <a href=“???”> 2 column table used for text and pictures Left column text uses font tag Right column picture uses <img> tag

Publishing a web page A Web page must reside on a Web server to be viewed on the World Wide Web In order to publish a Web page, you must have space allocated to you on a Web server Many ISPs provide customers with free Web space Contact your ISP or read their information to learn how to gain access to your Web space Must download an FTP (File Transfer Protocol) program to transfer your Web page to a server