Open lab1.5starterfile.txt in Notepad++ (you can easily open it by right-clicking on the file name and selecting 'Edit with Notepad++' from the menu)
The starter file includes a series of instructions for creating headings (1 and 2), horizontal rules, paragraphs, ordered lists, unordered lists, and nested lists. The instructions are in the form of comments embedded in the document. Don't replace the comments! If they're in place, it makes it easier to help you if you run into a snag
Save the starter file in your lab1.5 folder as (File ⇒ Save As) lab1.5.html'
In places where you are instructed to enter personal information (hometown, etc.), feel free to fictionalize it. Make sure you replace my information in the example below with yours
Enter lab1.5's Content
Enter the above information into your lab1.5.html document, beginning, as in the screen shot, on line 1
Be sure to use your name, not mine!
(Don't worry...pretty soon, we'll make a template file and you won't have to type everything in for every assignment, just update content for a given assignment. We're doing it 'the hard way' the first few times for practice)
After the </head> tag, insert a line and enter a <body> tag
Place the cursor at the end of the document. Press 'Enter' twice and enter </body>. Press 'Enter' and enter </html>. You now have all of the content of your starter file nested within the HTML structure and can complete the lab
Now, scroll back up to the opening body tag and, under it, complete the (embedded as comments) instructions. Remember, don't delete the comments
In the example above, you would surround 'Your Name Here' with a heading one (h1) element, then an opening emphasis tag (em), replace the words 'Your name here' with your name, and the closing emphasis tag. Then, you'll put in a horizontal rule. Then enclose 'My Hometown' inside a heading 2 (h2) element. And so on
When you're done editing, save your changes. In Notepad++, click 'Run' on the menu bar and 'Launch in' Chrome or Firefox. Make sure everything's displaying the way it should (see below). Then, we'll upload the project to the server
Refer to the following screen shot to see how your page should appear:
Note that the icons in the lower right of your page will not work when you display the local file on your lab PC. The page has to be loaded from a server for them to work
Upload and View the File
The last thing we're going to do today is upload and view our new file to and from the server
In the Host field (near the top left), enter 'csci1210.com' or 'ftp.csci1210.com'
In the Username field to its right, enter your ETSU user id
Enter the password in the Password field (I'll provide your password in class, not this - public! - document)
Click the 'Quickconnect' button
If all goes well, you should see something similar to what's below:
On the left ('local') side of the display, navigate to your external drive\etsuid.csci1210.com\labs\lab1.5 folder
On the right ('remote') side of the display, double-click on the 'labs' folder
Right-click on the white space inside the lower right pane. Select 'Create directory and enter it'. Name your new directory lab1.5
Referring to the image below, at this point you should see similar paths on the left and right. On the left, you should also see lab1.5.html displayed in the lower pane, but not in the right lower pane. Double-click on lab1.5.html (or, click, drag right, and drop). Now you should see something similar to the image displayed below:
Return to your browser. Open a new tab in the browser and enter youretsuid.csci1210.com/labs/lab1.5/lab1.5.html. For example, mine would read:
Now, here's where the fun begins! Hold down the Control (Ctrl) key. While holding the key down, click on both of the icons in the lower right corner of the display. This will launch the HTML and CSS validators in separate tabs
Check each of the new tabs. You should see a lot of green. If you have errors, though, try to decipher the error messages and fix what's wrong. If you can't, raise your hand and I'll help
If you had errors, fix them, save your changes, return to FileZilla, and double-click on the file (on the left, not the right)
If you copy right to left, what you'll be doing is copying your old file over your new one -- wiping out all of your changes!