(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)

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...Go to Folder, and enter 'https://box####.bluehost.com:2078' 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.

(watch this video in a new tab or window)

Interactive web design takes building web pages and web sites beyond just coding. It moves it to functionality and usability. It focus' on meeting the needs of the customer or user. Let's look at Miami's vacation reporting site in Banner. I can report my vacation and sick time so it's functional but entering time is more cumbersome than it needs to be. See how the next and previous button move. Why can't I see the whole month at once? Why isn't there a dropdown option to select the time allowed? Whenever you have to use words like “make sure do it this way”, you know that you have failed on a usability standpoint.

(watch this video in a new tab or window)

Progressive disclosure is an interaction design technique often used in human computer interaction to help maintain the focus of a user's attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand.

An example of the use of progressive disclosure is our class website. Menu options are in place to allow students to find what they're looking for. Everything could all be on one page but that would be too much. There's also the option to “Show the entire Material” or view one class at a time, allowing the student to see the information the way they want to see it.

(watch this video in a new tab or window)

There are several different types of architecture, like Linear, Hierarchy, Web, and Matrix. I don't get heavy into terminology and pedagogy so I just want to address this with the statement that information should be organized and arranged in a way that should be understood. You can look at our class web site to see that the information is lumped together by several categories which happen to be presented as menu options. If you look at my work web page you'll see that it's organized in a very different way. That's because there's a different target audience. In the class site, students are the primary users so things are organized in a way that a student would expect to see the information. Grading is pretty important to a student, so it get's it's own category. My work web page, in contrast is one big page with no menu. That's because I'm the primary user and I use it mainly as bookmarks to get to my favorite sites. Neither way is right or wrong, other than they should meet the needs of the target audience.

(watch this video in a new tab or window)

The home page is the main landing page for your site. The identity and styles of home pages change over time but in general I feel that they should not include too much information. I'm personally a bit of a minimalist anyway so I prefer very little content on a home page, and use it as a spring board to get to other information. http://www.harrisonlegacy.com/ is a site that I manage. It's a church web site. The primary target of the site is to introduce the church to potential attendees. It's also used by current members which is why the “GIVE ONLINE” link is on the site. I removed it at one point thinking it was a bit rude to a prospective attendee and heard “where did the link go” from many current members. They used it weekly for their offering. So I added it back, but tried to make it inconspicuous.

Apple is a forerunner in design. They're not perfect, but you can generally gage what's popular in current design based on what they're doing. Let's take a peak at their site. Can you tell what Apple feels is most important? It's hard not to, right?

With Google around, users may not go to your home page first. That's why a good menu system is important. Looking at the church site again, you see that you can get to all of the topics that you might be interested in using the menu system from any page.

(watch this video in a new tab or window)

Signals basically concern whether or not something makes sense. It could be something as simple as a label or a picture. On cars that take gasoline, there's usually an indicator on the dashboard that shows which side of the car you use to put the gas in; and it's usually a triangle. Now is that enough? The answer lies in the hands of the person filling up the car. If you've pulled in to the gas station on 'the wrong side', I would say it's not enough.

Computers use something called 'icons'. They're little pictures that signal something. On my Mac, I have a dock that I have configured to show small icons, magnify on hover-over, and automatically hide (among other things). The icons were designed by the company that made the program. Apple went the next step and also displays the name of the program when you hover-over it. That's a good way to bridge the gap between a graphical only solution versus a text only solution.

(watch this video in a new tab or window)

Anticipation simply means that you should anticipate how the solution that you're providing will be used. The easiest way to do this is to use it. Does it work like you think it should? Second, have someone else try it. Can they figure it out without you there explaining things? To me, the biggest indicator or a failure in anticipation is the need for 'training'. If the user can't figure out how to use your solution on their own, then the solution does not meet their needs.

(watch this video in a new tab or window)

Consistency is at the top of my list of important things when it comes to web design. Are you adding on to an existing site? Then follow the style and design previously set. Are you building a site from scratch? Then create your style and follow it throughout the site. If you're a list-person, meaning you like making lists, make the list and be consistent. If you use complete sentences in your list, ALWAYS use complete sentences. If you don't capitalize a certain word like “howdy”, and you have a good reason to do it (like if it's a catch-phrase used throughout the site), then never capitalize it. Just be consistent.

(watch this video in a new tab or window)

You may be the smartest person in the world, but if you use bad spelling or have bad grammar, you won't look smart. Your website is a reflection of you. Having typos is just bad. Have a friend check your page/site. Use a tool like Typosaur.us to check your spelling. Whatever you do, don't have typos.

(watch this video in a new tab or window)

I'm using a Mac with OS X 10.11 (El Capitan). Most of the shortcuts that I'm going to show you have been around for many years. On a Mac use the 'command' key to use a shortcut. Similar shortcuts are available on other operating systems as well. On a Windows machine, use the 'alt' key where I reference the 'command' key. Here are my favorites:

• command s to save a document
• command r to reload the page
• command f to find text on a page
• command x to cut text
• command c to copy text
• command v to paste text
• command a to select all
• command + to zoom in (sometimes)
• command - to zoom out (sometimes)
• command q to quit the application
• command w to close the window
• command z to undo the last action
• command n to create a new document, tab, or new Finder window
• command t to create a new tab
• command tab to flip through programs
• command ~ to flip through windows in a web browser
• command option u to see the source code

(watch this video in a new tab or window)

You can personalize your Mac so that you can get things done faster. Here are some steps that I follow everytime I setup a new Mac (use 'System Preferences' to make these changes):
Trackpad - turn on everything, then turn off natural scrolling, and turn off swipe between pages
Desktop & Screen Saver - set these and hot corners
Security & Privacy - Require password 5 seconds
Security & Privacy - Unlock and set to 'Mac App Store and identified developers' if you want
Dock - Smaller, Magnification, Double Click a Window's Title Bar to Minimize

Remove icons that I don't use from the dock
Right-click on the icon...options...Remove from Dock
Add Applications Folder to the dock
Click on the background to go to Finder...command N (to open a new folder)...Drag the Applications icon to the dock

Mac Mail - turn off drafts
Mail…Preferences…Accounts…Mailbox Behaviors…(uncheck) Drafts (for each account)

(watch this video in a new tab or window)

Since we're using WebDAV, editing and reviewing changes is very fast and easy and since we're using HTML5, CSS3, and PHP in this class, you don't have to wait on compiling anything. I can't believe that people still compile programs. To view changes to a web page, you just reload it. Let's walk through an example:

First, I'll open a web browser, then I'm going to use 'command tab' to switch to the Finder. Then I'll use 'command k' to connect to my web space. Next I'll navigate to the folder and web page that I want to edit. Double-click it to open it, I have PHP files set to open with TextWrangler. Change and save it, 'command tab' to the web browser, 'command r' to reload it. Continue using this method to make changes. Once you practice, you'll be a pro and editing code will be quick and easy.

(watch this video in a new tab or window)

Want to open HTML or HTM files with your favorite text editor? On a Mac, navigate to a file of this type in Finder...right-click...Get Info...Open with...(select your favorite text editor)...Change All. That's it.

(watch this video in a new tab or window)

Editing code on your local machine is a bad idea for a couple big reasons.
1) It gets confusing. You make changes on your local machine but test the changes for the page on the server but it looks like nothing changed. That's because nothing on the server changed.
2) Reviewing PHP on your local machine isn't that easy. We will be using PHP in the future.
So edit your code on the server. Trust me, you'll be glad you did.

(watch this video in a new tab or window)

It's important to know that the rest of the world doesn't necessarily edit web pages with a text editor. Here are some sites that I work on that have different WYSIWYG editors. WYSIWYG stands for 'What You See Is What You Get', an old term that came about as the computer world moved from a text only based world to a graphical based world.

Here's a site that uses a proprietary interface by a company called Elexio. I'll make a simple change and reload the page to review the change.

Here's a site that uses Google. I'll make a simple change and reload the page to review the change.

Here's a Facebook page. I'll make a simple change and reload the page to review the change.

You have a lot more power and control when you're not using someone else's interface, but for people who don't know how to write code, these types of solutions make creating and maintaining a web site something attainable.

(watch this video in a new tab or window)

HTML is the content. CSS is the styling. Javascript is an action. The lines are getting more blurred as CSS progresses and becomes more action-oriented. In our class we'll focus on HTML and CSS. We'll also use PHP later in the semester to dynamically build web pages. PHP is very powerful and very cool. Get the HTML and CSS stuff figured out first so you can have fun with PHP when the time comes.

(watch this video in a new tab or window)

HTML elements are written with opening and closing tags outside of content in HTML documents. A tag is part of an HTML element.

