IT 238 -- Jan 7, 2025 Notes

IT 238 -- Jan 7, 2027

Review Questions

How can you use Visual Studio Code to create a skeleton web page?
Answer: starting with an empty HTML page, type exclamation mark (!), then Enter or Tab.
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?

use this folder structure:
```
public_html
    it238
        index.html
```
Answer: use this URL:
```
https://studentweb.cdm.depaul.edu/esaldan5/it238/index.html
```
Add an external stylesheet to the HTML page that you created for Review Question 3 of the Jan 5 Notes. 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
```
How do you submit projects to D2L for IT 238?
Answer: on your PC, copy the project files into a folder named proj0Smith (replace with your last name). Then create a zipfile from this folder named proj0Smith.zip. Submit this zipfile on D2L.

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)

What is the CSS box model and how do you set one up using CSS?
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

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

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

BirthdayRiddle Example. Separate the code for this example into separate HTML, CSS, and JavaScript files:

<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
    <head>
        <title>Birthday Riddle</title>
        <style>
        body { background-color: #FFE0E0;
               color: navy; font-family: verdana, sans-serif;
        }
        </style>
        <script>
        function showAnswer( ) {
            var para = document.getElementById("p2");
            para.innerHTML = 
                "Answer: December 31; today is January 1.";
        }
        </script>
    </head>
    <body>
        <h1>Birthday Riddle</h1>
        <p id="p1">Riddle: The day before yesterday I was 21, 
           and next year I will be 24. When is my birthday?</p>
        <p id="p2"></p>
        <input type="button" value="Show Answer" 
               onclick="showAnswer( )">
    <body>
</html>

Answer:
---- index.html ----------------------
<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
    <head>
        <title>Birthday Riddle</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Birthday Riddle</h1>
        <p id="p1">Riddle: The day before yesterday I was 21, 
           and next year I will be 24. When is my birthday?</p>
        <p id="p2"></p>
        <input type="button" id="btn1" value="Show Answer">
    <body>
</html>

---- styles.css ----------------------
/* BirthdayRiddle Example */
body { background-color: #FFE0E0;
    color: navy; font-family: verdana, sans-serif;
}

---- script.js -----------------------
// BirthdayRiddle Example
function showAnswer( ) {
    var para = document.getElementById("p2");
    para.innerHTML = 
        "Answer: December 31; today is January 1.";
}

function init( ) {
    var button = document.getElementById("btn1");
    button.onclick = showAnswer;
    // or
    // button.addEventListener("click", showAnswer);
}

window.onload = init;
// or
// window.addEventListener("load", init);
--------------------------------------

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:

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; }

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

Except for the Details Example, we did not discuss the details of these examples in class. Look at them on your own.

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

Some CSS Examples

AbsolutePositioning Example
Display div sections using absolute positioning and a background image.
Web Page Source Code
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.

Project 1a

Look at the Project 1a Description.
Practice Problem: Write a JavaScript function that inputs a length in inches, converts this length to centimeters, and returns the length in centimeters. Then test your function.