HTML A brief introduction HTML
HTML, what is? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language A markup language is a set of markup elements HTML documents are described by HTML elements Each HTML tag elements different document content http://www.w3schools.com/html/html_intro.asp HTML
HTML, browsers, servers, JavaScript, etc. Browsers receive HTML (and other things) from an HTTP server. The browser renders the HTML JavaScript is a programming language JavaScripts runs in the browser JavaScript can make the browser’s content dynamic HTML
HTML5 HTML5 is the latest HTML version HTML5 includes Markup language CSS Cascading Style Sheets = Colors, sizes, styling etc. JavaScript A programming language executed by the browser W3C makes the HTML standards W3C standards are usually ahead of browsers Most browser implement most of the standards (but not all of the standards) HTML
HTML and XML HTML is an XML language. HTML documents must be well formed HTML documents must have a single root element HTML elements must have a closing tag <h1>My heading</h1> or <br /> Exception: element without body <br>, <img> etc. HTML elements are case sensitive HTML elements must be properly nested HTML attribute values must be quoted HTML documents must be valid Conform to the HTML standard specifying Element names Element attributes Element nesting, etc. The head of the HTML document must refer to actual version the standard Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html> refers to HTML5 HTML
Block level vs. inline elements Block level elements are usually rendered in block(!) Space before and after the block Examples <p> <h1> to <h6> <form> <div> Inline elements are usually rendered inline(!) Examples <a> <img> <span> <br /> HTML
HTML validators and the importance of being valid An HTML validator will check an HTML document Well formed Valid, according to the standard mentioned in the DOCTYPE section in the head of the document Common validators W3 https://validator.w3.org/ Validators build in to editors like Adobe Dreamweaver Most browsers will show HTML documents even if the document is not valid Browser will show the document trying to “guess” the missing / illegal parts of the document. Parts of the document might not be shown Different browser might “guess” differently Search engine optimization Search engines (like Google, etc.) have a hard time indexing non-valid HTML documents Maybe the document will simply not be indexed at all. HTML
Document Object Model (DOM) An HTML document has a tree-like structure https://www.w3schools.com/js/js_htmldom.asp The browser reads the HTML document and constructs the tree Called the Document Object Mode (DOM) JavaScript can manipulate the DOM Change elements, including the style (CSS) Add elements Remove elements HTML
Div + span elements Div and span elements are often used as placeholders in HTML Places where JavaScript can add content. Div is a block level element Span is an inline element Div and span elements are usually assigned an id <div id=”content”></div> JavaScript will refer to the id HTML