VC 238 :: Week 02 1 of 4 05 October 2021 week::two DOCTYPE, Rendering Engines, & Web Inspectors
A Quick History of Browsers Mosaic, Netscape Navigator, Internet Explorer, Firefox, Safari, Chrome, and more…
Designing with Web Standards Structure o HTML, HTML5 Presentation o CSS, CSS3 Behavior o ECMAScript (JavaScript; jQuery) o DOM (Document Object Model)
Introducing the DOCTYPE Defined o A method of instructing a Web browser which layout mode to use when displaying a page. Modes o Quirks Mode § In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. o Standards Mode (aka: No Quirks Mode) § In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. HTML5 calls this mode the “no quirks mode.” o Almost Standards Mode § Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “Almost Standards mode,” that implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. HTML5 calls this mode the “limited quirks mode.” Examples o XHTML 1.0 Transitional § o XHTML 1.0 Strict § o HTML5 § Sources o http://diveintohtml5.info/semantics.html o http://hsivonen.iki.fi/doctype/
— Lecture Outline — VC 238 :: Week 02 2 of 4 05 October 2021
Rendering Engines One Web; Many Different Ways to Render It:
Engine Browser Supported Platforms
Gecko Firefox macOS, Windows, UNIX/Linux, Android
Apple Safari macOS, Windows, iOS devices
Chrome WebKit Forked WebKit and macOS, Windows, UNIX/Linux moving to Blink
Any web browser on Apple requires all web browser activities on iOS iOS to use WebKit
Blink Google Chrome macOS, Windows, UNIX/Linux, Android
Chromium Open source Many browsers macOS, Windows version of Blink
Trident Internet Explorer Windows (now discontinued, thankfully)
EdgeHTML Moved to Microsoft Edge Windows 10; macOS Chromium early-2019 Presto Moved to WebKit 2/13 Opera macOS, Windows, UNIX/Linux Moved to Blink mid-2013
Vender Prefixes for CSS o Vender prefixes allow the web to move forward without breaking it. o For info on when to use prefixes: http://shouldiprefix.com o Common prefixes: -ms- Microsoft -moz- Mozilla Foundation (Gecko browsers) -o- Opera Software -webkit- Safari (and WebKit browsers)
— Lecture Outline — VC 238 :: Week 02 3 of 4 05 October 2021
Browser Market Share (all platforms)
Code Validation Validate your code to a specific DOCTYPE o http://validator.w3.org o Validates HTML, CSS, and other languages. o Great way to learn proper coding techniques. o However, don’t get hung up on validation—it’s nice but not critical.
Web Inspectors Safari o To enable, in preferences select Advanced > Show Develop menu in menu bar
— Lecture Outline — VC 238 :: Week 02 4 of 4 05 October 2021
Semantic Tags in HTML5
The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.
The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6
The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation
The article element represents a component of a page that consists of a self- contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This
Represents the main content of the
of a document. The content of ao Source: http://diveintohtml5.info/semantics.html
— Lecture Outline —