Images

CGS 2820C
Web Development #04 Grading Criteria for: Images
Created with Notepad on a PC or VS Code.
Modify the file created in your first assignment, save it as index.htm and upload it to your website.

See 5:12 Minute YouTube Video: FJ Winters: Your First web page in Notepad Video
See 3:40 Minute YouTube Video: FJ Winters: Adding Hyperlinks to a web page (please wait while videos load)
See 3:40 Minute YouTube Video: FJ Winters: Adding Images to a web page (please wait while videos load)

Description: Continue building your 5-page "portfolio" Business or Personal website. All pages should have college level content. Use Notepad or VS Code to improve index.htm, which is the same file used for the first two assignments. Use realistic text, links, and images. Do not use sample or "lorem" filler text for your submission for a grade

Add an images folder to your website folder (almost always in all lower case)
Add the tags and features listed below:
<img src"=...>, alt, <header>, <hr>, <span>
Go to the bottom of this page to see the code that you can copy for a short sample web page.

Image Types:

BMP (Bit Map) - a high-quality file but in a large file size that is too big for the web.

GIF (Graphics Interchange Format) - introduced by CompuServe in 1987. The format allows a single image to access a palette of up to 256 colors in a relatively small file size. Drawings and simple animations tend to be .gif files.

JPEG or JPG (Joint Photographic Experts Group) - uses a method of compression for photographic images. JPEG typically achieves 10:1 compression with little loss in image quality. But JPEG is a Lossy compression method, meaning some visual quality is lost and cannot be restored. JPG files can display a spectrum of 16.7 million colors.

Portable Network Graphics (PNG) - an image format that employs Lossless data compression. PNG was created to improve upon and replace GIF as an image-file format not requiring a patent license.

HEIC (High Efficiency Image Format) - Apple's new standard using advanced compression methods to allow smaller photo sizes but higher image quality compared to JPEG files. But many browsers do not support.

Purchase a Domain Name (between $2.00 and $12.00) to Host your website (between $3.00 and $6.00 per month).
Please use GoDaddy.com so that we can use a common platform, which will allow students to help each other.
Also see: GoDaddy_FileManager_and_FTP_clients.pdf
This is a college-level Web Development class. This assignment will not be graded if it is not live on the Web.
The online eBook section below covers FTP, uploading and hosting:
See https://faculty.scf.edu/winters/0ClassFolders/2820Web/eBook-Springer/HTML/Murphy07Hosting.pdf

It is highly suggested that you create a folder called YourDomainName.com in the C:\Users\UserName\Documents\My Web Sites folder. Then make an images/ folder in your YourDomainName.com folder. (Right-click inside your domain folder, and choose New > Folder) Save index.htm to YourDomainName.com folder and each image to the images folder. Later, you can drag a copy of this folder from your hard drive to your USB thumb drive as a backup.

FTP (File Transfer Protocol) or upload your file and image(s) to your website. If you have a GoDaddy account you can use the File Manager, but the File Manager is slower than an FTP client, which can remember your username, password and path. See File Manager or FTP at the bottom of this page.

You can add an extension named FTP-Simple to VS Code.
Click the Extensions icon (4 squares) on the left Activity Bar.
Search for FTP-Simple and click [Install].
See: https://www.youtube.com/watch?v=3jB2vdZb-_s (2:38)
Or see: https://www.youtube.com/watch?v=Kgi5CLN_OF0 (6:27) or https://www.youtube.com/watch?v=G1R5H6pnOyc (9:21)
You can type either your URL or the IP address for "host": and "path": is usually public_html/ in the GoDaddy cPanel.

Note: if you do not yet have a domain and hosting, just upload your index.htm file. I will check your code to confirm that you referenced your images correctly. But you must have it online next week or you will lose 30 points.

Free Online HTML Tutorials

Interactive W3Schools Images Tutorial
See: 04ImagesDemo.htm code template
Notepad Tutorials: Images.htm
Win Web Tutor

Make sure you MEET ALL GRADING CRITERIA below.

Topic Directions Points

Only use Notepad or VS Code for this assignment. Add several attractive and relevant images to your home page. I supplied you with online tutorials, examples, and page numbers. If you need more help: Google :-) Be sure to meet all the criteria below.

Add a ViewPort meta tag to your <head> to make your images and content "Responsive" to different devices as the width is changed. <meta name="viewport" content="width=device-width, initial-scale=1.0">
(VS Code will automatically add a skeleton html file with the DocType, <head>, ViewPort, <body>, <html> tags and more if you type ! or type html:5 at the start of a new file.) 10
viewport

