The Internet and the World Wide Web

The Internet

• A Network is a collection of computers and devices that are connected together.

• The Internet is a worldwide collection/network of networks.

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

The Internet

World Wide Web

• A system of interlinked hypertext documents accessed via the Internet*

*Wikipedia

Internet Browser

• A Browser is software that requests pages from the a web server, interprets, and displays web pages

Browser and Web Server

An Intro to HTML, CSS, and Javascript

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

Some Markup Languages

• HTML• XML• CSS• LaTeX

Two Ways to Open an HTML

• Text – ‘code’• Browser

• Use ‘Open With’

How does HTML Look?

How does this look in a Web Browser?

Webpage vs. Website

CSS

• Cascading Style Sheets – styles and enhances appearance of webpage

• .css extension

• cs.mtsu.edu/~mw3n

Javascript

• Programming/Scripting Language• Not to be confused with Java

• Searches, Buttons, Alerts, Forms

Files and File Systems

• Files• Folders

• Example

What Makes a Good Website?

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

Planning for Website

• Plan your navigation– Within a page– Between pages– Between your site and other sites

• Create a mockup and check with users

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

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

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

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

Summary

1. Planning and Design2. Create the web pages3. Test the web pages4. Publish the web pages