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

A couple of things to note:

  • Sometimes, you'll make some changes, return to your browser, refresh the page...and nothing changes. Whenever this happens, the first thing to do is return to Notepad++ and look at the file tab:
    Notepad++ changes not saved
    If the tab is red, it means that changes have been made, but not saved!
  • Now that we have dual monitors in lab, you can display these instructions on one monitor and your web page on the other. To split the display, click on the page's tab, after you've launched it (below) and drag it across to the other monitor. Jam it against the top of the display and release the mouse button and it will display fullscreen
  • One thing that'll make your life with Notepad++ much easier is Word Wrap. This makes text that goes to the end of the display "wrap" around to the next line below, at the current tab stop, without having to type "Enter". You can turn on Word Wrap by clicking on "View" and then "Word Wrap"

    Turning on word wrap in Notepad++
  • Since my lab instructions sometimes go a little long, I've added check boxes to each instruction to help you keep place

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 'D:\' 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 Notepad++
  6. Click on File ⇒ Save
  7. Make sure you're in the right directory: your_etsu_id.csci1210.com/labs/lab1
Saving a file in Notepad++
  1. In the File Name field, enter lab1.html and save the file
  2. Now, enter the following:
  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 NPP, 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 as lab1.html (in your \labs\lab1 folder) and launch your web page in the browser of your choice by clicking Run (on the menu bar) and then Launch in xxxxx, where "xxxxx" is Firefox or Chrome
  7. Place the cursor at the beginning of line 9 and press Enter twice (NPP 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
  9. Place the cursor at the beginning of line 12. Press the Tab key 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 Notepad++ 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 Notepad++. 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 Notepad++. 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 Notepad++. 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 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. Entering HTML code
    Final Display
  5. Just above the closing </body> tag (Add a new line or two, if necessary), 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. 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
  8. 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
  9. 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
  10. Filezilla upload
  11. 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:
  12. 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!

  13. Press Enter
  14. Pause to admire your handiwork
  15. 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

  16. 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), raise your hand
  17. Copy the URL from the browser window into a new text file in Notepad++. Save the file as lab1.txt
  18. 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