An opening tag starts with a less than symbol, then has some type of identifier, then ends with a greater than symbol. The closing tag will be very similar, but has a slash after the less than symbol.

If you want something to be bold, use a bold element: This is in bold.

Most elements have an opening and closing tag but there are some that don't like breaks. Some have optional closing tags like list items.

I will be referring to HTML elements as 'tags' throughout this course because that's how I learned them.

Here are some very popular tags:   
bold <b>   
breaks <br>   
paragraphs <p>   
unordered (unnumberred) lists <ul> and <li> with a closing </ul>   
ordered lists <ol> and <li> with a closing </ol>   
tables <table> <tr> is the table row, and <td> table data which is the column   
images <img src='FolderName/ImageName.jpg' alt='Image Description'>   
Don't use spaces in file names on the web, that's just a hint that's going to save you a lot of time and effort.   

(watch this video in a new tab or window)

We're going to look at the anatomy of a web page.

First I need to connect to my VPN because I'm off campus.

So I'm going to use the Cisco Any Connect VPN client.

Then I click on the background to select the Finder, command N for a new window.

Command K to connect to my (web) disk space.

We're waiting for it to connect.

There we go.

I'm going to go to my IMS222 folder, and I'll click on SamplePage.htm, and open it up with TextWrangler.

This is the web page that we're going to work on today.

The first line has doctype html.

It can be uppercase or lowercase, it doesn't matter.

We'll leave the "html" there.

Line 2 has html language equals en which stands for english.

Lines 3 through 13 contain the head.

Line 4 has a favicon, which is just a picture that's made to show at the top of a tab.

Let's open up a web browser; I'll open a new window, I have an "H" on my university homepage.

You can see that I don't have a favicon on KirkHopkins.com, but I do have one on gzuslivz (a capitol G).

Let's close that window.

If you don't have a favicon, you don't need a favicon line in your html.

If you do have a favicon, you would want to leave it.

Lines 5 through 10 all talk about cache and screen size, most of it is for cache.

Cache stores html information so you don't have to keep reloading.

So this code tells the web browser not to save stuff.

If I reload the page, it will reload all html (but not css).

This makes testing a new page a lot easier.

Line 11 has my title.

I'll add some z's to the title
hit command s to save it
command tab to switch to my browser
command r to reload the page
now the page shows "Kirk's Sample Page zzz"

Let's change it again
command tab
remove the z's and add A's
save it
tab
reload

It changed to "AAA", this is how we want to edit our web pages.

I don't really want "AAA" so I'll delete it.
save it
tab
reload
Now it says "Kirk's Sample Page"

Line 12 talks about an external stylesheet

That name can be whatever you want it to be, I'll change it to "zz"
save it
tab
reload
It all changed because that document doesn't exist.

I'll rename it to "Kirks Great External Stylesheet"
save it
tab
reload
We see that it still doesn't work because KirksGreatExternalStylesheet.css doesn't exist.

If I rename it to KirksGreatExternalStylesheet.css
save it
tab
reload
Now the page is styled again.

There's a little secret that I learned about css.

Add question mark then something every time you change css and the css will be reloaded.

I'll show you how to do that automatically using PHP in a later lesson.

Line 13 closes the head.

Lines 14 through 18 us for internal styling.

I have a class called whatever_I_want which is referenced on line 28.

A class can be named just about anything, there is no special name that you have to use.

I'll change the class name and the reference to "anything".

A web page reload shows that it still works.

If I change the name to "anything_oops" but not the reference, the styling goes away.

When the reference is also changed, the styling works again.

Let's change the color to green.

To find a color we like, open a new browser and search for "web color picker".

We'll use the w3schools link, copy the value.

The first 2 characters are for red, the next 2 are for green, and the last 2 are for blue.

They go from 0 (no light) to 9, then A to F (full light).

Save the web page, tab, reload, and now it's green.

Let's change the text to reflect the new color, save it, tab, reload, there's the change.

Using TextWrangler, I'll highlight "anything_oops", command f for find, paste, type the new value, replace all.

Save, tab, reload

Line 19 through 21 is my header. This is where you will put navigation for a web site in the future.

Lines 22 through 44 contains the body, and line 45 has the html closing tag (it was opened at the beginning).

You could move the footer outside of the body but I like it in the body.

Let's look at some html tags/elements.

Line 23 has an h1 for heading 1, change the words, save, tab, reload, the words changed.

Why is it in blue? Let's look at the external stylesheet, and there it is, let's change it to red.

Save, tab, reload

It didn't change because the css was cached, let's change the data after the question mark.

Save, tab, reload, it changed!

Let's change the text again, save, tab, reload, tab back to the code

Line 24 begins a paragraph and Line 40 ends it.

Line 25 begins a bold tag with the word "Bold" to be displayed on the web page, followed by the closing tag.

Line 26 has a break tag. I change the text.

You can do a break like
but I like
.

Line 27 has a center tag.

Reload, it shows "wow".

Line 28 is a div, which is short for division, and is using internal styling.

Line 29 is a div with inline styling.

I can change the style (color) and the text.

I'll change it to blue with a really big margin.

You can do em's, percentage, pixels. I just try em, I don't memorize all of that.

Lines 30 through 34 have an unnumbered list.

Closing list items (li's) is optional, I prefer not to close them.

Lines 35 through 39 have an ordered (numbered) list.

You can see it takes me a while to figure out why I don't have numbers, darn css.

Lines 41 through 43 have the footer.

Line 44 closes the body and line 45 closes the html.

(watch this video in a new tab or window)

Here are some standard tags
nav is for menu navigation
h1 is for the first heading
h2 is for the second heading, and so on
For semantic reasons you should never have an h2 without an h1 first
section is for a section
article is for an article within a section

(watch this video in a new tab or window)

Using proper indenting while writing code is very important. It's easy to figure where you're at and what's going on with small pages but start throwing some PHP and Javascript in there and crank up the number of lines in the thousands and you'll understand what I mean.

I like to use two spaces for indenting. Some people use tabs and that's OK too. Whatever you choose, be consistent.

(watch this video in a new tab or window)

To view your HTML or the HTML on someone else's page use the inspect HTML option. With Safari you have to turn it on first. Safari...Preferences...Advanced...CHECK in 'Show Develop menu in menu bar'.

I also use Google Chrome. Right-click...inspect.

One of my favorite ways to view code is in a new window. With Google Chrome, option/command/u (all at the same time).

Firefox and Opera also have options to inspect code. I suppose IE may have it too, but I'm not an IE fan.

(watch this video in a new tab or window)

After you upload your video to YouTube, Vimeo, or some other video streaming service, you can usually embed it into your web page. YouTube actually gives you the code to embed it. When you do this, your video is still stored on YouTube's servers (their cloud) and streams to the user's computer from their site, even though they're on your site. Pretty cool, eh? I usually warn against including info from other sites but I definitely make the exception when it comes to videos. Having previously managed a video player on my own site, I can tell you it's something that I don't miss at all.

I created a wrapper around the videos used in our class using CSS. You're welcome to steal my code, but you'll need to figure out how to use it on your own.

(watch this video in a new tab or window)

The problem with including someone else's library or code in your web page is that you're relying on their service to be up and running and for there site to never go away. You can download other people's information as well. Unfortunately, it's often very bloated (large files) and you end up slowing down your user's experience with a bunch of code that you're not even using.

(watch this video in a new tab or window)

Every web designer needs to understand photos and the web.

The file size for photos need to be relatively small and need to fit on the page.

This is a photo taken on a Nikon D5500 at 6000 x 4000 which means it's 6000 pixels wide by 4000 pixels high; which is way too big for the web.

The RAW (.NEF) version is over 30MB and the JPG version is over 13MB.

A good general rule is to keep web photos below .5MB.

To do that, we'll keep the width of our images no more than 1024px wide.

Before manipulating the image, I'm going to duplicate (or copy) it and rename it.

I'm using a basic image editor called Preview that comes with a Mac, to change the size of the web version of the image.

Tools...Adjust size

If I change the size to 1024, you can see that it will be 114KB or .1MB.

If you uncheck the 'scale proportionally' option, you could stretch the image.

Please, please, please, don't use stretched images.

Let's put the image on a web page, by connecting to the server, copying the image,
and adding html to a web page to display it.

Just for fun now let's create a photo that's 1024 x 200.

First I'll open up the image with Preview, command c to copy it.

I'm going to use a program called Pixelmator to do the sizing.

File...New...enter in 1024 and 200...paste...zoom out...drag the corners to resize it
Some programs stretch images when you do this, Pixelmator does not.

...zoom in, and move it to where you want it

...ok...File...Export

I like jpg's for photos, this one is less than 58KB, tiny.

Let's put it on a web page, and voila, there you go.

(watch this video in a new tab or window)

My pet peeves? I'm not going to say much more than read my pet peeves. If I had to highlight my top four for the classes that I teach it would be spelling, consistency, broken images, and untested responsive design (we'll get to it later in the class). My last really big pet peeve doesn't really relate directly to our class as much, it's maintainability. There's not much worse than going to a web site and seeing 'upcoming' information for something that weeks, months, or even years old. It removes all validity to the web site. Before you start something, make sure you can finish it; with a website, that means maintaining it.