Create an images folder: In the Windows Explorer - right-click and choose New and choose Folder, name it images Copy, move, or save all your images to the images folder.
The folder name (images/) is typically all in lower case. 10
image folder

<img src"=...>
Adds an image to a web page.

See: 04ImagesDemo.htm code template

The alt tag (it is really an attribute) is used to allow the text readers for visually impaired users to read relevant alternative text for images.

To keep your web pages from loading slow, see Crop, Resize, and Optimizing hints at:
OptimizingImages.htm

In DreamWeaver: Insert | Image

Add a relevant main image to your personal or business site.
The code to display this Point

is shown below:
<img src="images/point.gif" alt="Pointing">

Adding the height and width attributes to the image tag used to allow your page to load more efficiently, but this is not recommended for Responsive Web Design:
<img src="images/point.gif" height="20" width="32" alt="Finger Pointing">

Use an image editor to crop, resize and optimize your image file sizes. See Notepad Tutorial: Web Page Images

Note: today's HTML5 websites should be coded for Responsive Website Design (RWD) where sites are optimized for each device and display differently on a desktop PC, tablet, and smartphone, whether in portrait or in landscape view. One of the aspects of RWD is to no longer use the width= and height= attributes of the img tag.

10
<img...>
(chapt 5 p 94)
use an alt tag for every image (3)

(p 99)

Add your own real, college level content and images. Do not use irrelevant images.

Note: Avoid using spaces for image names or file names. Use camel case or hyphens instead.

You will lose points if you use raw photos from a camera which can be 2000 to 4000px and 2 to 4Mb. Large image files will cause your page to load slow.

Be sure to optimize the file size of any background image; that is - try to keep the pixel size (width and height) to 1200px or less and the file size to less than 300 or 400K. In most photo editors, like Adobe Photoshop, choose Image > Image Size to resize the width and height in pixels and to optimize your images in byte size (K).
In Windows Paint (click Paint from the Windows start button) select the [Home] tab, then click the Resize icon. 10
Optimize every image so their file size is not too big, which would cause your page to load slow.

Assign a background image to your web page by adding the style attribute below to your existing body tag <body style="background-image:url(images/bg.jpg)">
Also see background-repeat and background-position in text (p 163) 10
background image
(p 287)

Add an banner or masthead image in the <header> element to create an attractive website banner.

Regarding code at right:
padding-top:25% works if the image is 1000 x 250 where height is 25% of the width

<header style="height:250px;
background-image:url(images/banner.jpg)">
Note: if you do not add a height, the header or banner image may not appear. The code below can create an attractive responsive header element for an image that is 1000px by 250px by using padding-top instead of the height..
<header style="padding-top:25%;
background-image:url('images/banner.jpg');
background-repeat:no-repeat;
background-size:cover; background-position:center center; position:relative;">

10
header image
for a masthead or banner

See code template:
04ImagesDemo.htm

<hr>
Horizontal Rule or a line.
Note1: The <hr> tag may render or display differently in various browsers.

Note2: The <hr> tag may auto center when viewed in Edge, Chore, or the newest FireFox.

Note3: Some browsers may display <hr> differently. The border:10px solid #039 option provides more consistency. If necessary, use an image instead of an <hr> may provide better consistency and also allow for more interesting features, such as gradients. However, use an <hr> for this assignment.

Add a line <hr> (Horizontal Rule) in an appropriate place. Make sure the line has a noticeable color in all browsers.

The code for the Horizontal Rule above is:
<hr style="width:60%; height:5px; background-color:#039">
or

<hr style="width:60%; border:10px solid #039; border-radius:6px">

Note 1: For Responsive Web Design, it is far better set the width as a percent (%) instead of in pixels (px)

Note 2: This is an inline style. It is far better to define the <hr> in a stylesheet, which will be covered later.

10 <hr>
(p 48)

If you know how - feel free to use a stylesheet instead of inline styles. We will cover stylesheets shortly.

A working Image link to either another website or to an internal link on the same page.

(Click the image to link go to another site, another page, or a predefined ID on the same page.)

Note: "A box with a red X in it" means the image is not there. Which means - you did not put it in the images folder, you did not include the path to the images folder, as in images/pic.jpg, you spelled it wrong, (Linux servers are case sensitive), you did not upload it, you uploaded it to the wrong folder and not to the images folder, ...

