HTML Intro
DOM (Document Object Model) [parent, child, siblings] (description of the relationship that all of the HTML elements have with each other ) (It takes html tags as input and browser converts it to DOM that is rendered in the webpage)
DOM
Application programming interface for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
In simple terms, the DOM is a representation of your HTML to the browser and allows you to manipulate the page.
SGML (Standard Generalized Markup Language)
xhtml (w3c)
Semantic markup (Device Agnostic)
Display Types
- Block level elements (ex -
<p>) - Inline level elements (ex -
<a href="">) (cannot have width, height) - Inline-Block (can have width, height but sits inline) (Images, buttons - default behaviour)
- Display Table
- Display None
Media Types - audio, video
- HTML5 Graphics - Canvas and SVG
- Boxify (converting the whole image in sections of box)
- WebStorage api replace javascript cookies
- AppCache (Application Cache) Cache api (Cache Manifest file)
- WebWorker api
- Geolocation api
- File api (interacts with local files on the user's device) - FileReader, FileWriter, FileSystem
SVG
https://www.toptal.com/css/svg-animation-css-tutorial
https://www.freecodecamp.org/news/svg-tutorial-learn-to-code-images
Add page break for print
----- 1st page -----
<p style="page-break-after: always;"> </p>
<p style="page-break-before: always;"> </p>
----- 2nd page -----
Fresco
HTML5 Semantic Elements
- Media Types - audio, video
- HTML5 Graphics - Canvas and SVG
- Boxify (converting the whole image in sections of box)
- Modernizr(js library for feature detection)
- WebStorage replace javascript cookies
Web Workers Api - Dedicated, shared
Tools
Emmet - Write html faster - https://emmet.io (Avabilable in vs code as extension)
https://github.com/h5bp/html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites.