Lecture #2 - Web Programming with Static Pages

  <htmltag>              <!-- any of the standard html tags, e.g., div -->
    <custom-childtag>    <!-- a user defined tag with some semantic meaning -->
      "literal text"
    </custom-childtag>
  </htmltag>

Content:

1. Syllabus describes topics to be covered, reading material for you to digest before coming to class, and due dates for the assigned projects.
2. Projects:

   Final Project #1, Final Project #2, Final Project #3
   You will do one of these - the choice of which is yours to make - and present on the last day of classes.

   Additional Requirements

   You are expressly requested to refrain from using site editors like Wix, web.com, or other web designers. You may use any of the facilities of Visual Studio or any other text editor of your choice. This same rule applies to your lab submissions as well. For your Final Project demos you will be required to use only page links for navigation. You may host and demonstrate your labs in the built-in Visual Studio web server.

   All projects must use:

   • Asp.net core MVC - main site
   • Asp.net Web API - web service
   • Web API Client
   • SQL db storage
   • At least one static page that uses new features of HTML5, CSS3, and JavaScript6.
3. Static Web Pages:
   Static Web Page Model,   First static page demo
4. HTML5 - definition

   HyperText Markup Language (HTML) is a language for structuring content on a web page. It is based on Elements that have opening and closing tags and bodies with content.

     <htmltag>              <!-- any of the standard html tags, e.g., div -->
       <custom-childtag>    <!-- a user defined tag with some semantic meaning -->
         "literal text"
       </custom-childtag>
     </htmltag>
   

   • The HTML5 standard requires that all custom tags are hypenated, as shown above, to avoid clashes with future standard tags.
   • A body, everything between opening and closing tags, may consist of text or markup or both.
   • HTML5.2 is the latest standard version.

   show page source in new window - Compare rendering with its markup.
5. HTML5 - document structure

   HTML pages have the structure:

     <!DOCTYPE html>  <!-- this declaration tells the browser that this is HTML5 -->
     <html>
       <!-- 
         The head element may contain information for rendering
         but is not, itself, rendered (displayed in page).
       -->
       <head>
         metadata elements provide:
           - a title displayed in browser tab
           - information used by search engines
           - links to JavaScript files
           - links to CSS Style Sheets
         <script>
           local JavaScript code
         </script>
         <style>
           local CSS style definitions
         </style>
       </head>
       <!-- here is where rendering starts -->
       <body>
         content elements
       </body>
     </html>
   

6. HTML   - flow

   HTML elements come in three flavors:

   • Block elements, like <div>, have property display:block. They are boxes that stack vertically in their parent element's box. Each box has an outer margin box, in which is nested a border, then padding box, then content - like matryoshka dolls.
   • Inline elements, like <span>, have property display:inline and flow left-to-right across their parent's content box, wrapping as needed to display their entire contents. They don't have the properties: height, width, margin-top, or margin-bottom.
   • Inline-block elements have property display:inline-block and behave like inline elements, except that they honor height, width, and all margin properties.

   These element properties define what is call HTML Flow. As you alter the size of a page, you see the contents flowing to match the current size of the window. There are three things that alter this flow model:

   • Elements that have the property position:absolute are removed from the flow. Their positions are defined by properties: top, bottom, left, right, and z-index. Elements with absolute positioning are likely to be overwritten (or underwritten) by content when the page size changes, and so are likely to lead to fragile designs.
   • Elements that have position:fixed are fixed relative to the browser client area (viewport). Their positions are defined by properties: top, bottom, left, and right, z-index. This site uses a menu fixed to the top of the viewport and a footer fixed to the bottom.
   • Elements that have property float: left, or float: right, move to the left or right side of their container's box. Content flows around them, so are less fragile than absolute positioning.
7. HTML5 - attributes

   Attribute	Example	Applies to
   id	<div id="placeholder"> ... </div>	all elements
   style	<div style="height:1.5em; width:10em; background-color:cornsilk;"</div>	all elements
   title	title="hover over me to see tooltip"	all elements
   href:	<a href="cse686L2.htm">this page</a>	anchors
   target	<a href="cse686L2.htm" target="_blank">this page in another tab</a>	anchors
   src and alt	<img src="campus-strip.jpg" alt="view of quad">	images
   height and width	<img src="campus-strip.jpg" height="200" width="1200">	all block elements
   lang	<html lang="en-US"> ... </html>	html element
   There are more element specific attributes. Consult Dr. Google for the element you're customizing.

8. HTML5 - references

   HTML5 Tutorial
   HTML5 Reference - w3schools.com, HTML Reference - MDN, HTML Reference - html.com, htmlreference.io
   HTML tag reference, HTML global attributes, HTML event attributes
   HTML5 Tags - tutorialspoint.com
   Semantic Markup Pragmatic value of semantic markup html5test.com, html5-demos run with Chrome, HTML5 Canvas demos
9. HTML5 features:
   html5test.com

   Semantic markup

   Markup tags with names indicating their uses on a page. <header>
   <main>
   <section>
   <article>
   <aside>
   <nav>
   <figure>
   <figcation>
   <canvas>
   <footer> - - - - - - - - - - masthead or introductory material
   wrapper for main content
   areas of content with single focus
   self-contained content,e.g., a blog article
   sidebar content, e.g., references
   navigation links, e.g., menu
   photos or diagrams
   caption for figure
   drawing area, e.g., iframe, span, svg, textarea, ..., using canvas scripting API
   bottom content, e.g., copyright(c) notice

   Semantic Markup Reference
   

   Local Storage

   Provides a cookie-like storage mechanism, but isn't limited to 4KB. Here's an example from this site that saves the state of navkeys, the buttons you see at the bottom right of this page (if they are toggled on).
   To see JavaScript using Local Storage follow this link: scripts menu.js -> scroll to bottom Local Storage Reference
   

   Canvas

   The HTML5 Canvas is a drawing region with commands, based on SVG, to draw diagrams. Canvas reference - w3schools.com, Canvas API - MDN

   File API

   File API enables JavaScript to load and process files from a "sandboxed" local file system. File API Reference

   Components

   Reusable parts that provide custom capabilities for web pages. There is an evolving web standard for components:

   Introduction
   Component Collections
   MDN Reference
   google labs web components

   There are also widely used non-standard libraries that enable building custom components:

   React.js, Vue.js

   Finally, you can build your own "components" using custom html tags and JavaScript.

   This site does that in a number of places. For example, navkeys - those buttons on the lower right in this page (if they are toggled on) - were built by defining:

   • markup using custom tags - right-click this page and select "View Page Source". Then scroll down, looking for <navkeyscontainer>
   • CSS styles for those tags - StylesMenu.css - scroll to bottom and look for navKeysContainer { ... } and navKey { ... } styles.
   • JavaScript that handles events for the tagged elements - ScriptsMenu.js -> scroll to bottom.
10. Demos of static programming models:
    Flow Model, Box Model, Float Model, Script Model, SVG Model
    CSS grid, HTML Controls
    Table Layout, Float Layout, Position Layout, Grid-Partitions W3C Box Model, W3C CSS Selectors Model
11. Web Server Page Models:
    Static Page Model ASP Page Model, Asp.Net Page Model, Ajax Page Model
    Model View Controller, V-VM-C-AM-DM, Object to Relational Mapping, MVC structures
12. References: - opens in new tab
13. Lab #2