Lect #2

<htmltag>  <custom-childtag>  "literal text" </custom-childtag> </htmltag>

Content:

This lecture is an introduction to the implementation of static web pages. Here, we survey fundamentals of web development:

HyperText Markup Langugae (HTML), used to structure information on web pages.
Cascading Style Sheets (CSS), to define styles: colors, spacing, fonts, for HTML elements and components.
JavaScript (ECMAScript¹ or ES) provides behavior for page elements like buttons and menus.

We will focus most intently on HTML ver 5.2², but will also quickly introduce Cascading Style Sheets (CSS3)³ and JavaScript (ES6)⁴.

European Computer Manufacturers Association (ECMA)
HTML ver 5.2
Cascading Style Sheets (CSS3), CSS3 - MDN
JavaScript (ES6)

Syllabus

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

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.

Static Web Pages:

Static Web Page Model, First static page demo

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.

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>

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.

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.

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

HTML5 features:

html5test.com

Semantic markup

Markup tags with names indicating their uses on a page.

- - - - - - - - - -

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.

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

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

References: - opens in new tab

Lab #2

Lecture #2 - Web Programming with Static Pages

HTML5, CSS3, JavaScript6 - focus on HTML5

Content: