Creating Websites home
Introduction to the Web
Marking up text
FTP and FileZilla
Links and anchors
Getting some style
Testing and debugging
Images and maps
Audio and video
The DOM and scripting
Logic and Arrays
Functions and document.write
Forms and INPUT
Scripting w/ tables
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
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
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
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.
Hover over this text to see a cool fact.
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.
Click here to download "WebFiles.zip", the zipped version of the course files.
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.
back list forward