Introduction to the World Wide Web

Links

Home page

Practical Windows

Websites

Beginnings
   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Lists
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   More scripting
   Misc. scripting topics
   Forms and INPUT
   Other controls
   Cookies
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

Advanced Websites

One question that might come to you is: why a web page? Wouldn't it be more modern to create an app? This is my thinking

Or: why not a blog? Doesn't everybody do blogs these days? This is my thinking on that

OK, so if it's a website I want: why code it using Notepad? Why not buy one of those web page generators Here is my thinking on that

OK OK. But I found an ISP that will give me free hosting and design and create my website for free (or cheaply) - why not use them? Here's why there is no free lunch

Here are some thoughts about possible suggested learning strategies

So, we're going ahead.

We start with describing the context - how does the Web work?

First we demonstrate creating a quick-and-dirty one-minute web page(!). Then we look at how data flows on the web, examining the terms 'client', and 'server', and the acronymns 'HTML' and 'XHTML'. Finally we explain: why does the one minute web page work?

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

Lesson 1: How the web works

Click here for the video transcript

Hands on exercise

You might want to try your hand at creating a one minute web page, as demonstrated in the video. Once you get that working, try adding more text with some blank lines in between, like separate paragraphs, and observe the results. (Be sure to save your updated file and then refresh the page in your browser.)

The video below is a bonus video, and optional because it's a little nerdy / geeky. It explores protocols, Domain Name Servers, default website pages, 404 page not found errors, capitalization issues for domain, path, and filename values, and if you need to code "www" at the front of a domain name, or not, these days.

Bonus video: Anatomy Of A Name.

Click here for the video transcript

Hover over this text to see a cool fact.

Supplemental material

For those interested in the actual standards related to the web, Click here

Hands on exercise

For those who want to practice using what we cover in this class, most lessons have an opportunity for you to learn on your PC. The exercise for this session is primarily concerned with accessing the files you will use throughout the course and validating your browser set up.

Note: you should see a dialog box that asks you to 'open the file' or 'save the file' - choose 'save' in order to be able to direct where the file goes.

Select any handy directory (you can even use the Windows-provided 'Downloads' or 'Documents' locations).

Then bring up File Explorer and find WebFiles.zip in the directory you saved it in

Double-click on the file name to expand the .zip file and you will see it contains "MyWebFiles". Right-click on MyWebFiles and select 'copy'.

In File Explorer, get to your primary drive ("C:"), right click on the drive entry and select 'paste'. That should create the directory and files we'll be using for our labs: 'MyWebFiles'.

Among the files in your MyWebFiles directory is "index.html": open this in Notepad, and replace the line of underscores ( ______ ) in the program with your name.

Save and exit the file.

Then double click the filename in File Explorer and verify the file is opened in your browser. Just like the one-minute web page in the first video.

Lesson 1: Introduction to the Web