CGS 2820CWeb Page Development
Created with Notepad on a PC or VS Code.
Modify the file created in your first assignment, save it as index.htm.
NOTE0: Modify your first assignment (index.htm) by adding images and the other items listed below.
NOTE1: There is a SAMPLE webpage at the bottom of this page. Modify, expand and improve on it..
NOTE2: Make sure you meet all of the grading criteria shown in the right column, under the heading Points.
NOTE3: Turn in college level, professional work, with full and realistic paragraphs about you or your business.
NOTE4: It is recommended that you set the Windows Explorer to View > File name extensions
NOTE5: View your page in FireFox, Right Click > View Source to see code. Hover over any red errors for help.
NOTE6: If you did not get a 100 on a past assignment, look at the grade comments. Do not repeat the same errors.
Please watch this 4 minute video on Images (Note width and height are no longer neccessary with HTML5 and viewport)
https://www.youtube.com/watch?v=4hOKDasq5SA
Description: Continue building your 5-page "portfolio" Business or Personal website. Use Notepad, the free Notepad ++ or the FREE VS Code to improve and add images to index.htm, which is the same file used for the first two assignments. Use realistic college level text and full relevant paragraphs, links, and images. Do not use sample or "lorem" filler text for your submission for a grade, This is your website, about you. Make it look attractive and professional, something you feel proud of. Create something you would feel good about showing to a potential employer.
Your files must be online for full credit. If they are not uploaded to your website, you will lose 10 points. (-20 if not online next week.) I cannot grade multiple webpages, multiple images, folders, and your stylesheet each week unless they are properly uploaded and organized online. You can purchase a domain and hosting through BlueHost.com or GoDaddy.com. As of 8/15/2024 Blue Host had a special for Domain and Hosting for a total of $24 for a year. See: BlueHostAd.jpg. Do a search for "Godaddy coupons" or "BlueHost Specials" before you spend your money. Both GoDaddy (480-463-8389) and BlueHost (888-401-4678) offer free phone support. Support is a very important feature!
Ask GoDaddy (1-480-463-8389) or BlueHost.com (888-401-4678) for:
1. Domain Name, (It should be easy to say, easy to spell; try to include key words.)
2. Hosting for 6 months to 2 years (the longer the term, the cheaper the rate),
3. Economy package,
(You do not need a security certificate.)
4. A Linux server,
5. Make sure your hosting includes the cPanel
A. Do a web search for GoDaddy Coupons or BlueHost Specials. The cost for a domain and 6 months of hosting should be less than $39.
B. Do NOT get a Website Builder or an "Instant" website or any other template, platform or code generator. Do NOT install a WordPress site. You will be building your own website from scratch using HTML tags, creating your own code using only Notepad or Visual Studio Code. This assignment is to be created in HTML using the code shown below. Do not use WordPress or another Content Management System or a Website Builder. Once you learn HTML and CSS, then you will be able to use WordPress or another CMS during the last half of the course.
You can use the BlueHost or GoDaddy FileManager to upload or File Transfer your webpages. It's an easy drag and drop. But I recommend that you see the bottom of this page for directions of how to use the faster, free and easier FileZilla app to upload or FTP your files. FileZilla remembers your password and username, and your local and remote path, and can connect easier. (By the way, the remote path for your GoDaddy site is usually under public_html.)
For a short GoDaddy/FileZilla tutorial see: https://www.youtube.com/watch?v=Oim7fUOoZ7E
Also see: GoDaddy_FileManager_and_FTP_clients.pdf
The online eBook section below covers FTP, uploading and hosting:
See https://faculty.scf.edu/winters/0ClassFolders/2820Web/eBook-Springer/HTML/Murphy07Hosting.pdf
A Domain Name is an organization, business or personal name on the Internet such as:
IBM.com or SCF.edu or BillSmithOnline.com or BillSmith.net or BillSmith.org
or BillSmith.info or BillSmith.biz
When you submit your assignment to the dropbox, just upload the URL which is the web address, for example:
www.BillSmithOnline.com or http://BillSmithOnline.com (Unless you buy a security certificate, it is http://..., not https://...)
Your full Domain name is your Web address. A domain name consists of several parts. The letters www. before the domain name mean that what follows describes the location of a site on the World Wide Web. The last two or three letters of a Web address are known as its top-level domain: .com, .gov, .edu, .net, .org, .biz, .info, .uk ...
A domain name is of no value if it is not hosted on a server. Hosting is when a company owns web servers and allows you to store your web pages on the company servers so your site is available worldwide 24/7. The hosting companies charge a fee, usually $4.00 to $10 a month. Typically, you pay less per month, if you purchase a year or two years of hosting up front. Also you can usually get a better deal if you purchase the Domain Name and the Hosting at the same time.
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)
W3Schools Images Tutorial:
W3Schools Folders Tutorial:
W3Schools Colors Tutorial:
W3Schools Favicon Tutorial:
W3Schools ViewPort Tutorial:
Scalable Vector Graphics (SVG):
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>
See bottom of this page for code 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.
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 20 points.
Free Online HTML Tutorials
Interactive W3Schools Images TutorialSee: 04ImagesDemo.htm code template
Notepad Tutorials: Images.htm
Win Web Tutor
Make sure you MEET ALL GRADING CRITERIA below.
A unique
<title> briefly describing your pageMeta Description:
<meta name="description" content="Longer Page Description">If you use
<div>. a comment for each closing </div> Ex: </div> <!-- close wrapper -->If you do not have a security certificate your URL/Web address is http://site.com, not https://site.com
-5
-5
-3
-1
<img="images/abc.jpg" alt="abcd">See bottom of this page for code you can copy for a short sample web page.
Only use Notepad, NotePad++, or VS Code for this assignment.
VS Code is color coded, spellchecks for you, underlines flagged words in blue, and includes many shortcuts.
<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.)
viewport
The folder name (images/) is typically all in lower case.
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
The code to display this
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.
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.
Optimize every image so their file size is not too big, which would cause your page to load slow.
Also see
background-repeat and background-position in text (p 163)
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
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;">
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.<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.
(p 48)
If you know how - feel free to use a stylesheet instead of inline styles. We will cover stylesheets shortly.
(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, ...
<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.<a href=...>
<img scr=...>
</a>
Image link
<span>Used to make settings to a few words or small section of a page
<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(p 188)
SVG graphics are scalable, and do not lose any quality if they are zoomed or resized. They are also much smaller in size than an image.
See: w3schools.com/html/html5_svg.asp
<svg width="120" height="120">
<rect x="10" y="10" rx="20" ry="20" width="80" height="80"
style="fill:blue; stroke:black; stroke-width:3; opacity:0.5" />
<text x="28" y="55" font-size="14" fill="white">
10 Pts
</text>
</svg>(x= pixels from top left. y= pixels down. r= radius)
RolloverAdd an optional rollover image that is appropriate to your site - GOOGLE IT!
(:hover)
Spellcheck: copy and paste into Word. -10pts
<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%)
<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.
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
ALL tags should be in lower case.
Use instead:
<p style="text-align:center; font-family:arial; background-color:#FF0">
or use<div style="width:80%; margin:auto">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 edit an existing .htm file: Open Notepad and choose File > Open or right-click on your file and choose Open with Notepad.
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 produce a full page at college level.
Test on multiple browsers: such as Edge, FireFox, Chrome, Safari, and your cell phone.
See:
FileManager & FTP.pdf and see below
<!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> <!-- Later defined in the stylesheet -->
<nav id="Top">
<a href="index.htm">Home</a> |
<a href="Resume.htm">Resume</a>
</nav>
<main>
<h1>Heading for page</h1>
<p>Barb's
Boutique specializes in...</p>
<p>Add more real text/content here.</p>
<p>Use <b>bold</b> somewhere</p>
<h2 style="color:blue">Our Products</h2>
<p><a href="http://msn.com">MSN</a></p>
<img src="images/bird.gif" alt="Crow Photo"><br>
<hr style="color:blue; width:50%; height:3px">
<p>Add more real text/content here.</p>
</main>
<footer style="background-color:yellow">
<a href="mailto:me@host.com">me@host.com</a>
| <a href="tel:18885550000">(888) 555-0000</a><br>
<a href="#Top">Top</a><br>
</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 http v https
-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. -5 for each error shown by FireFox.
Note: the line in red may be OK, but it may be flagged due to an error ABOVE it, just like river pollution contaminates water downstream.
favicon
(p 74-75, 386, and Google)
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.
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.
-10pts if not online.
Next week:
-20pts if not live
Online, uploaded to your own website.
Do not upload Zip files! They are a virus risk.
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 (index must be in lower case to work online) Do NOT Upload .ZIP Files |