CSCI 1210

Essentials of Web Development

Homework 2: Practice with HTML

This assignment will help us get used to coding in HTML. We'll use some basic HTML elements to create the page pictured below

HW2 Final Product

  1. On your external drive, inside your class/homework folder, create a new folder named hw2
  2. Launch Notepad++ (NPP)
  3. Enter the following into a new document:
  4. starting a web page
    Starting your web page

    Remember, these are the basic elements that every web page should contain: the <!DOCTYPE html> declaration, the <html> container, the <head> element, and the <body> element

  5. In the <head> element element, enter your information into the empty spaces
  6. entering meta-information
    Entering meta-information (use yours)
  7. In NPP, enter the following into the body section
  8. Headings and paragraphs
    Headings and paragraphs

    A couple of things to note, here:

    • We typically use headings to break up content. Here, we're using a heading 1
    • The text that's green is comments. The browser ignores these, but they help developers maintain web content
    • Quotation marks are also special characters for browsers. When we want to display a quote literally, we have to use special notation - &quot;

    Once you've completed this step, save your document in the assignments/hw2 folder as hw2.html. Then, in NPP, click Run → Launch in Chrome

  9. After the first paragraph, add another:
  10. More paragraphs
    More paragraphs

    You may notice that the text you're typing looks a little different from what's pictured here. That's because I had to shrink the display to get the screenshots. But look at the space between line 27 and line 28. That's NPP's way of telling you that, even though the text is wrapped, it's all one line of code. Also note the continued use of the special character &quot;

    Save your work and return to Chrome. Refresh the page to check your work

  11. Moving along, add the following to your document:
  12. More paragraphs
    More paragraphs
    Save → Chrome → Refresh
  13. Now, we'll add some more content. First, we're going to add a heading 2 element. Then the paragraph (you don't have to add the comment...I just put that into the screenshot to tell you what's going on):
  14. Heading 2
    Heading 2
    Save → Chrome → Refresh
  15. So, let's finish this up. Add the following heading 2 and paragraph elements:
  16. Heading 2
    Heading 2 and paragraph
    Save → Chrome → Refresh
  17. As we did in Lab 1, enter <script src="/js/w3c.js"></script> immediately above the </body> tag
  18. starting a web page
    Validation Script
  19. Log in to the server with FileZilla, like we did in lab. On the left side, navigate to your external drive, class folder, homework and hw2 folder

    On the right side, double-click the homework folder. In the file window, right-click and select 'Create directory and enter it'. Name the directory hw2
  20. Create a subfolder for hw2
    Creating a new folder for hw2
    Create a subfolder for hw2
    Creating a new folder for hw2

    Then click OK

  21. Click hw2.html on the left, drag and drop it to the folder on the right (uploading a copy of the file to the server)
  22. Uploading to the server
    Uploading to the server
  23. Enter the URL for the file in a new browser tab. Remember, we have to navigate from your root folder to the actual file you want to load: [etsu_userid]
  24. Hit the Enter key, and you should see your page displayed

    Ctrl+click the two icons in the lower right corner and make sure your work is free of errors. If there are errors, fix them, save your changes, re-upload the file, and check for errors again. Rinse and repeat until all you see is green

  25. Copy the URL from Chrome into a new text document in NPP
  26. Preparing the deliverable
    Preparing the deliverable

    Take a quick look at the URL you just pasted in. If it starts with file:/// you've copied the WRONG URL. That's the local copy of the file, which I can't access. The URL should start with http:// (see above)

  27. Once you're sure you have the correct URL in your text file, save the file as hw2.txt. That's .txt NOT .text!
  28. After you've saved hw2.txt, upload it to the HW2 folder in the D2L Dropbox

Have a nice day!