html5 and-css3-overview

tSsdf

Wednesday, May 3, 2023

JACOB NELSONSoftware Architect


Three Layers of Web Design

Structure, Style, Behavior


Structure

HTMLPresentation

CSSBehavior

Javascript

What is HTML?

Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.


What is HTML?

HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as "<body>", and an end tag, such as "</body>".


History of HTML

• 1989 - Tim Berners-Lee invented www• 1991 - Tim Berners-Lee invented HTML• 1993 - Dave Raggett drafted HTML+• 1993 - The first web browser, Mosaic, was

introduced.• 1994 - Netscape browser, based on Mosaic,

was introduced.• 1994 – W3C was formed


History of HTML

• 1995 - HTML 2.0 was first published by W3C.• 1997 - HTML 3.0 was first published by W3C.• 1999 - HTML 4.01 was first published by W3C.• 2000 – XHTML 1.0 was published by W3C.• 2008 – WHATWG published HTML5 First Public Draft• 2014 - HTML5 was published by W3C.• 2016 - HTML5.1 was published by W3C.


Standards Organizations – W3CW3C (World Wide Web Consortium)

The W3C is the source for most of the recommendations that concern web developers. They produce recommendations for the implementation of such technologies as HTML, the Document Object Model, and Cascading Style Sheets.


W3C is not a standards body. Instead, the W3C organizes groups of experts in web-related fields. These groups produce recommendations on how to implement web technology. Although the W3C does not have any enforcement power over how their recommendations are implemented, most of their recommendations are taken as de facto standards.

W3C wanted to develop a definitive HTML5 and XHTML standard.


Standards Organizations – W3CW3C (World Wide Web Consortium)

Standards Organizations – WHATWGWeb Hypertext Application Technology Working Group (WHATWG)

The WHATWG was formed in response to the slow development of World Wide Web Consortium (W3C) Web standards and W3C's decision to abandon HTML in favor of XML-based technologies.WHATWG wanted to develop HTML as a "Living Standard". A living standard is always updated and improved. New features can be added, but old functionality cannot be removed.Wednesday, May 3, 2023

HTML5 vs HTML Living Standard

The WHATWG version of the specification was renamed at the beginning of 2011 to HTML dropping the 5 at the end of the name. Then, it was further renamed into HTML living standard to specify that it’ll be in constant development and will no longer referred by using a version number.



On the contrary, the W3C’s specifications still use version numbers. the last stable version is 5, thus HTML5. As a consequence of this step, the consortium is now actively developing the new version of the standard known as HTML5.1. In HTML5.1 some elements and attributes that didn’t find their place in HTML5 are being discussed such as the dialog element and the new input types of month and week.



Stated by, David Baron from Mozilla


When the W3C’s and WHATWG’s HTML specifications differ, we tend to follow the WHATWG one.

What is HTML5?

HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It's actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen.


Browser Support for HTML5


basic HTML document<!DOCTYPE html><html lang="en"> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p>  </body></html>

<!DOCTYPE html>

• <!DOCTYPE html> goes at the top of every HTML5 page.

• The HTML5 word <!DOCTYPE html> means "this page is written in HTML5" as opposed to, say HTML 4.01.

• it's better than what they had before. Here's an example of one common type of XHTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Example Explained

The <html> element is the root element of an HTML pageThe <head> element contains meta information about the documentThe <title> element specifies a title for the documentThe <body> element contains the visible page contentThe <h1> element defines a large headingThe <p> element defines a paragraph


The New Elements of HTML5

The most basic new elements of HTML5 make it easier to lay out web pages and to debug your code or others'. It also makes it easier for automated services to scan the web and understand the importance of different page components.


The New Elements of HTML5For page layout and key features, there are now specific elements such as:

• <header> and <footer> • <nav> for all the kinds of menus• <aside> for sidebars or nearby related content• <article> where content goes such as a blog post• <section> similar to <div> but more content-oriented• <audio> and <video> tags to have native browsers manage playback of

each. No more plugins and security updates for this• <canvas> specifically for letting you draw graphics on using a separate

scripting language• <embed> to place external content or applications into the page


The New Elements of HTML5Here's a nice visual outline of these by Smashing Magazine:


Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. CSS3 is a latest standard of CSS earlier versions(CSS2).


