The Internet and the World Wide Web
description
Transcript of The Internet and the World Wide Web
![Page 1: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/1.jpg)
The Internet and the World Wide Web
![Page 2: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/2.jpg)
The Internet
• A Network is a collection of computers and devices that are connected together.
• The Internet is a worldwide collection/network of networks.
![Page 3: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/3.jpg)
The Internet
• The Internet is a global system of interconnected computer networks. It is a network of networks that consists of millions of private, public, academic, business, and government networks.*
*Wikipedia
![Page 4: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/4.jpg)
The Internet
![Page 5: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/5.jpg)
World Wide Web
• A system of interlinked hypertext documents accessed via the Internet*
*Wikipedia
![Page 6: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/6.jpg)
Internet Browser
• A Browser is software that requests pages from the a web server, interprets, and displays web pages
![Page 7: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/7.jpg)
Browser and Web Server
![Page 8: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/8.jpg)
An Intro to HTML, CSS, and Javascript
![Page 9: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/9.jpg)
What is HTML?
• Hyper Text Markup Language• Markup Tags• Hypertext – text that using links enables non-
sequential access within and between documents and web sites
• Web Browser to interpret HTML• .html extension
![Page 10: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/10.jpg)
Some Markup Languages
• HTML• XML• CSS• LaTeX
![Page 11: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/11.jpg)
Two Ways to Open an HTML
• Text – ‘code’• Browser
• Use ‘Open With’
![Page 12: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/12.jpg)
How does HTML Look?
![Page 13: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/13.jpg)
How does this look in a Web Browser?
![Page 14: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/14.jpg)
Webpage vs. Website
![Page 15: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/15.jpg)
CSS
• Cascading Style Sheets – styles and enhances appearance of webpage
• .css extension
• cs.mtsu.edu/~mw3n
![Page 16: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/16.jpg)
Javascript
• Programming/Scripting Language• Not to be confused with Java
• Searches, Buttons, Alerts, Forms
![Page 17: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/17.jpg)
Files and File Systems
• Files• Folders
• Example
![Page 18: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/18.jpg)
What Makes a Good Website?
![Page 19: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/19.jpg)
Planning for Website
Some Considerations:• Be clear on the audience, purpose and requirements• Plan your sites look and feel
– Be consistent– Be clear– Use of fonts, color, graphics, sounds and video
• Page loading• Plan the structure and hierarchy of your pages
– Within a page– Between pages
![Page 20: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/20.jpg)
Planning for Website
• Plan your navigation– Within a page– Between pages– Between your site and other sites
• Create a mockup and check with users
![Page 21: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/21.jpg)
Process for Developing a Web Site
• Create the web pages using an editor or other tool– There are many editors that assist in creating web
pages (free and fee)
• Test the web pages locally• Test them on the server
![Page 22: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/22.jpg)
Process for Developing a Web Site• Publish the web pages by uploading the pages to the web
server– There are many tools available to facilitate the management and
uploading of web pages – called content management systems• Commercial web sites:
– First publish to test web sites– Ensure that all pages work well on all browsers they intend to
support – Test page load times across a variety of user internet
connections for acceptability– Tune and retest as needed– Push to the public-facing web sites
![Page 23: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/23.jpg)
A Basic Approach to Writing Code - Programming
• Document the problem you want to solve
• Sketch out your ideas– Basic flow– Web page or report layouts
• Write the code with your tool of choice– Do it incrementally– Testing:
• Each new section as you add• Prior sections to ensure you haven’t broken them
![Page 24: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/24.jpg)
A Basic Approach to Writing Code - Programming
• Thoroughly test– Test each function– Test each system end to end– If appropriate stress test
In testing the goal is to break code rather than a user finding the errors
![Page 25: The Internet and the World Wide Web](https://reader035.fdocuments.us/reader035/viewer/2022062520/568160b8550346895dcfddcf/html5/thumbnails/25.jpg)
Summary
1. Planning and Design2. Create the web pages3. Test the web pages4. Publish the web pages