{"id":84,"date":"2017-09-03T17:43:37","date_gmt":"2017-09-03T21:43:37","guid":{"rendered":"http:\/\/sites.nd.edu\/gregmadey\/?p=84"},"modified":"2017-09-05T04:51:05","modified_gmt":"2017-09-05T08:51:05","slug":"lecture-notes-sept-4","status":"publish","type":"post","link":"https:\/\/sites.nd.edu\/gregmadey\/2017\/09\/03\/lecture-notes-sept-4\/","title":{"rendered":"Lecture Notes &#8211; Sept 4th"},"content":{"rendered":"<ul>\n<li>Quiz<\/li>\n<li>Homework, quiz, grading\n<ul>\n<li>Late homework &#8211; 1 day late = 50% off, &gt;1 day late = 100% off<\/li>\n<li>Syllabus updated!<\/li>\n<\/ul>\n<\/li>\n<li>\u00a0HTML\n<ul>\n<li>HTML &#8211; page structure\n<ul>\n<li>CSS &#8211; page design<\/li>\n<li>JS &#8211; page behavior<\/li>\n<\/ul>\n<\/li>\n<li>Markup language\n<ul>\n<li>Tags: &lt;p&gt;<\/li>\n<li>Elements: &lt;p&gt; content &lt;\/p&gt;<\/li>\n<li>Attributes: &lt;p lang=&#8221;en&#8221;&gt;<\/li>\n<\/ul>\n<\/li>\n<li>Standards groups, major versions\n<ul>\n<li>W3C: HTML 3.2, HTML 4.01, XHTML 1.0, HTML 5\n<ul>\n<li><a href=\"https:\/\/www.w3.org\">https:\/\/www.w3.org\u00a0<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html\/\">https:\/\/www.w3.org\/TR\/html\/<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Web Hypertext Application Technology Working Group (WHATWG): HTML (Living Standard)\n<ul>\n<li><a href=\"https:\/\/whatwg.org\">https:\/\/whatwg.org<\/a><\/li>\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/\">https:\/\/html.spec.whatwg.org\/multipage\/<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Resources\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/\">\u00a0https:\/\/developer.mozilla.org\/en-US\/<\/a>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/webplatform.github.io\/docs\/Main_Page\/index.html\">https:\/\/webplatform.github.io\/docs\/Main_Page\/index.html<\/a>\n<ul>\n<li>Unfortunately &#8220;frozen&#8221;<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/\">https:\/\/www.w3schools.com\/<\/a><\/li>\n<li><a href=\"http:\/\/brackets.io\">Brackets<\/a><\/li>\n<li><a href=\"https:\/\/www.sublimetext.com\">Sublime Text<\/a><\/li>\n<li><a href=\"https:\/\/atom.io\">Atom<\/a><\/li>\n<li>IDEs\n<ul>\n<li>Eclipse<\/li>\n<li>NetBeans<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/www.mamp.info\/en\/downloads\/\">MAMP<\/a>\u00a0Mac and Windows<\/li>\n<li><a href=\"https:\/\/bitnami.com\/stack\/wamp\/installer\">WAMP<\/a>\u00a0Windows<\/li>\n<li><a href=\"https:\/\/www.virtualbox.org\/wiki\/VirtualBox\">VirtualBox<\/a><\/li>\n<li><a href=\"https:\/\/www.vagrantup.com\">Vagrant<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\">Chrome DevTools<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Browsers &#8211; Developer modes\n<ul>\n<li>Chrome<\/li>\n<li>Firefox<\/li>\n<li>Safari<\/li>\n<\/ul>\n<\/li>\n<li>DOCTYPE\n<ul>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Quirks_mode\">Quirks Mode<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/QA\/2002\/04\/valid-dtd-list.html#DTD\">https:\/\/www.w3.org\/QA\/2002\/04\/valid-dtd-list.html#DTD<\/a><\/li>\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/syntax.html#the-doctype\">https:\/\/html.spec.whatwg.org\/multipage\/syntax.html#the-doctype<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/2011\/WD-html5-20110525\/content-models.html\">Content models<\/a><\/li>\n<li>Quick demo\n<ul>\n<li>&lt;!doctype html&gt;<br \/>\n&lt;html lang=&#8221;en&#8221;&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta charset=&#8221;utf-8&#8243;&gt;<br \/>\n&lt;meta name=&#8221;description&#8221; content=&#8221;Notre Dame Web development course&#8221;&gt;<br \/>\n&lt;title&gt;Class Demo&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h1&gt;Hello world!&lt;\/h1&gt;<br \/>\n&lt;p&gt;This is a &lt;b&gt;very simple&lt;\/b&gt; demo. &lt;\/p&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Character_encodings_in_HTML#Character_references\">Character encodings in HTML<\/a>\n<ul>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_XML_and_HTML_character_entity_references\">https:\/\/en.wikipedia.org\/wiki\/List_of_XML_and_HTML_character_entity_references<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html\">Sectioning &amp; semantic elements<\/a>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#sample-outlines\">Outlines<\/a>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom.asp\">HTML DOM<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#the-nav-element\">Nav<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#the-article-element\">Article<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#the-section-element\">Section<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#the-aside-element\">Aside<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/grouping-content.html#the-div-element\">Div<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/grouping-content.html#the-main-element\">Main<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#the-header-element\">Header<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#the-header-element\">Footer<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#the-address-element\">Address<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/\">Accessible Rich Internet Applications (WAI-ARIA)<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/css\/default.asp\">CSS<\/a>\n<ul>\n<li>Inline styles\n<ul>\n<li>&lt;h2 style=&#8221;color:red; font-weight: normal;&#8221;&gt;Example of inline styling.&lt;\/h2&gt;<\/li>\n<li>Not easy to maintain, update<\/li>\n<li>Used for HTML mail and scripting<\/li>\n<\/ul>\n<\/li>\n<li>Style element in the &lt;head&gt;\n<ul>\n<li>CSS rules\n<ul>\n<li>&lt;style&gt;<br \/>\nh2 {<br \/>\ncolor: red;<br \/>\nfont-weight: normal;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/p>\n<ul>\n<li>&lt;h2&gt;I&#8217;m red.&lt;\/h2&gt;<\/li>\n<\/ul>\n<\/li>\n<li>&lt;style&gt;<br \/>\n.warning {<br \/>\ncolor: red;<br \/>\nfont-weight: normal;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/p>\n<ul>\n<li>&lt;h2 class=&#8221;warning&#8221;&gt;I&#8217;m red.&lt;\/h2&gt;<\/li>\n<li>&lt;h3 class=&#8221;warning&#8221;&gt;I&#8217;m red.&lt;\/h3&gt;<\/li>\n<\/ul>\n<\/li>\n<li>&lt;style&gt;<br \/>\nh2.warning {<br \/>\ncolor: red;<br \/>\nfont-weight: normal;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/p>\n<ul>\n<li>&lt;h2 class=&#8221;warning&#8221;&gt;I&#8217;m red.&lt;\/h2&gt;<\/li>\n<li>&lt;h3 class=&#8221;warning&#8221;&gt;I&#8217;m not red.&lt;\/h3&gt;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>External stylesheet\n<ul>\n<li>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;styles.css&#8221;&gt;<\/li>\n<li>Content of &#8220;styles.css&#8221; might be what could be in the head&#8217;s style element of a single page, but now can be used by an entire web site (multiple web pages).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/www3.nd.edu\/~qzhi\/class\/webapplication\/bootstrap\/bootstrap.pdf\">Bootstrap<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Quiz Homework, quiz, grading Late homework &#8211; 1 day late = 50% off, &gt;1 day late = 100% off Syllabus updated! \u00a0HTML HTML &#8211; page structure CSS &#8211; page design JS &#8211; page behavior Markup language Tags: &lt;p&gt; Elements: &lt;p&gt; content &lt;\/p&gt; Attributes: &lt;p lang=&#8221;en&#8221;&gt; Standards groups, major versions W3C: HTML 3.2, HTML 4.01, XHTML [&hellip;]<\/p>\n","protected":false},"author":415,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-84","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/users\/415"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":35,"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/posts\/84\/revisions\/135"}],"wp:attachment":[{"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.nd.edu\/gregmadey\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}