(watch this video in a new tab or window)

Let's walk through Web Page 02 together. On line 1 I have a doctype of HTML. On line 2 I have an HTML opening tag where I set the language equal to english, and I have the HTML ending tag at the bottom of the document. Lines 3 through 31 is my head element (or tag). Line 4 sets the character set to utf dash 8. Lines 5 through 7 sets some meta tags. Line 8 has my title. Lines 9 through 30 contains my internal styling. Lines 32 through 162 is my body element (or tag). I then have an h1 type element with Kirk's Web Page 02. Next I have a break. I thought that would be a good spot to tell you about some HTML terminology.

(1:15) HTML terminology. H1 is the opening tag. Slash H1 is the closing tag. Kirk's Web Page 02 is the content. All of that together make it an element (which I generally call a tag). Now I'll remove that terminology section.

(1:54) CSS terminology. CSS is Cascading Style Sheets. Spacing doesn't matter too much for CSS to function but does matter for readability. P is called the selector. P stands for paragraph so you could also call it a Type Selector since it's an HTML element. The curly brackets or curly braces make up the Declaration for one line or Declaration Block for multiple lines/items. In this case, 'color' is the property. The colon separates the property from the value. In this case the pound 010101 is the value. The semi-colon ends the value and separates properties/values from each other. You should end each property/value set with a semi-colon. All of it together make up a 'Rule Set'. The preceding dot indicates a Class Selector. The preceding pound or hashtag sign indicates an ID Selector. A star indicates a Universal Selector. Things in brackets indicate an Attribute Selector. Text after a colon in the selector are called a Pseudo-Class. There are more, but that's mostly what I want to cover at this point. I typically just refer to all of this as CSS.

(4:58) Line 35 now has an H1 with 'Class photo from spring 2020' in it. Line 36 has an image. I use a relative path with the folder name of SampleImages. The file name in this case is 202110_IMS_class_photo.jpg (the image is a file type of jpg). There needs to be a matching folder and image in the web space to make this display correctly when using a web browser to view the web page. Image names should not have a space in them. Alt text should describe the image (for a screen reader) and should have spaces in it. I added some styling to make it responsive. I finished my line with a break. Let's refresh the browser to look at the page. I like to temporarily add text to my code and reload the page to verify that I know what I'm working on. Div stands for Division. P stands for Paragraph. H1 is a main heading element (or tag). I have a bold tag. I have another paragraph with subscript, superscript, and italics in it. I have an ordered list and an unordered list. Lists can have closing list item tags but the do not have to have them. Ordered lists get auto-generated numbers. Unordered or un-numbered lists get bullet points. You can have H1 up to H6. They should be semantically sound. Next I have a table with 3 columns. The first table row (tr) has table headers (th) and the rest of the rows have table datas (td). Then I close the body and the html (in that order). Save it and reload the page on the browser all using keyboard shortcuts.

(8:08) Styling for the table and other parts of my page are done at the top with internal styling. I recommend playing around with some of these numbers to learn how styling works. Make one change and reload the page to see what changed. Then repeat. I'll test with changing my table padding from 2em to 12 em (pronounced 'm') and see that there is a lot more space around the table. I have styling for the body element (or tag), for the table, for the table data and table header (share some of the same styling), and some additional unique styling for the table header, and for the paragraph. Color is for the text color and background is for the background color.

(9:03) Let's have a little more fun by adding an image. I'll start off with img src and alt as a place holder, and I'll put a break after it. I'll open up a new window and get the image that I saved in my downloads folder. I'll edit the image with an image editor. I'll crop it to remove part of the picture that I don't want, then resize it to 1000 pixels wide, then make some final height cropping adjustments. Next I'll save the new image by exporting it in jpg format for use on the web. Spaces in file names for the web are bad, so I'll save my image as Gretsch underscore Energy underscore drumset, using underscores in place of spaces. Next, I need a place to put it in my web space so I'll make a folder called Web Page 02 underscore images. Then I copy my new image to my web space. Then I'll repeat these steps with another image. Then I'll add HTML to the web page to display the image and describe my image with alt text. Use keyboard shortcuts to save the changes, tab over to the browser, reload the page and verify that the image is displayed correctly. In my text editor, I'll copy that line of code and change the data to make the next image show up on the site. I like to copy/paste file names so I don't have problems with mis-spellings (i.e. typo's). I'll add a break between the images to make them stack one on top of the other. Next I'll add some img styling to the internal styling section at the top of my document to display the image responsively. These changes do not affect the actual image, only how it is displayed. You can see when I try to add margins that I have problems. I left that in the video to show how coding in real life works and how I used the web (and W3Schools to solve the problem) when I tried to center my images. When I change the width of the window, you can see that ultimately my images are centered and responsive (get smaller as I shrink the width of the window). Next I will work on consistency with my code by using the same spacing in my internal styling. I decided to remove extraneous spaces between the properties and the values. Finally, I will change the 80% to 70% just to verify that the page changes.

(18:53) If you're stealing my code, make sure you change what's on the page, I want to know that you understand how HTML (and in the future, how CSS) works. Change the code, use your shortcut keys to save it, tab over to your browser, reload the page, tab back to your text editor and repeat. Try to only use keyboard shortcuts. That was a lot to take in. Re-watch the video if you missed anything or just need a refresher. I hope you found this useful.

(watch this video in a new tab or window)

I can't teach you everything there is to know about anything when it comes to the land of computing. The web didn't even exist when I went to college. I know, I'm old. You'll be old some day too and your kids will say, you used to do what? Fill in the blank.

Anyway, there are certain things that you'll do over and over, like using the bold tag or a paragraph tag. There are many things that you'll only do once in a while. That's OK. That's where Google searching comes in. Knowing some key words and learning how to spot what you're looking for quickly is the trick. It's a great skill to have. For example, if you want to make your font a different color, try a search for 'css font color'. If you want to build a table, try 'html table'. Stack Overflow is a great resource for answers. I'm sure other's will pop up too as time goes on.

It can be pretty difficult trouble-shooting your own code problems. Think that's hard? Try trouble-shooting someone else's. There are many ways to do things, even many right ways. So if you're having trouble with your code and your peer or even your professor don't know the answer right away, don't be surprised. The best thing to do is to work in baby steps. Change one thing at a time and test it. That way it's much easier to trouble-shoot the problem.

Another thing to keep in mind is not to bang your head against a wall for a long period of time with a problem. I usually give myself a 5 minute internet search if I don't know how to do something. If I still don't have the answer, I look to my peers for help. It's amazing how quickly you'll find the answer if you just give yourself different options.

(watch this video in a new tab or window)

  Let's dive into some cascading style sheets.  These are examples from an external style sheet.  Add something like this to your HTML to include an external style sheet:   
  
<!doctype html>   
  
<html lang='en'>   
  
<head>   
  
<link rel='icon' type='image/png' href='favicon.png'>   
  
<link href='minimal_style.css' media='screen' rel='stylesheet' type='text/css'/>   
  
<title>201810 IMS222</title>   
  
</head>   
  
The minimal_style.css has the css in it.  The first code that we'll look at is a ul which is an unnumbered list.  Codes here need squiggly brackets around them, then the styling is inside the squiggly brackets.  Each style type is listed on the left followed by a color and the style is on the right followed by a semi colon.   
  
Here we're setting the ul which is an unnumbered list to display.   
  
ul {   
        list-style: display;   
}   
  
Here we're setting the li which is a list item to have a left margin of 2 em.   
  
li {   
        margin-left: 2em;   
}   
  
Here we're setting the nav which is navigation or menu system to be 100% wide, go to the left, have a shadow, a background color, some padding, and align the text.  Look at some additional CSS just to get a feel for what it looks like.   
  
nav {   
        width: 100%;   
        float: left;   
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);   
        background-color: #212121;   
        padding-left:2em;   
        padding-right:2em;   
        text-align: center;   
}   
nav ul {   
        list-style-type: none;   
}   
nav li {   
        width: 20%;   
        text-align: center;   
        float: left;   
        margin-left: 0px;   
}   
nav a {   
        background-color: #212121;   
        padding: 14px 32px;   
        display: block;   
        text-decoration: none;   
        text-align: center;   
        color: #eee;   
}   
nav a:hover {   
        background-color: #192A75;   
}   
  
