=====
CS 328 - Week 2 Lecture "2" - 2024-01-24
=====
TODAY WE WILL:
* announcements
* CLIENT TIER: intro to HTML
* prep for next class
* gp.humboldt.edu is the portal that works for
Humboldt's GlobalProtect VPN
=====
INTRO to HTML
=====
HTML - HyperText Markup Language
=====
* purpose: to structure content, at a higher and abstract level
* in CS 328, you are required to use
STRICT-STYLE HTML
* (following XML syntax rules) <-- XML - eXtensible Markup Language
=====
* HTML has comments!
<!-- comment
goes
here -->
=====
* when you are creating an HTML document,
(structuring some content using HTML)
the stuff you add to your content are called HTML tags
^^^^
* an HTML tag is surrounded by angle brackets <blah>
content tends to be surrounded by a pair of tags,
an opening tag and a closing tag
^^^^^^^^^^^ ^^^^^^^^^^^
* an opening HTML tag,
the content within,
and a closing HTML tag are together called an HTML element
^^^^^^^^^^^^
* but there ARE some elements that don't have content,
called void elements -- more on those in a moment
^^^^^^^^^^^^^
* in strict-style HTML,
the name of the element is written in all LOWERCASE,
in the opening tag:
^^^^^^^^^^^
<title>
* yes, there may be more in this opening tag,
more on THAT in a minute!
* and then you have content
* and after the desired content, you have a
closing tag, a forward-slash followed by the type of element:
^^^^^^^^^^^
</title>
<!-- the three lines below are a title element -->
<title>MY
web
page</title>
* in strict-style HTML,
for an element with content,
you must put an opening AND a closing tag.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
* what if there isn't content?
For example, a br (break) element
* these are called void elements
^^^^^^^^^^^^^
* these CANNOT have content!
* using strict-style,
you write this so it is BOTH opening and closing tag in one,
ENDING it with />
^^^^^^^^^^^^^^^^^
<br /> or <br/>
* 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 />
=====
* an element's opening tag can contain additional metadata
in the form of attribute-value pairs
att_name="att value"
* in strict-style, the attribute value is ALWAYS quoted
(but double or single quotes are acceptable, although I
always use double-quotes)
<!-- the opening tag for the html element below
contains TWO attributes, lang and xmlns
* its lang attribute has the value "en"
* its xmlns attribute has the value "http://www.w3.org/1999/xhtml"
-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
=====
* BASIC HTML DOCUMENT STRUCTURE
* document type definition, then
* html element
* that *contains* a head element
* *followed* by 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> <!-- document's content -->
</body>
</html>