Home   CGS 2820C
  Web Development
#03 Grading Criteria for: Images and Hyperlinks
Created with Notepad on a PC or TextEdit on a Mac.
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 Images to a web page (please wait while videos load)
See 3:40 Minute YouTube Video: FJ Winters: Adding Hyperlinks to a web page (please wait while videos load)

Description: You will be building a 5 page "portfolio" Business or Personal website for yourself or for a real or perspective client. All pages should have college level content. With your future website in mind, continue working on your home page by using Notepad or a similar pure "Text Editor" to create a simple working web page using appropriate and realistic text.
Include each of the following in your web page:
Add an External hyperlink such as: <a href="http://ibm.com">IBM</a>
Add a Local hyperlink such as: <a href="resume.htm">Resume</a>

An Internal link on the same page such as:
Link to an ID -
<a href="#Chapt1">Chapter 1</a> | <a href="#Chapt2">Chapter 2</a> | <a href="#Chapt3">Chapter 3</a>
Define an ID -
<h1 id="Chapt1">Chapter 1
Chapter one content here...
<h1 id="Chapt2">Chapter 2
Chapter two content here...

Add an Email link such as: <a href="mailto:myName@abc.com">Email Me</a>
Add a Phone link such as: <a href="tel://+18885550000">(888) 555-0000</a>

Go to the bottom of this page to see the code that you can copy for a short sample web page.

Description: This is a continuation of your first assignments as you build a 5-page Business or Personal website for yourself or for a real or perspective client. Create a folder for your website and inside your website folder add an images folder. Open the simple index.htm file created in your last assignment, and using Notepad or a similar "Text Editor" add the tags and features listed below:
<meta name=", <img src"=...>, <hr>, <a href=">

Purchase a Domain Name (between $2.00 and $12.00) and find a Web Hosting company to Host your website (between $3.50 and $5.50 per month depending on term and company). For four months the total is about $25.
Please use GoDaddy.com so that we can use a common platform, which will allow students to help each other.
This is a college-level Web Development class. This assignment will not be graded if it is not live on the Web. There is a chapter in one of the online eBooks. It covers FTP, uploading and hosting.
See http://faculty.scf.edu/winterf/0ClassFolders/2820Web/eBook-Springer/HTML/Murphy07Hosting.pdf

It is highly suggested that you create a folder called YourDomainName.com in both your USB thumb drive and in C:\Users\UserName\Documents\My Web Sites folder. Then make an images folder in your YourDomainName.com folder. Save index.htm to YourDomainName.com 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 to take to class.

FTP
(File Transfer Protocol) or upload your file and image(s) to your website.
Do a search on free FTP clients, such as FileZilla which is a quick, easy, works very well and can be set to remember your password and folder path.
If you have a GoDaddy account you can use the File Manager, but the File Manager is much slower.

Before you begin this assignment, make a folder for your website on your USB/thumb drive and/or drive C, and give the folder the name of your domain, such as BarbsBoutique:
1. Open your USB/Thumb drive
2. Right-click inside your main folder, and choose New > Folder
3. Give the new folder the name of your website (no spaces), such as BarbsBoutique or WinchesterComputers
4. Drag (or copy) the index.htm file in your last assignment into the new folder.
5. Open the new folder and confirm index.htm is there.
6. Right-click inside your new folder, and choose New > Folder
7. Name the new folder images (all lower case)

Free online HTML Tutorials:
Notepad Tutorials: FirstWebPage.htm | Images.htm | Hyperlinks.htm
Win Web Tutor
w3schools HTML Tutorials and sample Quizzes
Topic Directions Points
Only use Notepad or a text editor for this assignment. Open Windows Notepad:
In Windows 7: Start > All Programs > Accessories > Notepad
In Windows 10: Click the Windows Start button > type Notepad.
Be sure to meet all the criteria below.
<meta>
Meta tags and meta data store background information about a web page or site, such as the description and keywords that are used by many search engines. <meta> tags are placed within the <head> tags, after the <title> tag.
Each page should have a unique meta description.
Add <meta> tags for Author, Description, and Keywords after the closing </title> tag in the <head> section of your web page. 
For example:
</title>
 <meta name="author" content="Prof Winters">
 <meta name="description" content="Web Page Development syllabus, use about 150 characters...">
 <meta name="keywords" content="HTML tags, Web code, web programming">
</head>

See Notepad Tutorial: DOCTYPE, Metadata, Meta tags
See Simple Sample Web Page below
Start your HTML5 pages with:
<!DOCTYPE html>
<html>
<head>
<title>

This page and all future pages must have these three meta tags
5 author
5 description
5 keywords
Create an images folder (In the Explorer - right-click and choose New and choose Folder) Copy, move, or save all your portfolio and other images to the images folder. 5 folder
<img src"=...>
Adds an image to a web page.

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

Add a relevant image to your personal or business site.
The code to display this Point is shown below:
<img src="images/point.gif" alt="Point">

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="Point">

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.
5 <img>
5 alt

