William M. Pegram
Home | Courses | Web Design | Server-Side Scripting | About Me

ITE 170 Schedule - Spring 2023

Revised: April 24, 2023

This schedule will be updated with links to homework exercises and additional material as the course progresses.  The most current copy of this schedule can be found www.billpegram.com. Students should not work on assignments until they are assigned in Canvas since the assignment will likely change. Some of the HTML/CSS material shown below we may not get to.

  •   Week Class Topics Reading/Homework Due (more will be added as course progresses) 

    Week 1 - 1/18, 1/21, 1/23

    Course Introduction and HTML


    • Chapter 4 Learning Web Design, 5th edition, by Jennifer Niederst Robbins (ppt)

    • be organized about where you will save files on your computer - I recommend creating a separate folder for this course and putting it at the root of a drive, in Documents, or Downloads
    • starter.html - a file you can use as a start file for coding in this course
    • Saving the file to your computer Chrome or Firefox: Right-click in empty area of page (not over an image)> Save as
    • html vs. htm extension - choose one and be consistent, html has been more common in the past 10 years or so
    • To open a html or htm file in a specific browser - open the browser and then Ctrl O to select the file
    • Viewing the source code of a web page in a browser - Chrome, Firefox, Edge : Right-click in empty area of page (not over an image)> View page source or Ctrl-U
      If above doesn't work, enter view-source: immediately before URL of web page (works in Chrome, Firefox, and Edge)
    • Free Text editors
      • Windows only - Notepad (already installed), Notepad ++ (free download, download this now if you don't have it, may be on computers at campus )
      • Visual Studio Code - Windows, Linux, and MacOS
    • Advantages of Notepad++ and Visual Studio Code over Notepad (once file is saved as .html or .htm) (i.e. desirable features of a text editor)
      • color-coding
      • can have multiple files open, one file per tab
      • line numbers
      • tag and attribute suggestions when you type first letter
      • "fold up" sections of code
      • click on opening tag shows you the corresponding end tag
      • Can launch browser from text editor to display html file rendered by the browser
    • <!DOCTYPE html>, <html>. <head>, <body>, head and body sections, <title> tag
    • When you make a change in the file in the text editor, you must save the file and refresh/reload the page in the browser
    • Is the extension html or htm - making filename extensions visible: In Windows 10, click on the Folder icon in the task bar to open in File Explorer, then select "View" on the menu and check the box "File name extensions". In Windows 11, open File Explorer (Windows key + E), click on View, select Show, and choose File name extensions option to show extensions. Another way is to open “Folder Options” and clear the Hide extensions for known file types option. For Windows operating systems before 10, do a search "file extensions visible" and the desired operating system.
    • Browsers ignore whitespace in file
    • naming folders and pages - no spaces, lowercase (because case-sensitive on some servers), .html or .htm (use one consistently) for pages
    • Validation - a useful tool in finding mistakes in your html or css
    Judy Miller HTML Tutorial (new location)
    • So You Want to Make a Website
    • Creating Your First Web Page
    • Naming Your Page
    • Viewing Your Page in a Browser
    • Revising Your Web Page
    • Validation

    W3Schools HTML Tutorial

    • HTML Intro
    • text editors and viewing your page in a browser
    • HTML Basic Examples
    • HTML Elements
    • HTML Attributes

    Duckett, Chapter 1 (Structure)


    Week 2 - 1/25, 1/28, 1/30

    • Download, install, and try Visual Studio code at home
    • <h1> ... <h6>, <p>, <br>
    • ordered and unordered lists
    • Creating absolute and relative links
    • images - img tag, height, width, and alt attributes
    • HTML comments

    Week 3 - 2/1, 2/4, 2/6
    Uploading, CSS

    • myDrive Spring 2023 - 3 page Word document
    • myDrive - Powerpoints - 2/1/23
    • FTP to Server - CoreFTP (2 videos on Canvas), FileZilla (video on Canvas) - FileZilla does not seem to be able to retrieve directory listing from my myDrive account
    • Making images into links
    • proper nesting of tags for readability of code - e.g. <b><i></i></b> rather than <b><i></b></i>
    • special entity characters (e.g. &nbsp; characters not on keyboard (e.g. &copy); characters that have a meaning in HTML(e.g. &lt;) - all of these also have numeric codes
    • <hr> - horizontal rule, also indicates a shift in topic
    • HTML5 Semantic elements
    • Link to Named Anchors/Fragment Identifiers - Jump to top, skip navigation links for accessibility, Skip Navigation links article

    Cascading Style Sheets

    • https://helpx.adobe.com/dreamweaver/how-to/anatomy-of-website-construction.html
    • external, embedded, and inline CSS - external is generally best (ease of maintenance, consistency, responsiveness (can have different styles for different viewports (devices) through use of media queries (later in course)
    • styling tags - e.g. h2 {color:red}
    • CSS ways of specifying color - color names, hexadecimal, RGB color (Duckett, p.249)
    • commonly used CSS properties - font-size (Duckett, p. 274-276), background-color (Duckett, p. 250-252), font-family (specifying first, second, and third choices) (Duckett, p.273)
    • The role of HTML and CSS in a website
    • external and inline css examples
    • specificity - to decide between conflicting rules
    • CSS classes and id's
    • CSS comments (Duckett, p. 249)

    Week 4 - 2/8, 2/11, 2/13

    • text-align property (replaces deprecated align attribute) (Duckett, p. 285)
    • span tag
    • text-decoration - possible values include none and underline (Duckett, p. 282)

    Overriding examples

    Background Images and tiling
    • Discussion of upcoming HW3 and demonstration of using Paint to resize images and maintain the aspect ratio
    • Using background-color to supplement background images when the background images serve as background for text (in case the background image fails to load or loads slowly)
    • some text properties
    • width and height - units can be absolute or percentage; width, min-width, max-width, and height properties
      Week 5 - 2/15, 2/18, 2/20
      Week 6 - 2/22, 2/27



      Week 7 - 2/27, 3/1  

    Week -3/6, 3/8




    Week 9
    3/20, 3/22, 3/25

      Week 10 - 3/27, 3/29, 4/1, 4/3
    • Photoshop Chapter 1

    Week 11-, 4/5 Chapter 3), 4/8 (Chapter 2-3), 4/10 (Chapter 4)


    Week 12 - 4/12, 4/15
    Premiere Pro


    Week 13 4/17, 4/19, 4/22
    Premiere Pro

    • Course evaluations - see assignment in Canvas



    Week 14 - 4/24, 4/26, 4/29, 5/1


    • Dreamweaver

      Importance of saving a file before creating relative reference from file
    • <hr>, <blockquote>
    • Copying and Pasting in Design and Code View
    • Adding Pages to Website by right-clicking in Files panel or by choosing File>New
    • Site Definition in Dreamweaver (9 minute video)
    • Renaming or moving files or folders within Files panel (updating depends on proper site definition)
    • Publish and Manage Websites (requires site definition) (8 minute video) - The video describes the synchronization process, but often you may simply want to put and get. DW puts things in the right place, preserving the folder structure if you use the arrows for uploading and downloading (but drag-and-drop does not); the contents of the dreamweaver site will be uploaded but the folder itself will not be. With NVCC myDrive, must specify public as the root directory so that all files are put there
    • local files can appear on the left (like they do in Core FTP) by choosing Edit>Preferences>Site
    Dreamweaver site definition
    • The folder you designate as the root folder of your site will not be uploaded but the contents of that folder will be uploaded.
    • Setting default images folder in site definition (when inserting image from your computer but outside of the Dreamweaver site definition, will automatically copy into designated images folder within site)
    • Adding Keywords (Insert>HTML>Keywords), Description (Insert>HTML>Description) Meta Information)
    • Horizontal Rules (Insert>HTML>Horizontal Rule) and Special Characters (Insert>HTML>Character
    • Find and Replace (Find>Find and Replace in Files)
    • File>Page Properties - Appearance (HTML) produces deprecated HTML attributes, so use Appearance (CSS) instead, use of color picker (at lower right portion of panel) to get colors from other sources, specification of font-family for page
    • Check Spelling (Tools > Spell Check)
    • Referencing content in other folders in a website
    • *Link to Named Anchors/Fragment Identifiers (www.youtube.com/watch?v=WoIeq3PS2Es - 8 minute video) - id's are assigned in the Property Inspector and the links to those are as well, with the id preceded by a # sign, click on desired tag in Tag Selector at bottom of screen before assigning id to make sure it's assigned to correct tag, after applying, the tag selector will show id, and can use dropdown menu in Link box to reuse links; fragment identifier example, Skip Navigation links article
    • Define the Page Structure (12 minute video) - shows entering of HTML5 structural tags in code view with a few completion shortcuts and advantage of defining stylesheet first
    • Adding Content to Your Web Pages - (16 minute video)- shows making changes in Code view - Shortcuts: (1) Ctrl D for copying and pasting codeli>Define the Page Structure (12 minute video) - shows entering of HTML5 structural tags in code view with a few completion shortcuts and advantage of defining stylesheet first
    • Adding Content to Your Web Pages - (16 minute video)- shows making changes in Code view - Shortcuts: (1) Ctrl D for copying and pasting code
    • Various split view options - View>Split
      • Good to learn how to do common things in design view since it will often be quicker than doing it in code view
      • Property Inspector is the main way you will do common HTML tags - headings, ordered and unordered lists, relative and absolute links, applying a class or id   
      • Property Inspector can also be used for CSS
      • File>Real Time Preview - can then select the browser you want it displayed in

    Week 15 - MW class - 5/3 2pm

    Saturday class - 5/6 - 1pm (regular class time)

    Topics not covered or assigned Flash Short Assignment 2
    Flash Assignment 3

    Extra material -

    Sample Multiple Choice Questions

    Dreamweaver Videos (will be added as appropriate to the weeks above)

    Animate Videos

    Premiere Pro Videos (will be added as appropriate to schedule above)

    Resizing images in Photoshop (sample photo)

    Working with Images (slides 2-5 only - gif and jpg formats)

    Domain names

    Homework 6

    Forms homework