Description
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.
Name:
Part #1: HTML Tutorial
Estimated time: 30 minutes
Exercise:
Use w3schools to review/learn html basic commands
https://w3schools.com/html/default.asp
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
CSE383 HW #3 HTML
Part #2: Simple Web Page
Estimated time: 30 minutes
Exercise:
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
book.
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
https://ceclnx01.cec.miamioh.edu/~ID/cse383/lab3
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
CSE383 HW #3 HTML
Part #3: Validate Web Page
Estimated time: 10minutes
Exercise:
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
validation
Page 3 of 5
CSE383 HW #3 HTML
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 184.58.68.186
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
CSE383 HW #3 HTML
SUBMIT:
Screenshot (note web screenshots must show the URL)
o Attach a screenshot showing w3schools tutorial (not exercises)
completion
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
password
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