#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:
Add a Local hyperlink such as:
An Internal link on the same page such as:
Link to an ID -
Define an ID -
Chapter one content here...
Chapter two content here...
Add an Email link such as:
Add a Phone link such as:
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:
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.
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)
|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 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.
Each page should have a unique meta description.
See Notepad Tutorial: DOCTYPE, Metadata, Meta tags
See Simple Sample Web Page below
Start your HTML5 pages with:
This page and all future pages must have these three meta tags
|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|
Adds an image to a web page.
To keep your web pages from loading slow, see Crop, Resize, and Optimizing hints at:
|Add a relevant image to your personal or business site.
The code to display this is shown below:
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:
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.
Add your own real, college level content and images. Do not use "lorem" filler text or irrelevant images.
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:
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|
Horizontal Rule or a line.
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
The code for the Horizontal Rule above is:
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
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.)
|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
|10 <a href="...>|
|An Absolute External hyperlink
(An "Absolute" link has the entire URL path to another page; it includes
|Insert a link to a web page on a different site. Example:
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
Notice how you must use the # sign when linking to an internal ID with the
"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
First, create one or more named IDs:
Chapter 1 content goes here
Now higher on the page you can link to these IDs:
The line abover will link to the Chapt1 ID anchor:
|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:
or the older, deprecated named anchor:
Make a folder called images. Save your desired picture(s) to the images folder. Insert a
Example below (click on up yellow sign at right):
|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
|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. Do not use "lorem" filler text. 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:
If you know how - feel free to use a stylesheet instead of inline styles. We will cover stylesheets shortly.
See Notepad Tutorial: Web Page Colors
Note: These are an inline styles. It is far better to define
Use <div> and <span> tags to organize your page and make your content look good.
Used to make settings to a few words or small section of a page
This is a
|Deprecated (outdated and replaced) tags will not be accepted in this course.
ALL tags should be in lower case.
|Do NOT use:
|-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.
<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">
<h1 id="Top">Hyperlink Demo</h1>
<a href="index.htm">Home</a> |
<img src="images/bird.gif" alt="Bird"><br>
<hr style="color:blue; width:50%; height:3px">
<a href="mailto:me@Host.com">Email Me</a>
Upload your URL web address to the online Canvas dropbox.
|Upload your URL web address to the SCF
Canvas online [Assignment Dropbox].
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, and then right click and choose View Source, and look for any errors displayed in red. Hover over error for hint.
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,
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
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.
|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, which will remember your username, password and file paths.
(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.