Links

CGS 2820C
Web Development #03 Grading Criteria for: Hyperlinks
Created with Notepad or VS Code.
Modify the file created in your first assignment, save it as index.htm.

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:00 Minute YouTube Video: Create A Website In VSCode In Less Than A Minute!
P 74 Duckett

HTML is HTML whether you use Notepad or VS Studio Code or Brackets or Adobe Dreamweaver... You can edit the same file in Notepad in the morning, make more changes with VS Studio Code in the evening and then use Notepad again the next day. But VS Studio Code has good debugging, auto-complete, attribute suggestion/completion, spell check, color coding and many other handy features. I would recommend using VS Studio Code from now on.

(VS Code will automatically add a skeleton html file with the DocType, <head>, <title>, ViewPort, meta tags, <body>, <html> tags and more if you type ! or type html:5 at the start of a new file. - see 3 minute video above.)

As a reminder, you are working on and submitting the same file, index.htm, for the first four assignments. You are adding hyperlinks to index.htm for the second assignment, images for the third assignment, and an internal stylesheet for the fourth assignment. Then we will improve the navigation and use index.htm as a template and copy it to resume.htm, which you will modify appropriately. NOTE: Be sure index.htm or index.html is in all lower case.

Description: Continue building the 5 page "portfolio" Business or Personal website for yourself. All pages should have appropriate, realistic and college level content. Do not use sample or "lorem" filler text on your webpage.
Include each of the following in your web page:
Add an External hyperlink such as: <a href="https://ibm.com">IBM</a>
Add a Local hyperlink such as: <a href="resume.htm">Resume</a>
Add an Internal link on the same page such as:
Add a link to an ID, for instance:
<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:Name@host.com">Name@host.com</a>
Add a Phone link such as: <a href="tel:18885550000">(888) 555-0000</a>

Add the tags and features listed below:
<meta name=", <header>, <nav>, <a href=">, <footer>
Go to the bottom of this page to see the code that you can copy for a short sample web page.

It is highly suggested that you create a folder called YourDomainName.com (such as BarbsBoutique) in your C:\Users\UserName\Documents\My Web Sites folder. Then save index.htm to YourDomainName.com folder. Later, you can drag a copy of this folder from your hard drive to your USB thumb drive as a backup.

Free Online HTML Tutorials

Interactive W3Schools Hyperlinks Tutorial
Notepad Tutorials: FirstWebPage.htm | Hyperlinks.htm | Meta Data
Win Web Tutor
w3schools HTML Tutorials and sample Quizzes

Make sure you MEET ALL GRADING CRITERIA below.

Topic Directions Points

Only use Notepad or VS Code for this assignment. Windows 10: Click Windows Start button > Notepad.
I supplied you with online tutorials, examples, and page numbers.
If you need more help: Google :-) 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>
(p 181)
<html>
<head>
<title>
<meta>

This page and all future pages must have these two meta tags
5pts meta author
5 meta description
(p191-192)

HTML5 introduced the <header>, <nav>, <main>, <section>, <aside> and <footer> elements for pages/columns that could be adjusted for smartphones. laptops, and Desktop PCs. This is referred to as Responsive Design - responding to the width of various devices.

<aside> is often used for a second column on a PC, but it stacks under <main> on a smartphone.

Notice the color coding at left which is used to represent the organized structure of HTML5 web pages.

<body>
  <header>      
  </header>
  <nav>          
     <a href="index.htm">Home

</a> 
		|

   <a href="resume.htm">

My Resume

</a> 
		|

...
  </nav>
  <main>         
    <h1>Heading for page</h1>
    <p>Welcome to my website...</p>
    <p>Second paragraph...</p>
  </main>
  <aside>         
  </aside>
  <footer>    
  </footer>
</body>

10pts
<main>

See Structure below
(p 432-433)

Add real and relative content, color, images and styles. Do not use filler text. Make it look like a college student is working on this project. Add a <header> element for a future graphic header or masthead banner.
Add an <h1> tag either inside the <header> or at the top of the <main> element.
Continue from the previous assignment and have at least three college level paragraphs describing your website. Make it read and sound good!
This will be your real site in a short while. 10pts
<header>
One <h1> at top
At least three <p> tags
(p 432-433)

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> 10pts
<nav>
(p 434)

<a href="...>
a relative link to a page on the same site. (p 80)
(you do not yet need content for resume.htm)

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="https://ibm.com" target="_blank">IBM</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 10pts
<a href="http://...
or <a href="https:
an absolute link
(p 77, 79)
S in https is for secure/encrypted.
It is an extra cost.

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.

In DreamWeaver: Insert | Hyperlink

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 above 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>

10pts
<a href="#...
an internal link to an ID on the same page.
(p 87)

Test it

The internal links could go to Chapter 1, Chapter 2...
or
Education,
Work History...
or
Our History,
Our Mission...

In DreamWeaver: Insert | Footer Add a HTML5 <footer> element just before the closing </body> tag. Footers usually include copyright (c) and contact info such as email and telephone. 10pts
<footer>
(p432-433)

A working Email link.
If the link is clicked it starts a client side email process, such as Microsoft Outlook.

Insider the <footer> include a working link to your Email address and phone:

<footer>

		  Contact Me:

<a href="mailto:me@host.com">Me@host.com</a>

</footer>
</body>

10pts
<a href="mailto:
(p 55, 85)

Test it

A working Phone link.
If the link is clicked on a smartphone it will dial that phone number

Insider the <footer> include a working link to your Email address and phone:

<footer>

		  Contact Me:

<a href="mailto:me@host.com">Me@host.com</a>
| <a href="tel:18885550000">(888) 555-0000</a>

</footer>
</body>

10pts
<a href="tel:

Test it

Common example of HTML5 Structure:

Main HTML 5 semantic Elements:

<header>

<nav>

<main>

<aside>

Comments (<!--)can be used to document the creation date or describe a color like #A93355 or give credit to an image source. Comments do not display on the screen.
(p 182)

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. 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.
(p 187)

Use some inline styles to enhance your page.

<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 or index.html. (All lower case!) 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 VS Code for the first assignments.
Save your file with an .htm or .html extention.
Do Not upload .Zip Files to the assignment dropbox.

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>HTML Link Demo</title>
   <meta charset="utf-8">
   <meta name="description" content="Web Stuff detail...">
</head>

<body>
<header>...</header> 
   <h1 id="Top">Hyperlink Demo</h1> 
<nav>
   <a href="index.htm">Home</a> |
   <a href="Resume.htm">Resume</a><br>
</nav>
<main>
   <h2>Page Header</h2> 
   <p style="color:blue">Good Content</p>
   <a href="https://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>
| <a href="tel:18885550000">(888) 555-0000</a>
</footer>
</body>
</html>

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

Upload your webpage or 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, then right click and choose View Source, and look for any errors displayed in red. Hover over flagged errors for hints. -3 points for each error. (Later -5pts, then -10pts)
Note: the line in red may be OK, but it may be flagged due to an error above it.

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.
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.
See: 2820Web/GoDaddyFileManager.pdf
(When using the GoDaddy cPanel, you may have to navigate to public_html on the remote site.)

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)

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.

-10 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/winters/0ClassFolders/2820Web/eBook-Springer/HTML/Murphy07Hosting.pdf

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 - *All* images except possibly favicon.ico go here
index.htm	Your Home page (usually must be in lower case) - Do Not upload .Zip Files