Style Sheet

A stylesheet is a set of rules defining how an HTML element will be presented in the browser.

These rules are targeted to specific elements in HTML document


The Cascade

The cascade part of CSS is a set of rules for resolving conflicts with multiple CSS rules applied to the same elements.For example, if there are two rules defining the color or your h1 elements, the rule that comes last in the cascade order will trump the other.


Browser Style Sheet

Unstyled HTML elements are displayed by a browser according to rules devised by the software developer. For example, text marked up as an <h1> is often displayed as 24-point, bold in the typeface Times New Roman. Default styles also affect the space around elements.


External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:


External Style Sheet

The external style sheet file must be saved with a .css extension.


<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.Internal styles are defined within the <style> element, inside the <head> section of an HTML page:


<head><style>h1 { color: maroon; margin-left: 40px;} </style></head>

Inline Style

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.


<header style="color:blue;padding-left:20px;">This is a heading.</header>


Browser stylesheet

Linked (external) stylesheet

Embedded (internal) stylesheet

Inline (internal) Styles

Hig

h Im

porta

nce

Low

Impo

rtanc

eCascading Order

CSS Rules


CSS Selectors

• Selectors are used to target which HTML to style. Properties and values are used to set the style rules.

• There are three kinds of selectors:


CSS Selectors - Tag

• Tag An HTML tag such as h1 or p.

HTML tag selector:

HTML tag selector CSS:


<p>Sample paragraph.</p>

p { color: red; font-size: 200%;}

CSS Selectors - Class

• A class attribute of one or more elements. Referenced in CSS with a “.” before it.

Class selector HTML:

HTML class selector CSS:


<p class="warning">This is a paragraph with a class="warning".</p>

