ETSU Logo

CSCI 1210

Essentials of Web Development

Lab 1 Instructions

Set up your removable drive

If you already followed the instructions in the video and have etsuid.csci1210.com set up on your removable drive, you can skip these instructions. If you don't yet have a removable drive (having one for this class is required), you can complete this lab using your Z:\ drive folder. But please have a removable drive by next lab

Access your removable drive in Windows Explorer by clicking on the folder icon in the task bar, at the lower left of the display (next to the start button). Click on "Computer;" or "My Computer" and then double-click on the removable drive (Probably drive E:\).

Accessing your removable drive
Accessing your removable drive
I know, the screenshot shows drive 'H:\' instead of 'E:\' ... it's just the way my PC is configured. Yours should be 'E:\'

If you haven't done so already, create a folder on your removable drive that has the same name as your ETSU user id, followed by '.csci1210.com'. For example, mine would be ramseyjw.csci1210.com. Double-click on that folder to open it. Inside your new folder, make two new folders, named labs and homework. Your directory structure should look like this:

  ==================================
    E:\
    | -> ramseyjw.csci1210.com
        | -> homework
        | -> labs
  ==================================

In File Explorer, it should look like this:

File and folder structure in Windows File Explorer
What the folder structure on your removable drive should look like.

Note that all folder/file names are in all lowercase characters. There shouldn't be any spaces in folder/file names:

	"lab 1" == bad!
	"Lab1"  == bad!
	"Lab 1" == bad!
	"lab1"  == good!

Let's make a web page!

