IT 238 -- Apr 2, 2025 Notes

IT 238 -- Apr 2, 2025

Review Questions

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
```
Answer: use this URL:
```
https://studentweb.cdm.depaul.edu/esaldan5/it238/index.html
```
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 Mar 31 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
```
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
How do you submit projects to D2L for IT 238?

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?
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

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:

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

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.