LD01: First Steps due Thu 31 Aug 13:20

Preparation for Lab Day

By the end of that process you should have installed VSCode on your laptop, established a respository in bitbucket that is shared with me (terrys@gmail.com) and is linked to a local workspace on your laptop. The repository should follow the naming scheme prescribed in the videos and should have a demo.html document in the hw01 directory.

Lab Day

1. When you arrive to class show your demo.html document to the instructor. Also, open a terminal in VSCode and issue this command: git status.

2. 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 http://josephus.hsutx.edu/classes/w1/source/htmldemo.html as needed.

3. 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.

4. 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.

5. 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.

6. 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>

7. Use the inline CSS commands here to fully 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.

8. When you are finished show your work to the instructor and then commit and push your work to bitbucket.