b {   
        font-family: source_sans_probold;   
        color: #676767;   
}   
h1, h2, h3, h4, h5 {   
        font-family: source_sans_probold;   
        color: #192A75;   
}   
h1 {   
        font-size: 2em;   
        line-height: 1.15em;   
        margin: 60px 0px 2px 0px;   
}   
h2 {   
        font-size: 1.25em;   
        line-height: 1.15em;   
        margin: 10px 0px 2px 0px;   
}   
h3 {   
        font-size: 1.01em;   
        line-height: 1.01em;   
        margin: 5px 0px 2px 0px;   
}   
h4, h5 {   
        font-size: 1.00em;   
        line-height: 1.00em;   
        margin: 5px 0px 2px 0px;   
}   
p {   
        line-height: 1.45em;   
        margin-bottom: 20px;   
}   
section {   
        margin: 80px auto 40px;   
        max-width: 1070px;   
        position: relative;   
        padding: 20px   
}   

(watch this video in a new tab or window)

  Cascading Style Sheets got their name because they cascade like water.  The style furthest away can get changed by one that's closer.  There are 3 different ways of styling.  External, Internal, and Inline styling.  An external style sheet is a separate document with just CSS in it.  You call it whatever you want, and then reference it in your HTML.  In the example here, I call it: Kirks_External_Style_Sheet.css   
  
<link href='Kirks_External_Style_Sheet.css' media='screen' rel='stylesheet' type='text/css'/>   
  
An internal style sheet is at the top of a web page.  It's inside style tags like this:   
  
<style>   
summary::-webkit-details-marker {   
  color: #80C16F;   
  font-size: 125%;   
  margin-right: 2px;   
}   
</style>   
  
Inline styling looks like this:   
  
<p style='margin:3em;'>Blah, blah, blah</p>   
  
The order is external to internal to inline.  So if you have styling for a paragraph <p> in all 3 documents, the internal styling will win.  It's important to note that the cascading piece only over-writes things that are the same.  If you set a color in the external style sheet and don't change the color but set other things in the internal or inline style sheet, the color will still be what you set it as in the external style sheet.   

(watch this video in a new tab or window)

The important thing to know about fonts on the web, is that they are a little different than fonts on your computer. If you set a font up on the web, and I don't have that font, the site is not going to look the way you want it to look for me. The two most popular ways to do fonts on the web are Google fonts and TypeKit. Google fonts can be found at https://fonts.google.com/. You embed the font by using something like:



TypeKit is an Adobe option and since I'm not a huge Adobe fan, I'll leave you to figure that one out yourself.

I'm also not a huge fan of embedding fonts because you're relying on someone else's server being up and running for your site to work. That just adds a layer of complexity to your code that may be unnecessary. Try not to go crazy with fonts. 1 or 2 on a web page is plenty.

(watch this video in a new tab or window)