At the top of your page you can add an ID within an existing tag. See samples below:
<h1 id="Top" >Topic</h1>
or the older, deprecated named anchor:
<a name="TopOfPage"></a>

Make a folder called images. Save your desired picture(s) to the images folder. Insert a <img src tag in your web page to display this image. Include a working image link from this picture to your internal ID, bookmark or anchor. Note the # used below to identify the internal ID.

Example below (click on up yellow sign at right):

<a href="#Top">

	        <img src="images/signUp.jpg" alt="Sign Up" style="border:0px">

      </a>

Note: The alt tag allows speech synthesizers to provide a description of the image to a person who is visually impaired.

10
<a href=...>
<img scr=...>
</a>

Image link

<span>
Used to make settings to a few words or small section of a page Use the <span> tag to add some color or other style to a few words of text on your page. For example: This is a blue word.
This is a <span style="color:blue">blue</span> word 10 <span> with an inline style as shown at left
(p 188)

Make this version of index.htm look attractive with real content. This will be your real site in a short while. Spellcheck. Add real and relative content, color, images and styles. Do not use "lorem" filler text. Make it look like a college student is working on this project. 10 Attractive and
Spellcheck: copy and paste into Word.

Rollover
Add an optional rollover image that is appropriate to your site - GOOGLE IT! When you hover over a rollover image, it is temporarily replaced by another image when you hover over it. This works best with a stylesheet which will be covered next week. 10 Optional rollover
(:hover)

An Attribute is a property of a tag. The Style attribute can be used to change the color, font-family, font-size... For Inline Styles, it is used inside of tags, as in the following examples:
<body style="color:... <div style="border:... <span style="font-size: <p style="font-weight: <h1 style="font-family: <table style="width:

If you know how - feel free to use a stylesheet instead of inline styles. We will cover stylesheets with colors and borders and much more shortly.