Don't worry if you don't yet understand some of what you're typing here. We're just getting our feet wet today. I've included a little bit of CSS just to show you what it looks like and how it interacts with HTML

  1. Launch Windows File Explorer (if you don't have it open already) and navigate to your last_name.csci1210.com directory
  2. Double-click on your labs folder
  3. Right-click on the folder and select New ⇒ Folder
  4. Name your new folder lab1
  5. Launch Brackets. Click File and select Open Folder.... Navigate to your new lab1 folder and click Select Folder
  6. Click File and select New
  7. Make sure you're in the right directory: your_etsu_id.csci1210.com/labs/lab1
Brackets
file tree
  1. Click File and select Save As... In the File Name field, enter lab1.html and save the file
  2. Now, enter the following text in lab1.html:
  3. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Lab 1</title>
    </head>
    <body>


    </body>
    </html>

    Entering HTML code
  4. Place your cursor on line 8. Press the Tab key and enter
  5. <h1>From the Halls of...</h1>

    When you Tab in using Brackets, it will remember the most recent Tab stop and (usually) use it as the default until you change it. This allows you to nest multiple (child) elements within a given (parent) element

    Entering HTML code
      Note the the code you just typed is indented. Indentation is very important! Browsers ignore white space, but proper indentation makes your code more readable and maintainable

    I have a t-shirt I occasionally wear to class that I think is both really funny and really serious: It says "Always write your code as if the person who's going to have to maintain it is a violent psychopath who knows where you live" Think about it.
  6. Save your file and launch your web page in the browser of your choice by clicking the Live Preview button in the upper right corner of the display - live preview)
  7. Place the cursor at the beginning of line 9 and press Enter twice (Brackets may indent the </body> tag when you do this. You can hit Backspace to correct the indentation if it does. Place your cursor on line 9. Press the tab key and enter
  8. Entering HTML code
      Note that the screen shot shows the text on multiple lines. This is because I had to shrink the window down to get the screen shot. The empty space between lines 10 and 11 indicate that, even though the text is wrapped, it is actually one line of code

    Save your changes, return to your browser and refresh the page (Right-click in the browser and select Refresh or Reload -- or click refresh button. Brackets usually takes care of this for you, but sometimes doesn't, so I always manually refresh the page when I make changes, just to make sure

  9. Place the cursor at the beginning of line 12. Press the Tab key if you need to to maintain the indentation (you probably won't have to) and enter
  10. Entering HTML code
      Notice, again, how line 13 occupies several 'lines' of the display (I had to shrink the window down in order to get a screen capture). That's word wrap in action Save your changes, return to your browser and refresh the page. Notice how <p> differs from <blockquote>. <blockquote>, just like in print, indents the text on the left and the right a bit to signify to the reader that it is a quotation   The code for quotes (&quot;) and extra spaces (&nbsp;) is necessary because quotation marks have a special meaning for browsers, so we have to tell the browser that we want an actual quotation mark at a given place, and (&nbsp; -- or 'non-breaking space') browsers ignore additional whitespace, so we have to tell them explicitly to add additional spaces when we want them. The <br> tag is a line break tag, telling the browser, essentially, to break off where it is and start at the beginning of the next line. Sort of like hitting the carriage return on a typewriter
  11. Return to Brackets and modify line 12 as shown below. This is inline CSS, which we will learn in depth later in the semester. Note that there can't be a space between the numbers and "px", i.e., "20 px;" = WRONG; "20px;" = RIGHT!
  12. Entering inline CSS
    Save your changes, return to your browser and refresh the page. Notice how dramatically the addition of styling changed your <blockquote>

  13. Return to Brackets. Copy the CSS code,
  14. style="width:350px; margin:50px auto; padding:10px; border:1px solid black;" to the opening <h1> and <p> tags above (you can copy & paste it from this page, or type it in manually, either way). Make sure that there's a space between the tag name and style=...

    Entering HTML code
    Save your changes, return to your browser and refresh the page. Notice how dramatically the addition of styling changed your <h1> and <p>

  15. Return to Brackets. Add the following CSS rule to your <h1> opening tag (make sure that there is a space between the last semicolon and "text..."):

          text-align:center;
  16. Entering HTML code
    Save your changes, return to your browser and refresh the page. Notice how dramatically the addition of styling changed your <h1>

  17. Return to Brackets. Remove the following CSS rule from your <h1> opening tag

          border:1px solid black;

    Place your cursor at the end of Line 8, press Enter and Tab (if needed) and enter
          <hr>
  18. Entering HTML code
    Save your changes, return to your browser and refresh the page. Notice how dramatically the addition of styling changed your <h1>

Now, Let's Make a List

  1. Place your cursor at the beginning of line 16 (in front of the </body> tag, in case your line numbering is a little off from mine) and press Enter. Return to line 16, Tab in, and enter the following (again, pay close attention to the indentation):
  2. <h2 style="width:300px; margin:10px auto">
        Famous Marine Battles
    </h2>
    <ul style="margin:10px auto; width:250px;">
        <li>Battle of New Orleans</li>
        <li>Battle of Belleau Wood</li>
        <li>Battle of Wake Island</li>
        <li>Battle of Iwo Jima</li>
        <li>Battle of the Chosin Reservoir</li>
        <li>Battle of Khe Sanh</li>
    </ul>

    Entering HTML code
  3. Your final product should look something like this
  4. Completed code (almost)
    Final Display (almost)
  5. Just above the closing </body> tag, add a new line & enter this:
  6. Adding the Validation Script
      This is a little JavaScript that will make our lives a little easier. It won't do anything until you upload the page. But when the page loads from the server, you'll see a pair of icons in the lower-right corner of the page:
    Validation Icons

  7. One last thing. For whatever reason, serif fonts annoy me. So add some styling to your opening <body> tag:
  8. Changing the page's font
  9. Save your file. Launch FileZilla and, on the left side, navigate to your external drive. Log in to your account as we did last week (Host: csci1210.com; Username: your_user_name; Password: the same as we've been using; then click 'Quickconnect'). Double-click on your labs folder (on the right) to open it
  10. Inside your labs folder, right-click in the white space in the lower right-hand pane and select Create directory and enter it. Name the folder lab1
  11. Copy your lab1.html file from the left side (local) to the right into the (remote) lab1 folder. You can do this by clicking on the lab1.html file on the left and dragging it to the right; or by right-clicking the file and selecting Upload
  12. Filezilla upload
  13. Now, we have to start learning about file systems and specifying the path to a file. This is important

        When you access your web account, i.e., mine is ramseyjw.csci1210.com, the browser will drop you into your root directory. But your working files aren't located in your root directory. They're located in subdirectories. Think of a manilla folder nested within a manilla folder [labs]. In our case, there's another manilla folder nested within the first one [lab1]. Conceptually, it looks a little like this:
  14. File System Hierarchy

        So, in order to access your work in a browser, you have to tell the browser how to find the file. Start with your root directory [in my case] ramseyjw.csci1210.com. Then, add (after a front slash - '/') your labs folder: ramseyjw.csci1210.com/labs. Then add the subfolder where today's lab [lab1] is located: ramseyjw.csci1210.com/labs/lab1. Finally, add the file name of the file you want to be displayed: ramseyjw.csci1210.com/labs/lab1/lab1.html

    THIS IS VERY IMPORTANT!! We're using a Linux-based (as opposed to a Windows-based) web server. That means that you shall not use capital letters nor spaces in file names!!!!! (is that enough exclamation marks? Or do I need to add a few more?) !!!!!!!!!!!!! Windows doesn't care about capitalization or spaces in file names, but Linux does. And if you put in a capital letter and/or a space, you will break it!

  15. Press Enter
  16. Pause to admire your handiwork
  17. Validation Icons
    Again, your display won't be exactly like this screen shot, because I had to shrink the window down to get the image. But the content should be centered on the display

  18. Now, holding down the Ctrl key, click on each of the icons in the lower-right corner. This will feed the page into the HTML and CSS Validators, opening two new tabs in your browser. Click on each and make sure you see green. If you don't (if there are errors), try to figure out what went wrong. If you're stumped, let me know
  19. Copy the URL from the browser window into a new text file in Brackets. Save the file as lab1.txt
  20. Log in to D2L and upload lab1.txt to the Lab 1 folder in the Dropbox

Chesty Puller
Lt. Gen. Lewis B. 'Chesty' Puller, U.S.M.C., retd.

* I guess I was just in a "Marine quote" kind of mood today