Like fonts? Be original. Make your own font. MyScriptFont (at http://www.myscriptfont.com/) is a web site that allows you create a font from your handwriting. Then to convert the font to a web font use the Generator in FontSquirrel (at https://www.fontsquirrel.com/). Give it a shot, it's fun.

(watch this video in a new tab or window)

For Web Page 03, I'm going to duplicate Web Page 02, and the rename the new document Web Page 03. Then download Kirk's Bingo Board Generator. Reload the page to see the numbers change. Kirk's Bingo Board Generator creates multiple bingo boards with random number configurations. Next, view the source code, select all, copy; edit Web Page 03, select all, paste. That will overwrite text in Web Page 03 with the source code copied from the generator. Next replace my name with yours. Also, find and replace the upside down characters with nothing. Move the doctype line to line number 1. Next, look up Coolors Color Scheme generator to find colors to use for your page (for your spacer and called classes). Start the Generator. Use the space bar to change the color scheme. Copy/paste your selected scheme into your web page. Make sure you have good contrast between your colors and background-colors. Save your page and view it. I also closed some of the windows that I didn't need any longer.

To test out how to play bingo together, try to do a find and replace of class equals spacer and a number with class equals called and the number. Save and reload, you should see new colors for that number on any and every board on your web page. You can test it out multiple times. If you get 5 in a row, you say BINGO! That's how we will play this game. Just undo (shift z on my program) to undo until you get back to the colors that you added. Now you're ready for our class to play bingo.

(watch this video in a new tab or window)

Let's take a look at Web Page 04. I decided to list the requirements at the top of my page. You may or may not want to do that. I need to have URL with a link to the site that opens in a new tab/window. For example, Yale Art. At least one thing that needs to be improved. I have 3 for Yale Art. I need a JPG screenshot of the site 1000px wide using CSS to display it at 44% width of the window, and I need it to be done with inline styling. Here's my screenshot. Let's look at my images. When I open the first image my photo editing program shows me that it is 1000 pixels wide by 845 pixels tall and it's only 182 kilobytes, so it's a good size for our web site. You have to evaluate 3 pages. I did Art Yale, the big ugly website, and miamioh.hiretouch.com which is defunct now but was still around when I did the assignment. Web pages can change between when you evaluate them and when I grade them which is one reason for including a screenshot in this assignment.

(1:40) Let's look at the code. I have Kirks Great External Stylesheet dot CSS which has a bunch of navigation stuff in it that we don't need. It also has a lot of H1 type styling. Whenever you steal someone else's stuff, it's a good idea to clean it up by removing things that you're not going to use. I'll edit the web page and the CSS document now. I'll remove the navigation styling because I'm not going to use it on my page. I'm going to save it as Web Page 04 CSS dot CSS. I have a font family for the page using local fonts (not web fonts) and I reset CSS at the top. Now I'll point my reference on the HTM document to the new CSS document. I will change the 'Change this to something new to force an uncached reload' to 'aaa', then 'bbb', then 'ccc'; basically something new each time. I also have internal styling. Also required is inline styling of the image where you need to set the style equal to a width of 44%. You can include the space or you don't have to. To make sure I'm editing the right page, I'll change some text on the page. I'll add 'Here are 3' and 'that need improvement with at least one suggestion to improve the site' to my title (H2).

(4:29) Use keyboard shortcuts to reload and review the page. We can see the text that I just changed. Now let's change the external stylesheet. I'll change the color for the H1's to red and I'll change the reference on the web page from 'aaa' to 'bbb', reload the page and there's the change. Red is not a great color for the site, that was just used for testing. I'll change it to a different color and repeat my steps changing the 'bbb' to something else and then I'll use an announcer voice to change the color to off white. I'll make other changes to show how I iterate during the design process.

(6:46) As always, you should change the color scheme and things like padding and margins to make the design your own work and to learn how CSS and HTML work together. I'll make another change, again for iteration example purposes.

(7:18) I'm going to delete my Web Page 04 CSS and switch my document back to use Kirks Great External Stylesheet dot CSS. Re-check the site to make sure it still works with the reference to the CSS document.

(watch this video in a new tab or window)

This is what I like to call, life lessons with Kirk. Don't try to be all things to all people. Find what you do well and build on those strengths. This is true for you personally and to your site. Also look for the quick wins, also known as the low hanging fruit. If you can quickly and easily make a change to your website that makes a big difference, go for it. If it's something that's highly involved, put it on the back burner. This is a good lesson for this class, your future jobs, and your future, period. Time management is something we all practice and hopefully improve on. Just remember, every time you say yes to something, that means you're saying no to everything else.

(watch this video in a new tab or window)

A persona is basically a made up person that represents the problem that you're trying to solve. Sometimes they're called user stories. I usually just put myself in the shoes of my users and use the product like they would, and think about how I would like it to work. Some places like to do benchmarking (against competitors) but I'm not really a fan of that. Aren't you trying to make something better? Then why would you copy them?

If you're called to do a persona, you'll usually want to come up with a person (name and short background), their problem (as it relates to what you're trying to solve) and their goals (i.e. a solution that you can provide). If you're doing it for a company in the future, you may also include a photo of the person that you're trying to create a persona for.

(watch this video in a new tab or window)

3 popular concepts in design are Wireframes, Mockups, and Prototypes. Wireframes can be pencil drawings or line art for how you want your design to look. Mockups are images that move beyond wireframes that give you a better sense of the final design. Prototypes are almost functioning solutions. You may have a database that will be built later; the prototype would be functioning code without the database. Personally I like to dive right in on the code but if you're having trouble seeing the final product, I encourage you to try any or all of these concepts.

(watch this video in a new tab or window)

On a Mac, to take a screen shot, use Applications...Utilities...Grab...Capture...Selection. I also use a tool called Skitch which allows for annotations as well. You may use screenshots for a wide variety of reasons. Anytime you use a photo, I recommend keeping it small. 1024 pixels wide is generally acceptable. A jpg is also generally the preferred format. Try to keep photos under ½ MB. There can be reasons to go bigger than that like a photo sharing website, but even then I wouldn't force someone to have to download large photos while just perusing the site.

Name images without spaces. Spaces and the web are not good friends.

All images need to have alt text that describe the image too. Make the photo the size that you want it to be, let the user shrink it down but forcing them to zoom in on a picture will make the picture pixelated. Finally, putting "width='100%'" will keep your photo looking great at all sizes.

(watch this video in a new tab or window)

When you evaluate sites you can use the information you've already acquired from this course. Bruce Tognazzini also came up with what he calls the 'First Principles'. You can check it out at http://asktog.com/atc/principles-of-interaction-design/. Bruce has some great ideas. One thing I would like to add is, be nice, especially when you're evaluating your peer's website. People put a lot of time and effort into their work, give them constructive criticism on things that they can do to improve their site.

We've already covered some of my top pet peeve's (spelling, grammar, consistency, file size). I'd like to address content now. If you're site is about art, it should have a lot of art on it. If it's about being an editor for a newspaper, it should have a lot of writing on it. Having the appropriate amount of quantity on a site is just as important as the quality of the content. There's no specific formula for how much you should have. That's where you need to do what makes sense and that's why it's always good to have another pair of eyes look at your work. For all future projects in this class, you should have someone evaluate your work. It can only help you get better.

(watch this video in a new tab or window)

For Web Page 05 I duplicated Web Page 04 and changed the code to say Web Page 05 at the top. I also put in some internal styling and I evaluated Alex's page for the assignment. I thought I would spend the rest of this time showing you how you could edit images with fotor.com.

I have an image in my downloads folder called curious cat. I went to fotor.com on my web browser and clicked on 'Edit a Photo'. Then I dragged my image over. Then I resized the image to 1000 pixels wide. Next I cropped the image to 300 pixels tall and adjusted the section of the photo to keep. Then I saved it to my downloads folder with a new name.

Now I need to add that to my web site by dragging it to the image folder on the web that I am using for Web Page 05. I'll rename the image once it's there. Then I change my HTML to reference (or call) the image and set appropriate alt text. Reload the page. There's my new image.

(watch this video in a new tab or window)

Single web pages are OK but it's more fun to create an entire site. There are a number of ways to do that. The silly way is to recreate the menu system on every single page. Let's not do it the crazy way. You can also use an htaccess file to pre-pend and post-pend your web pages with a header and a footer. A third way is to use PHP to 'include' or 'require' another page. We'll try both of these methods in this class. We'll cover the how-to later, I just want you to start thinking about your web pages on a larger scale, as a web site.

(watch this video in a new tab or window)

(watch this video in a new tab or window)

To do Web Page 06 most of my students like to copy from my sample, and select the code, then open up their Web Page 06 which may have been a duplicate of Web Page 05, and select all and paste the copied code into Web Page 06. Then get rid of Kirk's comments up through the horizontal rule. Change the name everywhere from Kirk to your name. Feel free to play with the changing colors internal styling. Next change Kirk's answers to your answers. What helps you learn in the class. What hinders your learning. What would you change. That's it.

(watch this video in a new tab or window)

  Responsive Design is a design approach allowing for one web page/site to be viewed easily and equally among many different devices and sizes.  It's essentially the way you make your site mobile friendly.  There was a trend not too many years ago to create a separate mobile (or m.) site specifically for smartphone users.  What a silly idea.  People have a very hard time maintaining one site, what made them think they could maintain two sites?  The other thing is that many things were missing on the mobile site.  Whenever I see a mobile site now, I just shake my head and close the window.   
  
With only a few lines of code you can make your site responsive.  Let's learn about it now.  Put this code on a web page and see how the background (and a few other things) change as you change the page size:   
  
/*Responsive Design Style differences for multiple sizes*/   
@media screen and (max-width:320px){   
  body {   
    background:#000;   
    color: #FFF;   
  }   
  A:hover {   
    color: #CCC;   
  }   
}   
@media screen and (min-width:321px) and (max-width:480px){   
  body {   
    background:#CCC;   
  }   
  A:hover {   
   color: #FFF;   
  }   
}   
@media screen and (min-width:481px) and (max-width:600px){   
  body {   
    background:#FAD2D9;   
  }   
}   
@media screen and (min-width:601px) and (max-width:768px){   
  body {   
    background:#D5FAD2;   
  }   
}   
@media screen and (min-width:769px) and (max-width:1024px){   
  body {   
    background:#77BE94;   
  }   
}   
@media screen and (min-width:1025){   
  body {   
    background:#D2DAFA;   
  }   
}   

(watch this video in a new tab or window)

Copy KirksSampleSite.zip to your web space and tweak it to make it your own. Change the color scheme and the menu and, of course, the content to your own interest. This is a sample site to show you how to create a whole site, and not just a page. You need to fill it up with something that is of interest to you. Make it yours. Have a peer evaluate it. Have your parents or friends use it and tell you what they think. Are there any typo's? Does it look different enough from the original to know that it's yours? Do you have an appropriate amount of content? Good luck and have fun.

(watch this video in a new tab or window)

How to do Project 02, MyInterest/index.htm

You can start off by downloading the zipped/compressed MyInterest site

It ended up in my downloads folder

Connect to your webspace

I like to open it in a new window

Then go to your IMS222 folder

Drag Project02Template into your IMS222 folder

Rename the folder to MyInterest

I have a folder structure with fonts and images, an index page which will be the home page

Use the Assignment Viewer to make sure that your project is found

Open up your page in the browser

Now let's start editing the site

Open the index.htm page with your text editor

Rename the title to what your interest is about and change it to your name

Rename the css link and document to match your interest

Change Page01.htm through Page06.htm to reflect your interest, deleting or adding pages as needed

Kirk's interest is music so I'm changing the names that I might use like band, drums, etc

I alphabetized my list

Rename the link to the page name, and rename the document (file) to match the new name

Save it and refresh your home page to verify the changes

I found a font that I like called FoferFont that I downloaded

Copy the font to your web space (in the fonts folder)

Add the new font to your css like the font1942 font

Add the new font to the rest of your css

Remove 'change or remove this' comments

Refresh the web page to see the new font

Working on the band page, I moved the video code to a videos page

So far I have only changed the navigation menu on the home page, so I will need to change the other pages later

Make sure your code and your documents match (including upper/lower case)

I lost connection to the server for a moment but the computer recovered automatically

Copy the title (which you may want to change later), navigation menu, and css lines to every page

On the final project, I will show you how to do header and footer info once and include it on each page using PHP

Change the responsive design to your own look

You will want some padding around the page content

The @media screen section of the css is where you will want to change the navigation menu and potentially other things for smart phones vs devices with larger screens

Change all colors in the css to your own style

You can use Lorem ipsum text while working on your pages but make sure you have real text by the time that it is due

Make sure that your content matches the page name and make sure you have enough content

Make sure your images meet our class image criteria (1024px wider or less, .5MB file size or less)

Name your images so they make sense and give them alt text that also makes sense

I lost my connection to the server, so I reconnected, if that doesn't work, try rebooting your machine and then connecting again

I had to quit my browser and re-open to go back to the web page

Remember to make little changes and reload your page checking the changes as you go

Test your responsive design as you go

I have my css set to change the number of columns for an article using column-count:3; to create 3 columns

Like the header, change the footer on one page, check it, and when you're happy, copy it to all of the other pages

When we use PHP, you will only need to make one footer

In this project, we are making a lot of individual web pages with the same look and feel so it looks like a whole site

When we use PHP, you will see how it really is a whole site

Let's look at the h1 css and change the colors

Now I'll remove the apostrophe from the navigation menu on all pages manually

On the drums page, I'll stay consistent with the h1 being the title of the page and put placeholder text for future content

Next I'll do the same type of thing for the itunes page; it's ok to use an itunes (and other company) logo/graphic but other graphics should be original

How much content do I need, it is based on your topic, think of things that you would expect to see if they land on your site; you should have enough information to keep a user's attention for 5 or 10 minutes

Remember, links off of your site should open in a new tab or window

Make sure you have good css, my demo site is not done yet

I'll change the hover color in the css under the mouse over link section

That should be enough to get you started on your second project, the MyInterest site

You should have all new original content, and the content should be different than what you will use for your final project (HireMe site); I recommend picking a topic of interest like frogs or puppies, not a general 'these are the things I like' type site

I look forward to seeing what you have

(watch this video in a new tab or window)

These are some tips and tricks that you might find helpful as you work on your second project, the My Interest site. If you look at my Web Page 06 you will see that I have nice clean code. However the checker is not as happy about my My Interest site because I have some old code that is no longer supported. So I'm going to fix that.

I don't have a fav icon so I'm going to remove that line along with the lines that it was complaining about and replace it with the code I copied from Web Page 06. It looks like I have some duplicate information to remove. When I re-run the checker on validator dot w3 dot org, I see that it's happier now. Unfortunately, I will need to repeat these steps on all of my HTM pages.

(1:15) Another issue that people sometimes have is with CSS and caching. Let's say I have a problem where I've changed my CSS document, where I've added a font like the Fofer font, and it's not working for one reason or another. If I'm not sure what the problem is, it could be a caching issue. A good way to solve that is to close the CSS document and rename it to something new like by adding underscore V2 to the file name. Every page that references that CSS document needs to be changed. I prefer to only work on one page while I'm working on styling, get that working, and then point other pages to the final CSS document name. You can still use the trick of having a question mark and something to try to trick the browser into thinking there is a new document, but it's not necessary (but doesn't hurt anything to have it) if you're changing the whole file name. With the CSS file renamed and the HTML pointing to the new name, reload the page in the browser to see if you have styling from the external style sheet. Test it again by changing something on the CSS document. I'll change my background color to red. Reload it to see the change. Now I know the site is changing as expected. In the future, I can either change the reference after the question mark to something new or I could rename the CSS document again and change my reference to point to the new document.

(4:05) Command shift r forces a reload on the browser on the Mac. It can be different things on Windows but control and F5 usually for a reload. A Google search for your operating system and web browser and hard refresh should show you options for a hard refresh (forcing a browser to reload everything) for your machine.

(5:00) Another issue that crops up is when people add a font, there can be a problem referencing the font. The text next to font dash family colon should be one word with no special characters. The source colon url contains the path to the font and the actual font file. You can reference the font family name with a new name if you like. I'll reference mine with bigadyboo. Then wherever you want to style with that font, you add that name (in my case bigadyboo) to the font dash family. I'll remove the 1942 font from my styling in this section. Now, in my document, if it can't find the bigadyboo font, it will use sans serif.

(6:00) Another thing I'd like to show is with images. I have an image in my downloads folder. I'll rename my image to have it represent the content. I hope you're enjoying the saxophone music in the background. My son is practicing the saxophone right now. Remember, spaces in file names on the web are a bad idea. I'm copying the image from my local machine to the images folder that I made on my web site. Now I'll display the new image on a web page. Now let's say for some reason you want to change that image but it doesn't change when you reload you page, even if you force reload (hard refresh) the page. You can just name the image something new and change your HTML to reference the new name.

(8:33) One last problem that I've notice regarding the font is that sometimes they have a comma where they need a semi colon in the style sheet reference. It needs to be src colon url with the path to the font and the actual font filename in parenthesis and quotes. I hope that helps you with your project.

(watch this video in a new tab or window)

Sometimes I hear reports from my students who say that their page downloads instead of displays when they click on it. Here's an example. I've seen it save as 'download' as well as saving as 'index'. You can see in my downloads folder where this happened to me when looking at a page with the problem. In this particular case, this person used my template. I'm not exactly sure why it happens but here's the solution. You'll need to rename the folder on the website to something else like aaMyInterest or zzMyInterest. Then you'll need to build the site manually (from scratch).

I'll create a new folder called MyInterestV2. I've seen it where the file kind of gets locked for a while and caching can still be a problem, which is why I added V2 to the site name. I set the assignment viewer to allow for a 'V2' version of the site. Put all of your work in the new V2 (MyInterestV2 or HireMeV2) folder. You'll need to build your pages manually like you've done other web pages, then move them in to this folder and you should be good to go.

(watch this video in a new tab or window)

Sometimes I get questions from students about why their assignment or their project is not showing up in the assignment viewer. Typically the reason is because they have not named it appropriately. For example here I have a document called MyInterest dot HTM. Yet what I need to have is a folder called MyInterest. Inside that folder I need to have an index dot htm, all in lower-case. I've also seen some students have MyInterestIndex dot HTM. Again that's not right because it needs to be named index dot htm.

I'll delete my MyInterest folder for a moment. I've even seen students have MyInterest slash Index. A slash is not valid for a file name.

So again, what you need to do is create a new folder called MyInterest or HireMe if you're on the last project, and then you need to put your documents in that folder, and your home page should be named index dot htm, all lower-case. All of the pages that you're making for the project should be in that folder. Including css, possibly a fonts folder and an images folder. Things like that. I hope that helps.

(watch this video in a new tab or window)

This is a favicon. Favicon, favicon, favicon, how do you pronounce it, no one knows but I'm going to show you how to make one and I'm going to call it a favicon. To make a favicon I'm going to use an image editor called Pixelmator. File...new. I'm going to make it 48 pixels wide by 48 pixels high, and here's my image. I'm going to zoom in and remove the background. The little grid means that it's transparent. I'm just going to make a graphic with the letters T and M to stand for Tell Me. I'll change the color to red and position the letters how I like them. File...Export as PNG to keep my transparent background. Name it. Copy it to your web folder. Then reference it with HTML.

(2:34) Now when I go to the Tell Me page, I have a red T M on the tab. If I remove the HTML code that referenced the favicon image and save it, the image is no longer displayed on the browser tab.

(2:52) The red on black is a little difficult see, so I will change it to a lighter PNG file that I made earlier. Now I like that better. There you go.

(watch this video in a new tab or window)

Here I'm going to create WebPage07. I'm going to start by duplicating my WebPage06 which on the Mac is duplicate. You can do copy/paste on Windows. Rename that to WebPage07.htm. I'll will steal the code from the responsive page after I open it with my text editor. Here's my Kirk's sample responsive design page. View the source, select all, copy. In the text editor, select all, paste for a good starting point. Soon I will get the ResponsivePage.css styling. Duplicate a page and rename it. I'll use WebPage07.css. Edit WebPage07.css with the text editor. View the ResponsivePage.css, select all, copy, go to WebPage07.css, select all, paste, save it and check it. Close ResponsivePage.css and ResponsivePage.htm in the browser. Next I'll remove unnecessary code and re-title the page. Link to WebPage07.css (or whatever you call yours). Add a header (we'll add an h1 tag later). Reload the page to see the changes.

