HTML1 Project– ISM3011 –This may be something new for some – start early!
Review the due date and late date & submission policies on Canvas. Remember to upload your finished project files to Canvas AND to the USF server.
Ask before/after/during class or come into office/online hours if you have questions on any of this. Refer to the syllabus on Academic Dishonesty and group/individual work and allowable help for all projects – also remember it’s your responsibility to protect your work; do not share your project in any way, remove your work to a flash/thumb drive from any shared computers, check/delete work & empty the recycle bin if you work on public/lab computers.
Background and Planning
- The purpose of this project is to learn some very basic HTML skills. For some of you this will be very basic (sorry), for others, this will show you how easy (and fun?) it is to create a web page using HTML and give you a (again, fun?) coding-like experience.
- Using Notepad (Windows users) or TextEdit (Mac users) or Notepad++, you’ll create 2 simple web pages. I’ll give you the code for the pages.
- Once you get the 2 pages working on your computer, you’ll upload them to the USF server so we can see them on the Internet, outside of Canvas and then you’ll submit the URL to Canvas – so we can find and grade your work.
- Be sure you use TextEdit, Notepad or Notepad++, not Word, blog, webpage wizard, or any FrontPage/Dreamweaver type of software.
- Review the HTML Overview videos and Tips. This will give you the background to understand what you are doing. There is also a basic tutorial document on this page.
- Do this!Windows and Mac users, modify your computer view so that file extensions are displayed. It will make this project a lot easier if you can verify the extensions on your file names.
- Create a folder to work in and download the 2 image files and 2 practice HTML files from the assignment area into the folder.
- Open TextEdit (Mac) or Notepad (Windows). Both should already be available on your laptop.
- ***Mac users– this is important to do. Set up TextEdit correctly before you start typing any code.
- Can also see these links for more:
- https://www.lifewire.com/edit-html-with-textedit-3469900 OR
- Additionally, in the New Preferences, the ‘New Document’ tab, be sure the ‘Smart Quotes’ aren’t selected.
- Windows users – your only thing to watch is when you save your file, be sure your ‘save all type:’ is set to All Files (*.*)
- Create practice1.html:
- In Notepad or TextEdit, type in the code from the practice 1 pdf file. Read and include the comments above each set of tags (codes) and understand what each is doing. You don’t have to match the indenting exactly, but include comments. Save the file in your HTML folder as practice1.html (all lowercase).
- Create practice2.html:
- In Notepad or TextEdit, type in the code from the practice 2 pdf file. Read the comments above each set of tags (codes) and understand what each is doing. Again, you don’t have to match the indenting exactly, but include comments. Save the file in your HTML folder as practice2.html (all lowercase).
- View your project using a browser.
- Right click on your file and open it using a browser. Browsers may display web pages a little differently, I recommend using Firefox and we will grade the HTML projects using Firefox.
- Troubleshoot and fix any issues with your pages.
- I recommend opening your browser window and your TextEdit or Notepad window and editing in Notepad / TextEdit, saving it and then refreshing your browser so you can see changes as you work on your project.
- When your project is working. Upload it to the USF server using FileZilla. Instructions are on the Assignment page and on the HTML Overview & Tips page.
- Your URL to the project will be: yournetid.myweb.usf.edu/practice1.html , so mine would be bwarner.myweb.usf.edu/practice1.html. This web page should link to the practice2.html web page.
- The first part ‘bwarner.myweb.usf.edu’ points to my individual web space on the server. Each student / faculty member at USF has web space available. The second part ‘practice1.html’ tells the browser which html file to open.
- This is a big part of the project, you can’t earn more than half credit if your web pages don’t work correctly on the server.
- Test your project by viewing it from a different computer
- Open a browser, type in your URL. All text and images should display, links should work.
- Submit your project to Canvas. Submit your URL to the Canvas assignment (yournetid.myweb.usf.edu/practice1.html – make sure the capitalization matches your file names). Don’t modify or delete your web page after you submit it or it may be considered late or not graded, if modified past the late date. The last modification date is kept as part of your web page information.
- Some of these tags may be deprecated (obsolete), but we are just using these simple tags to get an idea of what HTML / coding is all about.
- Start Early! If you wait until the last minute you may lose many points on this project.
- Create a folder for this project and keep all of your web pages and image files in this folder.
- It’s often easier if all of your web pages and image files are named with lowercase letters (no capitals) only.
- If you have a problem, please first check the HTML Overview page.