|
Post question on
selected text (more)
|
Open tab with class Google Group
||
| |

HTML, CSS and Event Tutorial

ITCS 3120 Computer Graphics

Spring 2023

Professor Zachary Wartell

Due Date:  See Canvas Assignment

Revised:Tue Jan 30 14:17:27 2024 -0500(git-log)

Copyright September 2018, Zachary Wartell @ University of North Carolina at Charlotte
All Rights Reserved.

Learning Objectives

  • Learn very basics of HTML5 (or demonstrate prior knowledge)
  • Learn very basics of CSS (or demonstrate prior knowledge)
  • Learn very basics of JavaScript event handling (or demonstrate prior knowledge)

Overview

This course focuses on 2D/3D computer graphics and programming with WebGL.  WebGL runs in the context of a HTML5 web browser environment with JavaScript.  This tutorial selects a subset of several on-line resources to cover the minimal amount of HTML5, CSS and event handling required to get the most out of the book, WebGL Programming Guide, that will be used in this class.

Tutorial Structure

This tutorial has 2 parts. The parts are very different in size and complexity and contain alternative options for students with prior knowledge of some of the Learning Objectives.

  1. Part 1 is required.
  2. Part 2: Either Option I or Option II is required
    1. Option I - HTML, CSS and Event Handling:   This option is for students without experience programming in HTML5, CSS and a good understanding of event handling in HTML+JavaScript projects.
    2. Option II - Prior Experience in HTML, CSS and Event Handling
      This option is for students who already have the experience described above.
The with the above options, the possible combinations and their maximum points are shown in table Rubric Awarded Points

Part 1: Git Repo Setup

Your working directory structure and your git repository structure must be exactly as described below.

  1. Exercise: [Create Remote Repo]
    Create new remote repo on cci-git called, Create a new remote repo on cci-git called, using the procedures of GT: Appendix Basic Git Operations.
  2. Exercise: [Clone Repo]
    Clone your repo, enter the created directory and fork the starter code.  
    lucretius@monad42 ~/ITCS_6120/6120 git clone git clone https://Your UserID:Your PAT@cci-git.charlotte.edu/your_user_id/.git Cloning into 'html-css-event-tutorial'
    [...]
     cd lucretius@monad42 ~/ITCS_6120/6120
  3. Exercise: [Fork] Next, retrieve the skeleton code:
    (The mechanics below are common git technique called 'fork'ing).
     
    lucretius@CCIWD-435B-1 ~/ITCS_/ git remote add upstream https://your_user_id:your_PAT @cci-git.charlotte.edu/uncc_graphics_teaching/html-css-event-tutorial.git [... the above connects to the original 'upstream' remote, to which you have read-only access ...]
    lucretius@CCIWD-435B-1 ~/ITCS_/ git pull upstream main remote: Counting objects: 30, done.
    remote: Compressing objects: 100% (28/28), done.
    remote: Total 30 (delta 11), reused 0 (delta 0)
    [... additional output will appear ... ]
     git push --set-upstream origin main Enumerating objects: 9, done.
    Counting objects: 100% (9/9), done.
    [... additional output will appear ... ]

  4. Examine the contents of the above directory. It contains starter and skeleton files for the exercises you will be completing.

Git Commit Protocol and Rubric