For the assignment, apply changing background colors when the window is resized. When you change the width of the browser window, the background color will change. Change the colors to something unique in the CSS document and remove unnecessary CSS. Add a question mark followed by something unique to force a reload of the external stylesheet. Reload the page and verify that the colors are what you expect them to be.

Next we'll add 3 images named with your UniqueID underscore 04, 05, and 06 dot jpg. I have 3 images in my downloads folder. I'll use an application called Preview to edit my images. You can use whatever image editor you like. You'll need to resize the image to 1000 pixels wide, then crop it to 315 pixels tall, export it (or save it) in jpg format as your uniqueid in lower-case underscore 04, 05, or 06 dot jpg on your local machine. Then move those images to your web folder. By resizing the image to 1000x315, the new image should be well under .5MB. Next add HTML to display those images and verify that the images are displayed properly.

It's nice to present the images with a little design so I'll iterate with breaks, then move to div's, and will add some styling for all images on the page in the external stylesheet to make them responsive and add some white space using padding.

Finally, to firm up my understanding of responsive design I'll change the background color default to a blue-ish color. You can see the iteration process as I work to find my problem. Also notice that in my external stylesheet I have the body type listed twice unnecessarily. I could have just added the styling in the body type the first time it was listed.

(watch this video in a new tab or window)

Here I'm going to walk you through WebPage08 which is a mailto link. Line 1 is the doctype. Line 2 sets the language. Line 3 through 10 contains the head element. Line 4 is for the favicon. Lines 5, 6, and 7 set the scale and describe the document. Line 8 defines the character set. Line 9 is the title. Lines 11 through 14 contain the body element. Line 12 is the h1. Line 13 is the mailto link.

The a href equals double quote starts the link. mailto colon then my email address followed by question mark and subject equals with my subject. I replaced spaces with non-breaking spaces. Ampersand body equals, then text for the body of the email. Close the link normally. My text is email me.

When I click on the link my mail program opens with the email address, subject, and message pre-filled.

I checked the code with validator.w3.org and you can see that there are no errors.

(watch this video in a new tab or window)

  There are many times on a website that you want to collect data from your users.  To do that, you usually need a form.  Here is a sample form that meets WCAG 2.0 Level AAA standards that covers types of items you would find on a form:   
  
<section>   
<h1>Forms</h1>   
<h2>This is a place holder for a web page that has a completely accessible web form</h2>   
<form name="formMyHDGLocationManager" action="" METHOD="post" ENCTYPE="application/x-www-form-urlencoded">   
  
