=====
CS 328 - Week 2 Lecture 1 - 2026-01-26
=====
TODAY WE WILL:
* announcements
* parts of an absolute URL
* CLIENT TIER: intro to strict-style HTML
* prep for next class
=====
* should be working on Homework 1!
* deadline: 11:59 pm on Friday, January 30
* must get at-least-1st-submissions in by then
* should be working on reading and activities
in zyBooks Chapter 1
* following the link from the Canvas course
site, under Modules
=====
* SH 108's Emergency Assembly Point, Mill St. Lawn,
is on Plaza Avenue just before the Library Circle,
(on the other side of Plaza Avenue from the Humboldt
Library parking lot)
* see screenshot of zoomed-in part of campus map
posted with these notes
* Also posted link to Professor Emeritus Lori
Dengler's excellent open letter to Humboldt
President Carvajal regarding emergency
preparedness
=====
* First CS Club meeting of the semester
* Wednesday, January 28
* 5:00 - 6:30 pm
* BSS 166
* Trivia! (with food!)
* Data Science Club
* meeting Fridays
* 3:00 - 4:00 pm
* Theatre Arts/TA 114
====
(after-class) tip!
====
* tar tvf your-submitted-thing.tar.gz
...will list the contents of the g-zipped tar archive file
you specify
* (you can cd to the directory named submitted that
is created/added to by ~st10/328submit and then
run this on a submitted g-zipped tar archive file
to see which files were submitted in that
submission)
======
Absolute URLs - Absolute Uniform Resource Locators
======
* an absolute URL should should uniquely locate a resource on the web
* starts with a protocol, followed by ://
https://
http://
sftp://
etc.
* after the :// should generally be your web server
for example
https://nrs-projects.humboldt.edu
* after that, what you put can be very dependent on
the web server involved;
nrs-projects expects, after the server name and /,
a tilde (~) followed by the user's login name
and nrs-projects looks in that user's public_html
directory goes to that user's public_html directory --
for example:
https://nrs-projects.humboldt.edu/~st10
...and it treats whatever follows the tilde and username
as a pathname relative to that user's public_html
directory;
(IF the item at the end of the path is a directory?
...web server looks for a file named index.html or index.php
in that directory)
(IF item at the end of the path is a file?
...web server looks for that file in that directory)
* SEE ALSO:
* Week 1 Lab Exercise's handout:
"Setting up your nrs-projects web directory",
Section:
"MORE BACKGROUND - Fun facts, part 2 (for your information)
...also posted along with these notes
* Its earlier sections discuss the needed PERMISSIONS for
nrs-projects' web server to be able to access
browser-requested files
* Summary: for nrs-projects' web server to reach a file:
* it MUST be in your public_html directory
* EVERY directory in its path (even your home directory)
must be at least world-executable) --
preferably with permissions 711, drwx--x--x
* the file itself must be world-readable --
preferably with permissions 644, -rw-r--r--
==============
* Security note:
==============
Giving a directory the permissions 711, drwx--x--x,
allows other users, including nrs-projects' web server,
to access world-readable files within ONLY if they specify
those files' names --
they cannot use ls with no arguments to list the names of
files in such a directory, for example.
=====
intro to strict-style HTML
=====
* HTML - HyperText Markup Language
* strict-style?
basically, where you follow XML syntax rules in your HTML
* (XML - eXtensible Markup Language)
* also required for CS 328: semantic HTML
* where the HTML element you use is based
on the semantic meaning of its content
* because, from its beginning, HTML's purpose has been
to structure content, at a higher and abstract level
(rather than to specify formatting)
* that is, based on the meaning of the content, NOT how a
particular element looks on the screen of your
favorite or a typical browser or application;
* in an interactive application that involves a database
that happens to use an n-tier software architecture,
in which the client tier includes a web browser providing the
presentation components,
* this HTML is EXECUTING on the client tier
(the browser on the client tier is executing the
HTML)
* in this particular software architecture, we are using
HTML to STRUCTURE our client-tier CONTENT
* and in CS 328, doing so using so-called semantic HTML!
=====
some HTML terminology
=====
* so: we said HTML stands for
HyperText Markup Language;
* markup language? you add additional stuff TO the content;
in the case of HTML, this additional stuff
is intended to describe the content's STRUCTURE;
* what stuff do you add in HTML? TAGS,
that SURROUND content;
* generally, in strict-style HTML, you have
a start/opening tag and an end/closing tag,
with user content within.
* each tag is surrounded by angle brackets, < >
| content
v
<partic_tag ...> ... </partic_tag>
^ ^
| |
opening tag closing tag
* the opening tag, content, and closing tag
together are called an ELEMENT
* the name of the element is at the beginning of
its opening tag
* the closing tag has / then the name of the
element
* and the element's content is what is in between
the opening and closing tags
* in strict-style HTML:
* write the name of the element in all-lowercase
* if an element is able to have content,
you are required to put an opening and a closing
tag
* (wait, there are some types of HTML elements that
are NOT allowed to have content?
Yup - see the section on void elements, below)
=====
HTML attributes
=====
* there can be more in an opening tag, depending on the
element;
in strict-style HTML, depending on the element,
within an element's opening tag you can have
zero or more attributes, each with a name and a value
following the syntax:
atrib_name="attrib_value"
^ this is called an attribute, and includes the attribute's name and value
* in strict-style HTML, every attribute has a value,
and that atribute value must be quoted (double-quotes
or single-quotes are fine)
example: FIGURE 2.2 from STEPP et al, "Web Programming Step-by-Step", 2nd edition:
<p class="western">
I think www stands for wild wild west.
</p>
* the above p element has an attribute class="western", with attribute name
class and attribute value western
<p></p>
* the above p element happens to not have any content
=====
HTML void elements
=====
* in HTML, there are some so-called void elements --
that CANNOT have content --
and in strict-style HTML, you write these so their
tags are BOTH opening and closing tags --
its tag starts with the void element's name, and ends with />,
and may or may not have attributes:
<void_elem_name attrib="val" attrib="val" ... />
* for example, HTML's img element is a void element,
and in strict-style an example could look like this:
<img src="bookworm.png" alt="simple green cartoon worm" />
=====
* oh, and HTML has COMMENTS:
<!-- comment content
goes
here -->
=====
BASIC HTML DOCUMENT STRUCTURE
=====
* basic structure of an HTML document:
* a document type definition, followed by
* an html element (an element with the name html)
* that *contains* a head element (an element with the name
head)
* *followed* by a body element (an element with tne name
body)
* HTML is very hierarchical -- can think of it as a tree
* we say the html element is this document's root element
* we say that an element within another element is a
child element
* so we say that the html element has two children
elements, a head element and a body element
===== so...
<!DOCTYPE html> <!-- this is a document type definition,
and is NOT considered an element
(here, this is the document type definition
for an HTML document!) -->
<html> <!-- considered the ROOT element of an HTML document,
and all content should be WITHIN it -->
<head> <!-- contains general info ABOUT and FOR the document -->
</head>
<body> <!-- contains the document's content -->
</body>
</html>
* see: html-0.html, posted along with these notes;
it also includes an example of a p element, intended for paragraph
content, within its body element.