(watch this video in a new tab or window)
Hi, I'm Kirk Hopkins and I wanted to let you know that I created most of the video tutorials used for this class after a recent accident where I fell off a barn roof. I'm feeling much better now but I did have a concussion from the accident and as I edited the lessons I noticed that I looked a little confused and I had a little scratch on my nose but all the lessons are good and I'm feeling much better now, and I hope that you enjoy this class. Thanks. Bye.
(watch this video in a new tab or window)
Hi, I'm Kirk Hopkins. Welcome to IMS222. In this class you'll learn how to make great looking, highly useable, web pages and web sites from scratch using a text editor. We'll primarily cover HTML5 and CSS3. We’ll also look at Javascript and PHP. You're not expected to know any of this prior to the class. We'll also cover some computer basics so that you can edit code quickly.
The class will be done in a flipped classroom style, where content is provided primarily in video format (with transcripts for the videos) for you to cover on your own. In class we'll practice the learned content by creating web pages highlighting the new concepts. We'll also discuss content from the videos as well as work on assignments, projects, and help each other.
There are quizzes and exams in this class. As long as you do your work, come to class, and participate, you should be fine. There is a lot of content to cover in a short amount of time so be ready to devote time to this class.
I'm looking forward to seeing you in class.
(watch this video in a new tab or window)
In this class we'll learn great web design together.
I'll get you started on concepts but will not spoonfeed you every html tag or css element known to man.
We'll learn how to find code, because you just can't memorize everything.
And when things change in the future, you'll be able to figure things out on your own.
Why not start now?
I won't leave you hanging though.
My most important rule in computing is, "don't freak out"
The world won't end if you mess up your page. With good coding practice, by making one little change at a time, you won't have that problem anyway.
The 2nd most important rule is, "don't keep banging your head on a wall"
If you get stuck on something, take 5 or 10 minutes to try to figure it out, if you're still stuck, ask someone for help.
My 3rd favorite rule is, 'manage your time'.
Don't wait until the last minute to do your work. Do it early, so there won't be an emergency.
(watch this video in a new tab or window)
Some videos in our class may have references to things that we’re no longer using. We previously used UDS, which stands for Universal Disk Space. The IMS department wanted our class to move to a hosted solution like BlueHost for our web space/class work. You may see references in the class to UDS. Fortunately, the materials were originally developed to use the webdav method to manage web files. BlueHost offers webdav as an option as well. So if you see something referring to UDS, you can know that the concept can be interpreted for BlueHost or any service provider offering webdav connectivity.
The second big change is with my text editor. I primarily used TextWrangler on the Mac for our videos. It’s not offered by BareBones any longer. I recommend BBEdit in it’s place for the Mac.
(watch this video in a new tab or window)
This video demonstrates how the class website works.
(watch this video in a new tab or window)
What is a URL - video
URL stands for Uniform Resource Locator. A URL is the address of a specific webpage or file on the Internet.
DNS stands for Domain Name System. Domain names serve as memorizable names for websites and other services on the Internet. Computers on the internet use numbers for their address, but people like names. So instead of telling someone to go to http://123.45.678.90 (I just made that number up), you would tell them to go to http://kirkhopkins.com.
You could run your own web server but most people pay for a web service (like Bluehost, a service provider) for the benefit of things like redundancy, keeping software updated, managing network traffic, to name a few.
In this class I will also refer to the URL and DNS almost synonymously as your web address or web space.
I have web space on Bluehost that I use for our class. The URL of my site is http://kirkhopkins.com and the URL of my class work site is http://kirkhopkins.com/IMS222.
A forward slash (/) designates a folder on the internet. It's possible to put a forward slash in a file name but it may not work as a web address so it's good practice not to use forward slashes in filenames. It's also good practice not to use spaces in file names (although it is more acceptable). Please do not use spaces in folder names or file names on our class web pages.
I gave you a link to our class site already and did not include it in this video because I include the term number each semester, so it changes every semester.
When you tell someone your URL for your IMS222 class, you'll tell them something like http://kirkhopkins.com/IMS222 (of course replacing 'kirkhopkins.com' with the domain name that you purchased).
I do some seemingly tricky things with some of my web space using services provided by Bluehost to 'host' other sites in my space without it looking like it's in my space. I also do some re-routing with hidden files called .htaccess files to do things like change http to https.
When you go to https://kirkhopkins.com/harrisonlegacy/, you see a church site that I'm running for my church.
If you go to http://HarrisonLegacy.com, the site looks the same except for the URL. I redirect it to https and change the case of HarrisonLegacy to match the folder name case which is all lower case.
The site is in a folder under kirkhopkins.com but most people don't know that.
I do a similar thing with my band's website (http://gzuslivz.com), that is, it's a subfolder in http://kirkhopkins.com.
Most sites have a home page which is either named index.htm, index.html, or index.php (could be another extension). In our class, we won't use an index page except on Project 2 and Project 3. By not having an index page, users can see the contents of a web folder. Not having index pages on your site will make it easier to learn how to code and trouble-shoot building web pages. Ironically, the index page is generally hidden. https://gzuslivz.com/ has an index page so the page can also be accessed using https://gzuslivz.com/index.php, cool, eh?
Some web addresses nowadays may also be listed with or without the www designation. This is dependent on how your site is configured with your service provider.
Before you give someone a web address, I recommend that you type it in your web browser and copy/paste the URL in your message, that way you can be sure that it will work. This takes care of common mistakes that people make when first setting up their web space. Remember, a web address is going to start with http and, for most students in my class, have their name in the URL.
(watch this video in a new tab or window)
Today I'm going to show you how to setup a website using Bluehost.
Please do not install WordPress.
Let's get started. Use the Get Started Now button.
I am choosing the Basic Plan which is sufficient for our class.
Pick a new domain.
I am checking 'kirksuperhopkins.com', see if it's available, and mine is. Once you find a free (not being used) domain name, move on to the next step.
Complete the form.
All of the other items are your choice.
Select how long you want, you only need the 12 Month option but you may choose longer for a lower per month rate.
Purchasing 'Domain Privacy Protection' basically keeps people from contacting you.
I turned off everything else.
Pay with a credit card.
I said no thanks on the PaymentSphere option.
Create a password for your account.
'Login'
Don't pick a theme.
Use the 'Go to my Bluehost' account option.
The style of the login page may look different for you.
'Advanced'
My page lists my Current User name of 'kirksupe', 'Primary Domain' of 'kirksuperhopkins.com', and 'Home Directory' of /home2/kirksup'
'Web Disk'
Create an Additional Web Disk Account
'Configure Client Access'
Pick an operating system to get your server number from the Server Address. You will use the number in the Server Address for your web disk connection. In the video, mine is 2104 (from webdisk.cpanel-box2104.bluehost.com, the ####'s are what to note (webdisk.cpanel-box####.bluehost.com)). Yours will be different. Note what your's is.
On a Mac, use the Finder app, Go...Connect to Server...https://box####.bluehost.com:2078 (replace #### with your number). For Windows users, it will be the same address, you just get to it from a different place.
The username will be your Bluehost user name, in my case it's 'kirksupe', along with your Bluehost password. If you're using your own machine, you may want to put a check in the 'Remember...' box.
Once you connect, go to Finder on the Mac or Explorer on Windows to see your web folder.
You can use either www or public_html.
Files that start with wp are WordPress files.
Create a new folder called 'IMS222' (uppercase, no spaces).
Create a new document with your text editor, you will later name the document 'WebPage00.htm', the document should have 'Hello World' as the contents of the document. Make sure your UPPERCASE and lowercase letters match my example.
File...Save As...{navigate to the new IMS222 folder that you just created}...name it 'WebPage00.htm' (not .html, not .htm.txt)...Save
Use a web browser to confirm that your page works. In my case I'm using 'http://www.kirksuperhopkins.com/IMS222/WebPage00.htm'.
For our class, you will need to send me your URL for the class site. In my example, mine would be 'http://www.kirksuperhopkins.com/IMS222/' (not http://www.kirksuperhopkins.com/IMS222/WebPage00.htm or www.kirksuperhopkins.com/IMS222/WebPage00.htm or webdisk.cpanel-box2104.bluehost.com)
Go to our class site, look at Week 00, use the 'tell me your UniqueID and URL' link to send me an email.
Enter your UniqueID
Enter your web space address for the class site in the comments
Submit
You can delete the 'wp' files if you like.
I hope that was helpful. I look forward to seeing your work.
(watch this video in a new tab or window)
To access a Web Disk using Windows 8 or 10, follow these steps:
Start File Explorer, click Computer, and then click Add a network location. The Add Network Location Wizard appears.
Next.
Choose a custom network location, and then Next.
In the Internet or network address text box, type https://box####.bluehost.com:2078, replacing #### with your numbers shown on the BlueHost site.
Next.
Type the username and password for the Web Disk account, and then OK.
To avoid retyping your username and password when you access the Web Disk, select the Remember my credentials check box.
If you want to the change the network place name, type the new name in the Type a name for this network location text box.
Next.
To access the Web Disk immediately, select the Open this network location when I click Finish check box.
Finish. The Web Disk home directory appears. You can now access your Web Disk at any time by starting File Explorer and expanding the Network folder.
(watch this video in a new tab or window)
BlueHost supports webdav as well as ftp, two methods of managing files on your web space. BlueHost has something called the cpanel, which is a web-based control system. It's something unique to them. To get to it, you can go to www.bluehost.com and use the Login option. My account is www.kirkhopkins.com. I currently have subfolders on the site, but to login, you just use your domain name.
Once you're logged in, you'll find things in the cpanel. Hopefully you noted your username when you setup your account. If not, it's right at the top in the hosting services section. Even though my web space is www.kirkhopkins.com, my username is kirkhopk.
For our class, you do not need to install anything from the website section, setup email, work in the domains section, or anything like that. I recommend using webdav to connect to your web space, but will also show you ftp methods as well. In short, you're allowed to upload your files to your web space however you like, but I strongly recommend the webdav method.
Select 'Web Disk' (you shouldn't have to login again)
Select 'Access Web Disk'
Choose your operating system, or the closest option (they're a little behind on Mac versions, but that just means that the old version still works)
and follow the instructions
You will be able to use this for all future class work. I refer to this as 'mounting your web space'. I like it because it makes working on your site as familiar as moving other files around on your computer. On a Mac, when you mount your web space, a Finder window will open up. You can copy files, create new files, delete files, and duplicate files just like you would do with any other file. Windows is similar, although the program is called 'Windows Explorer' or 'File Explorer' instead of Finder.
(watch this video in a new tab or window)
My preferred way to edit web pages is with webdav. You can use this method of managing your web space after setting up webdav. Here I'll connect to my BlueHost web space using webdav, I'll create a new IMS222 folder, then I'll play around with creating a new page, testing the page with a web browser. I'll also edit the page and show my work flow for editing code. Next, I'll duplicate a page to show how I make the page for the next assignment. Finally, I'll delete the page. You'll see how quick and easy it is to manage a website using webdav and will probably wonder why anyone would use anything else.
This is for the Mac. You will follow a similar method for Windows. Whenever you see 'Command' listed for the Mac, you can generally use 'Alt' for Windows.
Connect to web space
Click on the background to select the Finder
Command K
Enter the server address
Use the + sign to save it for later
Connect
Enter your username and password if it's not saved
Create a new subfolder
I like column mode on my Mac. We'll work in the www folder, then in the IMS222 folder.
Create a new document
Create a new 'WebPage00.htm' page using your text editor and save it on your desktop.
Drag that document into the IMS222 folder in your web space.
Edit the new document
Right-click and edit with your text editor. I'm using BBEdit.
Type 'Hello World'
Save it
Check the new document (which is a web page)
Mine is at http://www.kirkhopkins.com/IMS222/
Choose WebPage00.htm
Yay, it works.
Edit the live document
Command tab to the last program (your text editor)
I'll put some new text in
Command S to save it
Command tab to switch to the web browser
Command R to reload the page
Yay, it worked
Now I'll switch back to make another change
Command tab
Type something
Command S
Command tab
Command R
Yay, it worked again
For WebPage00.htm, you should only have 'Hello World' so next I'll remove the extra text.
Command tab
Remove extra text
Command S
Command tab
Command R
Yay, it worked again
Now you're done with WebPage00.htm
Let's get WebPage01.htm started using webdav. We're already connected. On a Mac:
Right-click on WebPage00.htm and select 'Duplicate'
Right-click and select 'Rename'
Change it to WebPage01.htm
Now you're ready to edit the document
You will use this for most assignments in our class
For Windows, to duplicate files, use:
Right-click on WebPage00.htm and select 'Copy'
Right-click somewhere else in the folder and select 'Paste'
Everything else is basically the same as on the Mac
For practice, I'll copy WebPage01.htm and create Testing.htm and then will delete that document.
(watch this video in a new tab or window)
An optional way to edit web pages is with FTP from your text editor. This is not my preferred way. I'm including it in our course material since some services do not provide a webdav option to mount your web space. Here I'll connect to my BlueHost web space using FTP in BBEdit.
Open BBEdit
Connect to web space by entering your username and password if they're not saved
Create a new subfolder
I like column mode on my Mac. We'll work in the www folder, then we'll create an IMStest folder.
Create a new document
Create a new 'WebPage00.htm' page using your text editor and save it on your desktop.
Drag that document into the IMStest folder in your web space.
Edit the new document
Right-click and edit with your text editor. I'm using BBEdit.
Type 'HelloWorld'
Save it
Check the new document (which is a web page)
Mine is at http://www.kirkhopkins.com/IMStest/
Choose WebPage00.htm
Yay, it works.
(watch this video in a new tab or window)
How to use the File Manager on Bluehost
Login at https://www.bluehost.com/login with your Bluehost username and password
'Advanced'
My page lists my Current User name of 'kirksupe', 'Primary Domain' of 'kirksuperhopkins.com', and 'Home Directory' of /home2/kirksup'
For the web disk connection method, do the following
'Web Disk'
'Configure Client Access
Pick your operating system (or use a Mac one, you just need the number)
Get the number from the Server Address section; mine is 2104
To use the File Manager (in case you're having trouble with getting the Web Disk method to work)
'Advanced'
'File Manager'
Go to your www folder (not shown in the video; mine will only work because I already have an IMS222 folder in my www folder, I didn't catch that until later)
Create a new folder using '+ Folder' and call it 'IMS222' (no spaces and all caps)
'Create New Folder'
Double-click on the folder icon to move to that folder
Create a new file using '+ File'
Call it WebPage00.htm (match this case)
'Create New File'
To edit the file, click once on it and use 'Edit' (there are 2)
Type 'Hello World'
'Save Changes'
Verify that it works by using a browser and going to the page that you just made
(watch this video in a new tab or window)
Quizzes in this class will be based on what I call the mechanics of editing web pages. You're not expected to know every HTML tag or CSS style known to man-kind, but you are expected to know the general basics of what they look like and be able to form them properly in your code. There are some standard tags that you should know.
Some HTML basic structure:
<head>
<title>
<body>
<h1>
<p>
<strong> or <b>
<em>
<br /> or <br>
HTML tags and attributes
<a>
<img>
HTML tags that require nesting
<ul>
<ol>
<li>
<table>
<tr>
<td>
Images play a big part of the web. You should know how to properly format an image tag, know about file size of an image vs. how the image is displayed on a page, image requirements for our class, and the use of an image vs. content (i.e. text) on a web page.
CSS is used to style HTML content. You need to know the difference between inline styling, internal styling, and styling with an external stylesheet.
Color in HTML and CSS also plays a major role on web pages and web sites. You should know the general representation of colors using hex numbers. Remember, they go in RGB format which stands for Red Green Blue. 0 means fully off, or black. 1 is mostly off, or a little lighter. Then 2, then 3, up through 9, then A, B, C, D, E, all the way up to F which is fully on or white. #FFFFFF is white. #000000 is black. #FF0000 is Red. Short-hand can be used as well, #F00 is Red.
Web browsers are fairly forgiving when it comes to HTML and CSS. In our class we talk about consistency in our code as well as the best way to do things. Some of our quizzes and exams may have multiple right answers, you will be expected to provide the best answer. For example, it's better to use CSS for styling instead of an HTML tag.
Do your work on the assignments and participate in class and you'll do fine on our quizzes and exams.
(watch this video in a new tab or window)
Exams in our class will consist of 'fixing' a web page with problems. Each line of the page will have a problem. You'll need to provide the best way to fix it. The goal is to ensure that you are able to recognize and adjust code to properly formatted code. You may be asked to fix a line like:
The answer would be:
I tried to make the problems fairly obvious so there wouldn't be much room for error. I'm not trying to trick you. I'm trying to ensure that you're learning the content for our class and that, when our class is done, you can be confident in your abilities to understand and be able to create entire websites. A big part of managing a site is being able to solve problems on your own; many times created simply by a typo. For that reason, our exams will focus on fixing those problems.
(watch this video in a new tab or window)
The 2 most popular ways to edit code is to FTP to the server or use WebDAV. With FTP, you keep the files on your local machine and copy them up to the server. This is a mostly archaic way of doing things in my opinion. With the FTP option, it can also get confusing as to what your editing vs what web page your viewing. Editing and testing PHP code is also a very slow process when using the FTP method.
We're going to use WebDAV in this class. WebDAV stands for Web Distributed Authoring and Versioning. With WebDAV, you'll mount the server on your local machine. Accessing the folders and files will look just like other folders and files on your machine.
Not every web service offers the ability to use WebDAV, but I can tell you that if they don't offer it, I'm not going to use their service. BlueHost, one of the most popular web hosting companies (and one that I use) offers WebDAV.