To Lecture Notes

IT 238 -- Jan 8, 2025

Review Questions

1. Suppose your name is Emma Saldana with CampusConnect username esaldan5. What folder structure should you use on the studentweb server to display the HTML file index.html? Which URL should you use to view this page?
   Answer: use this folder structure:
   

   public_html
       it238
           index.html
   

   Use this URL:
   

   https://studentweb.cdm.depaul.edu/esaldan5/it238/index.html
   

2. Set up an HTML page that uses some of the HTML tags that you know. Use more HTML tags than you did for Exercise 3 in the Jan 6 Notes. Add an external stylesheet. Answer:
   Exercise2 Example
   Web Page 1   Web Page 2   Source Code
   Use this folder structure for uploading to the studentweb server:
   

   public_html
       it238
           index.html
           page2.html
           styles.css
           images
               puppy.jpg
   

3. How can you use Visual Studio Code to create a skeleton web page?
   Answer: starting with an empty HTML page, type exclamation mark (!), then tab
4. How do you submit projects to D2L for IT 238?
5. Which colors are designated by these hex color codes:
   

   #ff00ff  #800080  #0000ff  #000080  #800000  
   #008080  #c0c0c0  #e0e0ff  #e0ffff
   

   Hint: Here is a color wheel to help you.
   Answer:
   

   #ff00ff magenta or fuschia #800080 purple
   #0000f0 blue               #000080 navy
   #800000 maroon             #008080 teal               
   #c0c0c0 silver             #e0e0ff pastel blue        
   #e0ffff pastel aqua or cyan (blue green)
   

6. What does this CSS statement define?
   

   .twf { font-family: "Courier New"; 
          font-weight: bold; }
   

   Answer: This is a CSS class. The leading dot on the class name .twf indicates that this class can be applied to any HTML element. For example, in the HTML code, to apply this class to the tag <p> (paragraph), add a class attribute to the tag:
   

   <p class="twf">This is a paragraph.</p>
   

7. What is the CSS box model?
   Answer: The box model controls how much space is between an element and its border (padding) and the space between its border and adjacent elements. Here is an example:
   BoxModel Example
   Web Page   Source Code
8. How do you write comments in HTML, CSS, and JavaScript code?
   Answer:
   

   <!-- This is an HTML comment -->
   /* This is a CSS comment */
   // This is a JavaScript comment
   

Practice Quiz

• Take the D2L Practice Quiz named PQ1b.

Project 0

• Look at the Project 0 Description.
• Requirement for all projects: the HTML, CSS, and JavaScript code must each be in separate files. Name these files index.html, styles.css, and script.js -- 20% deduction if this requirement is not followed.
• Here is the sample index example that we uploaded to the studentweb server:
  
  SampleIndex Example
  
  URL: http://studentweb.cdm.depaul.edu/sjost/it238/index.html
  
  Zipfile: proj0smith.zip
  
  File and Folder Layout. Indentation indicates subfolder:
  

  public_html
      it238
          index.html  <-- index of proj1a and proj1b
          styles.css  
          proj1a
              index.html  <-- stub file
              script.js   <-- omit for Project 0
              styles.css  <-- if needed
          proj1b      
              index.html  <-- stub file
              script.js   <-- omit for Project 0
              styles.css  <-- if needed
  

CSS Shorthand Styles

• Reference: www.w3schools.com/css/css_font_shorthand.asp
• Some CSS styles occur together so often that a shorthand notation for them is useful.
  Consider this CSS style:
  

  p { font-weight: bold; font-size: 200%; 
      font-family: arial, sans-serif; }
  

  The shorthand abbreviation for the preceding line is
  

  p { font: bold 200% arial, sans-serif; }
  

  Test both styles.
  
  The complete list of properties available for the font shorthand style is
  

  font-style: normal (default), italic 
  font-variant: normal, Small-caps
  font-weight: normal (default) bolder lighter
               100 (light) 200 300 400 500 600 700 800 900 (bold)
  font-size/line-height: available units are pt, px, %, in, cm, mm
  font-family: check fonts that are available on computer
  

  The font-size and font-family styles are required. If any of the other properties are omitted, the default values are used.
  Translate this shorthand version of the font property to non-shorthand:
  

  p { font: italic small-caps bold 12pt/30px Georgia, serif; }
  Answer:
  p { font-style: italic; font-variant: small-caps;
      font-weight: bold; font-size: 12pt; line-size: 30px;
      font-family: Georgia, serif; }
  

  Test the shorthand and non-shorthand versions.
• Practice Problems:
  
  1. Rewrite these padding styles as shorthand styles:
     

     img { padding-top: 10px; padding-right: 15px; 
           padding-bottom: 20px; padding-left: 25px; }
     Answer:
     img { padding: 10px 15px 20px 25px; }
           
     img { padding-top: 10px; padding-right: 25px; 
           padding-bottom: 20px; padding-left: 25px; }
     Answer:
     img { padding: 10px 25px 20px; }
           
     img { padding-top: 10px; padding-right: 25px; 
           padding-bottom: 10px; padding-left: 25px; }
     Answer:
     img { padding: 10px 25px; }
           
     img { padding-top: 25px; padding-right: 25px; 
           padding-bottom: 25px; padding-left: 25px; } 
     Answer:
     img { padding: 25px; }
     

  2. Rewrite this border styles as a shorthand style:
     

     img { border-width: 200%; border-style: solid; border-color: red; }
     Answer:
     img { border: 200% solid red; }
     

Some HTML5 Examples

We did not discuss the details of these examples in class. Look at them on your own.

1. Details Example
   Use a details element to hide information:
   Web Page  Source Code
2. Table Example
   A table with HTML5 elements:
   Web Page  Source Code
3. Iframe Example
   Use an <iframe> tag to display text:
   Web Page  Source Code
4. Drawing1 Example
   Draw two shapes (circle and polygon) using scalable vector graphics (SVG).
   Web Page  Source Code
5. Drawing2 Example
   Drawing can also be accomplished using JavaScript:
   Web Page  Source Code

Some CSS Examples

1. AbsolutePositioning Example
   Display div sections using absolute positioning and a background image.
   Web Page  Source Code
2. Float Example
   Use the CSS float property to allow text to flow around an image.
   Web Page  Source Code

How are CSS Property Values Applied?

• Inheritance means that if a CSC property is not specified for an HTML element or elements, the property value of the parent is used. For example, if a CSC property is not specified for an h1 header, the property value of the parent, in this case body, is used. Not all elements support inheritance, so you may need to check.
  
  For example, if these two tags are used,

  h1 { color: navy; }
  body { color: maroon; }
  

  The color of the h1 tag will be navy because h1 is more specific than body.
• Specificity means that if more than one property applies to an element, the most specific property is used. The most specific is to target an element with an exact id, next most specific is to target an element that uses a designated class, third is to use a property that targets a specific element type. If two properties are equally specific, the property specified last is used.
  
  For example, if these two tags are used,

  h1 { color: navy; }
  body { color: maroon; }
  

  The color of the h1 tag will be navy because h1 is more specific than body.
  
  Finally, if more than applies equally to a tag, the style that is applied last takes precedence, for example:
  

  h1 { color: navy; }
  h1 { color: maroon; }
  

  In this case, the maroon color is applied last to the h1 tag will be maroon.