In class on Friday (Week 02)

10 minutes for Peer Assignment Review of WebPage02.htm
Good and Bad website discussion
Create Good and Bad Discussion for 3 or 4 sites
Discuss FTPing vs editing code on the server
How to look at source code (option command U)
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
Create new Top Images for our class site

New material to learn before class on Friday

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 to use it 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 Photos for the Web

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

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.

Assignment due by Sunday 02-10-2019 at 11:59pm

Goal

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

Assignment

Create WebPage02.htm
- Due by Sunday 02-10-2019 at 11:59pm
- One re-grade request allowed from Sunday 02-10-2019 at 11:59pm until Sunday 02-17-2019 at 11:59pm
- 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