IT 238 -- Jan 5, 2026 Notes

To Lecture Notes

IT 238 -- Mar 30, 2026

About IT 238

IT 130 is the prerequisite for IT 238.
For web pages, use
- HTML to specify content,
- CSS to specify layout and presentation,
- JavaScript to specify behavior.
Best practice is to put code for HTML, CSS, and JavaScript in separate files.
This is a requirement for IT 238 class projects: 20% penalty if you don't put HTML, CSS, and JavaScript in separate files.
The file extensions are .html, .css, and .js.
IT 238 is a client-side programming class. The emphasis is on JavaScript programming.
Client-side programming means that JavaScript code is executed by the browser.
In IT 238, HTML and CSS will be covered as needed for the examples and projects, but we assume that you can look up additional information related to HTML and CSS if necessary.
We will review HTML and CSS during the first week of this class.

Course Website

Announcements Lecture Notes Documents Projects Exam Info Prof Info Syllabus

Course Topics

Review of HTML and CSS
Review of JavaScript:
Variables Functions Control Structures
JavaScript Arrays, Object Literals, JSON, Classes
Document Object Model (DOM), Forms, Events
Effects such as hide and show
JavaScript Libraries (for example jQuery and Angular)
Submission Forms
Drawing and Animation

Review Questions

Who designed the first version of HTML?
Answer: Tim-Berners Lee. He also designed the first version of HTTP.
What does HTML mean? List some HTML tags that you know.

Details: some newer HTML commands. Commands new to HTML5 are marked with *.
<abbr> <address> <area> <article>* <aside> <audio> <base> <bdi>* <bdo> <blockquote> <canvas> <caption> <cite> <code> <col> <colgroup> <data>* <datalist> <dd> <del> <details>* <dfn> <dialog>* <dl> <dt> <embed>* <fieldset> <figcaption> <figure>* <footer>* <header>* <hgroup>* <ins> <kbd> <keygen>* <legend> <main>* <map> <mark>* <menu> <menuitem>* <meter>* <nav>* <noscript> <object> <optgroup> <output>* <param> <picture>* <progress>* <q> <rp>* <rt>* <ruby>* <s> <samp> <section> <small> <source>* <summary>* <svg>* <tbody> <template>* <tfoot> <thead> <time>* <track>* <var> <video>* <wbr>*

Answer: HTML means Hypertext Markup Langage. Here are some frequently used HTML tags:
<!DOCTYPE html> <html> <body> <head>
Tags included in the <head> tag:
<meta> <title> <link> <style> <script>
Tags included in the <body> tag:
<div> <span> <br> <h1> <h2> <h3>
<p> <ul> <ol> <li> <table> <tr> <td> <th>
<strong> <em> <a> <img> <input> <button> <label>
<select> <option>

Set up an HTML page that uses some tags that you know from Exercise 2. Upload your page to the studentweb server.
Answer: Here is the HTML file that we created in class:

<!DOCTYPE html>

<!-- Source code for Exercise 3 of Mar 30 Notes.
     Source code file name: index.html -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0">
        <title>Sample Webpage</title>
    </head>

    <body>
        <h1>Sample Webpage</h1>

        <p>This is a sample webpage.<br>
           This is the second line.</p>

        <ol>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ol>
    </body>
</html>

The directory structure on the studentweb server should look like this. Indentation means subfolder.

public_html
    it238
       sample-page
           index.html

This is the URL for accessing this file on studentweb if ssmith is your campusconnect username:

https://studentweb.cdm.depaul.edu/ssmith/it238/sample-page/index.html

What is the root node of an HTML page?
Answer: the html node defined by the <html> and </html> tags.

In this CSS style:
```
h2 { color: navy; }
```
identify the property, selector, and value.
Answer: h2 is the selector, color is the property, navy is the value.

Which colors designated by these hex color codes:

#FF00FF  #800080  #000080  #800000  
#008080  #C0C0C0  #E0E0FF  #E0FFFF

Hint: Here is a color wheel to help you.
There is an error in the color wheel. The hex color code for green is shown as #008080. It should be #008000.
Answer:

#FF00FF magenta or fuschia #800080 purple
#000080 navy               #800000 maroon
#008080 teal               #C0C0C0 silver
#E0E0FF pastel blue        #E0FFFF pastel aqua or cyan

Project 0

Look at the Project 0 Description.
Requirement for all projects: the HTML, CSS, and JavaScript code must each be in separate files. You can named these files index.html or index.htm, styles.css, and script.js if you wish--20% deduction if this requirement is not followed.

Here is the sample Project 0 that we will upload to the studentweb server:

Proj0Index 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 files
            script.js
            styles.css  <-- if needed
        proj1b      
            index.html  <-- stub files
            script.js
            styles.css  <-- if needed

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

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.