5 optimized
Note: You can also assign a background image to your web page by adding the style attribute below to your existing body tag or to a header:
<body style="background-image:url(images/bg.jpg)">
<header style="background-image:url(images/bg.jpg)">


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.
-5 for images that are not optimized
<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 IE9 or the newest FireFox.

Note3: Because browsers may display <hr> differently, using an image instead of an <hr> may provide better consistency and also allow for more interesting features, such as gradients. But 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="color:blue; width:50%; height:3px">

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.

<!-- Some browsers require color with the <hr> tag, some browsers used to use background-color. -->

5 <hr>

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

A Relative Local hyperlink
("Relative" because the entire path is not needed. Relative files are on the same website, often even in the same folder.)

<html>
<body>
 <h1>
My Resume</h1>
 <p>
Temporary Content</p>
</body>
</html>
Create a new HTML file and call it resume.htm, then save it to the same folder. (For this assignment, all you need are the <html> and <body> tags and an <h1> tag that reads Resume, as shown to the left.)

Add the <nav> element, then insert a relative link from index.htm to resume.htm. Example:
<nav>
  <a href="index.htm">
Home</a> |
  <a href="resume.htm">
My Resume</a> |
  <a href="Contact.htm">
Contact Me</a>
</nav>
10 <a href="...>
An Absolute External hyperlink
(An "Absolute" link has the entire URL path to another page; it includes http:// and the domain name. Absolute paths typically are links to other websites.)
Insert a link to a web page on a different site. Example:
<a href="http://msn.com" target="_blank">MSN</a>
(The target="_blank" will open it up as a new page.)
Often you will simply copy the entire URL from the browser address bar and paste the copied URL into the href tag.
See Notepad Tutorial: Adding Hyperlinks
10 <a href="http:
Add an Internal Anchor hyperlink to an ID.
Notice how you must use the # sign when linking to an internal ID with the <a href> tag. An  ID or an "anchor" must be first set to mark the destination on the same page.

"Internal" links go to a different place on the same web page.

Insert a link to the internal id/anchor somewhere on the page other than "Top"

First, create one or more named IDs:
<h2 id="Chapt1">Chapter 1</h2>
Chapter 1 content goes here

<h2 id="Chapt2">Chapter 2</h2>
Chapter 2 content goes here

Now higher on the page you can link to these IDs:
<a href="#Chapt1">Chapter 1</a>
The line abover will link to the Chapt1 ID anchor:
<a href="#Chapt2">Chapter 2</a>

The older "anchor/bookmark" is deprecated with HTML5:
<a name="Chapt2"></a>

10 <a href="#...
 
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>










Sign Up
A working Email and Phone link.
If the link is clicked it starts a client side email process, such as Microsoft Outlook.
Add a HTML5 <footer> element just before the closing </body> tag.
Insider the <footer> include a working link to your Email address and phone:
<footer>
  Contact Me:

  <a href="mailto:MyName@Host.com">Email Me</a>
  <a href="tel://+18885550000">(888) 555-0000</a>
</footer>
</body>
10
mailto:
tel://
Make this version of index.htm look attractive with real content. This will be your real site in a short while. Add real and relative content, color, images and styles. Make it look like a college student is working on this project. 10
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 shortly.
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.
<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>
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. An 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 a Text Editor for the first assignments
A Simple Sample web page created in Notepad.

This sample is just a short demo. Your page will be much longer as you prepare to do a 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. 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 which is related to your site. Start working to make your page look college level.

<!DOCTYPE html>
<html>
<head>
   <title>This is my Title</title>
   <meta name="description" content="Web Stuff">
   <link href="images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
</head>

<body>
   <h1 id="Top">Hyperlink Demo</h1>
<nav>
   <a href="index.htm">Home</a> |
   <a href="Resume.htm">Resume</a><br>
</nav>
   <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>
<footer style="background-color:yellow">
  <a href="mailto:me@Host.com">Email Me</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].

You will lose 3 points for each day late.

 

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 error, FireFox will often give you a further explanation of that error. You will lose at least 3 points for each error for the first assignments.
Continue to copy and paste your browser preview into Word to spellcheck.
Test on multiple browsers: such as Edge, IE, FireFox, Chrome, Safari, and your cell phone.

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.

For this first online assignment you may choose to use your hosting company's File Manager. However, it is far easier for you to use a program like FileZillaor NppFTP, which works with NotePad++, to FTP it to your remote server. Eventually, you may use the FTP client from Dreamweaver or Expression Web.

(When using the GoDaddy cPanel, you may have to navigate to public_html on the remote site and set the Connection tab settings to [Use Current])

For directions for how to use NotePad++ FTP click: nppFTP

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.
-30 if not live
Online, uploaded to your own website.

Future projects will receive a 0 if not live online.

-3 points for each day late.

There is an entire chapter in one of the online eBooks on Domain names, FTP, uploading and hosting.
See http://faculty.scf.edu/winterf/0ClassFolders/2820Web/eBook-Springer/HTML/Murphy07Hosting.pdf
The root folder of your actual local (USB thumb drive or 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 - All images except possibly favicon.ico go here 
    index.htm Your Home page (usually must be in lower case)