In the instructions in this document, you are required to make git commits at specific points using specific commit messages.   This is a required part of the assignment.   It also develops good git practices.

  1. For a given exercise that includes specific git commit instructions, if there is not at least 1 git commit message associated with that exercise, 1 point will be subtracted for "poor software development practices" for that exercise. 

    The student’s commit message need not be a verbatim copy of the commit message given in the exercise’s instructions, but it should be very similar.    (But you can simply cut & paste the messages, so they really should be verbatim).

    The grader will allow for a few of the required commit messages to be missing without incurring a penalty.

    Note: If you accidentally commit with a missing or bad message, you can correct the message using git commit –amend option (see https://git-scm.com/book/en/v2/Git-Basics-Undoing-Things)

    Finally, extra commit's are perfectly fine and common practice, such for fixing other types of coding mistakes, etc.
  2. For exercises that require students modify code already given to you, if only the original example code is committed with no change & there is no evidence from the student (documentation, notes, etc) of trying to solve the exercise, then minimal points will be awarded for that exercise.

The complete grading Rubric is available on Canvas.

Part 2: Option I - HTML, CSS and Event Handling

This section covers Option I for Part 2. Review the Tutorial Structure regarding the requirements for completing either Option I or Option II of Part 2.

Part 2: Option I is series of readings and exercises from the MDN doc's on HTML, CSS and event handling.

Introduction to HTML

This assignment will guide you through reading a small subset of this documentation.

The assignment instructions below tell you:

  • What sections of the MDN webpages to read
  • Which of the MDN webpages "Active Learning" exercises to perform with MDN builtin interactive editors.
  • Which of the MDN "Active Learning" exercises to perform in separate files that you commit to your git repository.

Getting Started with HTML

Read just the first paragraph of Introduction to HTML

Next go to Getting Started with HTML and read through the MDN sections in the list below and performing the exercises in the list below.

  1. Getting Started with HTML - read through up to and including the first sub-section What is HTML

  2. Anatomy of an HTML element  - read this entire sub-section, pausing to do the MDN "Active Learning" exercises listed below:
    1. Exercise: Do "Active learning: Adding attributes to an element"

      This exercise does not require you add anything to your Git repo.

  3. Attributes- read this entire sub-section and do the MDN "Active Learning" exercises listed below:
    1. Exercise: Do "Active learning: Adding attributes to an element"

      This exercise does not require you add anything to your Git repo.

  4. Anatomy of a HTML document - read all. However when you reach each "Active Learning" exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [anatomy-of-HTML]: Do "Active learning: Adding some features to an HTML document" with the modifications described below.

      1. Use VS Code to perform the entire exercise in a separate file, index.html, as suggested in the "Active Learning" instructions. Place the files the subdirectory ~/ITCS_6120/6120/anatomy-of-html/
      2. git commit -m "-exercise anatomy-of-HTML" .
  5. Entity references: Including special characters in HTML - read all.

  6. HTML comments - read all.

  7. Summary - read all.

What’s in the head? Metadata in HTML

Goto the next MDN subsection.   There is a "Next" button at the top and bottom of the page that you just read.  

  1. What’s in the head? Metadata in HTML - read up to and including the first sub-section What is the HTML head?

  2. Adding a title - Read all, but when you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [adding-a-title]: Do "Active learning: Inspecting a simple example" with the modifications described below.
      1. Use VS Code to perform the entire exercise in a separates files as indicated in the "Active Learning" instructions. Place the files the subdirectory ~/ITCS_6120/6120/adding-a-title/
      2. git commit -m "-exercise adding-a-title" .
  3. Metadata: the <meta> element - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [char-encoding]: Do "Active learning: Experiment with character encoding" with the modifications described below.

      Use VS Code to perform the entire exercise by copying editing your files from the previous exercise into the subdirectory below and git commit:
      1. Use VS Code to perform the entire exercise by copying and editing your files from the previous exercise into the subdirectory ~/ITCS_6120/6120/char-encoding/
      2. git commit -m "-exercise char-encoding" .
    2. Exercise [search-engines]: Do "Active learning: The description's use in search engines" .

      This exercise does not require you add anything to your Git repo.
  4. Adding custom icons to your site - Read all.
  5. Applying CSS and JavaScript to HTML - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [applying-CSS]: Do "Active learning: applying CSS and JavaScript to a page" with the modifications described below.
      1. Use VS Code to perform the entire exercise in separate files, meta-example.html, etc., as suggested in the Active Learning instructions. Place the files in the subdirectory, ~/ITCS_6120/6120/applying-css/
      2. git commit -m "-exercise applying-CSS" .
  6. Setting the primary language of the document - read all.

HTML text fundamentals

Goto the next MDN page, HTML text fundamentals. 

  1. The basics: Headings and Paragraphs - Read all of this sub-section.

    1. Exercise:  Do "Active learning: Giving our content structure  
      This exercise does not require you add anything to your Git repo.

  2.  Lists - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise:  Do "Active learning: Marking up an unordered list"
       
      This exercise does not require you add anything to your Git repo.

    2. Exercise:  Do "Active learning: Marking up an ordered list"
       
      This exercise does not require you add anything to your Git repo.

    3. Exercise [marking-up-an-recipe]: Do "Active learning: Marking up our recipe page" with the modifications described below.


      1. Use VS Code to perform the entire exercise in separate files as suggested in the Active Learning instructions. Place the files in the subdirectory, ~/ITCS_6120/6120/marking-up-a-recipe/
      2. git commit -m "-exercise marking-up-a-recipe" .
  3. Emphasis and importance - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise:  Do "Active learning: Let's be important!"

      This exercise does not require you add anything to your Git repo.

Test Your Skills

Goto MDN article Test your skills!.
  1. Exercise: [Test your skills!] - Read all. When you reach Task 1,2 and 3, perform the task using VS Code with separate files in directories indicated below.
    1. Exercise:  Task 1
      1. Instead of updating the 'live code', download the starting point files for Task 1 and perform Task 1 in the directory, ~/ITCS_6120/6120/test-your-skills-task-1/
      2. git commit -m "-exercise test-your-skills-task-1" .
    2. Exercise:  Task 2
      1. Instead of updating the 'live code', download the starting point files for Task 2 and perform Task 2 in the directory, ~/ITCS_6120/6120/test-your-skills-task-2/
      2. git commit -m "-exercise test-your-skills-task-2" .
    3. Exercise:  Task 3

      1. Instead of updating the live code, follow the alternative directions and download the starting point files for Task 3 in the directory, ~/ITCS_6120/6120/test-your-skills-task-3/
      2. git commit -m "-exercise test-your-skills-task-3" .

CSS – Styling the Web

Next, you will read and work through sub-sections of the MDN topic CSS — Styling the Web.

  1. CSS — Styling the Web - read all.

CSS first steps

  1. CSS first steps overview. -  Read up to and including the section "Prerequisites."   Skip the rest of the sub-section.
  2. What_is_CSS - Read up to and including "CSS Modules".   Skip the rest of the sub-section.
  3. Getting started with CSS :: Starting with some HTML - read all.   When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below: 
    1. Exercise [started-with-CSS]: As described in this MDN section, created the file, index.html
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120
         $ mkdir started-with-CSS
      2. Move the file to the above directory.
        1. git commit -m "-exercise started-with-CSS" .
  4. Adding_css_to_our_document - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [add-CCS]: As described in this MDN section, create various the files, style.css, etc. Place them in your  started-with-CSS directory, modifying them as necessary.
      1. git commit -m "-exercise add-CCS" .
  5. Styling_html_elements - read all.   When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise:  Perform described exercise on your local file instead of using the embedded interactive editor

      1. git commit -m "-exercise Styling HTML elements" .
  6. Changing the default behavior of elements - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [changing-behavior]: As described in this MDN section, modify your previously created the files .
      1. Commit the changes | git commit -m "-exercise changing-behavior" .
  7. Adding a class - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [adding-a-class]: As described in this MDN section, modify your previously created the files
      1. Commit the changes | git commit -m "-exercise adding-a-class" .
  8. Styling things based on their location in a document- read all.   When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [styling-on-location]: As described in this MDN section, modify your previously created the files that you placed your sub-directory started-with-CSS.
      1. Commit the changes | git commit -m "-exercise styling-on-location" .

Skip the rest of the "Getting started with CSS" section.

How CSS is structured

  1. Applying CSS to your HTML - read all of this first sub-section of How_CSS_is_structured
  2. Playing with the CSS in this article - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [playing-with-CSS]: As described in this MDN section, create the files, index.html, etc.
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120
         $ mkdir CSS-structure
      2. Move the files to the above directory.

        1. git commit -m "-exercise playing-with-CSS" .

  3. Selectors - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [selectors]: As described in this MDN section modify the files in your CSS-structure sub-directory.

      1. git commit -m "-exercise selectors" .

  4. Properties and values - read only up but not including "Functions". When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [properties]: As described in this MDN section modify the files in your CSS-structure sub-directory.

      1. git commit -m "-exercise properties" .
       
  5. @rules and Shorthands - skip both these sections.
  6. Comments - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [comments]: As described in this MDN section modify the files in your CSS-structure sub-directory.

      1. git commit -m "-exercise comments" .

Skip the rest of "How CSS is structured".

How CSS works (the DOM)

  1. How does CSS actually work? - read all of this first sub-section of How_CSS_works
  2. About the DOM - read all.
  3. A real DOM representation -  read all. 
  4. Applying CSS to the DOM - read all. 
  5. What happens if a browser encounters CSS it doesn't understand? - read all.

The box model

  1. Block and inline boxes - read all of this first sub-section of.The_box_model
  2. Outer_display_type  - read all.
  3. Inner_display_type  - read all.
  4. Examples_of_different_display_types - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [playing-box]:

      This MDN section provides an interactive example that can be done directly within the webpage's embedded interactive editor.

      After you accomplish the task using the embedded interactive editor, copy your solution code into in a local file as described next.
    2. Create a sub-directory:
      lucretius@monad42 ~/ITCS_6120/6120
       $ mkdir different-display-types
    3. Inside the above directory, create a minimal working HTML file, index.html, and then insert your solution code that you developed in the embedded interactive editor into index.html.
    4. git commit -m "-exercise different-display-types" .
  5. What is the CSS box model? - read all.
  6. Playing_with_box_models - read up to but not including "Use browser DevTools to view the box model". When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [playing-box]:

      This MDN section provides an interactive example that can be done directly within the webpage's embedded interactive editor.

      After you accomplish the task using the embedded interactive editor, copy your solution code into in a local file as described next.
    2. Create a sub-directory:
      lucretius@monad42 ~/ITCS_6120/6120
       $ mkdir playing-with-box-models
    3. Inside the above directory, create a minimal working HTML file, index.html, and then insert your solution code that you developed in the embedded interactive editor into index.html.
    4. git commit -m "-exercise playing-with-box-models" .

Event Programming (and a teeny bit of JavaScript)

This section guides you through reading about event handling, but first it covers a teeny bit of JavaScript so as to better understand the event handling tutorial.   (A latter optional tutorial in this course will cover JavaScript in depth).

What is JavaScript

Goto topic What is JavaScript?

  1. A high-level definition - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [javascript-label]:
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120
         $ mkdir javascript-label
      2. Inside that sub-directory download and save the example code (the link is given at the end the "A high-level definition" section).

        Verify the code displays correctly in Chrome.
      3. Using a text editor, change the code to display 'First Player' instead of 'Player 1'.   
        Modify the background color of the paragraph style.   Save your changes and verify the page appears correctly in Chrome.
      4. git commit -m "-exercise javascript-label" .
  2. So what can it really do? - read all.
    1. Exercise [third-party-apis]:
      1. After reading, online find any Third party API not mentioned in the text.   Write the API name and the web address in your Questions.txt file.   Put the text "JS 1)" on the line above your answer in the file.

      2. Git commit the file(s) with message "-exercise third-party-apis"
  3. What is JavaScript doing on your page?- read all
    1. Exercise [what-is-JS]:
      1. After reading, research on-line to find out how two browsers (say Chrome and one other browser of your choice) handles JavaScript.  Is it interpreted?  Compiled?  Some combination of both?

        Write your answers in your Questions.txt file.   Put the text "JS 2)" on the line above your answer in the file.

      2. git commit -m "-exercise what is JS doing" .
  4. How do you add JavaScript to your page? - read up to but not including "Script loading strategies".  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    While reading do the following exercises:
    1. Exercise [internal-js]: Do the exercise in sub-section "Internal JavaScript
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120
         $ mkdir internal-javascript
      2. Move all the code for the MDN exercise into the above sub-directory.

        Verify it displays correctly in Chrome.
      3. git commit -m "-exercise internal-javascript" .

    2. Exercise [external-js]: Do the exercise in sub-section "External JavaScript
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120
         $ mkdir external-javascript
      2. Move all the code for the MDN exercise into the above sub-directory.

        Verify it displays correctly in Chrome.
      3. Git commit the file(s) with message "-exercise external-javascript"
  5. Comments - read all.
  6. Summary - read all.

This introduction to JavaScript should be enough in order to complete the rest of this tutorial.   A later tutorial in the course will cover JavaScript in greater details.

Introduction to Events

Goto the sub-topic Introduction to events.

  1. What is an event? - read all.

  2. Using addEventListener() - The exercises in this MDN section are spread over multiple MDN sub-sections.  To clarify how you should submit these activities to your git repo, the sub-sections are listed as separate numbered steps below.   Start by preparing a directory as follows
    1. Create a sub-directory:
      lucretius@monad42 ~/ITCS_6120/6120
       $ mkdir random-color-addeventlistener
    2. The intro to Using addEventListener() discusses downloading example files.   Place them in the above directory. 

      1. Git commit with message "-exercise:start random-color-addeventlistener"
  3. Using addEventListener() : Listening for other events - read and perform the MDN exercises on the files in your random-color-addeventlistener 
    1. Exercise:   Git commit with message "-exercise:Listening for other events"
  4. Using addEventListener() : Removing listeners - read.
    This exercise does not require you add anything to your Git repo.
  5. Using addEventListener() : Adding multiple listeners for a single event - read.

    1. Exercise [multiple-listeners]:

      Add additional listeners to some of the code in your random-color-addeventlistener directory.   Make the additional listeners do something that is visible in the browser.

      1. Git commit with message "-exercise: multiple listeners"
  6. Using addEventListener() : Adding multiple listeners for a single event - read.
  7. Other event listener mechanisms - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below
    1. Exercise [other-mechanisms]:     

      Modify some of the code in your random-color-addeventlistener directory to use event handler properties.

      1. Git commit with message "-exercise: other-mechanisms"
  8. Event_Objects - Read all and download the source code that this MDN section refers to.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [event-object]:    

      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120
         $ mkdir event-object
      2. Perform the MDN exercises in the sub-section
      3. git commit -m "-exercise: event-object" .
      4. Motify the code to show a border of a few pixels on the button and also randomly change the border color on each button click.

      5. git commit -m "-playing :)" .
  9. Extra_properties_of_event_objects - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [extra properties]:  Experiment with the embedded interactive editor exercise
      This exercise does not require you add anything to your Git repo.
    2. Exercise [key events]:

      Modify some of the code in your random-color-addeventlistener directory to respond to 3 different key events.   Make each event handler trigger some visible change on the page.

      1. git commit -m "-exercise: key_events" .
  10. Preventing_default_behavior - Download the source code that this MDN section refers to.  As you read and you reach each active learning exercises perform the exercises on the downloaded files and inside the directory described below::
    1. Exercise: [preventing-defaults]
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120
         $ mkdir preventing-defaults
      2. Put all the MDN's sections downloaded files in this directory and modified them as suggested by the MDN docs..
      3. Git commit with message:  "-exercise: preventing-defaults"

  11. Event_Bubbling
    1. Exercise: [parent-element]  Read and do the exercise in MDN sub-section Setting_a_listener_on_a_parent_element

      This exercise does not require you add anything to your Git repo.
    2. Exercise: [bubbling-example  Read and do the exercise in MDN sub-section Bubbling_example

      This exercise does not require you add anything to your Git repo.
    3. Exercise: [video-player]  Read and do the exercise in MDN sub-section Video_player_example. Download the code from this link, video-player.html 2/15/2023: Simplified exercise by giving .html file , and organize the file(s) as follows:
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120
         $ mkdir video-player
      2. Put all the file you created in the above directory and verify result web page works as expected in Chrome.
      3. git commit -m "-exercise: video-player" .
    4. Exercise: [stop-propagation]  Read and do the exercise in MDN sub-section Fixing_the_problem_with_stop_propagation. Apply the discussed changes to your code in your video-player directory.

      1. git commit -m "-exercise: fixed propagation problem" .
    5. Exercise: [event-capture]  Read and do the exercise in MDN sub-section Event_capture.

      This exercise does not require you add anything to your Git repo.
  12. Event_Delegation - Download the source code that this MDN section refers to. As you read each active learning exercises perform the exercises on the downloaded files and inside the directory described below:
    1. Exercise: [event-delegation]
      1. Create a directory
        lucretius@monad42 ~/ITCS_6120/6120
         $ mkdir event-delegation
      2. Place the downloaded files in this directory and perform any modifications described in the MDN docs.
      3. git commit -m "-exercise: event-capture" .
      4. Modify the code to have 64 tiles (8 x 8) with each one 50px in height.
      5. git commit -m "-changed to 8 x 8 tiles" .

Part 2: Option II - Prior Experience in HTML, CSS and Event Handling

This section covers Option II for Part 2. Review the Tutorial Structure regarding the requirements for completing either Option I or Option II of Part 2.

For Part 2: Option II, you must submit a brief description of your prior experience in HTML, CSS and event handling as described below.

  1. lucretius@monad42 ~/ITCS_course-number/data-project-name [Use notepad or your favorite editor to edit the top-level README.md file]
    notepad README.md
  2. In the README.md file after the line "### HTML and CSS Experience":
    1. List all courses you already took or are currently taking where you learned HTML5, CSS, and Event Handling.

    2. List any other experience you had outside of a class work where you learned HTML5, CSS, and Event Handling.
  3. git commit -m '-add Prior Experience in HTML, CSS and Event Handling' .

Appendix I: Rubric

Combination Max PointsAwarded Points
0.0

Section Item Category Link Fraction Points | Award

References

  1. "Forking Workflow", https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow, Access September 2023.

Academic Integrity

See the course syllabus regarding partial credit and the late penalty policy.  

This is an individual student project.   Each student should be writing and submitting their own code. 

Students can discuss general aspects of the various API's and tools with each other and this is strongly encouraged.   Discussing algorithm's at the pseudo-code level is also acceptable.  

However, it is not permissible:

  • to copy code from other students
  • copy code implementing entire functions or entire algorithms from Internet resources other than the resources explicitly referenced in this tutorial
  • to copy code from other students from prior semesters
  • translate an algorithm found on the Internet implemented in programming X and re-write it in language Y.
If you have questions about whether using a particular resource is acceptable or not, email the TA and/or Professor.