=====
CS 328 - Week 3 Lecture 1 - 2024-01-29
=====
=====
TODAY WE WILL
=====
* announcements
* more HTML basics
...including the concept of SEMANTIC HTML
* prep for next class
=====
* CS students are wanted for the
2024 International Mathematical Contest in Modeling!
* Humboldt has participated for 10+ years!
* students work in teams of 3-4 to model a real-world issue
* Math department covers the cost for your team
* a team with varied strengths works well!
* looks great on a resume!
* Contest this year is February 1-5
* contact: Prof. Kami Larripa, kamila.larripa@humboldt.edu
* contest site: https://www.comap.com/contests/mcm-icm
* more details and photos from past years:
https://sites.google.com/humboldt.edu/kamilalarripa/mathematical-contest-in-modeling
=====
* used for some quick HTML-terminology review...
<textarea name="ideas" rows="5" cols="20">
Enter your idea here!
</textarea>
<img src="hopper.jpg" alt="photo of Grace Hopper"
width="200" height="150" />
=====
* see the NOW-AVAILABLE CS 328 HTML template
(to frequently be used for homeworks and labs...)
* look for html-template.html on the public course web site
=====
semantic HTML
=====
* that is: HTML was designed to specify document content --
NOT how it is displayed;
"semantic HTML" is trying to actually design your HTML documents
with this in mind;
* semantic HTML:
* the idea of choosing elements based on what their
content represents (or what the element represents
in the overall content),
NOT how the element looks using the default
formatting of your favorite browser...
* this is STILL part of the HTML standard!
* Section 3.2.1 of the HTML standard, here, explains the reasoning beautifully!
https://html.spec.whatwg.org/#semantics-2
[below last accessed from the link above on 2024-01-29!]
* "Elements, attributes, and attribute values in HTML are
defined (by this specification) to have certain meanings
(semantics)."
* "For example, the ol element represents an ordered list, and
the lang attribute represents the language of the
content."
* "These definitions allow HTML processors, such as web
browsers or search engines, to present and use documents
and applications in a wide variety of contexts that the
author might not have considered."
....
* "Authors must not use elements, attributes, or attribute
values for purposes other than their appropriate intended
semantic purpose, as doing so prevents software from
correctly processing the page."
* so: class style is indeed to use semantic HTML!
=====
block elements and inline elements
=====
* [slightly "old" concept, course text still uses!]
* can often categorize elements that appear within a
body element as being block or inline
* not QUITE this "binary" in HTML5 onward -- but still
a useful categorization!
* from: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements]
"In HTML5, this binary distinction is replaced with a more
complex set of content categories. The 'block-level' category
roughly corresponds to the category of flow content in HTML5,
while 'inline' corresponds to phrasing content, but there are
additional categories."
...BUT since they still see fit to use these "older" categories in this
documentation, as does the course text, I think we will, also;
* block - e.g., p, ol, ul - generally represents a
significant element of the page -- MIGHT have content
spanning multiple lines
* can typically have appropriate elements nested within it
* typically considered to be able to be styled to
include a line break beforehand, to have vertical margins
around it, and more
* from:
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
"Generally, inline elements may contain only data and
other inline elements. You can't put block elements inside
inline elements."
====
p element - paragraph - a block element
====
* paragraphs of content..!
====
heading elements - h1, h2, h3, h4, h5, h6 - also block elements
====
* h1 - top-level heading
h2 - sub-heading
h3 - sub-sub-heading
and so on!
====
img element
====
* void element! (so, following strict-style, its tag ends with /> )
* inline, BUT is an exception to some of those rules
for inline elements...
<img src="hopper.jpg" alt="photo of Adm. Grace Hopper"
width="200" height="150" />
* src and alt attributes are required!
* src attribute values can be
relative URLs or absolute URLs <-- URL: Uniform Resource Locators
(if they don't start with http:// or https://, they're probably
relative!)
* relative will be assumed to be starting from the
directory with the containing HTML document
====
what makes HTML hyper?
LINKS!
anchor element a - inline
=====
* anchor element, a !!!
with hyper-reference attribute href
<a href="often-a-URL">Link text goes here</a>
<p>See the <a href="https://www.w3.org">W3C home page</a>. </p>
* COURSE STYLE: use link text that describes the page being
linked to -- that is:
PREFERRED:
<p>See the <a href="https://www.w3.org">W3C home page</a>. </p>
NOT preferred/try to AVOID:
<p>Interested in W3C? See <a href="https://www.w3.org">here</a>. </p>
=====
pre element
=====
* pre element -- block element
* used when the multiple spaces and line breaks that
TYPICALLY are ignored in block elements such as p
ARE significant to the content
* In a pre element, multiple spaces and line break are considered
content.
=====
code element
=====
* code element - inline element, indicates the contents
represent a fragment of computer code
=====
preferred approach for structuring blocks of computer code:
=====
* note that Stepp et. al "Web Programming: Step by Step"
suggests, then, thar for multiline code
fragments, you use:
<pre>
<code>
....
</code>
</pre>
* get it?
* pre element indicates that multiple spaces and line breaks
are considered significant content --
code element means it represents computer code (rather
than other pre-suitable content, for example poetry)
====
section element - a block element - a significant section within a document
====
* zyBooks Ch. 1 suggests it is appropriate for a section to contain
heading elements and paragraph elements
...
<body>
<h1> TOP level title </h1>
<section>
<h2> My subheading! </h2>
<p> Paragraph of content in this section! </p>
<p> Another stunning paragraph of content! </p>
</section>
<section>
<h2> another subheading! </h2>
<p> moo </p>
</section>
</body>
=====
hr element
=====
* hr - horizontal rule - horizontal line! - block element
also a void element ( <hr /> or <hr/> )
=====
em element
strong element
=====
* em - emphasize
* strong - strongly emphasize
* em and strong are BOTH inline elements
* semantic HTML:
* use em instead of the i element
* that is, when the meaning is to emphasize some content,
em is the more appropriate choice -- one might choose
to use italicized format for several purposes
(for example, for a Latin species name), and using semantic
HTML better allows for distinguishing different meanings
even when different content is eventually formatted similarly
* use strong instead of the b element
* and, when the meaning is to strongly emphasize some
content, strong is the more appropriate choice,
since one might likewise use bold format for several purposes
=====
special characters in HTML
=====
* typed starting with an & followed by something followed by a semicolon
* some have names -- < is the less-than character
> is the greater-than character
& is the ampersand character
* syntax you can use for any Unicode character:
&#desired_unicode_number;
‽ <!-- Interrobang -->