<label for="a_text_field_01">Text field</label>   
<input type="text" name="a_text_field_01" id="a_text_field_01" value="">   
<label for="a_text_field_02">Another Text field</label>   
<input type="text" name="a_text_field_02" id="a_text_field_02" value="">   
  
<fieldset>   
<legend>Radio Buttons</legend>   
<br><input type="radio" name="gender" id="1st choice" value="1st choice"><label for="1st choice" class="radio">1st choice</label>   
<br><input type="radio" name="gender" id="2nd choice" value="2nd choice"><label for="2nd choice" class="radio">2nd choice</label>   
<br><input type="radio" name="gender" id="3rd choice" value="3rd choice"><label for="3rd choice" class="radio">3rd choice</label>   
</fieldset>   
  
<fieldset>   
<legend>Checkboxes</legend>   
<br><input type="checkbox" name="1st one" id="1st one" value="1st one"><label for="1st one" class="checkbox">1st one</label>   
<br><input type="checkbox" name="2nd one" id="2nd one" value="2nd one"><label for="2nd one" class="checkbox">2nd one</label>   
<br><input type="checkbox" name="3rd one" id="3rd one" value="3rd one"><label for="3rd one" class="checkbox">3rd one</label>   
<br><input type="checkbox" name="4th one" id="4th one" value="4th one"><label for="4th one" class="checkbox">4th one</label>   
</fieldset>   
  
<label for="a_dropdown_list">Dropdown list</label>   
<br><select name="a_dropdown_list" id="a_dropdown_list">   
<option value="Option 1">Option 1</option>   
<option value="Option 2">Option 2</option>   
<option value="Option 3">Option 3</option>   
<option value="Option 4">Option 4</option>   
</select>   
  
<p><label for="a_textarea">Textarea   
<br><textarea name="a_textarea" id="a_textarea" rows="5" cols="55"></textarea></label></p>   
  
<input type="submit" value="Submit">   
</form>   

(watch this video in a new tab or window)

