=====
CS 328 - Week 2 Lecture 1 - 2025-01-27
=====
=====
TODAY WE WILL:
=====
* announcements
* CLIENT TIER: intro to HTML
* prep for next class
=====
* should be working on Homework 1!
* get at-least-1st-submissions in by 11:59 pm on Friday, Jan. 31
* should start reading zyBooks Chapter 1! <-- now linked from
Canvas!
====
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 a submitted directory created by
~st10/328submit and then run this on one of your
submitted g-zipped tar archive files to see which
files were submitted in that submission)
====
intro to HTML
====
* HTML - HyperText Markup Language
* purpose: to structure content, at a higher and abstract level
* in an n-tier application
(that is, in an interactive application that involves a database
that happens to use an n-tier software architecture)
in which the client tier includes a 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 set-up, we are using
HTML to STRUCTURE our client-tier CONTENT
* and in CS 328, we will write so-called semantic HTML!
* semantic HTML: the idea that you choose elements based on what
the CONTENT is, NOT how the element LOOKS on the page given
your favorite or a typical browser;
* and, in CS 328, we'll focus on so-called "strict-style" HTML
* basically: follows the syntax rules of XML,
eXtensible Markup Language
=====
* so: we said HTML stands for
HyperText Markup Language;
* markup language? you add additional stuff TO the content,
to describe its STRUCTURE;
* what stuff do you add? TAGS,
that SURROUND content
* in HTML, each tag is surrounded by < > angle brackets
* an HTML ELEMENT consists of a start tag,
the content within, and its end tag
* (although -- may also call them
a starting tag and an ending tag,
or an opening tag and a closing tag...!)
* in HTML, you write the type of the element in the start tag,
and a / followed by the type of the element in the
end tag
<desired-element> ... </desired-element>
^ above is an element!
* ...and the content is what is in between the start and
end tags
* in strict-style HTML:
* write the type of element in all-lowercase
* if an element can (is ABLE to have) content,
you are required to put a start AND an end 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 has comments!
<!-- comment
goes
here -->
=====
* HTML start tags CAN contain attributes!
attrib-name="attrib-value"
IN strict-style HTML, NOTE that:
* every attribute has a value!
* and that value is written in quotes
(I use double-quotes, but my understanding is that
single-quotes are also acceptable in strict-style,
and I'll accept single-quotes as class style for this also)
=====
* example:
* a p element represents a paragraph of content
(adapted from Figure 2.2 in Stepp et al, "Web Programming Step-by-Step",
2nd edition)
<p class="western"> I think www stands for wild wild west </p>
^^^^^^^^^ this p element's content ^^^^
^^^^^^^^^^^^^^ a p element ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
* <p class="western"> is this p element's start tag
* </p> is this p element's end tag
* this p element has one attribute, class
* the value of this p element's attribute, class, is "western"
=====
* another example:
* a textarea element represents a text area component in a form,
allowing a user to enter multiple lines of text
* here is an example of a textarea element:
<textarea name="ideas" rows="5" cols="20">
</textarea>
* it (strictly speaking) has content: the newline
character and blanks between its start tag and end tag
* <textarea name="ideas" rows="5" cols="20">
is this textarea element's start tag
* </textarea> is this textarea element's end tag
* this textarea element has three attributes,
name, rows, and cols
* its name attribute's value is "ideas",
* its rows attribute's value is "5",
* its cols attribute's value is "20"
=====
void elements
=====
* there are some HTML elements that cannot EVER have content --
they are called void elements.
* but -- strict-style HTML requires all elements to have a start
and an end tag! How handle that?
* ***using strict-style***, you write a void element so its tag
serves as BOTH a start and an end tag --
<void-element />
* example:
a line break element, br, represents a content-significant
line break (for example, ending a line in a poem)
Using strict-style, a br element is written as:
<br />
* example:
an image element, img, is a void element (!!)
with some mandatory attributes:
<img src="peter.jpg" alt="Peter Rabbit" />
* src attribute's value is an absolute URL to
the desired image, or a relative URL (relative to
the containing document) -- this is a required
attribute for an img element!
* here, the browser would request a file named
peter.jpg from the same directory as the containing
HTML file
* alt attribute's value is alt text describing the
image -- this would be used by a screen reader
to describe the image that would appear here,
or will be displayed instead of this image if
the image cannot be successfully obtained
* it is a CS 328 class style standard that ALL img
elements have a non-empty alt attribute
describing the image
(in a quick glance at the living HTML standard,
at:
https://html.spec.whatwg.org/#alt
it says:
"Except where otherwise specified, the alt attribute
must be specified and its value must not be empty; the
value must be an appropriate replacement for the
image."
* it goes into more detail from there, if you are
interested in reading more about this
* aside: an advantage of strict-style HTML:
consider: if you are writing code to, for example, extract the content
from an HTML document, do you see how strict-style can make that
much easier/less error-prone?
* you can search for <blah> and </blah> with confidence, and
grab everything in-between
* whenever you see <blah />, your program knows there is no content
to consider
* want to know what void elements are in a document?
...you can search for anything that starts with < and ends
with />
=====
* BASIC HTML DOCUMENT STRUCTURE
* a document type definition, followed by
* an html element
* that *contains* a head element
* *followed* by a body element
* 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
=====
<!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 posted html-0.html,
as well as posted 328lect02-1.html, which adds a few
attributes we'll be using to allow for at-least-partial
strict-style validation;
=====
* it is useful to know that some of the elements that can be
in the body element can be categorized as block elements
or inline elements
* block element - significant element in the document -
can contain a large amount of content potentially
spanning many lines
* inline element - represents a "smaller" element in a page,
USUALLY *must* be nested inside a block element
...we'll continue from here!