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 9 Wikipedia contributors. “Markup language”. Wikipedia, The Free Encyclopedia, 18 June 2022, https://en.wikipedia.org/wiki/Markup_language. Accessed 11 July 2022. Varagouli, Erika. “What Each Markup Language Is Used For”. Semrush, 18 Oct 2021, https://www.semrush.com/blog/markup-language/. Accessed 11 July 2022. ## Slide 10 Markup is not programming ## Slide 11 Development includes many skills & areas of knowledge ## Slide 12 This is AppleScript, so yes, this is programming ## Slide 14 Wikipedia contributors. “Tim Berners-Lee”. Wikipedia, The Free Encyclopedia, 5 May 2024, https://en.wikipedia.org/wiki/Tim_Berners-Lee. Accessed 8 May 2024. 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. Accessed 11 July 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 15 Wikipedia contributors. “Tim Berners-Lee”. Wikipedia, The Free Encyclopedia, 5 May 2024, https://en.wikipedia.org/wiki/Tim_Berners-Lee. Accessed 8 May 2024. 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. Accessed 11 July 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 16 Brücke-Osteuropa. “File:CERN-aerial 1.jpg” [Aerial view of CERN]. Wikipedia, 2012-11-04, https://en.wikipedia.org/wiki/File:CERN-aerial_1.jpg. Accessed 27 Jan 2022. [Color enhanced by Scott Granneman] ## Slide 17 Berners-Lee, Tim. “A Brief History of the Web”. w3.org, 1994, https://www.w3.org/DesignIssues/TimBook-old/History.html. Accessed 27 Jan 2022. ## Slide 18 WebPlatformDocs. “Introducing Web Platform Docs”. YouTube, 8 Oct. 2012, https://www.youtube.com/watch?v=Ug6XAw6hzaw. Accessed 9 May 2024. ## Slide 19 Wikipedia contributors. “Tim Berners-Lee”. Wikipedia, The Free Encyclopedia, 5 May 2024, https://en.wikipedia.org/wiki/Tim_Berners-Lee. Accessed 8 May 2024. 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. Accessed 11 July 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 20 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 21 Wikipedia contributors. “HTML”. Wikipedia, The Free Encyclopedia, 28 May. 2022, https://en.wikipedia.org/wiki/HTML. Accessed 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. Accessed 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. Accessed 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/. Accessed 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/. Accessed 11 July 2022. FIXME citations ## Slide 22 Berners-Lee, Tim. “WWW people”. World Wide Web. CERN, 1992, http://info.cern.ch/hypertext/WWW/TheProject.html. Accessed 10 June 2023. ## Slide 23 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. Accessed 11 July 2022. ## Slide 24 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. Accessed 11 July 2022. ## Slide 25 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. Accessed 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. Accessed 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. Accessed 11 July 2022. Public domain. ## Slide 26 “WHATWG — FAQ”. WHATWG, https://whatwg.org/faq. Accessed 19 Mar 2023. ## Slide 27 Wikipedia contributors. “WHATWG”. Wikipedia, The Free Encyclopedia, 2 Apr. 2022, https://en.wikipedia.org/wiki/WHATWG. Accessed 11 July 2022. ## Slide 29 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/. Accessed 11 July 2022. ## Slide 30 Hickson, Ian et al. “HTML Living Standard”. HTML Living Standard, WHATWG, 8 Feb. 2026, https://html.spec.whatwg.org/multipage/. Accessed 12 Feb. 2026. ## Slide 31 Bos, Bert. “CSS current work & how to participate”. World Wide Web Consortium (W3C), 29 June 2022, https://www.w3.org/Style/CSS/current-work. Accessed 11 July 2022. No CSS at the WHATWG website ## Slide 33 “WHATWG — FAQ”. WHATWG, https://whatwg.org/faq. Accessed 19 Mar 2023. ## Slide 34 Deveria, Alexis [@Fyrd]. “Can I use… Support tables for HTML5, CSS3, etc”. Can I use…, 8 Sept 2020, https://caniuse.com. Accessed 8 Sept 2020. ## Slide 35 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Accessed 8 Sept 2020. ## Slide 36 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Accessed 8 Sept 2020. ## Slide 37 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Accessed 8 Sept 2020. ## Slide 38 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Accessed 8 Sept 2020. ## Slide 39 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Accessed 8 Sept 2020. ## Slide 40 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Accessed 8 Sept 2020. ## Slide 42 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. Accessed 11 Apr. 2022. ## Slide 43 Walker, Joe. “Celebrating 20 years of MDN”. MDN Web Docs, 22 July 2025, https://developer.mozilla.org/en-US/blog/mdn-turns-20/. Accessed 25 July 2025. Licensed CC BY-SA 2.5: https://creativecommons.org/licenses/by-sa/2.5/. ## Slide 44 MDN contributors. “MDN Web Docs”. MDN Web Docs, 10 Apr 2022, https://developer.mozilla.org/en-US/. Accessed 2022-04-11. ## Slide 45 MDN contributors. “MDN Web Docs”. MDN Web Docs, 10 Apr 2022, https://developer.mozilla.org/en-US/. Accessed 2022-04-11. ## Slide 46 MDN contributors. “MDN Web Docs”. MDN Web Docs, 10 Apr 2022, https://developer.mozilla.org/en-US/. Accessed 2022-04-11. ## Slide 47 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. Accessed 11 July 2022. ## Slide 48 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. Accessed 11 July 2022. ## Slide 49 MDN contributors. “JavaScript | MDN”. MDN Web Docs, 6 July 2022, https://developer.mozilla.org/en-US/docs/Web/JavaScript. Accessed 11 July 2022. ## Slide 51 “mdn main - Google Search”. Google, 23 Jan 2023, https://www.google.com/search?q=mdn%20main. Accessed 23 Jan 2023. ## Slide 52 “mdn main - Kagi Search”. Kagi, 23 Jan 2023, https://kagi.com/search?q=mdn+main. Accessed 23 Jan 2023. ## Slide 53 “mdn main - Brave Search”. Brave Search, 23 Jan 2023, https://search.brave.com/search?q=mdn+main. Accessed 23 Jan 2023. ## Slide 58 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. Accessed 11 July 2022. ## Slide 61 Viewport != screen size, except on mobile devices, where every app is full screen ## Slide 62 Every browser has chrome; Google adopted the name Chrome as a little joke (not that it’s super-funny or anything!) ## Slide 65 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/. Accessed 11 July 2022. ## Slide 66 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. Accessed 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. Accessed 11 July 2022. ## Slide 67 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. Accessed 21 Sep 2023. ## Slide 68 Wikipedia contributors. “Chromium (web browser)”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Chromium_(web_browser). Accessed 12 July 2022. ## Slide 69 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. Accessed 31 July 2023. Licensed from Can Stock Photo on 31 July 2023. Modified by converting to the WebP format. ## Slide 70 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. Accessed 29 July 2023. Licensed from Can Stock Photo on 29 July 2023. Modified by converting to the WebP format. ## Slide 71 Wikipedia contributors. “Chromium (web browser)”. Wikipedia, The Free Encyclopedia, 23 Jan. 2026, https://en.wikipedia.org/wiki/Chromium_%28web_browser%29. Accessed 22 Feb. 2026. Amazon Silk (2011): developed by Amazon for Kindle Fire: https://en.wikipedia.org/wiki/Amazon_Silk Arc (2022): very innovative browser doing many new things; currently macOS-only: https://en.wikipedia.org/wiki/Arc_(web_browser) Blisk (2016): aimed at web developers, featuring device simulations: https://en.wikipedia.org/wiki/Blisk_(browser) Brave (2016): privacy-focused, with a built-in ad- & tracking-blocker: ) ➝ Chromium-based browsers (Brave, Vivaldi, Opera, Edge, Yandex) Wikipedia contributors. “Konqueror”. Wikipedia, The Free Encyclopedia, 19 May. 2022, https://en.wikipedia.org/wiki/Konqueror. Accessed 12 July 2022. Wikipedia contributors. “Safari (web browser)”. Wikipedia, The Free Encyclopedia, 24 June 2022, https://en.wikipedia.org/wiki/Safari_(web_browser). Accessed 12 July 2022. Wikipedia contributors. “Chromium (web browser)”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Chromium_(web_browser). Accessed 12 July 2022. Wikipedia contributors. “Google Chrome”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Google_Chrome. Accessed 12 July 2022. Wikipedia contributors. “Brave (web browser)”. Wikipedia, The Free Encyclopedia, 5 July 2022, https://en.wikipedia.org/wiki/Brave_(web_browser). Accessed 12 July 2022. Wikipedia contributors. “Vivaldi (web browser)”. Wikipedia, The Free Encyclopedia, 28 June 2022, https://en.wikipedia.org/wiki/Vivaldi_(web_browser). Accessed 12 July 2022. Wikipedia contributors. “Opera (web browser)”. Wikipedia, The Free Encyclopedia, 24 June 2022, https://en.wikipedia.org/wiki/Opera_(web_browser). Accessed 12 July 2022. Wikipedia contributors. “Microsoft Edge”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Microsoft_Edge. Accessed 12 July 2022. Wikipedia contributors. “Yandex Browser”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Yandex_Browser. Accessed 12 July 2022. ## Slide 87 Wikipedia contributors. “Konqueror”. Wikipedia, The Free Encyclopedia, 19 May. 2022, https://en.wikipedia.org/wiki/Konqueror. Accessed 12 July 2022. Wikipedia contributors. “GNOME Web”. Wikipedia, The Free Encyclopedia, 28 June 2022, https://en.wikipedia.org/wiki/GNOME_Web. Accessed 12 July 2022. ## Slide 90 Wikipedia contributors. “Web server”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Web_server. Accessed 12 July 2022. ## Slide 91 Netcraft. “December 2022 Web Server Survey”. Netcraft, 20 Dec 2022, https://news.netcraft.com/archives/2022/12/20/december-2022-web-server-survey.html. Accessed 23 Jan 2023. Wikipedia contributors. “Apache HTTP Server”. Wikipedia, The Free Encyclopedia, 18 June 2022, https://en.wikipedia.org/wiki/Web_server. Accessed 12 July 2022. Wikipedia contributors. “Internet Information Services”. Wikipedia, The Free Encyclopedia, 31 May 2022, https://en.wikipedia.org/wiki/Internet_Information_Services. Accessed 12 July 2022. Wikipedia contributors. “Nginx”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Nginx. Accessed 12 July 2022. ## Slide 93 Wikipedia contributors. “Communication protocol”. Wikipedia, The Free Encyclopedia, 4 July 2022, https://en.wikipedia.org/wiki/Communication_protocol. Accessed 12 July 2022. ## Slide 94 Wikipedia contributors. “Hypertext Transfer Protocol”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol. Accessed 12 July 2022. ## Slide 95 Wikipedia contributors. “Hypertext Transfer Protocol”. Wikipedia, The Free Encyclopedia, 11 July 2022, https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol. Accessed 12 July 2022. ## Slide 96 Wikipedia contributors. “List of HTTP status codes”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/List_of_HTTP_status_codes. Accessed 12 July 2022. ## Slide 121 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. Accessed 12 July 2022. Wikipedia contributors. “CSS”. Wikipedia, The Free Encyclopedia, 4 July 2022, https://en.wikipedia.org/wiki/CSS. Accessed 12 July 2022. Wikipedia contributors. “JavaScript”. Wikipedia, The Free Encyclopedia, 10 July 2022, https://en.wikipedia.org/wiki/JavaScript. Accessed 12 July 2022. ## Slide 122 Wikipedia contributors. “HTML”. Wikipedia, The Free Encyclopedia, 28 May 2022, https://en.wikipedia.org/wiki/HTML. Accessed 12 July 2022. Wikipedia contributors. “CSS”. Wikipedia, The Free Encyclopedia, 4 July 2022, https://en.wikipedia.org/wiki/CSS. Accessed 12 July 2022. Wikipedia contributors. “JavaScript”. Wikipedia, The Free Encyclopedia, 10 July 2022, https://en.wikipedia.org/wiki/JavaScript. Accessed 12 July 2022. ## Slide 123 Wikipedia contributors. “Java (programming language)”. Wikipedia, The Free Encyclopedia, 2 July 2022, https://en.wikipedia.org/wiki/Java_(programming_language). Accessed 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. Accessed 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. Accessed 11 July 2022. ## Slide 124 Wikipedia contributors. “Node.js”. Wikipedia, The Free Encyclopedia, 26 Mar. 2025, https://en.wikipedia.org/wiki/Node.js. Accessed 7 Apr. 2025. ## Slide 125 Diagram by Jans Carton ## Slide 126 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 127 Diagram by Jans Carton ## Slide 128 A more detailed, accurate browser processing pipeline can be found in the CSS Overview presentation Diagram by Scott Granneman & Jans Carton ## Slide 129 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 130 There is sometimes overlap: 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 Wikipedia contributors. “Separation of concerns”. Wikipedia, The Free Encyclopedia, 20 Mar. 2024, https://en.wikipedia.org/wiki/Separation_of_concerns. Accessed 15 Apr. 2024. ## Slide 131 WebSanity. “HTML: font element”. CodePen, 2 Oct 2022, https://codepen.io/websanity/pen/wvzvzj?editors=1000. Accessed 02 Oct 2022. Lovecraft, H.P. “At the Mountains of Madness”. The H.P. Lovecraft Archive, 20 Aug 2009, https://www.hplovecraft.com/writings/texts/fiction/mm.aspx. Accessed 2 Oct 2022. ## Slide 133 Kantor, Ilya. “The Modern JavaScript Tutorial”. JavaScript.info, 11 Jan. 2025, https://javascript.info. Accessed 14 Jan 2025. ## Slide 134 Wikipedia contributors. “Frontend and backend”. Wikipedia, The Free Encyclopedia, 1 Apr. 2025, https://en.wikipedia.org/wiki/Frontend_and_backend. Accessed 7 Apr. 2025. ## Slide 135 “What is BaaS? | Backend-as-a-Service vs. serverless”. Cloudflare, https://www.cloudflare.com/learning/serverless/glossary/backend-as-a-service-baas/. Accessed 25 Feb. 2025. Fair use. ## Slide 140 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 142 https://www.nytimes.com; accessed July 27, 2019 ## Slide 143 https://www.nytimes.com; accessed July 27, 2019 ## Slide 144 https://www.nytimes.com; accessed July 27, 2019 ## Slide 145 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 146 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 147 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 148 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 149 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 150 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 151 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 152 inductivo. “Tatuaje HTML”. Inductivo, 9 June 2007, https://inductivo.wordpress.com/2007/06/09/tatuaje-html/. Accessed 21 December 2021. This is the earliest source for the image that I can find. Fair use. ## Slide 153 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 154 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 155 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Accessed 11 July 2022. ## Slide 157 WHATWG. “13.1.2 Elements”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#elements-2. Accessed 11 July 2022. MDN contributors. “HTML”. MDN Web Docs, 27 Apr 2022, https://developer.mozilla.org/en-US/docs/Glossary/HTML. Accessed 11 July 2022. MDN contributors. “Tag”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Tag. Accessed 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. Accessed 11 July 2022. ## Slide 158 WHATWG. “13.1.2 Elements”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#void-elements. Accessed 11 July 2022. MDN contributors. “Empty element”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Empty_element. Accessed 11 July 2022. ## Slide 159 MDN contributors. “Elements”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Element. Accessed 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. Accessed 11 July 2022. ## Slide 160 MDN contributors. “HTML”. MDN Web Docs, 27 Apr 2022, https://developer.mozilla.org/en-US/docs/Glossary/HTML. Accessed 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. Accessed 11 July 2022. ## Slide 162 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 163 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. Accessed 11 July 2022. ## Slide 164 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. Accessed 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. Accessed 11 July 2022. ## Slide 165 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. Accessed 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. Accessed 11 July 2022. ## Slide 166 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. Accessed 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. Accessed 11 July 2022. ## Slide 167 “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. Accessed 11 July 2022. ## Slide 168 Order does matter to humans, so figure out what works for your team & stick to that ## Slide 169 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. Accessed 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. Accessed 11 July 2022. ## Slide 170 MDN contributors. “
: The Centered Text element”. MDN Web Docs, 10 May 2023, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center. Accessed 19 Oct 2023. ## Slide 171 Granneman, Scott. “Everything You Need to Know About DTDs”. Scott Granneman, 2013, https://www.granneman.com/webdev/coding/dtds/. Accessed 11 July 2022. ## Slide 173 MDN contributors. “Doctype”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Doctype. Accessed 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. Accessed 11 July 2022. Pieters, Simon. “Quirks Mode Living Standard”. WHATWG, 15 Nov 2022, https://quirks.spec.whatwg.org. Accessed 17 Mar 2023. ## Slide 174 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. Accessed 11 July 2022. ## Slide 175 MDN contributors. “Doctype”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Doctype. Accessed 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. Accessed 11 July 2022. FIXME: https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode ## Slide 176 Granneman, Scott. “Everything You Need to Know About Character Encoding”. Scott Granneman, 2016, https://www.granneman.com/webdev/coding/characterencoding/. Accessed 12 July 2022. ## Slide 177 MDN contributors. “Character encoding”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/character_encoding. Accessed 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. Accessed 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/. Accessed 11 July 2022. Wikipedia contributors. “Character encoding”. Wikipedia, The Free Encyclopedia, 26 June 2022, https://en.wikipedia.org/wiki/Character_encoding. Accessed 12 July 2022. ## Slide 178 Wikipedia contributors. “Mojibake”. Wikipedia, The Free Encyclopedia, 2 July 2022, https://en.wikipedia.org/wiki/Mojibake. Accessed 12 July 2022. Audio: “How to pronounce mojibake?”. HowToPronounce, https://www.howtopronounce.com/mojibake. Accessed 7 Feb 2024. Note: it’s pronounced “mo-hee-bak-ay” ## Slide 182 Wikipedia contributors. “ASCII”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/ASCII. Accessed 12 July 2022. ## Slide 183 00 NUL Originally ignored; now used to indicate end of a string 07 BEL Bell or sound or screen flash; to see (or hear) in a terminal, enter echo ^G (hold down Ctrl & press G); dates back to 1870! 08 BS Backspace (confusingly labeled Delete on Mac keyboards) 09 HT Horizontal tab 0A LF Line feed (end of line with UNIX) 0B VT Vertical tab OC FF Form feed: eject paper to top of next page; now, 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 7F DEL Forward delete that removes the character in front of the cursor (on a Mac, type fn+Delete) 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. Accessed 12 July 2022. Public domain. Wikipedia contributors. “Control character”. Wikipedia, The Free Encyclopedia, 5 June 2022, https://en.wikipedia.org/wiki/Control_character. Accessed 12 July 2022. Wikipedia contributors. “Bell character”. Wikipedia, The Free Encyclopedia, 25 Sep. 2023, https://en.wikipedia.org/wiki/Bell_character. Accessed 15 Sep. 2024. Wikipedia contributors. “Delete character”. Wikipedia, The Free Encyclopedia, 17 July 2024, https://en.wikipedia.org/wiki/Delete_character. Accessed 15 Sep. 2024. Wikipedia contributors. “Tab key”. Wikipedia, The Free Encyclopedia, 8 Aug. 2024, https://en.wikipedia.org/wiki/Tab_key. Accessed 15 Sep. 2024. ## Slide 184 00 NUL Originally ignored; now used to indicate end of a string 07 BEL Bell or sound or screen flash; to see (or hear) in a terminal, enter echo ^G (hold down Ctrl & press G); dates back to 1870! 08 BS Backspace (confusingly labeled Delete on Mac keyboards) 09 HT Horizontal tab 0A LF Line feed (end of line with UNIX) 0B VT Vertical tab OC FF Form feed: eject paper to top of next page; now, 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 7F DEL Forward delete that removes the character in front of the cursor (on a Mac, type fn+Delete) 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. Accessed 12 July 2022. Public domain. Wikipedia contributors. “Control character”. Wikipedia, The Free Encyclopedia, 5 June 2022, https://en.wikipedia.org/wiki/Control_character. Accessed 12 July 2022. Wikipedia contributors. “Bell character”. Wikipedia, The Free Encyclopedia, 25 Sep. 2023, https://en.wikipedia.org/wiki/Bell_character. Accessed 15 Sep. 2024. Wikipedia contributors. “Delete character”. Wikipedia, The Free Encyclopedia, 17 July 2024, https://en.wikipedia.org/wiki/Delete_character. Accessed 15 Sep. 2024. Wikipedia contributors. “Tab key”. Wikipedia, The Free Encyclopedia, 8 Aug. 2024, https://en.wikipedia.org/wiki/Tab_key. Accessed 15 Sep. 2024. ## Slide 185 Ange Albertini (@angealbertini). Twitter (January 13, 2018). . Accessed December 24, 2018. ## Slide 187 Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Accessed 12 July 2022. Unicode version 17: “As of Unicode version 17.0, there are 297,334 assigned characters with code points, covering 172 modern and historical scripts, as well as multiple symbol sets.” Wikipedia contributors. “List of Unicode characters”. Wikipedia, The Free Encyclopedia, 3 Feb. 2026, https://en.wikipedia.org/wiki/List_of_Unicode_characters. Accessed 4 Feb. 2026. “Version 17.0 defines 159,801 characters and 172 scripts used in various ordinary, literary, academic, and technical contexts.” Wikipedia contributors. “Unicode”. Wikipedia, The Free Encyclopedia, 2 Feb. 2026, https://en.wikipedia.org/wiki/Unicode. Accessed 4 Feb. 2026. No contradiction there: Unicode 17.0 assigns 297,334 code points in total, but only 159,801 of those represent actual graphic characters; the remainder are control, format, surrogate, noncharacter, or private-use code points Unicode version 16: “As of Unicode version 16.0, there are 154,998 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, 11 Sep. 2024, https://en.wikipedia.org/w/index.php?title=List_of_Unicode_characters&oldid=1245094740. Accessed 13 Sep. 2024. 168 scripts: “Version 16.0 of the standard defines 154998 characters and 168 scripts used in various ordinary, literary, academic, and technical contexts.” Wikipedia contributors. “Unicode”. Wikipedia, The Free Encyclopedia, 11 Sep. 2024, https://en.wikipedia.org/w/index.php?title=Unicode&oldid=1245166655. Accessed 13 Sep. 2024. Unicode version 15.1: 149,878 characters in 161 modern & historic scripts 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. Accessed 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. Accessed 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. Accessed 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. Accessed 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. Accessed 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 188 “Unicode 17.0 specifies a total of 3,953 emoji using 1,438 characters spread across 24 blocks”: Wikipedia contributors. “List of emojis”. Wikipedia, The Free Encyclopedia, 17 Jan. 2026, https://en.wikipedia.org/wiki/List_of_emojis. Accessed 4 Feb. 2026. “Unicode 16.0 specifies a total of 3,790 emoji using 1,431 characters spread across 24 blocks”: Wikipedia contributors. “Emoji”. Wikipedia, The Free Encyclopedia, 12 Sep. 2024, https://en.wikipedia.org/w/index.php?title=Emoji&oldid=1245336981. Accessed 15 Sep. 2024. “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. Accessed 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. Accessed 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. Accessed 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 189 Data: Wikipedia contributors. “Unicode”. Wikipedia, The Free Encyclopedia, 5 Feb. 2026, https://en.wikipedia.org/wiki/Unicode. Accessed 12 Feb. 2026. Chart generated by R. Scott Granneman. ## Slide 190 “Unicode 17.0 defines 346 blocks”: Wikipedia contributors. “Unicode block”. Wikipedia, The Free Encyclopedia, 6 Nov. 2025, https://en.wikipedia.org/wiki/Unicode_block. Accessed 4 Feb. 2026. Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Accessed 12 July 2022. “Unicode Blocks”. FileFormat.Info, http://www.fileformat.info/info/unicode/block/index.htm. Accessed 12 July 2022. ## Slide 191 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. Accessed 4 Oct 2023. Fair use. Modified by converting to the WebP format. ## Slide 192 Wikipedia contributors. “JIS X 0208”. Wikipedia, The Free Encyclopedia, 2 June 2022, https://en.wikipedia.org/wiki/JIS_X_0208. Accessed 12 July 2022. ## Slide 193 Wikipedia contributors. “JIS X 0208”. Wikipedia, The Free Encyclopedia, 2 June 2022, https://en.wikipedia.org/wiki/JIS_X_0208. Accessed 12 July 2022. ## Slide 194 McCann, Paul O'Leary. “A Spectre is Haunting Unicode”. Dampfkraft, 29 July 2018, https://www.dampfkraft.com/ghost-characters.html. Accessed 12 July 2022. Wikipedia contributors. “JIS X 0208”. Wikipedia, The Free Encyclopedia, 2 June 2022, https://en.wikipedia.org/wiki/JIS_X_0208. Accessed 12 July 2022. ## Slide 195 Wikipedia contributors. “JIS X 0208”. Wikipedia, The Free Encyclopedia, 2 June 2022, https://en.wikipedia.org/wiki/JIS_X_0208. Accessed 12 July 2022. ## Slide 196 McCann, Paul O'Leary. “A Spectre is Haunting Unicode”. Dampfkraft, 29 July 2018, https://www.dampfkraft.com/ghost-characters.html. Accessed 12 July 2022. ## Slide 197 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. Accessed 4 Oct 2023. Fair use. Modified by converting to the WebP format. Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 11 Feb. 2026, https://en.wikipedia.org/wiki/UTF-8. Accessed 12 Feb. 2026. 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. Accessed 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. Accessed 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. Accessed 12 July 2022. 2026, 99%: “As of January 2026, UTF-8 is used by 98.9% of surveyed web sites.” Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 11 Feb. 2026, https://en.wikipedia.org/wiki/UTF-8. Accessed 12 Feb. 2026. ## Slide 198 Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Accessed 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. Accessed 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. Accessed 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. Accessed 12 July 2022. ## Slide 199 “As of November 2024, Noto covers around 1,000 languages and 162 writing systems. … In total, Noto fonts cover over 77,000 characters, which is around half of the 149,186 characters defined in Unicode 15.0 (released in September 2022).” Wikipedia contributors. “Noto fonts”. Wikipedia, The Free Encyclopedia, 21 Jan. 2026, https://en.wikipedia.org/w/index.php?title=Noto_fonts&oldid=1334105974. Accessed 12 Feb. 2026. “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. Accessed 12 July 2022. Google. “Noto: A typeface for the world”. Google Fonts, https://fonts.google.com/noto. Accessed 12 July 2022. ## Slide 200 Wikipedia contributors. “Noto fonts”. Wikipedia, The Free Encyclopedia, 6 June 2022, https://en.wikipedia.org/wiki/Noto_fonts. Accessed 12 July 2022. Wilfredor. “File:M. Tullius Cicero, Capitoline Museum, Rome (cropped).jpg”. *Wikipedia, The Free Encyclopedia*, 11 Feb. 2024, https://en.wikipedia.org/wiki/File:M._Tullius_Cicero,_Capitoline_Museum,_Rome_(cropped).jpg. Accessed 4 Feb. 2026. Licensed CC0 1.0: https://creativecommons.org/publicdomain/zero/1.0/. ## Slide 201 Wikipedia contributors. “Noto fonts”. Wikipedia, The Free Encyclopedia, 6 June 2022, https://en.wikipedia.org/wiki/Noto_fonts. Accessed 12 July 2022. Nguyen, Anh [@pwign]. “Bowl of vegetable salad”. Unsplash, 29 Dec 2018, https://unsplash.com/photos/_Uqj5BQb-mw. Accessed 12 July 2022. Licensed from Unsplash: https://unsplash.com/license. ## Slide 203 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Accessed 12 Feb. 2026. 2 emoji fonts: Noto Emoji & Noto Color Emoji 2 music fonts: Noto Music & Noto Znamenny Musical Notation 2 caligraphic fonts: Noto Nastaliq Urdu & Noto Kufi Arabic ## Slide 204 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Accessed 4 Feb. 2026. 162 sans-serif fonts in Noto ## Slide 205 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Accessed 24 Oct. 2024. 160 sans-serif fonts in Noto ## Slide 206 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Accessed 24 Oct. 2024. 160 sans-serif fonts in Noto ## Slide 207 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Accessed 24 Oct. 2024. 40 serif fonts in Noto ## Slide 208 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Accessed 24 Oct. 2024. 2 emoji fonts in Noto 2 music fonts in Noto 4 caligraphic fonts in Noto ## Slide 210 MusicBrainz Foundation. “Music of the Spheres”. MusicBrainz, 2 Nov 2021, https://musicbrainz.org/release/b2de889c-6940-49ac-84be-3c0ea8733621. Accessed 12 Nov 2023. ## Slide 211 “Music | qebrus”. Bandcamp, https://exophobiaorgqebrus.bandcamp.com/music. Accessed 12 Nov 2023. ## Slide 212 Wikipedia contributors. “Four Tet discography”. Wikipedia, The Free Encyclopedia, 6 Nov. 2023, https://en.wikipedia.org/wiki/Four_Tet_discography. Accessed 13 Nov. 2023. ## Slide 213 Wikipedia contributors. “Four Tet discography”. Wikipedia, The Free Encyclopedia, 6 Nov. 2023, https://en.wikipedia.org/wiki/Four_Tet_discography. Accessed 13 Nov. 2023. ## Slide 214 Wikipedia contributors. “Four Tet discography”. Wikipedia, The Free Encyclopedia, 6 Nov. 2023, https://en.wikipedia.org/wiki/Four_Tet_discography. Accessed 13 Nov. 2023. ## Slide 218 “AddDefaultCharset Directive”. Apache HTTP Server Version 2.4, Apache HTTP Server Project, 2022, https://httpd.apache.org/docs/2.4/mod/core.html#adddefaultcharset. Accessed 12 July 2022. ## Slide 219 MDN contributors. “: The metadata element”. MDN Web Docs, 1 July 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta. Accessed 11 July 2022. MDN contributors. “Character encoding”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/character_encoding. Accessed 11 July 2022. ## Slide 220 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 221 MDN contributors. “: The metadata element”. MDN Web Docs, 1 July 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta. Accessed 11 July 2022. ## Slide 222 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. Accessed 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. Accessed 11 July 2022. ## Slide 224 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. Accessed 12 July 2022. ## Slide 226 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, https://codepen.io/websanity/pen/qBqZYv?editors=1000. Accessed 11 July 2022. ## Slide 228 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, https://codepen.io/websanity/pen/qBqZYv?editors=1000. Accessed 11 July 2022. ## Slide 229 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. Accessed 11 July 2022. ## Slide 230 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. Accessed 19 Mar 2023. 51 specific parse errors as of 19 Mar 2023. ## Slide 231 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/. Accessed 19 Mar 023. Licensed from Pexels: https://www.pexels.com/license/. Modified by converting to WebP & cropping. ## Slide 233 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. Accessed 12 July 2022. WHATWG. “13.1.6 Comments”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#comments. Accessed 11 July 2022. ## Slide 234 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. Accessed 12 July 2022. WHATWG. “13.1.6 Comments”. HTML Living Standard, WHATWG, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#comments. Accessed 11 July 2022. ## Slide 235 WebSanity. “HTML: Comments”. CodePen, 9 May 2014, https://codepen.io/websanity/pen/zYqjQM?editors=1000. Accessed 12 July 2022. ## Slide 236 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. Accessed 19 Mar 2023. ## Slide 245 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. Accessed 23 Jan 2022. ## Slide 255 Stefán Jökull Sigurðarson - CCP Ghostrider [@stebets]. “[Animated gif of running baby]”. Twitter, 3 November 2021, https://twitter.com/stebets/status/1456040940053860353. Accessed 28 November 2021. ## Slide 256 Stefán Jökull Sigurðarson - CCP Ghostrider [@stebets]. “[Animated gif of running baby]”. Twitter, 3 November 2021, https://twitter.com/stebets/status/1456040940053860353. Accessed 28 November 2021. ## Slide 257 Stefán Jökull Sigurðarson - CCP Ghostrider [@stebets]. “[Animated gif of running baby]”. Twitter, 3 November 2021, https://twitter.com/stebets/status/1456040940053860353. Accessed 28 November 2021. ## Slide 259 Wikipedia contributors. “WYSIWYG”. Wikipedia, The Free Encyclopedia, 3 July 2022, https://en.wikipedia.org/w/index.php?title=WYSIWYG&oldid=1096211189. Accessed 12 July 2022. ## Slide 260 Pinnikas, Nikolaos. “Quicksoft PC-Write 2.55”. YouTube, 20 June 2014, https://www.youtube.com/watch?v=JJ9x1peCJRg, 0:51. Accessed 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. Accessed 12 July 2022. ## Slide 261 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/. Accessed 31 Aug 2015. Fair use. ## Slide 284 https://en.wikipedia.org/wiki/File:W8Notepad.png ## Slide 288 Microsoft. “Visual Studio Code - Code Editing. Redefined”. Visual Studio Code, https://code.visualstudio.com. Accessed 12 July 2022. ## Slide 290 Gamma, Erich et al. “vscode/LICENSE.txt”. GitHub, 1 May 2020, https://github.com/microsoft/vscode/blob/main/LICENSE.txt. Accessed 12 July 2022. ## Slide 296 https://en.wikipedia.org/wiki/Electron_(software_framework) https://www.electronjs.org ## Slide 299 CodePen. “CodePen: Online Code Editor and Front End Web Developer Community”. CodePen, 12 July 2022, https://codepen.io/. Accessed 12 July 2022. ## Slide 300 WebSanity. “WebSanity on CodePen”. CodePen, 12 July 2022, https://codepen.io/websanity/pens/popular. Accessed 12 July 2022. ## Slide 302 WebSanity. “CSS: float”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/LYbMLj?editors=1100. Accessed 12 July 2022. ## Slide 303 Copot, Matei. “Particle exploder (mini-game)”. CodePen, 31 Aug 2014, http://codepen.io/MateiGCopot/pen/BfAhe. Accessed 2 Nov 2014. ## Slide 304 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 305 https://www.granneman.com/presentations/all-presentations ## Slide 310 NetPositive (BeOS) ## Slide 314 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 315 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 328 http://en.wikipedia.org/wiki/File:Netscape_Navigator_usage_share.png
http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg ## Slide 330 Bruce McAllister, near Ogden, Utah, April 1974, From the collection of: U.S. National Archives. https://artsandculture.google.com/exhibit/AQfyFcoI. ## Slide 334 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 335 https://www.apple.com/newsroom/2003/06/23Apple-Releases-Safari-1-0/ ## Slide 336 https://www.pxfuel.com/en/free-photo-oymtx ## Slide 343 http://www.scottmccloud.com/2-print/1-uc/index.html ## Slide 369 http://weknowmemes.com/2013/09/conversation-among-browsers/ ## Slide 382 https://addons.mozilla.org/en-US/firefox/ ## Slide 383 https://addons.mozilla.org/en-US/firefox/extensions/ ## Slide 384 https://addons.mozilla.org/en-US/firefox/themes/ ## Slide 389 200 extensions installed! ## Slide 392 https://www.apple.com/safari/, 2014-06-30 ## Slide 394 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 395 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 396 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 398 https://www.apple.com/safari/, 2014-06-30 ## Slide 409 https://en.wikipedia.org/wiki/JavaScript ## Slide 410 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 411 https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html ## Slide 414 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Accessed 12 July 2022. ## Slide 415 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Accessed 12 July 2022. ## Slide 416 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Accessed 12 July 2022.