On Your Own - Due by

Goal

Practice creating a new web page
Demonstrate some HTML that you have learned

Assignment

Create WebPage02.htm
- Due by
- One re-grade request allowed from until Friday 02-16-2018 at 5:00pm
- Grade value: 1% of your final grade
- a bold tag
  - here is the html "code" for a sample page
    <!doctype html> <html lang="en"> <head> <title>Shows on the tab</title> </head> <body> This is a very basic web page with just a little bit of html <p> I did an internet search for "html bold" and found out how to use a <b>bold tag</b> </p> <p> I also learned how to create an ordered list <ol> <li>Item 1 <li>Item 2 <li>Item 3 </ol> </p> </body> </html>
  - here is what the html "code" produces
    Shows on the tab This is a very basic web page with just a little bit of html
    I did an internet search for "html bold" and found out how to use a bold tag
    
    I also learned how to create an ordered list
    1. Item 1
    2. Item 2
    3. Item 3
- build a table (here is a sample with a little css for the border)
  - here is the html "code" for a sample table
    <table style="border: 1px solid black;"> <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr> <tr><td>something</td><td>another thing</td><td>third thing</td></tr> <tr><td>like my sample?</td><td>yes</td><td>no</td></tr> <tr><td>tr stands for table row</td><td>th stands for table header which is like table data</td><td>td stands for table data</td></tr> </table>
  - here is what the html "code" produces
    
    Column 1 Column 2 Column 3
    
    something another thing third thing
    
    like my sample? yes no
    
    tr stands for table row th stands for table header which is like table data td stands for table data
- add an image (note that the image must be in your web space and must be referenced correctly, I created an img folder and put the image there)
  - here is the html "code" for a sample image
    <img src="img/SampleImage.jpg" alt="Sample Image" style="width:90%;">
  - here is what the html "code" produces
  Remember to check Kirk's Pet Peeves, it will affect your grade

Column 1	Column 2	Column 3
something	another thing	third thing
like my sample?	yes	no
tr stands for table row	th stands for table header which is like table data	td stands for table data

Grading Rubric

-25%: No bold tag
-25%: No table
-25%: No image

In class (Monday)

Good and Bad website discussion
Create Good and Bad Discussion for 3 or 4 sites
Make sure everyone has there website up and running
- Have students with issues resolve their problems while showing the class
- Primarily help people that installed Word Press which is causing problems

In class (Wednesday)

Discuss FTPing vs editing code on the server
How to look at source code (option command U)
Finish WebPage02.htm
Practice some HTML including tables and images on WebPage02.htm
Look at WebPage00.htm and WebPage01.htm using the Assignment & Project Viewer
- Assignment & Project Viewer
- Re-grade requests
Continue Good and Bad website discussion
Create Good and Bad Discussion for 3 or 4 sites

Material to learn before the assignment is due on

Video/Transcript: IMS222 21 - HTML5 - some standard tags

(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

Video/Transcript: IMS222 22 - HTML5 - proper indenting

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

Video/Transcript: IMS222 23 - HTML5 - inspect HTML

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

Video/Transcript: IMS222 24 - HTML5 - embedding video's

(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 on your own.

Video/Transcript: IMS222 25 - HTML5 - the dangers of linking to someone else's info

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

Video/Transcript: IMS222 26 - Kirk's Pet Peeves

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