On Your Own - Due by Friday 09-08-2017 at 4:05pm
Goal- Practice creating a new web page
- Demonstrate some HTML that you have learned
- Create https://www.users.miamioh.edu/UniqueID/IMS222/WebPage02.htm
- Due by Friday 09-08-2017 at 4:05pm
- One re-grade request allowed from Friday 09-08-2017 at 4:05pm until Friday 09-15-2017 at 4:05pm
- Grade value: 2% of your final grade
- Content should include
- 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 htmlI 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
- Item 1
- Item 2
- Item 3
- here is the html "code" for a sample page
- 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
- here is the html "code" for a sample table
- 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
- here is the html "code" for a sample image
- -25%: No bold tag
- -25%: No table
- -25%: No image
In class
- Discuss FTPing vs editing code on the server
- How to look at source code (option command U)
- Reminder, you should not be using NetDisk any longer now that your site is setup
- Finish WebPage02.htm
- Practice some HTML including tables and images on WebPage02.htm
- Class site
- Assignment & Project Viewer
- Re-grade requests
- Review Good and Bad Form discussion
- Create Good and Bad Discussion of 3 or 4 sites
- Individual help
Material to learn before class on Friday 09-08-2017
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 Week 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 Weekes that I teach it would be spelling, consistency, broken images, and untested responsive design (we'll get to it later in the Week). My last really big pet peeve doesn't really relate directly to our Week 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.