LD01: First Steps due Thu 28 Aug 13:20

\begin{purpose} In this assignment you will: \begin{itemize} \item Clone the... ...your laptop. \item Write a simple HTML document. \end{itemize} \end{purpose}

Preparation for Lab Day

For the prelab you will need to follow these steps:

  1. Create an account for yourself at https://github.com (if needed)
  2. Install Node.js LTS (on your computer): https://nodejs.org (if needed)
  3. Install Git (on your computer): https://git-scm.com (if needed)

After installing the software listed above, open a terminal window on your computer and do these steps:

  1. Clone the course repo: 
      git clone https://github.com/tsergeant/w1_homework.git
  cd w1_homework
  npm ci

  2. Rename remote from origin to upstream: 
      git remote rename origin upstream
  git remote -v

  3. At https://github.com, create a new PRIVATE repo called w1_homework (don't have it create any files).

  4. Invite the instructor to your private repo (Settings $\rightarrow$ Collaborators): add terrys@gmail.com.

  5. Follow the instructions at the bottom of the repo page to push an existing repository from the command-line. On your computer: 
      git remote add origin git@github.com:your_user_name/w1_homework.git
  git branch -M main
  git push -u origin main

    NOTE: If you get a permissions error when you try to push, do this:

    1. Do git remote -v and make sure your remotes (origin and upstream) are correct. The origin remote should point to your repo and start with git@... (NOT https...). The upstream remote should point to the course repo and start with https....
    2. If the remotes are correct you probably haven't shared your SSH key with GitHub. See if you have a key set. Do: ls ~/.ssh and look for a file named id_... .pub
    3. If the .pub file exists then do: cat ~/.ssh/name_of_that_file.pub and then copy the key (everything except the email address) and paste it into GitHub at: Profile Picture $\rightarrow$ Settings $\rightarrow$ SSH Keys $\rightarrow$ New SSH Key
    4. If the .pub file does not exist then do: ssh-keygen -t ed25519 -C "you@example.com" and then go to the second step above and look for the .pub file.

By the end of that process you should have installed VSCode on your laptop, established a respository in GitHub that is shared with me (terrys@gmail.com) and is linked to a local workspace on your laptop. The repository should have two remotes established: upstream (points to tsergeant course repo) and origin (points to your github repo).

If you want to get a head start on the lab day work, open your repo in VS Code and take time to read the README.txt in it. Feel free to fiddle around with various commands introduced in the readme doc.

Lab Day

  1. When you arrive to class open your local repo in VS Code, open a terminal in VS Code issue these commands: 
    git remote -v
ls
    Show the instructor the output of the commands.

  2. Take a few minutes to read the README.txt file in your repo. Follow the instructions in that file to accomplish these tasks:
    • Verify that that the code in the hw00 directory is properly formed.
    • Have the local server make the code in the hw00 folder available in your browser at the url http://127.0.0.1:8080 (or http://localhost:8080). Once you see the HW00 page loaded in your browser, go to the next step.

      NOTE FOR WINDOWS USERS: It may be the case that you get an error that scripts are not allowed to run. If that is the case, do this: (1) Open Powershell as Administrator and then run: Set-ExecutionPolicy RemoteSigned from the Powershell command prompt.

    • Modify the index.html file in hw00 so that the open-and-close head tags are renamed to heads. Be sure to save the change.
    • In your browser do a refresh to reload the page. What changed?
    • In your browser right click on the page and choose “View Page Source” to verify that your save worked.
    • At the terminal in VS Code use CTRL-C to cancel the local server and do another format check on the hw00 directory. This time there should be multiple errors. Read the error messages.
    • Return to the source document and fix it and then save it and re-run the check to make sure it is fixed.
    • Now use the serve script to show the contents of demos folder. It should give you a directory listing. Why is this folder giving you a directory listing and the hw00 folder showing you an html file?
    • In your browser, click on the htmldemo.html file (in the demos directory). This document shows HTML code and then shows what that code looks like in the browser. Take time to read the document and take notes on it. Your notes should be a table in this form: 
      Tag    Purpose
h1     Used to mark the text of a major header in a document
h2-h6  Also used to mark headers, but of smaller and smaller sizes
p      Used to ...
      When you have finished taking notes on the entire document, show the notes to your instructor.

  3. Create a new HTML document in the hw01 directory called widgets.html that will be a web page for advertising widgets. On the web page make use of an h1 header, a list, a paragraph, and a link. Refer to your notes and the demos/htmldemo.html as needed.

  4. Once you are happy with your content, go ahead and add the widgets.html document to your staging area and commit it with an appropriate comment.

  5. Let's take some time now to do some rudimentary styling in our document using inline CSS commands. We say the commands are "inline" because they are listed in an attribute on the tag to which they apply. Here's an example of a how to create a paragraph that has a gray background and purple letters in keeping with HSU's “Academic Colors” (https://www.hsutx.edu/about-hsu/leadership-administration/university-marketing/hsu-brand-resources/). 
    <p style="color: #581483; background-color: #B5B5B5">
	Here is my paragraph.
</p>
    Copy/paste this paragraph into widgets.html to see how it works/looks.

  6. Some things to notice in this example:
    • We can modify the appearance of an element (in this case a paragraph) by adding an attribute called style in the opening tag.
    • The CSS properties we list inside the quote of the style attribute have the form property-name: value;
    • The properties we set using inline CSS commands (i.e., applying a style attribute to a tag) are applied to that element only.
    • A common way to specify a color in web pages is to use RGB notation (a hash symbol followed by three pairs of hexadecimal digits). For help in selecting colors there are many online RGB color pickers.

  7. Some additional information about inline CSS commands:
    • Command to increase size of font by a multiplier: font-size: 1.2em;
    • Command to set the width of an element (in pixels): width: 50px;
    • Command to put a 1px border around an element: border: solid 1px
    • To apply CSS commands to a single letter/word/phrase/whatever you surround the letter/word/phrase with a span tag and then apply the CSS properties to it: <span style="color: blue;">word</span>
    • Command to make a word bold-faced: <span style="font-weight: bold;">best</span>

  8. Use the inline CSS commands here to customize your widgets page. HINT: If you want to set some properties for the entire document you can apply styling commands to the body element.

  9. When you are finished show your work to the instructor and then commit and push your work to GitHub.

Web I

Course Resources

Grades and Homework

Quick Links