VC 238 :: Week 02 1 of 5 02 October A method of instructing a Web browser which layout mode to use when displaying a page.

Size: px

Start display at page:

Download "VC 238 :: Week 02 1 of 5 02 October A method of instructing a Web browser which layout mode to use when displaying a page."

Milton Houston
6 years ago
Views:

1 VC 238 :: Week 02 1 f 5 02 Octber 2017 week::tw DOCTYPEs, Rendering Engines, & HTML5 A Quick Histry f Brwsers Designing with Web Standards Structure Presentatin Behavir DOCTYPE Defined Mdes Examples Surces HTML, HTML5 CSS, CSS3 ECMAScript (JavaScript; jquery) DOM (Dcument Object Mdel) A methd f instructing a Web brwser which layut mde t use when displaying a page. Quirks Mde In the Quirks mde, brwsers vilate cntemprary Web frmat specificatins in rder t avid breaking pages authred accrding t practices that were prevalent in the late 1990s. Standards Mde In the Standards mde, brwsers try t give cnfrming dcuments the specificatin-wise crrect treatment t the extent implemented in a particular brwser. HTML5 calls this mde the n quirks mde. Almst Standards Mde Firefx, Safari, Chrme, Opera (since 7.5) and IE8 als have a mde knwn as Almst Standards mde, that implements the vertical sizing f table cells traditinally and nt rigrusly accrding t the CSS2 specificatin. HTML5 calls this mde the limited quirks mde. XHTML 1.0 Transitinal <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitinal//EN" " XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " HTML5 <!DOCTYPE html>

VC 238 :: Week 02 2 f 5 02 Octber 2017 Rendering Engines One

Platfrms Geck Firefx Mac OS X, Windws, UNIX/Linux, Andrid etc.

WebKit and mving t Blink Mac OS X, Windws, UNIX/Linux Mst

OS X, Windws, UNIX/Linux Trident Internet Explrer Windws

Mved t Blink mid-2013 Opera Mac OS X, Windws, UNIX/Linux

Allw the web t mve frward withut breaking it.

Cmmn prefixes: -ms- -mz- -- -webkit- Micrsft Mzilla Fundatin

Validatin Validate yur cde t a specific DOCTYPE

2 VC 238 :: Week 02 2 f 5 02 Octber 2017 Rendering Engines One Web; Many Different Ways t View It: Engine Brwser Supprted Platfrms Geck Firefx Mac OS X, Windws, UNIX/Linux, Andrid etc. Apple Safari Mac OS X, Windws, ios devices WebKit Chrme Frked WebKit and mving t Blink Mac OS X, Windws, UNIX/Linux Mst mbile devices ios, Andrid, Amazn devices Blink Ggle Chrme Mac OS X, Windws, UNIX/Linux Trident Internet Explrer Windws EdgeHTML Micrsft Edge Windws 10 nly Prest Mved t WebKit 2/13 Mved t Blink mid-2013 Opera Mac OS X, Windws, UNIX/Linux Vender Prefixes A necessary evil. Allw the web t mve frward withut breaking it. Will re-visit when we discuss CSS3. Cmmn prefixes: -ms- -mz- -- -webkit- Micrsft Mzilla Fundatin (Geck brwsers) Opera Sftware Safari (and WebKit brwsers) Cde Validatin Validate yur cde t a specific DOCTYPE Validates HTML, CSS, and ther languages. Great way t learn prper cding techniques. Hwever, dn t get hung up n validatin it s nice but nt critical.

3 VC 238 :: Week 02 3 f 5 02 Octber 2017 HTML5 Histry What It Brings Errr Handling (fr brwser makers) Simple DOCTYPE Lse syntax requirements (b!) N Frames Sme bslete/deprecated tags New JavaScript APIs Other Features (mainly fr prgrammers) Resurces The Canvas SVG New audi and vide tags Frm imprvements Datalist, Search field, Sliders, Calendar Gelcatin Lcal strage Offline web app supprt Dive Int HTML5 HTML5 fr Web Designers

4 VC 238 :: Week 02 4 f 5 02 Octber 2017 Semantic Tags in HTML5 <sectin> <header> <hgrup> <fter> <aside> <nav> <article> <main> The sectin element represents a generic dcument r applicatin sectin. A sectin, in this cntext, is a thematic gruping f cntent, typically with a heading. Examples f sectins wuld be chapters, the tabbed pages in a tabbed dialg bx, r the numbered sectins f a thesis. A Web site's hme page culd be split int sectins fr an intrductin, news items, cntact infrmatin. The header element represents a grup f intrductry r navigatinal aids. A header element is intended t usually cntain the sectin s heading (an h1 h6 element r an hgrup element), but this is nt required. The header element can als be used t wrap a sectin s table f cntents, a search frm, r any relevant lgs. The hgrup element represents the heading f a sectin. The element is used t grup a set f h1 h6 elements when the heading has multiple levels, such as subheadings, alternative titles, r taglines. The fter element represents a fter fr its nearest ancestr sectining cntent r sectining rt element. A fter typically cntains infrmatin abut its sectin such as wh wrte it, links t related dcuments, cpyright data, and the like. Fters dn t necessarily have t appear at the end f a sectin, thugh they usually d. When the fter element cntains entire sectins, they represent appendices, indexes, lng clphns, verbse license agreements, and ther such cntent. The aside element represents a sectin f a page that cnsists f cntent that is tangentially related t the cntent arund the aside element, and which culd be cnsidered separate frm that cntent. Such sectins are ften represented as sidebars in printed typgraphy. The element can be used fr typgraphical effects like pull qutes r sidebars, fr advertising, fr grups f nav elements, and fr ther cntent that is cnsidered separate frm the main cntent f the page. The nav element represents a sectin f a page that links t ther pages r t parts within the page: a sectin with navigatin links. Nt all grups f links n a page need t be in a nav element nly sectins that cnsist f majr navigatin blcks are apprpriate fr the nav element. In particular, it is cmmn fr fters t have a shrt list f links t cmmn pages f a site, such as the terms f service, the hme page, and a cpyright page. The fter element alne is sufficient fr such cases, withut a nav element. The article element represents a cmpnent f a page that cnsists f a selfcntained cmpsitin in a dcument, page, applicatin, r site and that is intended t be independently distributable r reusable, e.g. in syndicatin. This culd be a frum pst, a magazine r newspaper article, a Web lg entry, a usersubmitted cmment, an interactive widget r gadget, r any ther independent item f cntent. Represents the main cntent f the <bdy> f a dcument. The cntent f a <main> element shuld be unique t the dcument. Nte: Only ne <main> element shuld be used in an HTML page. Surce:

5 VC 238 :: Week 02 5 f 5 02 Octber 2017

Proper Document Usage and Document Distribution. TIP! How to Use the Guide. Managing the News Page

Proper Document Usage and Document Distribution. TIP! How to Use the Guide. Managing the News Page Managing the News Page TABLE OF CONTENTS: The News Page Key Infrmatin Area fr Members... 2 Newsletter Articles... 3 Adding Newsletter as Individual Articles... 3 Adding a Newsletter Created Externally...