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 |
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
HTML |
- 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. characters not on keyboard (e.g. ©); characters that have a meaning in HTML(e.g. <)
- 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
- font-size (px, pt (1/72 of inch), %, small, large, etc.) (Duckett, p. 274-276)
- font-weight (bold, numerical value) (Duckett, p. 279)
- font-style (italic, oblique) (Duckett, p. 268)
- line-height (200% gives you double spacing) (Duckett, p. 283)
- text-indent (used less often on web than in print) (Duckett, p. 287)
- text-transform (uppercase, lowercase) (Duckett, p. 281)
- letter-spacing (Duckett, p. 284)
- 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 |
- vertical navigation with unordered list - 2 column layout (hiding the bullet points)
- horizontal navigation with unordered list (hiding the bullet points)
- Changing Links Colors with CSS and Hover Effects (the html way to change link colors is deprecated, use CSS instead. important to maintain contrast between text and background when you are changing the background color or background image from white)
- How much contrast between text and background is needed?
- Common problems this semester
- No submission of URL - a URL is much more convenient for the recipient than an attachment of files. If files are attached, they have to be downloaded, and the filename will change if the recipient already has a file with that name. Also if you are attaching files, you may forget one or more files. If you are having problems with myDrive, use the www.ite170.com accounts I set up last week. ite170.com is currently not covered by a security certificate so you may get a warning; I will look into purchasing one, but you can use it safely I'm sure.
- Incorrect URL for myDrive - the correct URL must contain the user's myNOVA username
- filename of index-1.html - Default filenames
- Using the <link> tag to reference external stylesheets such as Bootstrap and/or a unique stylesheet for your website
- downloadable fonts - typically will use an external stylesheet because you will want to the font on multiple pages in your website.
- Advantages of Google and Adobe Fonts
- don't have to worry or be constrained by what fonts are on users' machines
- unlike downloadable fonts in general, don't need to have rights to use the font
- if user visits your site that has used a Google or Adobe font, they might have recently visited another site using the same Google or Adobe font, and hence font is already downloaded
- Box Model examples and browser defaults
|
|
| |
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 |
|
|
| |
Week 11-, 4/5 Chapter 3), 4/8 (Chapter 2-3), 4/10 (Chapter 4)
Photoshop
|
|
|
| |
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
Photoshop
|
-
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
Photoshop
|
|
| |
Week 15 - MW class - 5/3 2pm
Saturday class - 5/6 - 1pm (regular class time) |
|
|