Accessibility is a hot topic these days and I will say, when it comes to design, it does limit your options. Color schemes need to have a lot of contrast. It's a good thing though, because there are tools to check your pages to make sure they're accessible by everyone, which is really the goal. The main tool that I use is the WAVE extension for Google Chrome (http://wave.webaim.org/extension/). With this tool installed, you can even check pages that require you to login first, because the tool runs from your local machine. Install this tool and check some of your web pages.

(watch this video in a new tab or window)

Hopefully you found WebPage09 to be a very easy assignment. It's important to share your work with friends and family, and this was a great way to do that. Let's take a look at my web page and you can see my code looks very standard.

I do want to note that on Line 4 I have a favicon. If you don't have a favicon, then you should not have that line of code. Here is my favicon. When I reload my web page you can see my smiley face favicon on the tab.

If you're stealing my code you would want to replace 'Kirk' with your name and make sure the title and other information relate to the content on your page. I stated that 'I showed my "My Interest" site to my son. He liked the colors and the layout.' in a paragraph. Your text will be whoever you showed your site to and what they thought about it. I look forward to seeing your work on this assignment.

(watch this video in a new tab or window)

This video is only intended for my class for a short while

(watch this video in a new tab or window)

WebPage10 is the first document that we're going to do as a PHP document instead of an HTM document. Now there are a few different ways to make a new document, I'm going to show you 2. The first way is to duplicate another document and rename it but you have to see the extension before renaming the extension. You can Google how to change extensions for your OS (Operating System) if this applies to you.

Another method is to create a new document in your text editor and save it as a PHP document. In my example, I saved it to the desktop, then I copied it to my web space.

I already worked on my WebPage10 earlier so I'm going to delete the blank document and rename my earlier work. The document doesn't have any PHP in it but will function like other HTM pages we have already created.

My WebPage10 includes standard HTML and new content in the body addressing the assignment.

(watch this video in a new tab or window)

Hi. Your Hire Me site. A culmination of all of the work you've done all semester. This is going to be a PHP website with all of the things that you might want to show for someone to hire you. I have a few examples of some things you might want to talk about so let's look at those.

Let's say you were looking for a photography job. You might want to talk about pricing and samples, testimonials, awards, contact info, things like that.

If you're looking to be a web designer, you may want to include languages, programs you've written with screen shots or things to buy; demo things on the site. You may want to look at plans for your future, and you may want to have your resume on it (no PDFs).

If you want to be a game developer, you may want to include game design, concepts and theory, your favorite games and why, list competitions you've participated in.

Take a look at other people's sites and see what they have. See if they have things that you want to include or exclude.

The hire me site is supposed to tell a potential future employer things about you, the things you're interested in, and the type of work that you're looking to do.

Let's dive in to the hire me site. I have my VPN client open and I'm going to connect. Once connected, I'll go to my Finder window and connect to my disk space. Then I'll go to my IMS222 folder and since I've already done this project, I'll rename the old version. Then I'll download the zip (or compressed) site from our class website, find the file in my downloads, double-click it to uncompress it, and copy it to my IMS222 folder.

While it's copying let's look at the site ( https://www.users.miamioh.edu/hopkinks/IMS222/HireMe/ ). The warnings were because the files had not all been copied. Refreshing the page after it's done takes care of that issue.

Looking at the code starting with the index page. You see that it includes the wwwsiteheader.php file which is similar to what we did on the MyInterest site, but done a different way. All of the wwwsiteheader.php code is included in the index page and can be included in other pages so you don't have to type it into multiple pages over and over. Similarly, each page includes the site footer. Lines 9 through 21 is part of an echo which dumps html to the browser. You should already understand that.

On line 7 I also include Kirk's Picture Grabber. When I reload the page, you can see it randomly grab a new image. It's slow in the video because I'm on VPN. Sadly, VPN slows down your network connection. Let's see how big the image is. It's 443K, which isn't super huge. All images in that folder are below a half of a megabyte, so that's OK. So it was just the VPN slowing me down.

Just because I included the picture grabber doesn't mean you should include the picture grabber. Include it if it makes sense. If there's no good reason to have it on your site, don't include it. The same is true for displaying the date. If there's no good reason to say what the date is, remove that code.

You also don't want to have a page called this, that, the other, and sample page. When I choose this, it takes me to this.php. You should not have a page with the name of this.php. Let's say you're into photography, you probably want to have a home page, and you might want to rename your this.php page to PhotographyGallery.php. Maybe you would have a bids page or a contact me, or samples of your work. Whatever reason you think someone would want to hire you, that's what you should put on your website.

You may be asking yourself how much or how little should I put on my website. The answer is, whatever you think you need. If you think you need a lot of data, put a lot of data/content. If you think only a little bit of information can get it across, just have a little bit, and that's fine too. There's no right or wrong answer. The question is, why would someone want to go to this site to hire you? If they're looking for a photographer and you have no samples of your photos then why would they hire you? They probably wouldn't. If you're a web designer and you have no samples of web design, why would they want to hire you?

I've included the KirksPictureGrabber.php program, a resume (that you may or may not want to have). Please don't put a PDF on your site. Double check the CSS to see if it has everything that you want. It's not super long. You will want to remove Kirks brown M&M ( KirksUnusedCSS_RemoveThisIfYouAreStealingMyCSS ).

I created separate directories for my home page images and my images for that page. If you're not using those, then you should remove them. If you want to put all of your images in one folder (like the img folder), that's fine. If you want to separate them out by page, that's fine too. Just be consistent in whatever you do.

Let's look at the footer for a moment. It's pretty short. I have some inline styling which you may or may not want to do.

Hopefully that is enough to get you started. I look forward to seeing your Hire Me sites.

(watch this video in a new tab or window)

  PHP is a popular general-purpose scripting language that is especially suited to web development.  It is very powerful and is widely used.  Up to now, all of our content has been static, which means you typed something, saved it, and viewed it on the web.  With PHP, you will begin to use dynamically created content.  You can type something like:   
  
<?php   
echo date('Ymd');   
?>   
  
on your web page and when you view it you'll see today's date in year month day format.   

(watch this video in a new tab or window)

People new to PHP find that PHP is not very forgiving, especially compared to HTML. Let's look at a page. Here I have a page with some very basic HTML in PHP. In my web folder I don't have an error log. I'll create an error by adding an extraneous single quote. When I refresh my page, it says 'This page isn't working'. As soon as I create an error and refresh my site (I'm using an FTP client called Cyberduck during this video, if you're connected via WebDAV the error_log file will show up in a little bit). The error_log will show a line number near where the problem is. The problem may be before the number. Make little changes in your code and reload your pages often to make troubleshooting go more quickly than making lots of changes at a time. I'll delete the extra single quote, save the page, and reload it in the browser to verify that it's functioning properly again.

(watch this video in a new tab or window)

  PHP needs to be installed on your website.  At Miami, it's already been installed.  To create a new PHP document, you can just copy an existing document and change the extension to php.  You can begin and end PHP multiple times in the document if you want to, or you can wrap the whole thing in PHP.  To begin PHP type '<?php' and to end PHP type '?>'.  When you're in PHP, you can still create HTML by using 'echo'.  The following will say 'Hello World':   
  
<?php   
echo 'Hello World';   
?>   
  
Now let's put that in bold:   
  
<?php   
echo '<b>Hello World</b>';   
?>   
  
Now let's make it a header:   
  
<?php   
echo '<h1>Hello World</h1>';   
?>   
  
Now let's make a list:   
  
<?php   
echo '<ul><li>John<li>Bob<li>Bill<li>Rick<li>Steve</ul>';   
?>   
  
Here's the same list a few different ways, all with different code formatting but with the same HTML formatting:   
  
<?php   
  echo '<ul>   
        <li>John   
        <li>Bob   
        <li>Bill   
        <li>Rick   
        <li>Steve   
        </ul>   
       ';   
?>   
  
  
or   
  
  
<?php   
  echo '<ul>   
          <li>John</li>   
          <li>Bob</li>   
          <li>Bill</li>   
          <li>Rick</li>   
          <li>Steve</li>   
        </ul>   
       ';   
?>   
  
  
or   
  
  
<?php   
  echo '<ul>';   
  echo '  <li>John</li>';   
  echo '  <li>Bob</li>';   
  echo '  <li>Bill</li>';   
  echo '  <li>Rick</li>';   
  echo '  <li>Steve</li>';   
  echo '</ul>';   
?>   
  
  
or   
  
  
<?php   
  echo '<ul>';   
  echo '  <li>John</li>';   
  echo '  <li>Bob</li>';   
  echo '  <li>Bill</li>';   
  echo '  <li>Rick</li>';   
  echo '  <li>Steve</li>';   
  echo '</ul>';   
?>   
  
Here's a loop to show you some of the power of PHP.   
  
$ThisManyRounds=3;   
for($round=1;$round<=$ThisManyRounds;$round++){   
  if($round==1){$Topic='American Literature';}   
  if($round==2){$Topic='Mathematics';}   
  if($round==3){$Topic='World History';}   
  echo $round.') '.$Topic.'<br>';   
}   
  
See if you can change the loop to show the dates of the last 180 days in the following format:   
Day of the Week, Month-Day-Year   
Good luck.   
  
Here's code to get you started:   
$ShowThisManyDays=30;   
for($day=-10;$day<=$ShowThisManyDays;$day++){   
  $TheDay=date('F m-d-Y, l',   
               mktime(0,   
                      0,   
                      0,   
                      date('m'),   
                      (date('d')+$day),   
                      date('Y')   
                     )   
              );   
  echo $TheDay.'<br>';   
}   

(watch this video in a new tab or window)

With WebPage11 we're going to practice some PHP. Ultimately we want to show 'Today is' with the date in month dash day dash year format. 'The time is' in hour colon minute am or pm format. 'The second hand is' odd or even based on the current second. Reloading the class page shows the data updating like your page should update.

Let's look at my code. At the top of the page I have standard HTML. Since I have a favicon, I include it in my HTML. You should have your name in place of mine. Web Page 11 is still a good title to have. The meat of the page is from lines 12 through 27. On line 12 I begin PHP and on line 27 I end PHP. On line 13 I set the timezone. Line 14 is an H1 with a page header hard-coded (i.e. static, it doesn't change automatically). On line 16 I have a break followed by 'Today is'. I can add text, save it, reload my page to see how it changes. Break out of HTML and into PHP with a period. I have a PHP date function in double-quotes, it could also be in single quotes. I have m dash d dash capitol Y to show in the format required for this assignment. When I reload my page, nothing changed, because I forgot to save my changes. I saved my changes now and reload the page to get an updated page.

To find PHP date format information I did a Google search for 'PHP date'. I like to use the PHP manual and W3Schools. I'll use the date manual today. Let's try a capitol D. It shows 'Mon'. A lowercase 'l' shows 'Monday'. I'll set it to m dash d dash capitol Y for this assignment.

The 2nd requirement for the assignment is to say 'The time is now' with the current time. You can't just type the date, the time, and the seconds because they need to be current every time the page is reloaded. That's why we are using PHP. Single quotes and double quotes can often be used interchangeably in PHP but you need to use them in pairs and it's helpful to be consistent.

On line 20 I created a variable called Seconds. The dollar sign in front of the word makes it a variable. A variable is something that can change. This variable will be set equal to the current seconds (in the minute) using PHP's date function with a lowercase s. Line 21 shows 'The second hand is' and displays the current seconds in parenthesis. Reloading the page will show it changing. Line 26 helps determine if the variable is even or odd; using code that I found and modified by doing a Google search for 'PHP odd even'. I used StackOverflow for my example. I modified what I found and added an 'else' to show 'odd' if the variable is odd. Re-running the program (i.e. reloading the page) will show the results.

(watch this video in a new tab or window)

To work on WebPage12 we'll need to download KirksPictureGrabber which may also be called Kirks_JPGrabber. I downloaded it and unzipped it. Let me explain how it works. KirksPictureGrabber.php randomly grabs an image from LookInThisFolder. First I instantiate a couple variables, which means I set it to nothing or reset it. Use This Picture and Alt Text are instantiated. Files found counter is set to 0. The directory is a new variable and it uses the variable information from Look In This Folder, which is what you passed from your calling program. Lines 7 through 19 loops through the directory looking for the files that we might want to work with. It looks at every file from the directory, gets the full name of each file, and it checks to see if it has 2 parts like file name dot something. If it has 2 parts, it breaks it apart and gets the file name and the extension. If it's not 2 parts, the file extension gets set to Skip This File. Lines 15 through 18 say if the File Extension is a jpg, add 1 to our counter, and add it to an array. Lines 20 through 25 is where we randomly select a picture from the array. Line 22 sets the Alt Text to Use This Picture. Line 23 replaces underscores with spaces from the file name. Line 24 gets rid of the dot JPG at the end of the file.

I'm going to close that program and make a new file on my website called KirksPictureGrabber.php by duplicating another document, I'll use WebPage12.php. I've had issues with people who copy files directly to the server, so here we'll create the file directly on the server and copy the contents into that file.

Let's look at WebPage12. WebPage12 has standard HTML information at the top, plus I have internal styling for my image and styling for the Picture Title. I also have a variable called Look In This Folder and I made a folder called Web Page 12 random images and put my images in that folder. The Kirks Picture Grabber program will only grab JPG files from the folder. Line 24 includes the program that we just added to the site. The name here needs to match the program name. I setup a div with the Picture Title. I'm using the Alt Text for the name (or title) of the image. Next I have an image source to display the randomly selected image with related Alt Text. Let's see it in action.

Every time I reload the page a picture is randomly selected. Just for fun let's echo out (or print to the screen) the Use This Picture and Alt Text variables by uncommenting those lines and reloading the page. This is how I typically do trouble-shooting with PHP.

For fun, let's copy and paste the 4 lines of code a few times and reload the page to see what happens. Now I have 3 pictures that were randomly selected. They could be randomly selected multiple times on the same page. So I showed you how Kirks Picture Grabber works but all you really need are the 4 lines of code with a respective Kirks Picture Grabber program and a folder with JPGs. Let's point it to a different folder for practice. I'll point it to my Web Page 07 underscore images folder and reload the page to see it grab images from that folder. When done, switch it back to the folder of images that you want to use for this assignment.

So I showed you how Kirks Picture Grabber works, but remember all you really need to do is include it and then have code to display the image. Feel free to adjust the styling on the page. I hope that explains how this works pretty well and good luck on your Web Page 12. I look forward to seeing your original pictures.

(watch this video in a new tab or window)

Web Page 13 is a pretty straight forward assignment. At the top of the page I have standard HTML. In the body I included Part 1 of 2 and later Part 2 of 2 as well as my evaluation of each of those pages. I asked Anna if she was ok with me using her assignment for my sample for the class and she said she was. On my page I also included the requirements of the assignment because I was having trouble remembering what the requirements were. Typically grading is done on Content, Spelling and Grammar, Design, and a Final Grade. I did not however grade my own assignment because I want you to do that. I look forward to seeing your Web Page 13.

(watch this video in a new tab or window)

I played around a little bit with the body styling on Web Page 14 because it's once again standard HTML. You can see my assignment in the body element. Here's my page.