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 Wikipedia contributors. “Tim Berners-Lee”. Wikipedia, The Free Encyclopedia, 5 May 2024, https://en.wikipedia.org/wiki/Tim_Berners-Lee. Web. 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. Web. 11 July 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 12 Wikipedia contributors. “Tim Berners-Lee”. Wikipedia, The Free Encyclopedia, 5 May 2024, https://en.wikipedia.org/wiki/Tim_Berners-Lee. Web. 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. Web. 11 July 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 13 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. Web. 27 Jan 2022. [Color enhanced by Scott Granneman] ## Slide 14 Berners-Lee, Tim. “A Brief History of the Web”. w3.org, 1994, https://www.w3.org/DesignIssues/TimBook-old/History.html. Web. 27 Jan 2022. ## Slide 15 WebPlatformDocs. “Introducing Web Platform Docs”. YouTube, 8 Oct. 2012, https://www.youtube.com/watch?v=Ug6XAw6hzaw. Web. 9 May 2024. ## Slide 16 Wikipedia contributors. “Tim Berners-Lee”. Wikipedia, The Free Encyclopedia, 5 May 2024, https://en.wikipedia.org/wiki/Tim_Berners-Lee. Web. 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. Web. 11 July 2022. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 17 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 18 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 19 Berners-Lee, Tim. “WWW people”. World Wide Web. CERN, 1992, http://info.cern.ch/hypertext/WWW/TheProject.html. Web. 10 June 2023. ## Slide 20 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 21 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 22 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 23 “WHATWG — FAQ”. WHATWG, https://whatwg.org/faq. Web. 19 Mar 2023. ## Slide 24 Wikipedia contributors. “WHATWG”. Wikipedia, The Free Encyclopedia, 2 Apr. 2022, https://en.wikipedia.org/wiki/WHATWG. Web. 11 July 2022. ## Slide 26 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 27 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 28 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 29 “WHATWG — FAQ”. WHATWG, https://whatwg.org/faq. Web. 19 Mar 2023. ## Slide 30 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 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 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Web. 8 Sept 2020. ## Slide 36 Deveria, Alexis [@Fyrd]. “CSS Grid Layout (level 1)”. Can I use…, 8 Sept 2020, https://caniuse.com/?search=grid. Web. 8 Sept 2020. ## Slide 37 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 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. “MDN Web Docs”. MDN Web Docs, 10 Apr 2022, https://developer.mozilla.org/en-US/. Web. 2022-04-11. ## Slide 40 MDN contributors. “MDN Web Docs”. MDN Web Docs, 10 Apr 2022, https://developer.mozilla.org/en-US/. Web. 2022-04-11. ## Slide 41 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 42 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 43 MDN contributors. “JavaScript | MDN”. MDN Web Docs, 6 July 2022, https://developer.mozilla.org/en-US/docs/Web/JavaScript. Web. 11 July 2022. ## Slide 45 “mdn main - Google Search”. Google, 23 Jan 2023, https://www.google.com/search?q=mdn%20main. Web. 23 Jan 2023. ## Slide 46 “mdn main - Kagi Search”. Kagi, 23 Jan 2023, https://kagi.com/search?q=mdn+main. Web. 23 Jan 2023. ## Slide 47 “mdn main - Brave Search”. Brave Search, 23 Jan 2023, https://search.brave.com/search?q=mdn+main. Web. 23 Jan 2023. ## Slide 52 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 55 Viewport != screen size, except on mobile devices, where every app is full screen ## Slide 56 Every browser has chrome; Google adopted the name Chrome as a little joke (not that it’s super-funny or anything!) ## Slide 59 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 60 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 61 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 62 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 63 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 64 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 65 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: 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. 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 80 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 83 Wikipedia contributors. “Web server”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Web_server. Web. 12 July 2022. ## Slide 84 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 86 Wikipedia contributors. “Communication protocol”. Wikipedia, The Free Encyclopedia, 4 July 2022, https://en.wikipedia.org/wiki/Communication_protocol. Web. 12 July 2022. ## Slide 87 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 88 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 89 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 114 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 115 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 116 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 117 Diagram by Jans Carton ## Slide 118 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 119 Diagram by Jans Carton ## Slide 120 A more detailed, accurate browser processing pipeline can be found in the CSS Overview presentation Diagram by Scott Granneman & Jans Carton ## Slide 121 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 122 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. Web. 15 Apr. 2024. ## Slide 123 WebSanity. “HTML: font element”. CodePen, 2 Oct 2022, https://codepen.io/websanity/pen/wvzvzj?editors=1000. Web. 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. Web. 2 Oct 2022. ## Slide 125 Kantor, Ilya. “The Modern JavaScript Tutorial”. JavaScript.info, 11 Jan. 2025, https://javascript.info. Web. 14 Jan 2025. ## Slide 130 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 132 https://www.nytimes.com; accessed July 27, 2019 ## Slide 133 https://www.nytimes.com; accessed July 27, 2019 ## Slide 134 https://www.nytimes.com; accessed July 27, 2019 ## Slide 135 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 136 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 137 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 138 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 139 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 140 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 141 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 142 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 143 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 144 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 145 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 147 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 148 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 149 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 150 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 152 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 153 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 154 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 155 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 156 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 157 “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 158 Order does matter to humans, so figure out what works for your team & stick to that ## Slide 159 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 160 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 161 Granneman, Scott. “Everything You Need to Know About DTDs”. Scott Granneman, 2013, https://www.granneman.com/webdev/coding/dtds/. Web. 11 July 2022. ## Slide 163 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 164 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 165 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 166 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 167 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 168 Wikipedia contributors. “Mojibake”. Wikipedia, The Free Encyclopedia, 2 July 2022, https://en.wikipedia.org/wiki/Mojibake. Web. 12 July 2022. Audio: “How to pronounce mojibake?”. HowToPronounce, https://www.howtopronounce.com/mojibake. Web. 7 Feb 2024. Note: it’s pronounced “mo-hee-bak-ay” ## Slide 172 Wikipedia contributors. “ASCII”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/ASCII. Web. 12 July 2022. ## Slide 173 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. 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. Wikipedia contributors. “Bell character”. Wikipedia, The Free Encyclopedia, 25 Sep. 2023, https://en.wikipedia.org/wiki/Bell_character. Web. 15 Sep. 2024. Wikipedia contributors. “Delete character”. Wikipedia, The Free Encyclopedia, 17 July 2024, https://en.wikipedia.org/wiki/Delete_character. Web. 15 Sep. 2024. Wikipedia contributors. “Tab key”. Wikipedia, The Free Encyclopedia, 8 Aug. 2024, https://en.wikipedia.org/wiki/Tab_key. Web. 15 Sep. 2024. ## Slide 174 Ange Albertini (@angealbertini). Twitter (January 13, 2018). . Accessed December 24, 2018. ## Slide 176 Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Web. 12 July 2022. 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. Web. 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. Web. 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. 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 177 “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. Web. 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. 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 178 Wikipedia contributors. “Unicode”. Wikipedia, The Free Encyclopedia, 11 Sep. 2024, https://en.wikipedia.org/wiki/Unicode. Web. 14 Sep. 2024. ## Slide 179 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 180 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 181 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 182 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 183 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 184 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 185 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 186 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 187 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 188 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 189 “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 190 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 191 Wikipedia contributors. “Noto fonts”. Wikipedia, The Free Encyclopedia, 6 June 2022, https://en.wikipedia.org/wiki/Noto_fonts. Web. 12 July 2022. ## Slide 193 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Web. 24 Oct. 2024. 160 sans-serif fonts in Noto ## Slide 194 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Web. 24 Oct. 2024. 160 sans-serif fonts in Noto ## Slide 195 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Web. 24 Oct. 2024. 160 sans-serif fonts in Noto ## Slide 196 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Web. 24 Oct. 2024. 40 serif fonts in Noto ## Slide 197 “Browse Fonts [Search for ‘Noto’]”. Google Fonts, https://fonts.google.com/?query=Noto. Web. 24 Oct. 2024. 2 emoji fonts in Noto 2 music fonts in Noto 4 caligraphic fonts in Noto ## Slide 199 MusicBrainz Foundation. “Music of the Spheres”. MusicBrainz, 2 Nov 2021, https://musicbrainz.org/release/b2de889c-6940-49ac-84be-3c0ea8733621. Web. 12 Nov 2023. ## Slide 200 “Music | qebrus”. Bandcamp, https://exophobiaorgqebrus.bandcamp.com/music. Web. 12 Nov 2023. ## Slide 201 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 202 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 203 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 207 “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 208 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 209 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 210 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 211 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 213 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 215 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, https://codepen.io/websanity/pen/qBqZYv?editors=1000. Web. 11 July 2022. ## Slide 217 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, https://codepen.io/websanity/pen/qBqZYv?editors=1000. Web. 11 July 2022. ## Slide 218 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 219 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 220 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 222 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 223 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 224 WebSanity. “HTML: Comments”. CodePen, 9 May 2014, https://codepen.io/websanity/pen/zYqjQM?editors=1000. Web. 12 July 2022. ## Slide 225 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 234 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 243 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 244 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 245 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 246 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 247 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 248 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 269 https://en.wikipedia.org/wiki/File:W8Notepad.png ## Slide 272 Microsoft. “Visual Studio Code - Code Editing. Redefined”. Visual Studio Code, https://code.visualstudio.com. Web. 12 July 2022. ## Slide 274 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 280 https://en.wikipedia.org/wiki/Electron_(software_framework) https://www.electronjs.org ## Slide 282 CodePen. “CodePen: Online Code Editor and Front End Web Developer Community”. CodePen, 12 July 2022, https://codepen.io/. Web. 12 July 2022. ## Slide 283 WebSanity. “WebSanity on CodePen”. CodePen, 12 July 2022, https://codepen.io/websanity/pens/popular. Web. 12 July 2022. ## Slide 285 WebSanity. “CSS: float”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/LYbMLj?editors=1100. Web. 12 July 2022. ## Slide 286 Copot, Matei. “Particle exploder (mini-game)”. CodePen, 31 Aug 2014, http://codepen.io/MateiGCopot/pen/BfAhe. Web. 2 Nov 2014. ## Slide 287 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 288 https://www.granneman.com/presentations/all-presentations ## Slide 293 NetPositive (BeOS) ## Slide 297 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 298 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 311 http://en.wikipedia.org/wiki/File:Netscape_Navigator_usage_share.png
http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg ## Slide 313 Bruce McAllister, near Ogden, Utah, April 1974, From the collection of: U.S. National Archives. https://artsandculture.google.com/exhibit/AQfyFcoI. ## Slide 317 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 318 https://www.apple.com/newsroom/2003/06/23Apple-Releases-Safari-1-0/ ## Slide 319 https://www.pxfuel.com/en/free-photo-oymtx ## Slide 326 http://www.scottmccloud.com/2-print/1-uc/index.html ## Slide 352 http://weknowmemes.com/2013/09/conversation-among-browsers/ ## Slide 365 https://addons.mozilla.org/en-US/firefox/ ## Slide 366 https://addons.mozilla.org/en-US/firefox/extensions/ ## Slide 367 https://addons.mozilla.org/en-US/firefox/themes/ ## Slide 372 200 extensions installed! ## Slide 375 https://www.apple.com/safari/, 2014-06-30 ## Slide 377 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 378 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 379 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 381 https://www.apple.com/safari/, 2014-06-30 ## Slide 392 https://en.wikipedia.org/wiki/JavaScript ## Slide 393 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 394 https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html ## Slide 397 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Web. 12 July 2022. ## Slide 398 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Web. 12 July 2022. ## Slide 399 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Web. 12 July 2022.