=====
CS 328 - Week 2 Lecture 2 - 2026-01-28
=====
TODAY WE WILL:
* announcements
* CLIENT TIER: more HTML basics
* 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
=====
* pair programming in CS 328 on lab exercises:
* TWO people working at ONE computer,
ONE is typing ("driving"),
ONE is suggesting what to type ("navigating")
* BOTH are looking at the shared computer screen
and discussing issues along the way
* (but, before leaving lab,
the navigator should get copies of the
files created for the lab exercise, and BOTH
the driver AND the navigator submits their
copies of the lab exercise files)
* LET ME KNOW if you have questions about this,
or if any pair-programming-related issues
come up during the semester.
=====
semantic HTML
=====
* means: you select elements based on the
meaning of their content, NOT on how the element
looks on the screen of your favorite or typical
browser
* Section 3.2.1 of the HTML Living Standard includes
a good discussion of this:
https://html.spec.whatwg.org/#semantics-2
=====
a strict-style HTML element
used for some quick HTML-terminology review...
=====
<textarea name="ideas" rows="5" cols="20">
Enter your idea here!
</textarea>
* above is a textarea element;
its opening tag is:
<textarea name="ideas" rows="5" cols="20">
it has attributes name, rows, and cols,
the value of attribute name is ideas,
the value of attribute rows is 5,
the value of attribute cols is 20,
the content of this textarea element is:
Enter your idea here!
and its closing tag is:
</textarea>
=====
* to get strict-validation:
* in the head element,
in its start tag,
INCLUDE an attribute lang="en"
AND also include an attribute
xmlns="http://www.w3.org/1999/xhtml"
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
* in the head element's content,
include an element meta with attribute charset,
and for nrs-projects a charset value of utf-8 works:
<meta charset="utf-8" />
**************************
* *** html-template.html *** is now posted,
it has these included,
you can and should start your CS 328 web pages
with this template as their basis!
* posted on the public course web site's home page,
in the References section;
* also linked from the Canvas course site, under "Modules",
in the section "Course Style and Coding Standards",
and also on the Canvas course site's home page,
in the section with the link to the public course site
* and, have also put a copy on nrs-projects in
~st10/html-template.html --
so, from a directory on nrs-projects,
you can get a copy of this in that current directory
using the command:
cp ~st10/html-template.html desired-name.html
=====
block elements and inline elements
=====
* the reality is a little more complicated now,
BUT in general, many HTML elements that can appear
within a body element can be categorized as
block or inline
* block element - generally represents a significant
element within a document, MAY contain multiple lines
of content
* frequently (but NOT always!!), a block element
can have other elements nested within it
* typically, a browser's default style is to start
a block element on its own line
* inline - represents a "smaller" element in a document;
* typically, MUST be nested inside a block element
(but block elements generally should not be
nested within an *inline* element...)
* frequently, a browser's default format for these
will not be to start them on their own line...
* When we get to CSS:
some styles work for block elements, but not for
inline elements (unless you take additional steps...)
* more on that later!
=====
p element
=====
* represents a paragraph of content
* block element
====
section element
heading elements h1, h2, h3, h4, h5, h6
====
* all block elements
* a section element is a collection of related content.
* a heading element (h1 through h6) is a heading or
subheading within your content
* which heading element should you use?
choose based on that heading content's semantics!
A main heading in a document? or a section?
...use h1!
A sub-heading of a main heading? ...use h2!
* (only use an h2 for a subheading within an h1,
only use an h3 for a sub-heading within an h2, etc.)
* the content of one of h1 through h6
is the desired heading content -- don't nest them:
<h1> The MAIN title </h1>
<p> blah blah blah </p>
<h2> Sub-section 1 </h2>
=====
hr - horizontal rule
=====
* it is a void element
<hr />
* it is a block element
meant to separate semantic parts of a document
=====
em and strong elements
=====
* inline elements
* em: content to be emphasized - default formatting
is frequently italics (but can be changed with
CSS)
* strong: content to be strongly emphasized
- default formatting is frequently bold (but can be
changed with CSS)
* if content is intended to be emphasized, use em, not the
now-discouraged i element
* if content is intended to be strongly emphasized,
use strong, not the now-discouraged b element
=====
RELATIVE URLs
...and the a element
=====
* consider: the a element, for anchor element
THIS is the basic way to link text to other
documents!
* a is an inline element
* needs an href attribute!
TWO of the possible several options for its value
are an absolute URL or a relative URL
relative URL?
IF the URL does not start with a protocol (e.g. https://)
or other special thing,
the file is assumed to be located relative to the
directory the containing page is in;
* content of an a element is a link to the value
of its href attribute;
when the href attribute's value is an absolute
or relative URL,
typically, clicking anywhere on the a element's
displayed content will cause the document at
that URL to be requested by the browser and
displayed;
<p> <a href="https://nrs-projects.humboldt.edu/~st10/s26cs328/328ex-list.php">
Spring 2026 CS 328 In-class Examples</a> </p>
* when you click anywhere on the text
Spring 2026 CS 328 In-class Examples
...the document
https://nrs-projects.humboldt.edu/~st10/s26cs328/328ex-list.php
should be requested by the browser and then displayed.
<p> Here is more information about
<a href="blobbos-info.html">blobbos</a>. </p>
* when you click anywhere on the text
blobbos
...the document blobbos-info.html that is in
the same directory as the .html file containing
these elements should be requested by the browser
and then displayed.
* IMPORTANT style/accessibility note:
choose anchor element content that DESCRIBES
the document being linked to --
<p> Please check the <a href="course-sched.html">
course schedule</a> before March 15. </p>
RATHER than:
<p> Click <a href="course-sched.html">here</a>
to check your course schedule. </p>