Notes for Web Dev Intro for Students By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 Slides: https://granneman.com/downloads/web-dev/Web-Dev-Intro-for-Students.pdf Notes: https://granneman.com/downloads/web-dev/Web-Dev-Intro-for-Students.txt ## Slide 3 https://www.granneman.com/presentations/all-presentations ## Slide 4 http://www.granneman.com ## Slide 8 Wikipedia contributors. “Markup language”. Wikipedia, The Free Encyclopedia, 18 June 2022, https://en.wikipedia.org/wiki/Markup_language. Web. 11 July 2022. Varagouli, Erika. “What Each Markup Language Is Used For”. Semrush, 18 Oct 2021, https://www.semrush.com/blog/markup-language/. Web. 11 July 2022. ## Slide 9 Markup is not programming ## Slide 10 This is AppleScript, so yes, this is programming ## Slide 11 John S. and James L. Knight Foundation. “File:Tim Berners-Lee-Knight.jpg”. Wikimedia Commons, 14 Sep 2008, https://commons.wikimedia.org/wiki/File:Tim_Berners-Lee-Knight.jpg. Web. 11 July 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 12 John S. and James L. Knight Foundation. “File:Tim Berners-Lee-Knight.jpg”. Wikimedia Commons, 14 Sep 2008, https://commons.wikimedia.org/wiki/File:Tim_Berners-Lee-Knight.jpg. Web. 11 July 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 14 John S. and James L. Knight Foundation. “File:Tim Berners-Lee-Knight.jpg”. Wikimedia Commons, 14 Sep 2008, https://commons.wikimedia.org/wiki/File:Tim_Berners-Lee-Knight.jpg. Web. 11 July 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 15 User:Sven. “File:W3C® Icon.svg”. Wikipedia, The Free Encyclopedia, 21 July 2008, https://en.wikipedia.org/wiki/File:W3C_Icon.svg. Public domain. ## Slide 16 Wikipedia contributors. “HTML”. Wikipedia, The Free Encyclopedia, 28 May. 2022, https://en.wikipedia.org/wiki/HTML. Web. 11 July 2022. Berners-Lee, Tim. “Hypertext Markup Language (HTML)”. World Wide Web Consortium (W3C), June 1993, https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt. Web. 11 July 2022. 5.1 World Wide Web Consortium (W3C). “HTML 5.1 Implementation report”. GitHub, 15 Sep 2016, https://w3c.github.io/test-results/html51/implementation-report.html. Web. 12 July 2022. Faulkner, Steve et al. “HTML 5.1 W3C Proposed Recommendation”. World Wide Web Consortium (W3C), 15 Sep 2016, https://www.w3.org/TR/2016/PR-html51-20160915/. Web. 12 July 2022. 5.2: Jaffe, Jeff. “W3C and WHATWGTo Work Together to Advance the Open Web Platform”. World Wide Web Consortium (W3C), 28 May 2019, https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/. Web. 11 July 2022. FIXME citations ## Slide 17 Berners-Lee, Tim. “WWW people”. World Wide Web. CERN, 1992, http://info.cern.ch/hypertext/WWW/TheProject.html. Web. 10 June 2023. ## Slide 18 HTML developed for documents, not programs/apps or page layout & design Berners-Lee, Tim. “WorldWideWeb: Proposal for a HyperText Project”. World Wide Web Consortium (W3C), 12 Nov 1990, https://www.w3.org/Proposal.html. Web. 11 July 2022. ## Slide 19 HTML developed for documents, not programs/apps or page layout & design Berners-Lee, Tim. “WorldWideWeb: Proposal for a HyperText Project”. World Wide Web Consortium (W3C), 12 Nov 1990, https://www.w3.org/Proposal.html. Web. 11 July 2022. ## Slide 20 Notice that Application is central to this group, not documents! Wikipedia contributors. “WHATWG”. Wikipedia, The Free Encyclopedia, 2 Apr. 2022, https://en.wikipedia.org/wiki/WHATWG. Web. 11 July 2022. “The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML, and apparent disregard for the needs of real-world web developers. So, in response, these organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.” “WHATWG – FAQ”. WHATWG, https://whatwg.org/faq. Web. 17 Mar 2023. WHATWG contributors, based on a PNG by Matthew Raymond. “File:WHATWG logo.svg”. Wikipedia, The Free Encyclopedia, 6 Mar 2014, https://en.wikipedia.org/wiki/File:WHATWG_logo.svg. Web. 11 July 2022. Public domain. ## Slide 21 “WHATWG — FAQ”. WHATWG, https://whatwg.org/faq. Web. 19 Mar 2023. ## Slide 22 Wikipedia contributors. “WHATWG”. Wikipedia, The Free Encyclopedia, 2 Apr. 2022, https://en.wikipedia.org/wiki/WHATWG. Web. 11 July 2022. ## Slide 24 Jaffe, Jeff. “W3C and WHATWGTo Work Together to Advance the Open Web Platform”. World Wide Web Consortium (W3C), 28 May 2019, https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/. Web. 11 July 2022. ## Slide 25 Hickson, Ian et al. “HTML Living Standard”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/. Web. 11 July 2022. ## Slide 26 Bos, Bert. “CSS current work & how to participate”. World Wide Web Consortium (W3C), 29 June 2022, https://www.w3.org/Style/CSS/current-work. Web. 11 July 2022. No CSS at the WHATWG website ## Slide 27 “WHATWG — FAQ”. WHATWG, https://whatwg.org/faq. Web. 19 Mar 2023. ## Slide 28 Deveria, Alexis [@Fyrd]. “Can I use… Support tables for HTML5, CSS3, etc”. Can I use…, 8 Sept 2020, https://caniuse.com. Web. 8 Sept 2020. ## Slide 29 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Web. 8 Sept 2020. ## Slide 30 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Web. 8 Sept 2020. ## Slide 31 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Web. 8 Sept 2020. ## Slide 32 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Web. 8 Sept 2020. ## Slide 33 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Web. 8 Sept 2020. ## Slide 34 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Web. 8 Sept 2020. ## Slide 35 Wikipedia contributors. “MDN Web Docs”. Wikipedia, The Free Encyclopedia, 11 Mar. 2022, https://en.wikipedia.org/w/index.php?title=MDN_Web_Docs&oldid=1076524886. Web. 11 Apr. 2022. ## Slide 36 MDN contributors. “MDN Web Docs”. MDN Web Docs, 10 Apr 2022, https://developer.mozilla.org/en-US/. Web. 2022-04-11. ## Slide 37 MDN contributors. “MDN Web Docs”. MDN Web Docs, 10 Apr 2022, https://developer.mozilla.org/en-US/. Web. 2022-04-11. ## Slide 38 MDN contributors. “MDN Web Docs”. MDN Web Docs, 10 Apr 2022, https://developer.mozilla.org/en-US/. Web. 2022-04-11. ## Slide 39 MDN contributors. “HTML elements reference - HTML: HyperText Markup Language | MDN”. MDN Web Docs, 3 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element. Web. 11 July 2022. ## Slide 40 MDN contributors. “CSS reference - CSS: Cascading Style Sheets | MDN”. MDN Web Docs, 10 July 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference. Web. 11 July 2022. ## Slide 41 MDN contributors. “JavaScript | MDN”. MDN Web Docs, 6 July 2022, https://developer.mozilla.org/en-US/docs/Web/JavaScript. Web. 11 July 2022. ## Slide 43 “mdn main - Google Search”. Google, 23 Jan 2023, https://www.google.com/search?q=mdn%20main. Web. 23 Jan 2023. ## Slide 44 “mdn main - Kagi Search”. Kagi, 23 Jan 2023, https://kagi.com/search?q=mdn+main. Web. 23 Jan 2023. ## Slide 45 “mdn main - Brave Search”. Brave Search, 23 Jan 2023, https://search.brave.com/search?q=mdn+main. Web. 23 Jan 2023. ## Slide 50 Liew, Zell. “Why you should care about supporting older browsers”. freeCodeCamp, 11 Jan 2019, https://medium.freecodecamp.org/why-you-should-care-about-supporting-older-browsers-39bbc28fb7fd. Web. 11 July 2022. ## Slide 53 Viewport != screen size, except on mobile devices, where every app is full screen ## Slide 54 Every browser has chrome; Google adopted the name Chrome as a little joke (not that it’s super-funny or anything!) ## Slide 57 Last legacy Edge was 19; new Chromium-based Edge starts at version 79 (nicknamed Edgium, because it’s Chromium-based) Lardinois, Frederic. “Microsoft Edge goes Chromium (and macOS)”. TechCrunch, 6 Dec 2018, https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/. Web. 11 July 2022. ## Slide 58 Microsoft 365 + Microsoft Edge. “Microsoft 365 apps say farewell to Internet Explorer 11 and Windows 10 sunsets Microsoft Edge Legacy”. Microsoft Tech Community, 8 Feb 2021, https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666. Web. 11 July 2022. Microsoft. “Internet Explorer 11 desktop application ended support for certain operating systems”. Microsoft Docs, 15 June 2022, https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support. Web. 11 July 2022. ## Slide 59 Vagle, Jeffrey. “Google's Chrome browser is now a thin candy shell of browser interface around a full-time surveillance engine and personal data monetization machine. Find a better browser, folks. ¶ [https://arstechnica.com/gadgets/2023/0…](https://arstechnica.com/gadgets/2023/09/googles-widely-opposed-ad-platform-the-privacy-sandbox-launches-in-chrome/)”. *Mastodon*. mastodon.lawprofs.org, 9 Sep 2023, https://mastodon.lawprofs.org/@jvagle/111035595027721605. Web. 21 Sep 2023. ## Slide 60 Wikipedia contributors. “Chromium (web browser)”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Chromium_(web_browser). Web. 12 July 2022. ## Slide 61 Wikipedia contributors. “Chromium (web browser)”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Chromium_(web_browser). Web. 12 July 2022. Amazon Silk (2011): developed by Amazon for Kindle Fire Arc (2022): very innovative browser doing many new things; currently macOS-only Blisk (2016): aimed at web developers, featuring device simulations Brave (2016): privacy-focused, with a built-in ad- & tracking-blocker Cốc Cốc (2013): most popular in Vietnam Epic (2013): privacy-focused & aimed at Indian users Vivaldi (2016): aimed at power users ## Slide 62 Safari, Firefox, Chrome Brave, Edge, Vivaldi Yandex Browser, Opera, Samsung Internet benzoix. “Valentines day. happy boyfriend with red hair, smiling and showing heart gesture, i love you, standing over white background”. Can Stock Photo, https://www.canstockphoto.com/valentines-day-happy-boyfriend-with-red-107325376.html. Web. 31 July 2023. Licensed from Can Stock Photo on 31 July 2023. Modified by converting to the WebP format. ## Slide 63 Safari, Firefox, Chromium benzoix. “Confused boyfriend with red hair shrugging, spread hands sideways and staring at camera puzzled, asking what, stnading over”. Can Stock Photo, https://www.canstockphoto.com/confused-boyfriend-with-red-hair-107171449.html. Web. 29 July 2023. Licensed from Can Stock Photo on 29 July 2023. Modified by converting to the WebP format. ## Slide 64 StatCounter. “Browser Market Share Worldwide”. Statcounter Global Stats, Jan 2022, https://gs.statcounter.com/browser-market-share#monthly-200901-202201. Web. 23 January 2022. ## Slide 65 Wikipedia contributors. “JavaScript engine”. Wikipedia, The Free Encyclopedia, 7 June 2022, https://en.wikipedia.org/wiki/JavaScript_engine. Web. 12 July 2022. ## Slide 66 Wikipedia contributors. “JavaScript engine”. Wikipedia, The Free Encyclopedia, 7 June 2022, https://en.wikipedia.org/wiki/JavaScript_engine. Web. 12 July 2022. Lardinois, Frederic. “Microsoft Edge goes Chromium (and macOS)”. TechCrunch, 6 Dec 2018, https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/. Web. 11 July 2022. ## Slide 68 Spyglass ➝ IE (Mac & UNIX version killed) ➝ Edge (EdgeHTML) ➝ Edge (Chromium) Wikipedia contributors. “Spyglass, Inc.”. Wikipedia, The Free Encyclopedia, 11 June 2022, https://en.wikipedia.org/wiki/Spyglass,_Inc.. Web. 12 July 2022. Wikipedia contributors. “Internet Explorer”. Wikipedia, The Free Encyclopedia, 9 July 2022, https://en.wikipedia.org/wiki/Internet_Explorer. Web. 12 July 2022. Wikipedia contributors. “Microsoft Edge”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Microsoft_Edge. Web. 12 July 2022. ## Slide 69 Mosaic ➝ Mozilla (Mosaic Killer) Netscape ➝ Mozilla Wikipedia contributors. “Mosaic (web browser)”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Mosaic_(web_browser). Web. 12 July 2022. Wikipedia contributors. “Netscape (web browser)”. Wikipedia, The Free Encyclopedia, 26 June 2022, https://en.wikipedia.org/wiki/Netscape_(web_browser). Web. 12 July 2022. Wikipedia contributors. “Mozilla Application Suite”. Wikipedia, The Free Encyclopedia, 18 Apr. 2022, https://en.wikipedia.org/wiki/Mozilla_Application_Suite. Web. 12 July 2022. Wikipedia contributors. “SeaMonkey”. Wikipedia, The Free Encyclopedia, 21 June 2022, https://en.wikipedia.org/wiki/SeaMonkey. Web. 12 July 2022. Wikipedia contributors. “Firefox”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Firefox. Web. 12 July 2022. Wikipedia contributors. “Mozilla Thunderbird”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Mozilla_Thunderbird. Web. 12 July 2022. ## Slide 70 Konqueror (KHTML) ➝ Safari (WebKit) ➝ Chrome ➝ Chrome () ➝ Chromium-based browsers (Brave, Vivaldi, Opera, Edge, Yandex) Wikipedia contributors. “Konqueror”. Wikipedia, The Free Encyclopedia, 19 May. 2022, https://en.wikipedia.org/wiki/Konqueror. Web. 12 July 2022. Wikipedia contributors. “Safari (web browser)”. Wikipedia, The Free Encyclopedia, 24 June 2022, https://en.wikipedia.org/wiki/Safari_(web_browser). Web. 12 July 2022. Wikipedia contributors. “Chromium (web browser)”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Chromium_(web_browser). Web. 12 July 2022. Wikipedia contributors. “Google Chrome”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Google_Chrome. Web. 12 July 2022. Wikipedia contributors. “Brave (web browser)”. Wikipedia, The Free Encyclopedia, 5 July 2022, https://en.wikipedia.org/wiki/Brave_(web_browser). Web. 12 July 2022. Wikipedia contributors. “Vivaldi (web browser)”. Wikipedia, The Free Encyclopedia, 28 June 2022, https://en.wikipedia.org/wiki/Vivaldi_(web_browser). Web. 12 July 2022. Wikipedia contributors. “Opera (web browser)”. Wikipedia, The Free Encyclopedia, 24 June 2022, https://en.wikipedia.org/wiki/Opera_(web_browser). Web. 12 July 2022. Wikipedia contributors. “Microsoft Edge”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Microsoft_Edge. Web. 12 July 2022. Wikipedia contributors. “Yandex Browser”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Yandex_Browser. Web. 12 July 2022. ## Slide 73 Wikipedia contributors. “Konqueror”. Wikipedia, The Free Encyclopedia, 19 May. 2022, https://en.wikipedia.org/wiki/Konqueror. Web. 12 July 2022. Wikipedia contributors. “GNOME Web”. Wikipedia, The Free Encyclopedia, 28 June 2022, https://en.wikipedia.org/wiki/GNOME_Web. Web. 12 July 2022. ## Slide 76 Wikipedia contributors. “Web server”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Web_server. Web. 12 July 2022. ## Slide 77 Netcraft. “December 2022 Web Server Survey”. Netcraft, 20 Dec 2022, https://news.netcraft.com/archives/2022/12/20/december-2022-web-server-survey.html. Web. 23 Jan 2023. Wikipedia contributors. “Apache HTTP Server”. Wikipedia, The Free Encyclopedia, 18 June 2022, https://en.wikipedia.org/wiki/Web_server. Web. 12 July 2022. Wikipedia contributors. “Internet Information Services”. Wikipedia, The Free Encyclopedia, 31 May 2022, https://en.wikipedia.org/wiki/Internet_Information_Services. Web. 12 July 2022. Wikipedia contributors. “Nginx”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Nginx. Web. 12 July 2022. ## Slide 79 Wikipedia contributors. “Communication protocol”. Wikipedia, The Free Encyclopedia, 4 July 2022, https://en.wikipedia.org/wiki/Communication_protocol. Web. 12 July 2022. ## Slide 80 Wikipedia contributors. “Hypertext Transfer Protocol”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol. Web. 12 July 2022. ## Slide 81 Wikipedia contributors. “Hypertext Transfer Protocol”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol. Web. 12 July 2022. ## Slide 82 Wikipedia contributors. “List of HTTP status codes”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/List_of_HTTP_status_codes. Web. 12 July 2022. ## Slide 107 Actually, that’s not quite true — there’s also XML in general (if styled) & particular variants of XML (e.g., SVG, MathML, & XHTML) Wikipedia contributors. “HTML”. Wikipedia, The Free Encyclopedia, 28 May 2022, https://en.wikipedia.org/wiki/HTML. Web. 12 July 2022. Wikipedia contributors. “CSS”. Wikipedia, The Free Encyclopedia, 4 July 2022, https://en.wikipedia.org/wiki/CSS. Web. 12 July 2022. Wikipedia contributors. “JavaScript”. Wikipedia, The Free Encyclopedia, 10 July 2022, https://en.wikipedia.org/wiki/JavaScript. Web. 12 July 2022. ## Slide 108 Wikipedia contributors. “HTML”. Wikipedia, The Free Encyclopedia, 28 May 2022, https://en.wikipedia.org/wiki/HTML. Web. 12 July 2022. Wikipedia contributors. “CSS”. Wikipedia, The Free Encyclopedia, 4 July 2022, https://en.wikipedia.org/wiki/CSS. Web. 12 July 2022. Wikipedia contributors. “JavaScript”. Wikipedia, The Free Encyclopedia, 10 July 2022, https://en.wikipedia.org/wiki/JavaScript. Web. 12 July 2022. ## Slide 109 Wikipedia contributors. “Java (programming language)”. Wikipedia, The Free Encyclopedia, 2 July 2022, https://en.wikipedia.org/wiki/Java_(programming_language). Web. 12 July 2022. Netscape Communications Corporation. “Netscape and Sun Announce Javascript, the Open, Cross-Platform Object Scripting Language for Enterprise Networks and the Internet”. Internet Archive, 16 Sept 2007, https://web.archive.org/web/20070916144913/https://wp.netscape.com/newsref/pr/newsrelease67.html. Web. 11 July 2022. Rauschmayer, Dr. Axel. “Chapter 4. How JavaScript Was Created”. Internet Archive, 30 Jan 2015, https://web.archive.org/web/20200227184037/https://speakingjs.com/es5/ch04.html. Web. 11 July 2022. ## Slide 110 Diagram by Jans Carton ## Slide 111 Note: A background color is set on the Document, which is inherited by the other nodes in the document except for the Sidebar, which has a different background color that is then inherited by everything in it A default font is set on the Document, which is also inherited, except for the Sidebar, which reduces the size of the font Headers have a different font to set them apart from the body text Diagram by Jans Carton ## Slide 112 Diagram by Jans Carton ## Slide 113 A more detailed, accurate browser processing pipeline can be found in the CSS Overview presentation Diagram by Scott Granneman & Jans Carton ## Slide 114 Exceptions: Some HTML elements are conveniences for avoiding writing CSS (e.g., , , ) or for structure (
& ) Some CSS inserts content (e.g., ::before & ::after) or modifies behavior (e.g., animate & transition) Some JavaScript modifies HTML & CSS to change meaning or presentation, not for behavior ## Slide 119 To see the Develop menu in Safari, you must first open Safari Preferences > Advanced, & then check Show Develop menu in menu bar Using the Inspector does not show you the source by default; it shows you a representation of the DOM — more on that in CSS Overview ## Slide 121 https://www.nytimes.com; accessed July 27, 2019 ## Slide 122 https://www.nytimes.com; accessed July 27, 2019 ## Slide 123 https://www.nytimes.com; accessed July 27, 2019 ## Slide 124 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 125 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 126 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 127 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 128 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 129 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 130 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 131 inductivo. “Tatuaje HTML”. Inductivo, 9 June 2007, https://inductivo.wordpress.com/2007/06/09/tatuaje-html/. Web. 21 December 2021. This is the earliest source for the image that I can find. Fair use. ## Slide 132 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 133 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 134 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 136 WHATWG. “13.1.2 Elements”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#elements-2. Web. 11 July 2022. MDN contributors. “HTML”. MDN Web Docs, 27 Apr 2022, https://developer.mozilla.org/en-US/docs/Glossary/HTML. Web. 11 July 2022. MDN contributors. “Tag”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Tag. Web. 11 July 2022. “Elements and tags are not the same things.”: MDN contributors. “Elements”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Element. Web. 11 July 2022. ## Slide 137 WHATWG. “13.1.2 Elements”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#void-elements. Web. 11 July 2022. MDN contributors. “Empty element”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Empty_element. Web. 11 July 2022. ## Slide 138 MDN contributors. “Elements”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Element. Web. 11 July 2022. WHATWG. “13.1.2 Elements”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#elements-2. Web. 11 July 2022. ## Slide 139 MDN contributors. “HTML”. MDN Web Docs, 27 Apr 2022, https://developer.mozilla.org/en-US/docs/Glossary/HTML. Web. 11 July 2022. WHATWG. “13.1.2.3 Attributes”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#attributes-2. Web. 11 July 2022. ## Slide 141 Hickson, Ian et al. “4.7.1 The img element”. HTML5, World Wide Web Consortium (W3C), 28 Oct 2014, https://web.archive.org/web/20160304022827/https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element. Web. 10 Sept 2017. ## Slide 142 The following were added: srcset, sizes, referrerpolicy, decoding, & loading WHATWG. “HTML Standard”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element. Web. 11 July 2022. ## Slide 143 The following were added: ping & referrerpolicy Hickson, Ian et al. “4.5.1 The a element”. HTML5, World Wide Web Consortium (W3C), 28 Oct 2014, https://web.archive.org/web/20170910073501/http://www.w3.org/TR/html5/Overview.html#contents. Web. 10 Sept 2017. WHATWG. “4.5.1 The a element”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element. Web. 11 July 2022. ## Slide 144 Hickson, Ian et al. “4.10.5 The input element”. HTML5, World Wide Web Consortium (W3C), 28 Oct 2014, https://web.archive.org/web/20170910073230/http://www.w3.org/TR/html5/forms.html#the-input-element. Web. 10 Sept 2017. WHATWG. “4.10.5 The input element”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/input.html#the-input-element. Web. 11 July 2022. ## Slide 145 The following were removed: autofocus & inputmode Hickson, Ian et al. “4.10.5 The input element”. HTML5, World Wide Web Consortium (W3C), 28 Oct 2014, https://web.archive.org/web/20170910073230/http://www.w3.org/TR/html5/forms.html#the-input-element. Web. 10 Sept 2017. WHATWG. “4.10.5 The input element”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/input.html#the-input-element. Web. 11 July 2022. ## Slide 146 “There must never be two or more attributes on the same start tag whose names are an ASCII case-insensitive match for each other.” WHATWG. “13.1.2.3 Attributes”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#attributes-2. Web. 11 July 2022. ## Slide 147 Order does matter to humans, so figure out what works for your team & stick to that ## Slide 148 Raggett, Dave et al. “13.7.4 Alignment”. HTML 4.01 Specification, World Wide Web Consortium (W3C), 24 Dec 1999, https://www.w3.org/TR/html401/struct/objects.html#adef-align-IMG. Web. 11 July 2022. “A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML. … This specification includes examples that illustrate how to avoid using deprecated elements. In most cases these depend on user agent support for style sheets. In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist…” Raggett, Dave et al. “4.1 Definitions”. HTML 4.01 Specification, World Wide Web Consortium (W3C), 24 Dec 1999, https://www.w3.org/TR/html401/conform.html#deprecated. Web. 11 July 2022. ## Slide 149 MDN contributors. “
: The Centered Text element”. MDN Web Docs, 10 May 2023, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center. Web. 19 Oct 2023. ## Slide 150 Granneman, Scott. “Everything You Need to Know About DTDs”. Scott Granneman, 2013, https://www.granneman.com/webdev/coding/dtds/. Web. 11 July 2022. ## Slide 152 MDN contributors. “Doctype”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Doctype. Web. 11 July 2022. “A DOCTYPE is a required preamble.”: WHATWG. “13.1.1 The DOCTYPE”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#the-doctype. Web. 11 July 2022. Pieters, Simon. “Quirks Mode Living Standard”. WHATWG, 15 Nov 2022, https://quirks.spec.whatwg.org. Web. 17 Mar 2023. ## Slide 153 Raggett, Dave et al. “7.2 HTML version information”. HTML 4.01 Specification, World Wide Web Consortium (W3C), 24 Dec 1999, https://www.w3.org/TR/html401/struct/global.html#h-7.2. Web. 11 July 2022. ## Slide 154 MDN contributors. “Doctype”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Doctype. Web. 11 July 2022. WHATWG. “13.1.1 The DOCTYPE”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#the-doctype. Web. 11 July 2022. FIXME: https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode ## Slide 155 Granneman, Scott. “Everything You Need to Know About Character Encoding”. Scott Granneman, 2016, https://www.granneman.com/webdev/coding/characterencoding/. Web. 12 July 2022. ## Slide 156 MDN contributors. “Character encoding”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/character_encoding. Web. 11 July 2022. “A DOCTYPE is a required preamble.” WHATWG. “13.1.1 The DOCTYPE”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#the-doctype. Web. 11 July 2022. Ishida, Richard. “Character encodings: Essential concepts”. World Wide Web Consortium (W3C), 31 Aug 2018, https://www.w3.org/International/articles/definitions-characters/. Web. 11 July 2022. Wikipedia contributors. “Character encoding”. Wikipedia, The Free Encyclopedia, 26 June 2022, https://en.wikipedia.org/wiki/Character_encoding. Web. 12 July 2022. ## Slide 157 Wikipedia contributors. “Mojibake”. Wikipedia, The Free Encyclopedia, 2 July 2022, https://en.wikipedia.org/wiki/Mojibake. Web. 12 July 2022. FIXME add audio file pronouncing word ## Slide 161 Wikipedia contributors. “ASCII”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/ASCII. Web. 12 July 2022. ## Slide 162 00 NUL End of a string 07 BEL Bell or sound or screen flash 08 BS Backspace 09 HT Horizontal tab 0A LF Line feed (end of line with UNIX) 0B VT Vertical tab OC FF Form feed: eject paper or clear screen 0D CR Carriage return (end of line with classic Mac OS) 1A SUB (EOF or ^Z; Windows end of file) 1B ESC Escape Windows uses CR+LF for end of line Anomie. “File:ASCII Code Chart.svg”. Wikimedia Commons, 29 Aug 2008, https://commons.wikimedia.org/wiki/File:ASCII_Code_Chart.svg. Web. 12 July 2022. Public domain. Wikipedia contributors. “Control character”. Wikipedia, The Free Encyclopedia, 5 June 2022, https://en.wikipedia.org/wiki/Control_character. Web. 12 July 2022. ## Slide 163 Ange Albertini (@angealbertini). Twitter (January 13, 2018). . Accessed December 24, 2018. ## Slide 165 Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Web. 12 July 2022. Unicode version 15.1: Wikipedia contributors. “List of Unicode characters”. Wikipedia, The Free Encyclopedia, 13 Sep. 2023, https://en.wikipedia.org/w/index.php?title=List_of_Unicode_characters&oldid=1175141255. Web. 17 Sep. 2023. Unicode version 15: “As of Unicode version 15.0, there are 149,186 characters with code points, covering 161 modern and historical scripts, as well as multiple symbol sets.” Wikipedia contributors. “List of Unicode characters”. Wikipedia, The Free Encyclopedia, 23 Jan. 2023, https://en.wikipedia.org/wiki/List_of_Unicode_characters. Web. 24 Jan. 2023. Unicode version 14: “As of Unicode version 14.0, there are 144,697 characters with code points, covering 159 modern and historical scripts, as well as multiple symbol sets.” Wikipedia contributors. “List of Unicode characters”. Wikipedia, The Free Encyclopedia, 28 June 2022, https://en.wikipedia.org/w/index.php?title=List_of_Unicode_characters&oldid=1095496931. Web. 12 July 2022. Unicode version 13: “This is a list of Unicode characters; there are 143,859 characters, with Unicode 13.0, covering 154 modern and historical scripts, as well as multiple symbol sets.” Wikipedia contributors. “List of Unicode characters”. Wikipedia, The Free Encyclopedia, 5 Aug. 2020, https://en.wikipedia.org/w/index.php?title=List_of_Unicode_characters&oldid=971301400. Web. 12 July 2022. Unicode version 11 “As of version 11.0, Unicode contains a repertoire of over 137,000 characters covering 146 modern and historic scripts, as well as multiple symbol sets.”: Wikipedia contributors. “List of Unicode characters”. Wikipedia, The Free Encyclopedia, 10 Oct. 2018, https://en.wikipedia.org/w/index.php?title=List_of_Unicode_characters&oldid=863396406. Web. 12 July 2022. “In total Noto fonts cover nearly 64,000 characters, which is under half of the 137,439 characters defined in Unicode 11.0 (released in June 2018).” https://en.wikipedia.org/wiki/Noto_fonts ## Slide 166 “Unicode 15.1 specifies a total of 3,782 emoji using 1,424 characters spread across 24 blocks”: Wikipedia contributors. “Emoji”. Wikipedia, The Free Encyclopedia, 14 Sep. 2023, https://en.wikipedia.org/w/index.php?title=Emoji&oldid=1175336069. Web. 17 Sep. 2023. “Unicode 15.0 represents emoji using 1,424 characters spread across 24 blocks”: Wikipedia contributors. “Emoji”. Wikipedia, The Free Encyclopedia, 20 Jan. 2023, https://en.wikipedia.org/w/index.php?title=Emoji&oldid=1134810961. Web. 24 Jan. 2023. “Unicode 14.0 represents emoji using 1,404 characters spread across 24 blocks”: Wikipedia contributors. “Emoji”. Wikipedia, The Free Encyclopedia, 17 Jan. 2022, https://en.wikipedia.org/w/index.php?title=Emoji&oldid=1066179514. Web. 23 Jan. 2022. “Unicode 13.0 represents emoji using 1,367 characters spread across 24 blocks”: https://en.wikipedia.org/w/index.php?title=Emoji&oldid=970907448, 2020-08-06) ## Slide 167 Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Web. 12 July 2022. “Unicode Blocks”. FileFormat.Info, http://www.fileformat.info/info/unicode/block/index.htm. Web. 12 July 2022. ## Slide 168 Prokopov, Nikita. “The Absolute Minimum Every Software Developer Must Know About Unicode in 2023 (Still No Excuses!)”. Blog @ tonsky.me, https://tonsky.me/blog/unicode/, 2 Oct 2023. Web. 4 Oct 2023. Fair use. Modified by converting to the WebP format. ## Slide 169 Wikipedia contributors. “JIS X 0208”. Wikipedia, The Free Encyclopedia, 2 June 2022, https://en.wikipedia.org/wiki/JIS_X_0208. Web. 12 July 2022. ## Slide 170 Wikipedia contributors. “JIS X 0208”. Wikipedia, The Free Encyclopedia, 2 June 2022, https://en.wikipedia.org/wiki/JIS_X_0208. Web. 12 July 2022. ## Slide 171 McCann, Paul O'Leary. “A Spectre is Haunting Unicode”. Dampfkraft, 29 July 2018, https://www.dampfkraft.com/ghost-characters.html. Web. 12 July 2022. Wikipedia contributors. “JIS X 0208”. Wikipedia, The Free Encyclopedia, 2 June 2022, https://en.wikipedia.org/wiki/JIS_X_0208. Web. 12 July 2022. ## Slide 172 Wikipedia contributors. “JIS X 0208”. Wikipedia, The Free Encyclopedia, 2 June 2022, https://en.wikipedia.org/wiki/JIS_X_0208. Web. 12 July 2022. ## Slide 173 McCann, Paul O'Leary. “A Spectre is Haunting Unicode”. Dampfkraft, 29 July 2018, https://www.dampfkraft.com/ghost-characters.html. Web. 12 July 2022. ## Slide 174 Prokopov, Nikita. “The Absolute Minimum Every Software Developer Must Know About Unicode in 2023 (Still No Excuses!)”. Blog @ tonsky.me, https://tonsky.me/blog/unicode/, 2 Oct 2023. Web. 4 Oct 2023. Fair use. Modified by converting to the WebP format. Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Web. 12 July 2022. 2018, 92.5%: “UTF-8 has been the dominant character encoding (the ‘mandatory’ Unicode encoding) for the World Wide Web since 2009, and as of October 2018 accounts for 92.5% of all web pages (some of which are simply ASCII, as it's a subset of UTF-8) and 95.0% of the top 1,000 highest ranked web pages.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 5 Nov. 2018, https://en.wikipedia.org/w/index.php?title=UTF-8&oldid=867377787. Web. 12 July 2022. 2020, 95%: “UTF-8 is by far the most common encoding for the World Wide Web, accounting for over 95% of all web pages, and up to 100% for some languages, as of 2020.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 2 Aug. 2020, https://en.wikipedia.org/w/index.php?title=UTF-8&oldid=970781952. Web. 3 Aug 2022. 2022, 98%: “UTF-8 is the dominant encoding for the World Wide Web (and internet technologies), accounting for 98% of all web pages, and up to 100.0% for some languages, as of 2022.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/w/index.php?title=UTF-8&oldid=1095950409. Web. 12 July 2022. ## Slide 175 Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Web. 12 July 2022. 2018, 92.5%: “UTF-8 has been the dominant character encoding (the ‘mandatory’ Unicode encoding) for the World Wide Web since 2009, and as of October 2018 accounts for 92.5% of all web pages (some of which are simply ASCII, as it's a subset of UTF-8) and 95.0% of the top 1,000 highest ranked web pages.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 5 Nov. 2018, https://en.wikipedia.org/w/index.php?title=UTF-8&oldid=867377787. Web. 12 July 2022. 2020, 95%: “UTF-8 is by far the most common encoding for the World Wide Web, accounting for over 95% of all web pages, and up to 100% for some languages, as of 2020.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 2 Aug. 2020, https://en.wikipedia.org/w/index.php?title=UTF-8&oldid=970781952. Web. 3 Aug 2022. 2022, 98%: “UTF-8 is the dominant encoding for the World Wide Web (and internet technologies), accounting for 98% of all web pages, and up to 100.0% for some languages, as of 2022.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/w/index.php?title=UTF-8&oldid=1095950409. Web. 12 July 2022. ## Slide 176 Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Web. 12 July 2022. 2018, 92.5%: “UTF-8 has been the dominant character encoding (the ‘mandatory’ Unicode encoding) for the World Wide Web since 2009, and as of October 2018 accounts for 92.5% of all web pages (some of which are simply ASCII, as it's a subset of UTF-8) and 95.0% of the top 1,000 highest ranked web pages.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 5 Nov. 2018, https://en.wikipedia.org/w/index.php?title=UTF-8&oldid=867377787. Web. 12 July 2022. 2020, 95%: “UTF-8 is by far the most common encoding for the World Wide Web, accounting for over 95% of all web pages, and up to 100% for some languages, as of 2020.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 2 Aug. 2020, https://en.wikipedia.org/w/index.php?title=UTF-8&oldid=970781952. Web. 3 Aug 2022. 2022, 98%: “UTF-8 is the dominant encoding for the World Wide Web (and internet technologies), accounting for 98% of all web pages, and up to 100.0% for some languages, as of 2022.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/w/index.php?title=UTF-8&oldid=1095950409. Web. 12 July 2022. ## Slide 177 “In total, Noto fonts cover nearly 64,000 characters, which is under half of the 149,186 characters defined in Unicode 15.0 (released in September 2022).” Wikipedia contributors. “Noto fonts”. Wikipedia, The Free Encyclopedia, 6 June 2022, https://en.wikipedia.org/w/index.php?title=Noto_fonts&oldid=1091882026. Web. 12 July 2022. Google. “Noto: A typeface for the world”. Google Fonts, https://fonts.google.com/noto. Web. 12 July 2022. ## Slide 178 Wikipedia contributors. “Noto fonts”. Wikipedia, The Free Encyclopedia, 6 June 2022, https://en.wikipedia.org/wiki/Noto_fonts. Web. 12 July 2022. Nguyen, Anh [@pwign]. “Bowl of vegetable salad”. Unsplash, 29 Dec 2018, https://unsplash.com/photos/_Uqj5BQb-mw. Web. 12 July 2022. ## Slide 179 Wikipedia contributors. “Noto fonts”. Wikipedia, The Free Encyclopedia, 6 June 2022, https://en.wikipedia.org/wiki/Noto_fonts. Web. 12 July 2022. ## Slide 182 MusicBrainz Foundation. “Music of the Spheres”. MusicBrainz, 2 Nov 2021, https://musicbrainz.org/release/b2de889c-6940-49ac-84be-3c0ea8733621. Web. 12 Nov 2023. ## Slide 183 “Music | qebrus”. Bandcamp, https://exophobiaorgqebrus.bandcamp.com/music. Web. 12 Nov 2023. ## Slide 184 Wikipedia contributors. “Four Tet discography”. Wikipedia, The Free Encyclopedia, 6 Nov. 2023, https://en.wikipedia.org/wiki/Four_Tet_discography. Web. 13 Nov. 2023. ## Slide 185 Wikipedia contributors. “Four Tet discography”. Wikipedia, The Free Encyclopedia, 6 Nov. 2023, https://en.wikipedia.org/wiki/Four_Tet_discography. Web. 13 Nov. 2023. ## Slide 186 Wikipedia contributors. “Four Tet discography”. Wikipedia, The Free Encyclopedia, 6 Nov. 2023, https://en.wikipedia.org/wiki/Four_Tet_discography. Web. 13 Nov. 2023. ## Slide 190 “AddDefaultCharset Directive”. Apache HTTP Server Version 2.4, Apache HTTP Server Project, 2022, https://httpd.apache.org/docs/2.4/mod/core.html#adddefaultcharset. Web. 12 July 2022. ## Slide 191 MDN contributors. “: The metadata element”. MDN Web Docs, 1 July 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta. Web. 11 July 2022. MDN contributors. “Character encoding”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/character_encoding. Web. 11 July 2022. ## Slide 192 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid#_element_and_charset_attribute FIXME look for cite in character encoding above ## Slide 193 MDN contributors. “: The metadata element”. MDN Web Docs, 1 July 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta. Web. 11 July 2022. ## Slide 194 WHATWG. “4.2.5.4 Specifying the document's character encoding”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/semantics.html#charset. Web. 11 July 2022. MDN contributors. “: The metadata element”. MDN Web Docs, 1 July 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta. Web. 11 July 2022. ## Slide 196 Ishida, Richard. “Declaring character encodings in HTML”. World Wide Web Consortium (W3C), 26 Feb 2014, https://www.w3.org/International/questions/qa-html-encoding-declarations. Web. 12 July 2022. ## Slide 198 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, https://codepen.io/websanity/pen/qBqZYv?editors=1000. Web. 11 July 2022. ## Slide 200 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, https://codepen.io/websanity/pen/qBqZYv?editors=1000. Web. 11 July 2022. ## Slide 201 Tricked you! There aren’t any differences in the rendered webpage on the right! WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 202 Hickson, Ian et al. “13.2.2 Parse errors”. WHATWG, HTML Living Standard, 19 Mar 2023, https://html.spec.whatwg.org/multipage/parsing.html#parse-errors. Web. 19 Mar 2023. 51 specific parse errors as of 19 Mar 2023. ## Slide 203 van Schoonderwalt, Mike. “A Man Flashing the Thumbs Down Sign”. Pexels, 3 Oct 2020, https://www.pexels.com/photo/a-man-flashing-the-thumbs-down-sign-5511613/. Web. 19 Mar 023. Licensed from Pexels: https://www.pexels.com/license/. Modified by converting to WebP & cropping. ## Slide 205 MDN contributors. “Getting started with HTML”. MDN Web Docs, 6 May 2022, https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started. Web. 12 July 2022. WHATWG. “13.1.6 Comments”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#comments. Web. 11 July 2022. ## Slide 206 MDN contributors. “Getting started with HTML”. MDN Web Docs, 6 May 2022, https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started. Web. 12 July 2022. WHATWG. “13.1.6 Comments”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#comments. Web. 11 July 2022. ## Slide 207 WebSanity. “HTML: Comments”. CodePen, 9 May 2014, https://codepen.io/websanity/pen/zYqjQM?editors=1000. Web. 12 July 2022. ## Slide 208 Hickson, Ian et al. “13.2.2 Parse errors”. WHATWG, HTML Living Standard, 19 Mar 2023, https://html.spec.whatwg.org/multipage/parsing.html#parse-errors. Web. 19 Mar 2023. ## Slide 217 Jpereira. “Rapa das bestas sabucedo 2 [Shaving of elderly beasts]”. Wikimedia Commons, 27 Feb 2013, https://en.wikipedia.org/wiki/Horse_behavior#mediaviewer/File:Rapa_das_bestas_sabucedo_2_jpereira.jpg. Web. 23 Jan 2022. ## Slide 226 Stefán Jökull Sigurðarson - CCP Ghostrider [@stebets]. “[Animated gif of running baby]”. Twitter, 3 November 2021, https://twitter.com/stebets/status/1456040940053860353. Web. 28 November 2021. ## Slide 227 Stefán Jökull Sigurðarson - CCP Ghostrider [@stebets]. “[Animated gif of running baby]”. Twitter, 3 November 2021, https://twitter.com/stebets/status/1456040940053860353. Web. 28 November 2021. ## Slide 228 Stefán Jökull Sigurðarson - CCP Ghostrider [@stebets]. “[Animated gif of running baby]”. Twitter, 3 November 2021, https://twitter.com/stebets/status/1456040940053860353. Web. 28 November 2021. ## Slide 229 Wikipedia contributors. “WYSIWYG”. Wikipedia, The Free Encyclopedia, 3 July 2022, https://en.wikipedia.org/w/index.php?title=WYSIWYG&oldid=1096211189. Web. 12 July 2022. ## Slide 230 Pinnikas, Nikolaos. “Quicksoft PC-Write 2.55”. YouTube, 20 June 2014, https://www.youtube.com/watch?v=JJ9x1peCJRg, 0:51. Web. 12 July 2022. Fair use. Wiki contributors. “PC-Write”. Just Solve the File Format Problem, 23 Apr 2018, http://justsolve.archiveteam.org/wiki/PC-Write. Web. 12 July 2022. ## Slide 231 Constine, Josh. “Quip Is A Beautiful New Mobile-First Word Processor From Ex-Facebook CTO Bret Taylor”. TechCrunch, 30 July 2013, https://techcrunch.com/2013/07/30/quip-mobile-word-processor/. Web. 31 Aug 2015. Fair use. ## Slide 252 https://en.wikipedia.org/wiki/File:W8Notepad.png ## Slide 255 Microsoft. “Visual Studio Code - Code Editing. Redefined”. Visual Studio Code, https://code.visualstudio.com. Web. 12 July 2022. ## Slide 257 Gamma, Erich et al. “vscode/LICENSE.txt”. GitHub, 1 May 2020, https://github.com/microsoft/vscode/blob/main/LICENSE.txt. Web. 12 July 2022. ## Slide 263 https://en.wikipedia.org/wiki/Electron_(software_framework) https://www.electronjs.org ## Slide 265 CodePen. “CodePen: Online Code Editor and Front End Web Developer Community”. CodePen, 12 July 2022, https://codepen.io/. Web. 12 July 2022. ## Slide 266 WebSanity. “WebSanity on CodePen”. CodePen, 12 July 2022, https://codepen.io/websanity/pens/popular. Web. 12 July 2022. ## Slide 268 WebSanity. “CSS: float”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/LYbMLj?editors=1100. Web. 12 July 2022. ## Slide 269 Copot, Matei. “Particle exploder (mini-game)”. CodePen, 31 Aug 2014, http://codepen.io/MateiGCopot/pen/BfAhe. Web. 2 Nov 2014. ## Slide 270 Slides: https://granneman.com/downloads/web-dev/Web-Dev-Intro-for-Students.pdf Notes: https://granneman.com/downloads/web-dev/Web-Dev-Intro-for-Students.txt ## Slide 271 https://www.granneman.com/presentations/all-presentations ## Slide 276 NetPositive (BeOS) ## Slide 280 Image: Harris, Scott Duke. “Andreessen launches high-profile venture capital firm”. The Mercury News, 2 July 2009 (updated 14 August 2016). https://www.mercurynews.com/2009/07/02/andreessen-launches-high-profile-venture-capital-firm/. ## Slide 281 Image: ITU Pictures. “1990-01” [Tim Berners-Lee with WorldWideWeb]. Flickr, 11 July 1994. Licensed CC BY 2.0. https://www.flickr.com/photos/itupictures/16662336315/in/photostream/. ## Slide 294 http://en.wikipedia.org/wiki/File:Netscape_Navigator_usage_share.png
http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg ## Slide 296 Bruce McAllister, near Ogden, Utah, April 1974, From the collection of: U.S. National Archives. https://artsandculture.google.com/exhibit/AQfyFcoI. ## Slide 300 https://en.wikipedia.org/wiki/Internet_Explorer_for_Mac_OS_X Gravestone in a cemetery in winter with snow - death white - Petr Kratochvil - FreeStockPhotos.biz - 9185 - CC0 1.0 ## Slide 301 https://www.apple.com/newsroom/2003/06/23Apple-Releases-Safari-1-0/ ## Slide 302 https://www.pxfuel.com/en/free-photo-oymtx ## Slide 309 http://www.scottmccloud.com/2-print/1-uc/index.html ## Slide 335 http://weknowmemes.com/2013/09/conversation-among-browsers/ ## Slide 348 https://addons.mozilla.org/en-US/firefox/ ## Slide 349 https://addons.mozilla.org/en-US/firefox/extensions/ ## Slide 350 https://addons.mozilla.org/en-US/firefox/themes/ ## Slide 355 200 extensions installed! ## Slide 358 https://www.apple.com/safari/, 2014-06-30 ## Slide 360 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 361 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 362 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 364 https://www.apple.com/safari/, 2014-06-30 ## Slide 375 https://en.wikipedia.org/wiki/JavaScript ## Slide 376 https://www.infoworld.com/article/2653798/javascript-creator-ponders-past--future.html http://speakingjs.com/es5/ch04.html https://web.archive.org/web/20080208124612/http://wp.netscape.com/comprod/columns/techvision/innovators_be.html ## Slide 377 https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html ## Slide 380 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Web. 12 July 2022. ## Slide 381 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Web. 12 July 2022. ## Slide 382 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Web. 12 July 2022.