===== CS 328 - Week 2 Lecture 2 - 2025-01-29 ===== ===== TODAY WE WILL: ===== * announcements * CLIENT-TIER: more HTML basics * prep for next class ===== * should be working on Homework 1! * at-least-1st-attempts are due by 11:59 pm Friday, Jan. 31 * should be reading zyBook Chapter 1 ===== a couple of strict-style HTML elements used for some quick HTML-terminology review... ===== <textarea name="ideas" rows="5" cols="20"> Enter your ideas 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 (and also linked from the Canvas course site, under "Modules", in the section "Course Style and Coding Standards") * after class, also set up a copy of this 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 and inline elements, continued ===== * 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 * also note: * block elements typically styled differently than inline elements (when you style them with CSS) * some styles work for block elements and NOT inline elements * inline elements generally SHOULD be within an appropriate block element * block elements generally should NOT be within an ****inline**** element ===== p element - paragraph - block element ===== * yes, you have to explicitly end each p element... ===== h elements h1, h2, ... h6 - heading elements - block ===== * represent headings within the content * which heading? choose on a semantic basis! * main heading? use h1! * sub-heading of the main heading? use h2! * (etc.) ===== hr element - horizontal rule - block ===== * also a void element! <hr /> * meant to separate semantic parts of a document ===== em and strong elements - inline elements ===== * em is to indicate emphasized content * most browsers display as italicized * strong is to indicate strongly-emphasized content * most browsers display as bold