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 75 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 78 Wikipedia contributors. “Web server”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/Web_server. Web. 12 July 2022. ## Slide 79 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 81 Wikipedia contributors. “Communication protocol”. Wikipedia, The Free Encyclopedia, 4 July 2022, https://en.wikipedia.org/wiki/Communication_protocol. Web. 12 July 2022. ## Slide 82 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 83 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 84 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 109 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 110 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 111 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 112 Diagram by Jans Carton ## Slide 113 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 114 Diagram by Jans Carton ## Slide 115 A more detailed, accurate browser processing pipeline can be found in the CSS Overview presentation Diagram by Scott Granneman & Jans Carton ## Slide 116 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 121 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 123 https://www.nytimes.com; accessed July 27, 2019 ## Slide 124 https://www.nytimes.com; accessed July 27, 2019 ## Slide 125 https://www.nytimes.com; accessed July 27, 2019 ## Slide 126 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 127 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 128 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 129 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 130 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 131 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 132 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## Slide 133 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 134 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, http://codepen.io/websanity/pen/xmuyH. Web. 11 July 2022. ## 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 138 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 139 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 140 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 141 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 143 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 144 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 145 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 146 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 147 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 148 “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 149 Order does matter to humans, so figure out what works for your team & stick to that ## Slide 150 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 151 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 152 Granneman, Scott. “Everything You Need to Know About DTDs”. Scott Granneman, 2013, https://www.granneman.com/webdev/coding/dtds/. Web. 11 July 2022. ## Slide 154 MDN contributors. “Doctype”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Doctype. Web. 11 July 2022. “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 155 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 156 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 157 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 158 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 159 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 163 Wikipedia contributors. “ASCII”. Wikipedia, The Free Encyclopedia, 7 July 2022, https://en.wikipedia.org/wiki/ASCII. Web. 12 July 2022. ## Slide 164 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 165 Ange Albertini (@angealbertini). Twitter (January 13, 2018). . Accessed December 24, 2018. ## Slide 167 Wikipedia contributors. “UTF-8”. Wikipedia, The Free Encyclopedia, 1 July 2022, https://en.wikipedia.org/wiki/UTF-8. Web. 12 July 2022. Unicode 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 168 “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 169 Wikipedia contributors. “Unicode”. Wikipedia, The Free Encyclopedia, 11 Sep. 2024, https://en.wikipedia.org/wiki/Unicode. Web. 14 Sep. 2024. ## Slide 170 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 171 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 172 Wikipedia contributors. “JIS X 0208”. Wikipedia, The Free Encyclopedia, 2 June 2022, https://en.wikipedia.org/wiki/JIS_X_0208. Web. 12 July 2022. ## Slide 173 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 174 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 175 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 176 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 177 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 178 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 179 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 180 “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 181 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 182 Wikipedia contributors. “Noto fonts”. Wikipedia, The Free Encyclopedia, 6 June 2022, https://en.wikipedia.org/wiki/Noto_fonts. Web. 12 July 2022. ## Slide 185 MusicBrainz Foundation. “Music of the Spheres”. MusicBrainz, 2 Nov 2021, https://musicbrainz.org/release/b2de889c-6940-49ac-84be-3c0ea8733621. Web. 12 Nov 2023. ## Slide 186 “Music | qebrus”. Bandcamp, https://exophobiaorgqebrus.bandcamp.com/music. Web. 12 Nov 2023. ## Slide 187 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 188 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 189 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 193 “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 194 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 195 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 196 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 197 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 199 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 201 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, https://codepen.io/websanity/pen/qBqZYv?editors=1000. Web. 11 July 2022. ## Slide 203 WebSanity. “HTML: Simple Web Page”. CodePen, 20 Sept 2018, https://codepen.io/websanity/pen/qBqZYv?editors=1000. Web. 11 July 2022. ## Slide 204 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 205 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 206 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 208 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 209 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 210 WebSanity. “HTML: Comments”. CodePen, 9 May 2014, https://codepen.io/websanity/pen/zYqjQM?editors=1000. Web. 12 July 2022. ## Slide 211 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 220 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 229 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 230 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 231 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 232 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 233 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 234 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 255 https://en.wikipedia.org/wiki/File:W8Notepad.png ## Slide 258 Microsoft. “Visual Studio Code - Code Editing. Redefined”. Visual Studio Code, https://code.visualstudio.com. Web. 12 July 2022. ## Slide 260 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 266 https://en.wikipedia.org/wiki/Electron_(software_framework) https://www.electronjs.org ## Slide 268 CodePen. “CodePen: Online Code Editor and Front End Web Developer Community”. CodePen, 12 July 2022, https://codepen.io/. Web. 12 July 2022. ## Slide 269 WebSanity. “WebSanity on CodePen”. CodePen, 12 July 2022, https://codepen.io/websanity/pens/popular. Web. 12 July 2022. ## Slide 271 WebSanity. “CSS: float”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/LYbMLj?editors=1100. Web. 12 July 2022. ## Slide 272 Copot, Matei. “Particle exploder (mini-game)”. CodePen, 31 Aug 2014, http://codepen.io/MateiGCopot/pen/BfAhe. Web. 2 Nov 2014. ## Slide 273 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 274 https://www.granneman.com/presentations/all-presentations ## Slide 279 NetPositive (BeOS) ## Slide 283 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 284 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 297 http://en.wikipedia.org/wiki/File:Netscape_Navigator_usage_share.png
http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg ## Slide 299 Bruce McAllister, near Ogden, Utah, April 1974, From the collection of: U.S. National Archives. https://artsandculture.google.com/exhibit/AQfyFcoI. ## Slide 303 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 304 https://www.apple.com/newsroom/2003/06/23Apple-Releases-Safari-1-0/ ## Slide 305 https://www.pxfuel.com/en/free-photo-oymtx ## Slide 312 http://www.scottmccloud.com/2-print/1-uc/index.html ## Slide 338 http://weknowmemes.com/2013/09/conversation-among-browsers/ ## Slide 351 https://addons.mozilla.org/en-US/firefox/ ## Slide 352 https://addons.mozilla.org/en-US/firefox/extensions/ ## Slide 353 https://addons.mozilla.org/en-US/firefox/themes/ ## Slide 358 200 extensions installed! ## Slide 361 https://www.apple.com/safari/, 2014-06-30 ## Slide 363 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 364 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 365 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 367 https://www.apple.com/safari/, 2014-06-30 ## Slide 378 https://en.wikipedia.org/wiki/JavaScript ## Slide 379 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 380 https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html ## Slide 383 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Web. 12 July 2022. ## Slide 384 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Web. 12 July 2022. ## Slide 385 Wikipedia contributors. “Emoticon”. Wikipedia, The Free Encyclopedia, 30 June 2022, https://en.wikipedia.org/wiki/Emoticon. Web. 12 July 2022.