Due: First Lab Section meeting of the week of September 2
My First Webpage
In this first lab assignment, you will mark up a valid HTML5 webpage that introduces yourself to your instructors and classmates.
Requirements for a ✓
Use the following checklist to make sure you meet the minimum requirements to earn a ✓ for this assignment. Scroll down to the Reach Goals section below for suggestions to extend your work to attain a ✓+.
In Brackets or text editor of your choice, create a single html page with a file name of
Be sure to save your file early and often so that you don't lose your work.
It is also a good idea to create a single folder on your computer where you will store local copies of all of your labs throughout the semester. (Later we'll cover Github, which will give you an additional mechanism for backing up and versioning your files.)
Use the HTML5 boilerplate introduced in the first lecture as a starting point:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> </body> </html>
Use proper semantic markup to give your page a hierarchical structure (e.g. an
<h1>element for the main heading of the page, and
<h3>elements to designate subheadings).
Use a variety of inline and block HTML elements in your page: paragraphs, ordered or unordered lists, horizontal rules, underline and highlight text, etc.
Your page should contain at least one hyperlink to an external webpage.
Display at least one image on your page using the
- Find an image online that you like and determine its absolute file path.
- Use that path in the
srcattribute of the
- Use the
altattribute of the
<img>element to describe the image for those who might be unable to see it.
To determine the absolute file path of an image in a webpage, right-click on it in your browser and choose "View Image" (in Firefox) or "Open Image in New Tab" (in Chrome). You can then copy the full URL of the image as it appears in the browser's address bar.
Your html file should be transferred to the
public_htmldirectory of your
people.duke.eduCIFS space using FileZilla.
Your file should be viewable at
https://people.duke.edu/~yourNetID/about-me.html(e.g. if your Duke netID is
wilma, then your page should be viewable at
Email your instructor with the link to your first webpage!
Reach Goals for a ✓+
To earn a ✓+ on this assignment, push yourself to achieve at least two of the following:
- Add some CSS inside the
<style></style>element in the
<head>section of your document to modify the design of your page (text color, text font family, page background color, etc)
- Determine which attribute can be added to a link tag in order to cause the linked page to open in a new tab in your browser.
- Use the HTML markup for a definition list to define these HTML concepts: relative file path, absolute file path.
- Properly use the HTML5
<section>element in your page's HTML.
FileZilla SFTP Instructions for Duke CIFS Space "people.duke.edu"
The FileZilla application will allow you to transfer your
about-me.html file from your computer's harddrive to your
public_html directory on the
In the QuickConnect bar, enter the following:
<your netID password>
- Port: 22
Click the Quickconnect button to initiate a connection.
You may be prompted with a box stating: "The server's host key is unknown. You have no guarantee that the server is the computer you think it is." You can check the box to allow for this connection in the future, without any warning.
Once you are authenticated to the webserver, you will see your computer's file directory on the left side of the interface (Local Site) and your CIFS space on the right.
On the right side of the interface, set the Remote site path to:
/public_htmland hitting the
On the left side of the interface, navigate to the folder on your computer where you saved your
Right-click on the file and choose "Upload" to upload the file to your public_html folder.
Check your success at
Next time you want to connect to your CIFS space through FileZilla, you can access your previous settings in the Quickconnect toolbar by clicking the ▼ arrow next to the Quickconnect button to access a saved session setting: