Lecture 4 - HTML5 Page Structure 2024FA PDF

Lecture 4 – HTML5 Page Structure: Generics and Element Naming Announcement: the CAI11 Room is Open for use  From this week, the CAI 11 Room is configured to have the same software as IPS2. can use the classroom to do HW, attend online cla...

Lecture 4 – HTML5 Page Structure: Generics and Element Naming Announcement: the CAI11 Room is Open for use  From this week, the CAI 11 Room is configured to have the same software as IPS2. can use the classroom to do HW, attend online classes, etc.  Use: Open PC Room  Hours: Fall Semester, Mon-Fri (Periods 1-6)  No prior reservation required  For more/official information: See THIS LINK  Introduction Last lecture, we discussed the basics of HTML5 structure:  [Sectioning Content Elements]  They are very literary: header, nav, article, section, aside, footer (we discuss each, in detail)  Use 1: Assigning semantic meaning to literary elements in pages.  Use 2: Replacing some of the roles of generic divs from XHTML. This time, we continue HTML5 structure with:  [Generic Structural Elements]  We have two: div and span  Use 1: Encapsulating HTML elements for CSS positioning.  Use 2: Encapsulating HTML elements for CSS formatting.  [Named Elements]  Assigning elements with the id attribute  Assigning elements to groups with the class attribute  Use 1: Supporting internal linking  Use 2: Supporting CSS Positioning  Use 3: Supporting CSS Formatting. HTML5 provides semantic meaning & unformatted page structure …  …complete with handles for styling.  CSS provides the specific instructions to actually realize the layout & formatting  Creating Generic Containers: the div For CSS placement, etc, we also create generic containers, which: 1. Have no particular default semantic meaning…  Do not match any of the simple SCE roles (article, header, footer, etc). 2. But which need to be present to assist CSS styling, etc:  Creating cohesive groups for CSS positioning (e.g., making columns);  Directing CSS styling to a group, for 1-step formatting: Ex: Sizing, positioning, setting background color, etc  Localizing JavaScript behavior. The div element, inherited from XHTML, still serves this purpose. Note: div is short for ‘division’.  The div element (cont.) Like SCE’s, declaring a div imposes no default formatting...  Except that like an SCE, it is a block-level element  … so its content begins on a new line (generally, with top & bottom margins).  Also, it can be positioned independently using CSS (more on this, later).  The equivalent inline element is the span (more on that, later).  Neither div nor span carry any semantic meaning. SCE’s can be thought of as new, specialized variants of div…  Each represents a styleable div......but with added semantic meaning.  Well…there seems to be some overlap! Which do I use??  For Layout:  Use a div unless an equivalent SCE is available.  And sometimes, it is convenient to use them together, as a pair.  Literary (= when focused only on content organization):  You may use an SCE for clarity (‘html5-style’)  But remember that using a div instead is always OK (‘xhtml-style’)  Adding a div as a “container division” Continuing from last time, an example of div use is shown below…  Here, all the body content (abbreviated) has been wrapped by the start and end tags (note: this is also called “encapsulation”).  Also, assigning a class allows CSS targeting of the div (more on this shortly)… Below (with CSS), I added a rust background, and a CSS box shadow Adding 2 more divs to support Page Layout Below is a skeleton of the full html layout for our focus example…  As shown, SCE’s and divs can be used, together:  SCEs are created for sections with semantic meaning (literary elements) A header, 1 article , 2 sections, 1 aside, and 1 footer.  divs are created to encapsulate elements which need positioning (2 divs). Assuming we apply CSS for positioning, Our page layout concept looks like this: Note: The header and footer serve dual-duty…but not article or aside!  About those ‘extras’: ARIA Roles HTML5 provides many elements to allow you to add semantic meaning to your pages.  This is necessary for non-traditional web page consumption:  Notably, for guiding web readers. However, HTML5 elements are not, by themselves, sufficient.  For instance, what html element would direct a reader to jump to your main content, to begin reading?  None. This support is missing in HTML5.  The Web Accessibility Initiative (WAI) is focused on filling that need.  By providing a bridging technology: Accessible Rich Internet Applications ARIA for short. ARIA provides supplementary page “constructs” to help…  In the form of extra attributes for adding semantic meaning.  Their so-called ‘landmark roles’  Roles: application, banner, complimentary, contentinfo, form, main, navigation, and search.  Meaning is assigned by adding an attribute-value pair to a tag:  Recall that we have already seen several examples…  Example: role=“navigation” Assigning ARIA Roles to our Example Here is our example, with roles added:  banner role  assigned to our header  Usually assigned to a masthead with site- oriented content.  navigation role  assigned to our nav  Usually assigned to a collection of links for navigation.  Mirrors html’s nav element.  main role  Indicates a section is the doc’s main content.  complimentary role  our sidebar  Indicates a supporting section;  Mirrors html sidebar usage.  contentinfo role:  For a section with supporting content.  Here, our Footer.  Roles are nice & easy, but not required. Naming Elements It is often desirable to name elements for easy reference…  So we may apply a style rule (or JavaScript) to an element, etc.  This may be done in two ways:  By assigning an individual name to the element (an id);  By assigning the element to a class. Most elements may be given a name, using the id attribute:  Within the start tag of the element (e.g., ), type: id=“e_name”  This assigns the element a unique name (here, ‘e_name’ ).  Note: so, two elements in a page CANNOT have the same id.  DO NOT put spaces or special symbols in IDs  Also, this automatically turns the named element into an anchor.  Useful!! We can then use it as a destination for a hyperlink…  Using the anchor element, a…combined with href=“#e_name” We have already seen named elements used in our main example:  …although we do not yet know how to ‘target’ named elements with CSS. Defining Classes Elements may also be assigned to a class with the class attribute:  Type the class attribute within the opening tag of the element: class=“c_name”  This identifies the element as a member of class ‘c_name’  Unlike an ID, multiple elements can be assigned to the same class. In fact, this is the point of using classes vs. id’s... Class membership is not “exclusive”.  Again, you choose the class name But NO SPACES allowed! Also, to avoid encoding problems, do not use kana.  If a style-rule is applied to that class, it affects every member.  This allows us to apply a style-rule to all class members at the same time! For instance, changing text color to red, for elements in class ‘Beethoven’. So, document-wide changes can be made very quickly (one step).  More on this, when we discuss CSS …  Note: If you wish, an element may:  Both have a name (id) AND belong to a class.  Belong to more than one class Just separate the two classes with a space Ex: class = “class1 class2” Linking Within a Page (Fragments) In addition to liking to other web-pages, you will often want internal links.  Ex: Links to the top & bottom of a quite long page.  Or…perhaps, links at the top, to important sections later on in the page... So the viewer can go directly there. Quite useful for quick navigation to specified elements in a long page.  Internal links can also be useful during design...  As temporary ‘place-holders’ for links during page development......with the plan of changing these links later (to links to other pages). It is easy to create an internal link:  Also called a “fragment” (= older term for an internal link)  Method: Any named element automatically acts as an anchor…  To link to an element with an id, just use href=“#id”.  Inline Grouping with Spans Similar to div sectioning, you may also organize at an inline level:  i.e., define ‘spans’ of text or other inline elements.  So that all text within the span can be formatted, together…  Spans are “inline”, and cannot be positioned independently from their parent. You may define inline spans with the span element.  To define a span, surround the span contents, as shown: …contents…  This is quite similar to using the div element we saw earlier…...but it does not cause a line break, since it is ‘in-line’.  Of course, attributes id and class shown here are optional: Use id if you want to name the span; Use class if you want the span to be a member of a class.  As usual, contents indicates the surrounded text and elements. Note: This is sub-division at the INLINE LEVEL.  span allows you to apply a format change to the whole ‘span’ of text…...Using just one style-rule.  Thus, span is your second Generic Page Element.  Trick: Adding Tool-Tips to Tags It is easy to add a tool-tip label to any (body) html element…  So that a user can hover over the element and see a tool tip.  This is done by adding the title attribute to it.  Syntax: Here, ‘label’ is brief descriptive text that appears in the tool tip.  Careful: this is different from the title element!.  Example: ID and Class use Next, let’s see id’s, classes, and div’s in action, by looking at our use in our previous example…  Keep in mind that we will have 3 purposes for assigning id’s and classes: 1. Internal Linking: Creating a handle for navigation (= fragment) for a named link within a page. 2. CSS Layout: Creating a handle for CSS targeting to support positioning of specific elements. 3. CSS Formatting: Creating a handle for CSS targeting to support formatting of named elements and/or classed element groups. Ex: ID and Class use (purpose 1) (Note: omitted for space…) 1. [Navigation] Our list’s anchors target 3 named elements…  Our 3 named h2 elements…  Users can then navigate to each by clicking (arrows).  Creating 3 fragments. Ex: ID and Class use (purpose 2) 1. [Navigation] Our list’s anchors target 3 named elements…  Our 3 named h2 elements…  Users can then navigate to each by clicking (arrows). 2. [Layout] Elements to be positioned are assigned id’s…  Header list  toc  Content div  content  Sidebar div  sidebar  This allows us to target each for CSS sizing & positioning. Ex: ID and Class use (purpose 3) 1. [Navigation] Our list’s anchors target 3 named elements…  Our 3 named h2 elements…  Users can then navigate to each by clicking (arrows). 2. [Layout] Elements to be positioned are assigned id’s…  Header list  toc  Content div  content  Sidebar div  sidebar  This allows us to target each for CSS positioning. 3. [Format] We assign classes to support group formatting.  Outer div  inset-shadow  Allowing us to apply a drop shadow to the group.  Our sections  method  Allowing us to target both for CSS formatting, at once. L3-L4 Homework Check (HW2 – completed HTML file) *  After each class, you are expected to build the examples we cover in class yourself in VS Code, to the extent you can…DO NOT USE YOUR OWN CODE OR CONTENT!!!  I will do a 10-point check of your progress on the HTML page for the focus site: A. Have you created a new HTML5 page for our ongoing in-class DNA target example? HTML Code exists, and is set up as a properly initialized HTML5 page NOW, insert your Name and Student ID in the heading of your page’s Warning: HTML pages that do not show the student’s identity WILL receive an Automatic 0 score. B. Have you added the elements to your that we added in L3? with a and list containing 3 links with 2 nested Each should have a heading, , and MY typed content, as well. with an and with a paragraph, C. Have you added the elements, etc. that we added in L4? You added all of the proper elements… should be the 1st child of should be the parent of should be the parent of You should have added all of the specified IDs to your page Each should have the method class. Your ’s 3 links should be internal; Example: * Each worth 1 point (graded as 0, 0.5, or 1); total score rounded-up (total from 0 to 10). Submit by Monday (NOV 4) at Noon, via Your HTML Page (the html file… NOT a screenshot)!  Summary* Over the last 2 lectures, we have discussed basic HTML5 structure:  [Sectioning Content Elements]  They are very literary: header, nav, article, section, aside, footer (we have discussed each, in detail)  Use 1: Assigning semantic meaning to literary elements in pages.  Use 2: Replacing some of the roles of generic divs from XHTML.  [Generic Structural Elements]  We have two: div and span  Use 1: Encapsulating HTML elements for CSS positioning.  Use 2: Encapsulating HTML elements for CSS formatting.  [Named Elements]  Assigning element names with the id attribute  Assigning elements to groups with the class attribute  Use 1: Supporting internal linking  Use 2: Supporting CSS Positioning  Use 3: Supporting CSS Formatting. Together, these to provide semantic meaning & page structure …  …complete with handles for styling.  CSS provides the specific instructions to actually realize the layout & formatting