DOCSLIB.ORG

DOCTYPE, Rendering Engines, & Web Inspectors

DOCTYPE, Rendering Engines, & Web Inspectors

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 § <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> o XHTML 1.0 Strict § <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> o HTML5 § <!DOCTYPE html> 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. <section> Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information. 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 <header> element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos. The hgroup element represents the heading of a section. The element is used to <hgroup> 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 <footer> like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content. 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 <aside> sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. 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 <nav> blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element. 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 <article> could be a forum post, a magazine or newspaper article, a Web log entry, a user- submitted comment, an interactive widget or gadget, or any other independent item of content. Represents the main content of the <body> of a document. The content of a <main> <main> element should be unique to the document. Note: Only one <main> element should be used in an HTML page. o Source: http://diveintohtml5.info/semantics.html — Lecture Outline — .

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    4 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us