.warning { background-color: #ffc;}

CSS Selectors - Id

• An id attribute of a unique element, should only be used once. Referenced in CSS with a “#” before it.

Id selector HTML:

HTML Id selector CSS:


<h1 id="site-title">Sample Blog Title</h1>

#site-title { font-size: 3em;}

Web Form 2.0

• Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.

• The forms features in HTML5 provide a better experience for users by making forms more consistent across different web sites and giving immediate feedback to the user about data entry.


Web Form 2.0

• They also provide this experience to users who have scripting disabled in their browser.


Web Form 2.0 – Input Types

• url - For entering a URL. It must start with a valid URI scheme, for example http://, ftp:// or mailto:.

• tel - For entering phone numbers. It does not enforce a particular syntax for validation, so if you want to ensure a particular format, you can use pattern.

• email - For entering email addresses, and hints that the @ should be shown on the keyboard by default.



• search - A text input field styled in a way that is consistent with the platform's search field.

• number - For numeric input, can be any rational integer or float value.

• range - For number input, but unlike the number input type, the value is less important. It is displayed to the user as a slider control.



• datetime-local - For entering a date and time value where the time zone provided is the local time zone.

• date - For entering a date (only) with no time zone provided.

• time - For entering a time (only) with no time zone provided.

• week - For entering a week (only) with no time zone provided.



• month - For entering a month (only) with no time zone provided.

• color - For picking a color.


Web Form 2.0 – Attributes

• placeholder• autofocus• autocomplete• required• pattern• novalidate• formnovalidate• list• multiple

• form• formaction• formenctype• formmethod• formtarget


<audio>

The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one.

Reference: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio


https://developer.mozilla.org/en/docs/Web/HTML/Element/audio

https://developer.mozilla.org/en/docs/Web/HTML/Element/audio

<audio> example

Basic usage

Audio element with source element


<audio src="sample/sample.mp3" controls autoplay loop> This feature is not supported. please upgrade your browser.</audio>

<audio controls="controls"> Your browser does not support the <code>audio</code> element. <source src="foo.wav" type="audio/wav"></audio>

<audio> - supported formats


<video>

The HTML <video> element is used to embed video content in a document. It may contain one or more video sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one.

Reference: https://developer.mozilla.org/en/docs/Web/HTML/Element/video


https://developer.mozilla.org/en/docs/Web/HTML/Element/video

https://developer.mozilla.org/en/docs/Web/HTML/Element/video

<video> example

Basic usage

Video element with source element


<video src="sample/sample.mov" controls autoplay loop> This feature is not supported. please upgrade your browser.</video>

<video id="sampleMovie" width="640" height="360" controls><source src="HTML5Sample_H264.mov" /><source src="HTML5Sample_Ogg.ogv" /><source src="HTML5Sample_WebM.webm" />

</video>

<video> - supported formats


Offline Storage

• Apart from new elements in HTML5, this new web technology offers us Offline Storage.

• Offline Storage allows us to save data in the user’s browser and makes our web apps or games work without a connection.


Offline Storage - sessionStorage

• sessionStorage is a form of storage that stores data temporarily in the browser.

• The data in sessionStorage is set in key and value pairing.

• The data set by sessionStorage is – exclusive to the browser window or tab. – still be there, unless we erase it intentionally or we

quit the browser.


Offline Storage - localStorage

• localStorage is a form of storage that stores data in the browser.

• The data in localStorage is set in key and value pairing.

• unlike sessionStorage, localStorage data is persistent. – the data will remain in the browser as long as we do

not intentionally remove it.


<summary><details>

• It seems like every Web site needs to have an expanding/collapsing block of text.

• While this is easy enough to do with JavaScript, the <details> tag makes it even easier. It does exactly what we've all been doing for years now: makes a simple block that expands and collapses the content when the header is clicked.

• The <details> tag is supported only by Google Chrome and Opera browsers, as of today.


Responsive Web Design (RWD)

• RWD is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.

• RWD is achieved using a mix of fluid grids and layouts, flexible images and an intelligent use of CSS media queries.


RWD - Advantages

• The same HTML is served to all devices, using CSS (which determines the layout of webpage) to change the appearance of the page.

• Rather than creating a separate site and corresponding codebase for wide-screen monitors, desktops, laptops, tablets and phones of all sizes, a single codebase can support users with differently sized viewports.


RWD - Advantages

• In responsive design, page elements reshuffle as the viewport grows or shrinks. A three-column desktop design may reshuffle to two columns for a tablet and a single column for a smartphone.

• Responsive design relies on proportion-based grids to rearrange content and design elements.

• The use of a single codebase can make development faster, compared to developing 3 or 4 distinct sites, and makes maintenance easier over time, as one set of code and content needs to be updated rather than 3 or 4.


Media Query

• The @media query is the key ingredient that, allows specified CSS to be applied depending on the device and whether it matches the media query criteria.


How to use Media Query

CSS External Call

CSS Direct Call


<link rel=”stylesheet” media=”screen and (min-width:320px) and (max-width:480px) “href=”css/yourstylesheet.css” />

@media screen and (min-width:320px) and (max-width:480px){/* Insert your styles here */}

<canvas>

A whiteboard where your pen/eraser is Javascript


<canvas> - supported contexts

• 2d - representing a two-dimensional rendering context.

• webgl - representing a three-dimensional rendering context. This context is only available on browsers that implement WebGl version 1 (OpenGL ES 2.0).

• webgl2 - representing a three-dimensional rendering context. This context is only available on browsers that implement WebGl version 2 (OpenGL ES 3.0).

• Bitmaprenderer - provides functionality to replace the content of the canvas with a given ImageBitmap.


<canvas> - How to Clear?

When any element on the canvas needs to change (move, erase, etc), the standard method is to completely erase the canvas and redraw the canvas with the elements in their new positions (or not redraw the elements if they are erased).

That's because canvas does not "remember" where it drew any individual element and therefore cannot individually move or erase any element.


<canvas> - How to Clear?


var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');context.clearRect(0, 0, canvas.width, canvas.height);

References

• http://www.w3schools.com/html5/

• http://htmldog.com/reference/htmltags/

• https://www.smashingmagazine.com/wp-content/uploads/images/html5-che

at-sheet/html5-cheat-sheet.pdf

• http://html5demos.com/

• http://www.cssbasics.com/

• http://css3test.com/

• http://cssmediaqueries.com/


http://www.w3schools.com/html5/

http://htmldog.com/reference/htmltags/

https://www.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf

https://www.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf

http://html5demos.com/

http://www.cssbasics.com/

http://css3test.com/

http://cssmediaqueries.com/

CODE IS POETRY