background-image: linear-gradient(to bottom, white 0%, #1E90FF 100%) Optional

<h4 style="font-size:18px; color:#0000FF">Blue </h4>
Or
<p style="color: blue; font-size: large; font-family: Arial; font-weight: bold">Big, Blue and Bold</p>

Using the style attribute, set at least two different colors and sizes. Remember: Roses are FF0000 and violets are 0000FF.
See Notepad Tutorial: Web Page Colors

<div> is for a big section, like a portfolio column or wrapper
<span> is often for a few words, perhaps inside another tag.

Note: These are an inline styles. It is far better to define <h1>, <h2>, <p> tags in a stylesheet, which will be covered later. Optional

Use <div> and <span> tags to organize your page and make your content look good.

Consider using a background gradient in a section or div.
(p 164-165)

#FF0000 = red
#00FF00 = green
#0000FF = blue
#1E90FF = light blue

Deprecated (outdated and replaced) tags will not be accepted in this course.
ALL tags should be in lower case. Do NOT use: ~~<center>~~, ~~<font>~~, or the ~~bgcolor~~ attribute.
Use instead: <p style="text-align:center; font-family:arial; background-color:#FF0"> or use
<div style="width:80%; margin:auto"> -5 for each use

Be sure to check the spelling on your Web pages. VS Code spellchecks for you and underlines flagged words in blue. Another easy way to do this is to preview your page. Choose Ctrl A to select All. Ctrl C to Copy. Open Microsoft Word and paste - Ctrl V. Word will underline spelling and grammar mistakes - just right-click the mistake to see suggested corrections. If I find a spelling mistake because you did not take the time to check your own page, you will lose points. This will be the policy for the remainder of the course. Build professional, college level web pages. -3 for each spelling mistake

Save your file as index.htm (or .html)

Double-click on index.htm to open it in a browser.

Make sure you bring this file to class each session. You will add tags and content to this file in your next few assignments. To Save in Notepad - choose File > Save As, and name your file index.htm. You can use the extension .htm or .html, however notice the file name is all lower case. The default name of most Home pages is index.htm. However, some home pages are named default.htm.

To edit an existing .htm file: Open Notepad and choose File > Open or right-click on your file and choose Open with Notepad. Only use Notepad or Visual Studio Code for the first assignments

A Simple Sample web page at right

This sample is just a short demo. Your page will be much longer as you prepare real home page.

Notice how the tags are "Nested." See color structure at right to see the pattern of how tags are opened and closed within another.

You can copy and paste the code to the right directly into Notepad of VS Code. Save it as Sample.htm. Double-click on Sample.htm to open it in your browser to see how it works.

But make sure YOUR ASSIGNMENT HAS YOUR CONTENT related to your site. Start working to make your page look college level.

Test on multiple browsers: such as Edge, FireFox, Chrome, Safari, and your cell phone.

<!DOCTYPE html>
<html>
<head>
   <title>Web Stuff</title>
   <meta charset="utf-8">
   <meta name="description" content="Web Stuff detail...">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
</head>

<body>
<header style="background-image:url(images/banner.jpg)">
</header> 
   <h1 id="Top">Images Demo</h1><br>
<nav>
   <a href="index.htm">Home</a> |
   <a href="Resume.htm">Resume</a><br>
</nav>
<main>
   <img src="images/bird.gif" alt="Bird"><br>
   <hr style="color:blue; width:50%; height:3px">
   <a href="http://msn.com">MSN</a><br>
   <br>
   <a href="#Top">Top</a><br>
</main>
<footer style="background-color:yellow">
  <a href="mailto:me@host.com">me@host.com</a>
</footer>
</body>
</html>

Upload your URL web address to the online Canvas dropbox.
ex: http://yourDomainName/index.htm

Upload your URL web address to the SCF Canvas online [Assignment Dropbox].

See:
FileManager & FTP.pdf and see below

You will lose 3 points for each day late.

Notice how all the content that will appear on the page is between the <body> tags.

Preview your page in FireFox, then right click and choose View Source, and look for any errors displayed in red. Hover over flagged errors for hints.
Note: the line in red may be OK, but it may be flagged due to an error above it.

favicon
(p 74-75, 386, and Google)

Helpful hint: If you preview your page in FireFox, and then right click and choose View Source, you will see the html code and any errors displayed in red. If you hover over the flagged error, FireFox will often give you a further explanation of that error, which may be caused by something like a tag above the line which was not properly closed. You will lose at least 3 points for each error for the first assignments. Then you will lose -5 points for each error. Eventually you will lose -10 points for each error that FireFox shows you in red.
Continue to copy and paste your browser preview into Word to spellcheck.

FILE MANAGER or FTP

1. Use a File Manager or FTP to transfer your index.htm file and other .htm files to the public_html folder of your online website. Create an online images folder and upload your images to the images folder.
2. Confirm that everything works online, then copy the entire URL web address. Make sure the URL address you submit will work on all computers. Consider testing it on your cell phone.
3. Paste the complete URL address into the Message portion of the SCF Canvas [Assignment Dropbox] for this assignment.

There are TWO GoDaddy usernames and PASSWORDS. One is for your GoDaddy account. The other set of credentials is for the cPanel for the GoDaddy File Manager or if you use another app like FileZilla.
To use the GoDaddy File Manager:
Login > My Products > Hosting > Manage > [cPanel] > File Manager > public_html
To see your cPanel settings for your FTP credentials needed for the free FileZilla:
Login > My Products > Hosting > Manage > under Setting you will see your cPanel/FTP login and also the Password textbox.

For this first online assignment you may choose to use your hosting company's File Manager. GoDaddy's File Manager is shown below with screen captures. Other FTP Clients are also included.
See: GoDaddy_FileManager_and_FTP_clients.pdf

However, it is far easier for you to use a program like FileZilla, which is a great drag and drop application to FTP (File Transfer Protocol) to upload files to the remote server or host. This free popular program will remember your UserName, Password and the local and remote folder locations.
A. Downloading FileZilla FTP client:
    https://filezilla-project.org/download.php
B. Configuring files with FileZilla:
    https://youtu.be/Jo-9l3ceo1I (1:55)
C. Uploading files with FileZilla:
    https://youtu.be/y-_BPfKclh8 (1:34)

Be sure to make sure you set your folder to your domain/public_html

When done, paste the complete URL address of your project into the Title and Message portion of the SCF Canvas [Assignment Dropbox] for this assignment so that I can easily copy and paste it into my browser when I grade it.

Next week:
-30 if not live
Online, uploaded to your own website.

DO NOT UPLOAD .ZIP FILES.

Future projects will receive a 0 if not live online.

-3 points for each day late.

The root folder of your actual local C:\Users\UserName\Documents\My Web Sites\YourDomainName and the pubic_html folder in the remote (webserver) website should look now like this:
images [Dir]	This is a subFolder under the Root folder.All images except possibly favicon.ico go here
index.htm	Your Home page (usually must be in lower case) - DO NOT UPLOAD .ZIP FILES.