CSE383 HW #3 HTML solution




5/5 - (4 votes)

Objective: The objective of this exercise is to:
1. Learn and practice the basics of HTML
2. Protect your website
Submit: screenshots, your html file and a link to your web page
You may discuss the concepts with your fellow students
You may not show or share code with your fellow students
You may not show or share code with internet sources
You may discuss this with your instructor or TA.
Part #1: HTML Tutorial
Estimated time: 30 minutes
Use w3schools to review/learn html basic commands
1. Review the tutorial from HTML Introduction  HTML Classes
2. Make 3 screen shots showing progress
3. No need to do exercises – just go through it
OR: Write a paragraph as to why you are already an HTML expert, using fully developed
sentences and examples.
Page 1 of 5
Part #2: Simple Web Page
Estimated time: 30 minutes
Create a basic HTML page (~/public_html/cse383/lab3/index.html) that
includes the following elements:
Note: make this using your Linux editor (nano or vim). This is a time to
create a web page without using interactive tools
 A simple, single page, story that has 3 “chapters”
 The top of the document
o This means you should use an H1 header tag for the title of the
o The H1 should have a table of contents underneath it for each
chapter, made by using an unordered list
 Each Chapter
o Starts with an H2 with the title of the chapter
o Some text about any suitable topic (using paragraph

o Each chapter should have an image that is stored on ceclnx01
 Get the image and put it in your lab3 directory
 Footer at the bottom of the page
o There should be a “footer” at the bottom that has the assignment
details including name, date, course….
These files (index.html and all images) must be on ceclnx01 and must be in
your directory ~/public_html/cse383/lab3
I should be able to access the files at
Use this link to verify that your path and naming convention is
correct: http://ceclnx01.cec.miamioh.edu/~johnsok9/cse383/lab3check.php (
Links to an external site.)
Note: this will show the web page text – but not the images
Page 2 of 5
Part #3: Validate Web Page
Estimated time: 10minutes
Use the W3c validator at https://validator.w3.org/
 Your html file must either pass all validation or explain in the
comments why it doesn’t
 Complete this BEFORE starting part #4
 You may also copy/paste the code for
Page 3 of 5
Part #4: Protect web directory
Estimated time: 10 minutes
Exercise: Create basic access control on your web site
1. Create password file
a. htpasswd -c ~/.htpasswd USERNAME (make up your own
username, I might use kurt for example)
b. Enter the password
c. Re-enter the password
2. Create the apache access control file (requires anyone accessing the
website to need the password, except for me to grade)
cd ~/public_html/cse383
edit/create .htaccess and store the following (replace bolded MUID with
your own unique id) (use vim or nano)
#Protect Directory
#password protect excluding specific ip
AuthName “Username and password required”
AuthUserFile /home/MUID/.htpasswd
AuthType Basic
Require valid-user
Order Deny,Allow
Deny from all
Allow from
Allow from validator.w3.org
Satisfy Any
Set permissions on the files from the command line after editing by typing:
Chmod 644 .htaccess ~/.htpasswd
Verify the permissions by doing an ls command with a screen grab
ls -l .htaccess ~/.htpasswd
Page 4 of 5
 Screenshot (note web screenshots must show the URL)
o Attach a screenshot showing w3schools tutorial (not exercises)
 OR your expert paragraph
o Attach a screenshot of your web page showing password request
 If you did this, entered a password and forgot to do it, then
just close chrome (all tabs) and restart – should ask you for
o Attach a screenshot of your completed web page
o Attach a screenshot showing file permissions correct
o Attach a screen shot of the passing w3c validator (Links to an
external site.)
 File
o Attach the html file
 Link
o Add the link to the web page in the text area
Page 5 of 5