=====
CS 328 - Week 3 Lecture 1 - 2026-02-02
=====

TODAY WE WILL:
*   announcements
*   CLIENT TIER: a few HTML basics
*   CLIENT TIER: intro to HTML tables
*   [if time!!] start intro to HTML forms
*   prep for next class

=====
*   should be working on Homework 2!
    *   deadline: 11:59 pm on Friday, February 6
    *   must get at-least-1st-submissions in by then

*   should be reading/working through activities in
    zyBooks text Chapters 1 AND 2
    ("HTML Fundamentals" and "More HTML")
    *   we'll be using this material this week and beyond
        (although for full credit for the activities,
	they need to be completed by 11:59 pm Friday, February 27,
	the Friday before Exam 1)

*   CAN still register for CS & SE VIRTUAL INTERNSHIP and JOB FAIR
    through 11:59 pm TONIGHT, MONDAY, FEBRUARY 2nd!
    *   csdept should have sent an email about this extension
        today

    *   OK to upload a blank PDF for the resume asked for
        if you don't have a resume yet

    *   1st hour: presentation part (before the interviews)

=====
HTML special characters
=====
*   for example: what if you want to type a < or a >?

    a general pattern of:
    &someth;
    ...can be used for many special characters

    < can be used for <
    > can be used for >

    & can be used for &

*   you (should be able to) get any Unicode character
    with the syntax:

    &#UnicodeNumber;

    ‽   <!-- Interrobang, according to Stepp, p. 38 -->

=====
a little more about img element
=====
*   inline
*   void element

*   two required attributes:
    src - the absolute or relative URL for the desired image
    
    alt - alternative text to display if the image cannot be loaded
    *   why? for screen readers, for accessibility,
        so the page still makes sense if the image cannot be loaded,
	for applications that are set to be text-only, etc.

*   width and height attributes are optional, but:
    *   if you use them, give them in pixels
        (pixel: picture element - 1 dot in the screen)
    *   it is NOT recommended to use them to RESIZE an
        image -- now use CSS for that instead!

    *   if you include - with the image's actual size in
        pixels -- (which is not required...)
        it can be useful info for the browser,
	telling it how much visual space to "set aside" in the
	current page while it downloads the image...

    *   most browsers should understand at least
        the following image formats:
        GIF, JPG, PNG, SVG

=====
quick intro to table element
=====
*   block element
*   represents tabular data
*   a table element can have a caption element as its first
    child
    *   caption has content, it should be a caption for the table
    *   CS 328 style: a caption is required, so a screenreader gets
        some information about the table's purpose;
	
*   a table element can contain rows --

    tr - table row - contents are the row's contents

    *   a tr's contents could be:
        td - table data element - a single cell within a row
	th - table header element - a header cell
	*   CS 328 class style: a th element should have a scope
	    attribute, scope="row" if it is a row's header,
	               scope="col" if it is a column's header

=====
*   are using HTTPS/HTTP, HyperText Transfer Protocol [Secure], here;
    *   the heart of the web!

    *   Very simple request/response protocol

    *   Web client sends [encrypted] request message, 
        web server replies with [encrypted] response message

    *   STATELESS -- each request/response pair is INDEPENDENT!

*   so, consider this with HTML forms involved;

*   [summarizing/adapting figure from Shishir Gundavaram,
     "CGI Programming on the WWW", O'Reilly]

    *   user enters a URL for an HTML page on the web
        into a browser:

                           URL
    browser/client tier --------> web server/application tier

    *   the web server on the application tier retrieves that
        HTML document including a form, and sends it to the
        browser on the client tier, and the browser executes
        that HTML, displaying the document and the form:

                           HTML
    browser/client tier <-------- web server/application tier

    *   say the user fills out the form, and clicks its submit
        button; browser packages up the form data and sends it
        AS PART of this request:

                        form data
    browser/client tier ---------> web server/application tier

    *   the web server on the application tier may send this
        request-including-form-data to another "thing" on the
        application tier to process it --
	
	(e.g., a PHP Preprocessor, or a Java Servlet Engine,
        or server-side JavaScript processor, or other 
        Common Gateway Interface (CGI) application on the 
        application tier)

        *   this PHP Preprocessor/Java Servlet Engine/
            server-side JavaScript processor/other CGI application
	    MIGHT make request(s) from the DATA TIER to craft
            its response!

        THEN it sends its completed RESPONSE to the web server,
        to send back to the browser:

                        response/output
    browser/client tier<-------------- web server/application tier

        ... and the browser executes that response,
        displaying the results;