=====
CS 328 - Week 3 Lecture 1 - 2025-02-03
=====
=====
TODAY WE WILL:
=====
* announcements
* CLIENT TIER - a FEW more HTML basics
* ...and then intro HTML tables
* ...(and hopefully) start intro to HTML forms
* (no, it turns out we'll start discussion of HTML forms on Thursday)
* prep for next class
=====
* should be working on Homework 2
* at-least-1st-attempts due by 11:59 pm on Friday, February 7
* all the problems are submitted on nrs-projects
using ~st10/328submit
* submit early, submit often!
* should be reading/working through 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 28,
the Friday before Exam 1)
=====
special characters
=====
* there are HTML entities for special characters
* some "classic" examples:
< less-than character, <
> greater-than character, >
& ampersand character, &
* you can also get a Unicode character using the syntax:
&#UnicodeNum;
for example, Interrobang has Unicode number 8253, so to get this
character, I could use:
‽
=====
a little more about the img element
=====
* reminder:
* void element
* inline element
* requires a src attribute
whose value is where to get the image
* requires an alt attribute
to describe the image (in case it cannot be obtained,
or displayed, or for assistive technology, etc.)
* attributes width and height are optional,
but if given, they should be given in pixels,
and it is considered good practice that they be the image's
actual size (to give a clue to the browser how much space to leave
for the image) --
good practice is to *resize* images using CSS,
NOT using the img attributes width, height
====
a LITTLE more about URLs, absolute and relative:
====
* URL: uniform resource locator
* supposed to be unique, and link to a resource on the Internet
* absolute URL:
protocol://web_server/etc
* "pieces" separated by forward slashes! /
protocol? such as https, http, sftp, etc.
web_server? such as nrs-projects.humboldt.edu
etc? depends on the web server, how it has been set up for
users to have pages
* on nrs-projects, the user's account the resource is in
is given after the web server, preceded by a ~ (tilde)
* then, you put the relative pathname to the resource
relative to the public_html directory (but don't PUT
public_html)
* if you give a directory name, it will look for a file
named index.* in that directory, and display that if it is found
* relative URL: will be assumed to be relative to the directory
of the HTML document it is contained in;
* it should NOT start with a protocol!
* it should NOT start with a / ! <-- UNIX/Linux systems treat that as
the root of their filesystem!
* if an HTML document has:
<img src="doxy.jpg" alt="smooth-haired dachshund" />
...the web server will look for a file named doxy.jpg in the
same directory that this HTML document is in;
* if an HTML document has:
<img src="faves/pets/capy.png" alt="capybara" />
...the web server will look, starting in the directory
that this HTML document is in, for a subdirectory faves,
and for a faves' subdirectory pets,
for a file named capy.png in faves' subdirectory pets
* fun fact: .. and . appear to work in URLs...!
* . is a nickname for the current directory
* .. is a nickname for the parent directory
* if an HTML document has:
<img src="../kitty.png" alt="grey-striped cat" />
...the web server will look, starting from the directory
that this HTML document is in, in that directory's parent directory
for a file named kitty.png
=====
a - anchor element - used for hyperlinks
=====
* another inline element
* has content! this content will be linked to the specified content...
...the value of its href attribute, typically an absolute or relative
URL
* the content should describe the content being linked to
(to help with assistive technologies)
NOT so good:
<p> Click <a href="sched.html">here</a> for the conference schedule </P
* "here" is NOT very descriptive of the content being linked to!
hopefully better:
<p> <a href="sched.html>Conference schedule</a> </p>
* "Conference schedule" is more descriptive of the content being linked to;
====
table element
====
* we'll use to structure tabular data (like the result from
a select statement...!)
and NOT for formatting purposes...! <-- use CSS for formatting forms, etc.!
* table element - represents a table
what can be in a table element?
* caption element - content describes the table, and will be
displayed with the table <-- required for CS 328 class style
* tr elements - table rows - contents are a row's contents
what can be in a tr?
* td elements - table data - a cell's contents in a table
* th elements - table header - a cell containing a table header
* GOOD STYLE (and CS 328 course style standard)
a th element should include an attribute scope,
scope="row" if the table header heads a row,
scope="col" if the table header heads a column
* the default formatting of a table is without borders --
BUT we'll see there are nice formatting options for tables
using CSS!
* see the course zyBooks Chapter 2 for some of the additional options
for tables when you have cells that take up more one row or column,
etc. -- for CS 328 purposes, basic tables will be fine!
* we'll see that "building" a table element as you loop
through a query's results is quite feasible
* see table example in 328lect03-1.html