class: center, middle, inverse, title-slide .title[ # ISA 401: Business Intelligence & Data Visualization ] .subtitle[ ## 04: Scraping Webpages in <svg viewBox="0 0 581 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:white;" xmlns="http://www.w3.org/2000/svg"> <path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z" /></svg> ] .author[ ### <br>Fadel M. Megahed, PhD <br><br>Professor of Information Systems and Business Analytics <br> Farmer School of Business<br> Miami University<br><br> <a href="https://twitter.com/FadelMegahed"><svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:white;" xmlns="http://www.w3.org/2000/svg"> <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" /></svg> <span class="citation">@FadelMegahed</span></a> <br> <a href="https://github.com/fmegahed/"><svg viewBox="0 0 496 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:white;" xmlns="http://www.w3.org/2000/svg"> <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" /></svg> fmegahed</a> <br> <a href="mailto:fmegahed@miamioh.edu"><svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:white;" xmlns="http://www.w3.org/2000/svg"> <path d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z" /></svg> fmegahed@miamioh.edu</a><br> <a href="https://calendly.com/fmegahed"><svg viewBox="0 0 384 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:white;" xmlns="http://www.w3.org/2000/svg"> <path d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z" /></svg> Automated Scheduler for Office Hours</a><br><br> ] .date[ ### Fall 2024 ] --- # Quick Refresher from Last Class ✅ Subset data in <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:1em;width:1.13em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#C3142D;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg>. ✅ Read text-files, binary files (e.g., Excel, SAS, SPSS, Stata, etc), json files, etc. ✅ Export data from <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:1em;width:1.13em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#C3142D;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg>. --- # Learning Objectives for Today's Class - Understand when can we scrape data (i.e., `robots.txt`) - Scrape a webpage using <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:1em;width:1.13em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#C3142D;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg>. --- class: middle, inverse, center # Web Technology <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:orange;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/></svg> <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:gold;overflow:visible;position:relative;"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"/></svg> .footnote[ <html> <hr> <html> .left[ .large[Source: Slides 5-15 are from [Dr Earo Wang's STAT 220 Web Scraping Slides](https://stats220.earo.me/09-web-scrape.html#2), which were adapted from [Dr Emi Tanaka's](https://emitanaka.org/about.html) "Communicating with Data" course. ] ] ] --- # World Wide Web (WWW) WWW (or the **Web**) is the information system where documents (web pages) are identified by Uniform Resource Locators (**URL**s) A web page consists of: * <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:orange;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/></svg> **HTML** provides the basic structure of the web page * <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> **CSS** controls the look of the web page (optional) * <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:gold;overflow:visible;position:relative;"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"/></svg></span> **JS** is a programming language that can modify the behavior of elements of the web page (optional) --- # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:orange;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/></svg></span> Hypertext Markup Language (HTML) * with the extension `.html`. * rendered using a web browser via an URL. * text files that follows a special syntax that alerts web browsers how to render it. .pull-left[ .center[**via a web browser** <img src="data:image/png;base64,#../../figures/browser_plane_crashes.PNG" width="100%" style="display: block; margin: auto;" /> ] ] .pull-right[ .center[**via a text editor** <img src="data:image/png;base64,#../../figures/text_plane_crashes.PNG" width="347" style="display: block; margin: auto;" /> ] ] --- # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:orange;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/></svg> HTML Structure ```html <!DOCTYPE html> <html> <!--This is a comment and ignored by web client.--> <head> <!--This section contains web page metadata.--> <title>ISA 401: Business Intelligence and Data Viz</title> <meta name="author" content="Fadel Megahed"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <!--This section contains what you want to display on your web page.--> <h1>I'm a first level header</h1> <p>This is a <b>paragraph</b>.</p> </body> </html> ``` ??? * servr::httd() to serve * HTML: hier str: elements (`<tags>`) and optional attributes, and contents * > 100 elements: each html page must have `<head>` and `<body>`. (rich format -> md) * block tags: h1, p * inline tags: bold a --- # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:orange;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/></svg> HTML Syntax .center[`<span style="color:blue;">Author content</span>` <i class="fas fa-arrow-right"></i> <span style="color:blue;">Author content</span>] <table style="width:100%"> <tr> <td style="text-align:right;padding-right:30px;">start tag:</td><td><span class="remark-code" style="font-size:16pt"><span class="red"><span style="color:blue;"></span><span class="grey">Author content</span></span></span> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">end tag: </td><td> <span class="remark-code" style="font-size:16pt"><span class="grey"><span style="color:blue;">Author content<span class="red"></span></span></span> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">content: </td><td> <span class="remark-code" style="font-size:16pt"><span class="grey"><span style="color:blue;"></span><span class="red">Author content</span><span class="grey"></span></span></span> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">element name: </td><td> <span class="remark-code" style="font-size:16pt"><span class="grey"><</span><span class="red">span</span><span class="grey"> style="color:blue;">Author content</span></span></span> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">attribute: </td><td> <span class="remark-code" style="font-size:16pt"><span class="grey"><span <span class="red">style="color:blue;"</span><span class="grey">>Author content</span></span> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">attribute name: </td><td> <span class="remark-code" style="font-size:16pt"><span class="grey"><span <span class="red">style</span><span class="grey">="color:blue;">Author content</span></span> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">attribute value: </td><td> <span class="remark-code" style="font-size:16pt"><span class="grey"><span style=</span><span class="red">"color:blue;"</span><span class="grey">>Author content</span></span> </td> </tr> </table> <hr> .center[**Not all HTML tags have an end tag**, for example:] .center[ <span style="font-size:18pt;">`<img height="40px" src="https://tinyurl.com/rlogo-svg">`</span> <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg> <img height="40px" src="https://tinyurl.com/rlogo-svg"> ] --- # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:orange;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/></svg> HTML Elements <table style="width:100%"> <tr> <td style="text-align:right;padding-right:30px;">block element:</td><td><span class="remark-code red" style="font-size:16pt"><div><span class="grey">content</span></div></span></td> </tr> <tr> <td style="text-align:right;padding-right:30px;">inline element:</td><td><span class="remark-code red" style="font-size:16pt"><span><span class="grey">content</span></span></span></td> </tr> <tr> <td style="text-align:right;padding-right:30px;">paragraph:</td><td><span class="remark-code red" style="font-size:16pt"><p><span class="grey">content</span></p></span></td> </tr> <tr> <td style="text-align:right;padding-right:30px;">header level 1:</td><td><span class="remark-code red" style="font-size:16pt"><h1><span class="grey">content</span></h1></span></td> </tr> <tr> <td style="text-align:right;padding-right:30px;">header level 2:</td><td><span class="remark-code red" style="font-size:16pt"><h2><span class="grey">content</span></h2></span></td></td> </tr> <tr> <td style="text-align:right;padding-right:30px;">italic:</td><td><span class="remark-code red" style="font-size:16pt"><i><span class="grey">content</span></i></span></td> </tr> <tr> <td style="text-align:right;padding-right:30px;">emphasised text:</td><td><span class="remark-code red" style="font-size:16pt"><em><span class="grey">content</span></em></span></td> </tr> <tr> <td style="text-align:right;padding-right:30px;">strong importance:</td><td><span class="remark-code red" style="font-size:16pt"><strong><span class="grey">content</span></strong></span></td> </tr> <tr> <td style="text-align:right;padding-right:30px;">link:</td><td><span class="remark-code red" style="font-size:16pt"><a href="https://github.com/fmegahed/isa401"><span class="grey">content</span></a></span></td> </tr> <tr> <td valign="top" style="text-align:right;padding-right:30px;">unordered list:</td><td><span class="remark-code red" style="font-size:16pt"><ul><br><li><span class="grey">item 1</span></li><Br><li><span class="grey">item 2</span></li><Br></ul></span></td> </tr> </table> ??? How these are rendered to the browser depends on the browser default style values, style attribute or CSS... --- # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> Cascading Style Sheet (CSS) * with the extension `.css` * 3 ways to style elements in HTML: * **inline** by using the `style` attribute inside HTML start tag: <center> <span class="remark-code grey" style="font-size:14pt;"><h1 <span class="red">style="color:blue;"</span>>Blue Header</h1></span> </center> + **externally** by using the `<link>` element: <center> <span class="remark-code red" style="font-size:14pt;"><link rel="stylesheet" href="styles.css"></span> </center> + **internally** by defining within `<style>` element: <div style="margin-left:35%; width:350px;"> ```html <style type="text/css"> h1 { color: blue; } </style> ``` </div> By convention, the `<style>` and `<link>` elements tend to go into the `<head>` section of the HTML document. --- # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Syntax .pull-left[ ```html <style type="text/css"> h1 { color: blue; } </style> <h1>This is a header</h1> ``` ] <div style="margin-left:55%; width:350px;"> <br> <h2 style="color:blue">This is a header</h2> </div> <table style="width:100%"> <tr> <td style="text-align:right;padding-right:30px;">selector:</td><td><span class="remark-code" style="font-size:16pt"><span class="red">h1</span><span class="grey"> { color: blue; }</span></span> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">property:</td><td><span class="remark-code" style="font-size:16pt; color:gray">h1 { <span class="red">color: blue;</span> }</span> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">property name:</td><td><span class="remark-code" style="font-size:16pt; color:gray">h1 { <span class="red">color</span>: blue; } </span></td> </tr> <tr> <td style="text-align:right;padding-right:30px;">property value:</td><td><span class="remark-code grey" style="font-size:16pt; color:gray">h1 { color: <span class="red">blue</span>; } </span></td> </tr> </table> .pull-left[ You may have multiple properties for a single selector.➡️ ] .pull-right[ ```css h1 { color: blue; font-size: 16pt; } ``` ] --- # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Properties .center[ ```html <div>Sample text</div> ``` ] <table style="width:100%"> <tr> <td style="text-align:right;padding-right:30px;">background color:</td> <td><span class="remark-code grey" style="font-size:16pt; color:gray">div { <span class="red">background-color: yellow;</span> }</span> </td> <td> <div style="background-color: yellow;">Sample text</div> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">text color:</td> <td><span class="remark-code grey" style="font-size:16pt; color:gray">div { <span class="red">color: purple;</span> }</span> </td> <td> <div style="color: purple;">Sample text</div> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">border:</td> <td><span class="remark-code grey" style="font-size:16pt; color:gray">div { <span class="red">border: 1px dashed brown;</span> }</span> </td> <td> <div style="border: 1px dashed brown;">Sample text</div> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">left border only:</td> <td><span class="remark-code grey" style="font-size:16pt; color:gray">div { <span class="red">border-left: 10px solid pink;</span> }</span> </td> <td> <div style="border-left: 10px solid pink;">Sample text</div> </td> </tr> <tr> <td style="text-align:right;padding-right:30px;">text size:</td> <td><span class="remark-code grey" style="font-size:16pt; color:gray">div { <span class="red">font-size: 10pt;</span> }</span> </td> <td> <div style="font-size:10pt;">Sample text</div> </td> </tr> <tr> <td valign="top" style="text-align:right;padding-right:30px;">padding:</td> <td valign="top"><span class="remark-code grey" style="font-size:16pt; color:gray">div { background-color: yellow; <br>     <span class="red">padding: 10px;</span> }</span> </td> <td> <div style="background-color: yellow;padding:10px;">Sample text</div> </td> </tr> <tr> <td valign="top" style="text-align:right;padding-right:30px;">margin:</td> <td valign="top"><span class="remark-code grey" style="font-size:16pt; color:gray">div { background-color: yellow; <br>     <span class="red">margin: 10px;</span> }</span> </td> <td> <div style="background-color: yellow;margin:10px;">Sample text</div> </td> </tr> </table> --- # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Properties .center[ ```html <div>Sample text</div> ``` ] <table style="width:100%"> <tr> <td valign="top" style="text-align:right;padding-right:30px;">center align text:</td> <td valign="top"><span class="remark-code grey" style="font-size:16pt; color:gray">div { background-color: yellow; <br>     padding-top: 20px;<br>     <span class="red">text-align: center;</span> }</span> </td> <td> <div style="background-color: yellow;text-align: center;padding-top: 20px;">Sample text</div> </td> </tr> <tr> <td valign="top" style="text-align:right;padding-right:30px;">font family:</td> <td valign="top"><span class="remark-code grey" style="font-size:16pt; color:gray">div { <span class="red">font-family: Marker Felt, times;</span> }</span> </td> <td> <div style="font-family: Marker Felt, times;">Sample text</div> </td> </tr> <tr> <td valign="top" style="text-align:right;padding-right:30px;">strike:</td> <td valign="top"><span class="remark-code grey" style="font-size:16pt; color:gray">div { <span class="red">text-decoration: line-through;</span> }</span> </td> <td> <div style="text-decoration: line-through;">Sample text</div> </td> </tr> <tr> <td valign="top" style="text-align:right;padding-right:30px;">underline:</td> <td valign="top"><span class="remark-code grey" style="font-size:16pt; color:gray">div { <span class="red">text-decoration: underline;</span> }</span> </td> <td> <div style="text-decoration: underline;">Sample text</div> </td> </tr> <tr> <td valign="top" style="text-align:right;padding-right:30px;">opacity:</td> <td valign="top"><span class="remark-code grey" style="font-size:16pt; color:gray">div { <span class="red">opacity: 0.3</span> }</span> </td> <td> <div style="opacity: 0.3;">Sample text</div> </td> </tr> </table> --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr class="red"> <td class="remark-code">* </td><td> </td><td>selects all elements</td> </tr> <tr> <td class="remark-code">div</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> elements</td> </tr> <tr> <td class="remark-code">div, p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> and <span class="remark-code" style="font-size:16pt"><p></span> elements</td> </tr> <tr> <td class="remark-code">div p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> within <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div > p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> one level deep in <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr valign="top"> <td class="remark-code">div + p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> immediately after a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div ~ p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> preceded by a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> </table> ] .pull-right[ <pre style="font-size: 13pt;" class="red"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div> <p>Household 1</p> <div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div> <span class="child"> <span class="parent child rebel"> <p>Clean your room!</p> </span> </span> <p>End of households</p> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr > <td class="remark-code">* </td><td> </td><td>selects all elements</td> </tr> <tr class="red"> <td class="remark-code">div</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> elements</td> </tr> <tr> <td class="remark-code">div, p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> and <span class="remark-code" style="font-size:16pt"><p></span> elements</td> </tr> <tr> <td class="remark-code">div p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> within <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div > p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> one level deep in <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr valign="top"> <td class="remark-code">div + p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> immediately after a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div ~ p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> preceded by a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <span class="red"><div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div></span> <p>Household 1</p> <span class="red"><div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div></span> <span class="child"> <span class="parent child rebel"> <p>Clean your room!</p> </span> </span> <p>End of households</p> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr > <td class="remark-code">* </td><td> </td><td>selects all elements</td> </tr> <tr class="red"> <td class="remark-code">blockquote</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><blockquote></span> elements</td> </tr> <tr> <td class="remark-code">div, p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> and <span class="remark-code" style="font-size:16pt"><p></span> elements</td> </tr> <tr> <td class="remark-code">div p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> within <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div > p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> one level deep in <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr valign="top"> <td class="remark-code">div + p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> immediately after a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div ~ p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> preceded by a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <span class="red"><blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote></span> <div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div> <p>Household 1</p> <div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div> <span class="child"> <span class="parent child rebel"> <p>Clean your room!</p> </span> </span> <p>End of households</p> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr > <td class="remark-code">* </td><td> </td><td>selects all elements</td> </tr> <tr> <td class="remark-code">div</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> elements</td> </tr> <tr class="red"> <td class="remark-code">div, p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> and <span class="remark-code" style="font-size:16pt"><p></span> elements</td> </tr> <tr> <td class="remark-code">div p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> within <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div > p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> one level deep in <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr valign="top"> <td class="remark-code">div + p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> immediately after a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div ~ p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> preceded by a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <span class="red"><p>Maybe stories are just data with a soul.</p></span> <footer>—Brene Brown</footer> </blockquote> <span class="red"><div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div></span> <span class="red"><p>Household 1</p></span> <span class="red"><div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </span> </div></span> <span class="child"> <span class="parent child rebel"> <span class="red"><p>Clean your room!</p></span> </span> </span> <span class="red"><p>End of households</p></span> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr > <td class="remark-code">* </td><td> </td><td>selects all elements</td> </tr> <tr> <td class="remark-code">div</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> elements</td> </tr> <tr> <td class="remark-code">div, p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> and <span class="remark-code" style="font-size:16pt"><p></span> elements</td> </tr> <tr class="red"> <td class="remark-code">div p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> within <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div > p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> one level deep in <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr valign="top"> <td class="remark-code">div + p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> immediately after a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div ~ p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> preceded by a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <div id="p1" class="parent"> Hmm <span class="red"><p>Hi!</p></span> How are you? <div class="child nice"> <span class="red"><p>Hello!</p></span> </div> </div> <p>Household 1</p> <div class="parent"> <span class="red"><p>Hi!</p></span> <blockquote class="child rebel"> <span class="red"><p>Don't talk to me!</p></span> </blockquote> </div> <span class="child"> <span class="parent child rebel"> <p>Clean your room!</p> </span> </span> <p>End of households</p> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr > <td class="remark-code">* </td><td> </td><td>selects all elements</td> </tr> <tr> <td class="remark-code">div</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> elements</td> </tr> <tr> <td class="remark-code">div, p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> and <span class="remark-code" style="font-size:16pt"><p></span> elements</td> </tr> <tr class="red"> <td class="remark-code">p div</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> within <span class="remark-code" style="font-size:16pt"><p></span></td> </tr> <tr> <td class="remark-code">div > p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> one level deep in <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr valign="top"> <td class="remark-code">div + p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> immediately after a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div ~ p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> preceded by a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div> <p>Household 1</p> <div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div> <span class="child"> <span class="parent child rebel"> <p>Clean your room!</p> </span> </span> <p>End of households</p> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr > <td class="remark-code">* </td><td> </td><td>selects all elements</td> </tr> <tr> <td class="remark-code">div</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> elements</td> </tr> <tr> <td class="remark-code">div, p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> and <span class="remark-code" style="font-size:16pt"><p></span> elements</td> </tr> <tr > <td class="remark-code">div p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> within <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr class="red"> <td class="remark-code">div > p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> one level deep in <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr valign="top"> <td class="remark-code">div + p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> immediately after a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div ~ p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> preceded by a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <div id="p1" class="parent"> Hmm <span class="red"><p>Hi!</p></span> How are you? <div class="child nice"> <span class="red"><p>Hello!</p></span> </div> </div> <p>Household 1</p> <div class="parent"> <span class="red"><p>Hi!</p></span> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div> <span class="child"> <span class="parent child rebel"> <p>Clean your room!</p> </span> </span> <p>End of households</p> </pre> ] <div style="position:absolute;top:10px;left:900px;width:300px;background-color:white;border:1px solid black;font-size:16pt;padding:2px;"> <i class="fas fa-exclamation-triangle"></i> Ignores inline elements like <code>span</code>, <code>i</code>, <code>b</code>,... </div> --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr > <td class="remark-code">* </td><td> </td><td>selects all elements</td> </tr> <tr> <td class="remark-code">div</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> elements</td> </tr> <tr> <td class="remark-code">div, p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> and <span class="remark-code" style="font-size:16pt"><p></span> elements</td> </tr> <tr > <td class="remark-code">div p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> within <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div > p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> one level deep in <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr valign="top" class="red"> <td class="remark-code">div + p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> immediately after a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div ~ p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> preceded by a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div> <span class="red"><p>Household 1</p></span> <div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div> <span class="child"> <span class="parent child rebel"> <span class="red"><p>Clean your room!</p></span> </span> </span> <p>End of households</p> </pre> ] <div style="position:absolute;top:10px;left:900px;width:300px;background-color:white;border:1px solid black;font-size:16pt;padding:2px;"> <i class="fas fa-exclamation-triangle"></i> Ignores inline elements like <code>span</code>, <code>i</code>, <code>b</code>,... </div> --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr > <td class="remark-code">* </td><td> </td><td>selects all elements</td> </tr> <tr> <td class="remark-code">div</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> elements</td> </tr> <tr> <td class="remark-code">div, p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><div></span> and <span class="remark-code" style="font-size:16pt"><p></span> elements</td> </tr> <tr > <td class="remark-code">div p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> within <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div > p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> one level deep in <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr> <td class="remark-code">div + p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> immediately after a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> <tr class="red"> <td class="remark-code">div ~ p</td><td> </td><td>selects all <span class="remark-code" style="font-size:16pt"><p></span> preceded by a <span class="remark-code" style="font-size:16pt"><div></span></td> </tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div> <span class="red"><p>Household 1</p></span> <div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div> <span class="child"> <span class="parent child rebel"> <span class="red"><p>Clean your room!</p></span> </span> </span> <span class="red"><p>End of households</p></span> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr> <td class="remark-code" valign="top">.classname</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">class="classname"</span>. </td> </tr> <tr> <td class="remark-code" valign="top">.c1.c2</td><td> </td><td>selects all elements with <em>both</em> <span class="remark-code" style="font-size:16pt">c1</span> and <span class="remark-code" style="font-size:16pt">c2</span> within its class attribute. </td> </tr> <tr> <td class="remark-code" valign="top">.c1 .c2</td><td> </td><td>selects all elements with class <span class="remark-code" style="font-size:16pt">c2</span> that is a descendant of an element with class <span class="remark-code" style="font-size:16pt">c1</span>. </td> </tr> <tr> <td class="remark-code" valign="top">#idname</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">id="idname"</span>. </td> </tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div> <p>Household 1</p> <div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div> <span class="child"> <span class="parent child rebel"></span> <p>Clean your room!</p> </span></span> </span> <p>End of households</p> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr class="red"> <td class="remark-code" valign="top">.parent</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">class="parent"</span>. </td> </tr> <tr> <td class="remark-code" valign="top">.c1.c2</td><td> </td><td>selects all elements with <em>both</em> <span class="remark-code" style="font-size:16pt">c1</span> and <span class="remark-code" style="font-size:16pt">c2</span> within its class attribute. </td> </tr> <tr> <td class="remark-code" valign="top">.c1 .c2</td><td> </td><td>selects all elements with class <span class="remark-code" style="font-size:16pt">c2</span> that is a descendant of an element with class <span class="remark-code" style="font-size:16pt">c1</span>. </td> </tr> <tr> <td class="remark-code" valign="top">#idname</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">id="idname"</span>. </td> </tr> </table> <div style="position:absolute;top:10px;left:900px;width:300px;background-color:white;border:1px solid black;font-size:16pt;padding:2px;"> <i class="fas fa-exclamation-triangle"></i> Note some offspring do not inherit class from their parents. </div> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <span class="red"><div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div></span> <p>Household 1</p> <span class="red"><div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div></span> <span class="child"> <span class="red"><span class="parent child rebel"></span> <p>Clean your room!</p> <span class="red"></span></span> </span> <p>End of households</p> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <td class="remark-code" valign="top">.classname</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">class="classname"</span>. </td> </tr> <tr class="red"> <td class="remark-code" valign="top">.child.rebel</td><td> </td><td>selects all elements with <em>both</em> <span class="remark-code" style="font-size:16pt">child</span> and <span class="remark-code" style="font-size:16pt">rebel</span> within its class attribute. </td> </tr> <tr> <td class="remark-code" valign="top">.c1 .c2</td><td> </td><td>selects all elements with class <span class="remark-code" style="font-size:16pt">c2</span> that is a descendant of an element with class <span class="remark-code" style="font-size:16pt">c1</span>. </td> </tr> <tr> <td class="remark-code" valign="top">#idname</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">id="idname"</span>. </td> </tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div> <p>Household 1</p> <div class="parent"> <p>Hi!</p> <span class="red"><blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote></span> </div> <span class="child"> <span class="red"><span class="parent child rebel"></span> <p>Clean your room!</p> <span class="red"></span></span> </span> <p>End of households</p> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <tr> <td class="remark-code" valign="top">.classname</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">class="classname"</span>. </td> </tr> <tr> <td class="remark-code" valign="top">.c1.c2</td><td> </td><td>selects all elements with <em>both</em> <span class="remark-code" style="font-size:16pt">c1</span> and <span class="remark-code" style="font-size:16pt">c2</span> within its class attribute. </td> </tr> <tr class="red"> <td class="remark-code" valign="top">.parent .rebel</td><td> </td><td>selects all elements with class <span class="remark-code" style="font-size:16pt">rebel</span> that is a descendant of an element with class <span class="remark-code" style="font-size:16pt">parent</span>. </td> </tr> <tr> <td class="remark-code" valign="top">#idname</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">id="idname"</span>. </td> </tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div> <p>Household 1</p> <div class="parent"> <p>Hi!</p> <span class="red"><blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote></span> </div> <span class="child"> <span class="parent child rebel"> <p>Clean your room!</p> </span> </span> <p>End of households</p> </pre> ] --- count: false .pull-left[ # <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:blue;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"/></svg> CSS Selector <table class="grey" style="width:98%;margin-left:10px;margin-right:10px;"> <td class="remark-code" valign="top">.classname</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">class="classname"</span>. </td> </tr> <tr> <td class="remark-code" valign="top">.c1.c2</td><td> </td><td>selects all elements with <em>both</em> <span class="remark-code" style="font-size:16pt">c1</span> and <span class="remark-code" style="font-size:16pt">c2</span> within its class attribute. </td> </tr> <tr> <td class="remark-code" valign="top">.c1 .c2</td><td> </td><td>selects all elements with class <span class="remark-code" style="font-size:16pt">c2</span> that is a descendant of an element with class <span class="remark-code" style="font-size:16pt">c1</span>. </td> </tr> <tr class="red"> <td class="remark-code" valign="top">#p1</td><td> </td><td>selects all elements with the attribute <span class="remark-code" style="font-size:16pt">id="p1"</span>. </td> </tr> </table> ] .pull-right[ <pre style="font-size: 13pt"> <h1>This is a sample html</h1> <blockquote> <p>Maybe stories are just data with a soul.</p> <footer>—Brene Brown</footer> </blockquote> <span class="red"><div id="p1" class="parent"> Hmm <p>Hi!</p> How are you? <div class="child nice"> <p>Hello!</p> </div> </div></span> <p>Household 1</p> <div class="parent"> <p>Hi!</p> <blockquote class="child rebel"> <p>Don't talk to me!</p> </blockquote> </div> <span class="child"> <span class="parent child rebel"> <p>Clean your room!</p> </span> </span> <p>End of households</p> </pre> ] <div style="position:absolute;top:10px;left:900px;width:300px;background-color:white;border:1px solid black;font-size:16pt;padding:2px;"> <i class="fas fa-exclamation-triangle"></i> Unlike <code style="font-size:16pt">class</code>, you can only have one <code style="font-size:16pt">id</code> value and must be unique in the whole HTML document. </div> --- # <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:gold;overflow:visible;position:relative;"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"/></svg> JavaScript (JS)* * JS is a programming language and enable interactive components in HTML documents. * 2 ways to insert JS into a HTML document: + **internally** by defining within `<script>` element: ```html <script> document.getElementById("p1").innerHTML = "content"; </script> ``` + **externally** by using the `src` attribute to refer to the external file: ```html <script src="js/myjs.js"></script> ``` --- class: inverse, center, middle # Web Scraping 🕸 --- # rvest: Step 1 - Reading Static HTML Pages .pull-left[ .center[ <img src="data:image/png;base64,#../../figures/browser_isa_courses.PNG" width="100%" style="display: block; margin: auto;" /> ] ] .pull-right[ Use {rvest} `>= v1.0.2` (if not, update) <img src="data:image/png;base64,#../../figures/rvest.PNG" width="100%" style="display: block; margin: auto;" /> <br> ``` r if(require(pacman)==FALSE) install.packages("pacman") pacman::p_load(rvest) isa_courses = read_html("http://bulletin.miamioh.edu/courses-instruction/isa/") isa_courses ``` ``` ## {html_document} ## <html xml:lang="en" lang="en" dir="ltr"> ## [1] <head>\n<title>Information System ... ## [2] <body>\n\n\n\n\n\n<!-- Google Tag ... ``` ] --- # rvest: Step 2 - Selecting HTML Elements .pull-left[ ## <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg> Inspector <br> .center[ <img src="data:image/png;base64,#../../figures/browser_isa_courses_titles_inspector.png" width="564" style="display: block; margin: auto;" /> ] ] .pull-right[ ## <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M192 104.8c0-9.2-5.8-17.3-13.2-22.8C167.2 73.3 160 61.3 160 48c0-26.5 28.7-48 64-48s64 21.5 64 48c0 13.3-7.2 25.3-18.8 34c-7.4 5.5-13.2 13.6-13.2 22.8v0c0 12.8 10.4 23.2 23.2 23.2H336c26.5 0 48 21.5 48 48v56.8c0 12.8 10.4 23.2 23.2 23.2v0c9.2 0 17.3-5.8 22.8-13.2c8.7-11.6 20.7-18.8 34-18.8c26.5 0 48 28.7 48 64s-21.5 64-48 64c-13.3 0-25.3-7.2-34-18.8c-5.5-7.4-13.6-13.2-22.8-13.2v0c-12.8 0-23.2 10.4-23.2 23.2V464c0 26.5-21.5 48-48 48H279.2c-12.8 0-23.2-10.4-23.2-23.2v0c0-9.2 5.8-17.3 13.2-22.8c11.6-8.7 18.8-20.7 18.8-34c0-26.5-28.7-48-64-48s-64 21.5-64 48c0 13.3 7.2 25.3 18.8 34c7.4 5.5 13.2 13.6 13.2 22.8v0c0 12.8-10.4 23.2-23.2 23.2H48c-26.5 0-48-21.5-48-48V343.2C0 330.4 10.4 320 23.2 320v0c9.2 0 17.3 5.8 22.8 13.2C54.7 344.8 66.7 352 80 352c26.5 0 48-28.7 48-64s-21.5-64-48-64c-13.3 0-25.3 7.2-34 18.8C40.5 250.2 32.4 256 23.2 256v0C10.4 256 0 245.6 0 232.8V176c0-26.5 21.5-48 48-48H168.8c12.8 0 23.2-10.4 23.2-23.2v0z"/></svg> [Selector Gadget](https://selectorgadget.com/) <br> .center[ <img src="data:image/png;base64,#../../figures/browser_isa_courses_titles.PNG" width="567" style="display: block; margin: auto;" /> ] ] --- class: middle # rvest: Step 2 - Selecting HTML Elements .pull-left[ .center[ <img src="data:image/png;base64,#../../figures/browser_isa_courses_titles.PNG" width="567" style="display: block; margin: auto;" /> ] ] .pull-right[ ``` r isa_course_titles = isa_courses |> html_elements(css = "p.courseblocktitle") isa_course_titles ``` ``` ## {xml_nodeset (50)} ## [1] <p class="courseblocktitle"><str ... ## [2] <p class="courseblocktitle"><str ... ## [3] <p class="courseblocktitle"><str ... ## [4] <p class="courseblocktitle"><str ... ## [5] <p class="courseblocktitle"><str ... ## [6] <p class="courseblocktitle"><str ... ## [7] <p class="courseblocktitle"><str ... ## [8] <p class="courseblocktitle"><str ... ## [9] <p class="courseblocktitle"><str ... ## [10] <p class="courseblocktitle"><str ... ## [11] <p class="courseblocktitle"><str ... ## [12] <p class="courseblocktitle"><str ... ## [13] <p class="courseblocktitle"><str ... ## [14] <p class="courseblocktitle"><str ... ## [15] <p class="courseblocktitle"><str ... ## [16] <p class="courseblocktitle"><str ... ## [17] <p class="courseblocktitle"><str ... ## [18] <p class="courseblocktitle"><str ... ## [19] <p class="courseblocktitle"><str ... ## [20] <p class="courseblocktitle"><str ... ## ... ``` ] --- # rvest: Step 3 - Getting HTML Text .pull-left[ .center[ <img src="data:image/png;base64,#../../figures/browser_isa_courses_titles.PNG" width="567" style="display: block; margin: auto;" /> ] ] .pull-right[ ``` r isa_course_titles_en = isa_course_titles |> html_text2() isa_course_titles_en ``` ``` ## [1] "ISA 125. Introduction to Business Statistics. (3)" ## [2] "ISA 177. Independent Studies. (0-6)" ## [3] "ISA 211. Information Technology and Data Driven Decision Making in Business. (3)" ## [4] "ISA 225. Principles of Business Analytics. (3)" ## [5] "ISA 235. Information Technology and the Intelligent Enterprise. (3)" ## [6] "ISA 241. Database for Analytics. (1.5)" ## [7] "ISA 242. Programming for Analytics. (1.5)" ## [8] "ISA 245. Database Systems and Data Warehousing. (3)" ## [9] "ISA 250. Basic Math for Analytics. (3)" ## [10] "ISA 277. Independent Studies. (0-6)" ## [11] "ISA 281. Concepts in Business Programming. (3)" ## [12] "ISA 291. Applied Regression Analysis in Business. (3)" ## [13] "ISA 301. Business Data Communications and Security. (3)" ## [14] "ISA 303. Enterprise Systems. (3)" ## [15] "ISA 305. Information Technology Governance, Risk Management, Security and Audit. (3)" ## [16] "ISA 321. Optimization in Business Analytics. (3)" ## [17] "ISA 333. Nonparametric Statistics. (3)" ## [18] "ISA 335. Blockchain and Business Applications. (3)" ## [19] "ISA 340. Internship. (0-20)" ## [20] "ISA 365. Statistical Monitoring and Design of Experiments. (3)" ## [21] "ISA 377. Independent Studies. (0-6)" ## [22] "ISA 387. Designing Business Systems. (3)" ## [23] "ISA 401/ISA 501. Business Intelligence and Data Visualization. (3)" ## [24] "ISA 403. Building Web and Mobile Business Applications. (3)" ## [25] "ISA 405. Information Security. (3)" ## [26] "ISA 406. IT Project Management. (3)" ## [27] "ISA 412/ISA 512. Data Warehousing and Business Intelligence. (3)" ## [28] "ISA 414/ISA 514. Managing Big Data. (3)" ## [29] "ISA 419. Data Driven Security. (3)" ## [30] "ISA 424. Data Infrastructure for the Enterprise. (3)" ## [31] "ISA 444/ISA 544. Business Forecasting. (3)" ## [32] "ISA 477. Independent Studies. (0-6)" ## [33] "ISA 480. Topics in Business Analytics. (1-3; maximum 3)" ## [34] "ISA 481. Topics in Information Systems. (3-4; maximum 3)" ## [35] "ISA 491/ISA 591. Introduction to Data Mining in Business. (3)" ## [36] "ISA 495. Managing the Intelligent Enterprise. (3)" ## [37] "ISA 496. Business Analytics Practicum. (3)" ## [38] "ISA 616. Communicating with Data. (3)" ## [39] "ISA 621. Enabling Technology Topics I. (3)" ## [40] "ISA 628. Information Technology and Analytic's Role in the Enterprise. (1.5)" ## [41] "ISA 629. Leveraging IT and Data Across the Business. (1.5)" ## [42] "ISA 630. Machine Learning Applications in Business. (3)" ## [43] "ISA 632. Big Data Analytics and Modern AI. (3)" ## [44] "ISA 633. Prescriptive Analytics in Business. (3)" ## [45] "ISA 634. Analytics Solution Deployment and Lifecycle Management. (3)" ## [46] "ISA 641. Data Discovery Through Business Analytics for Managers. (2)" ## [47] "ISA 645. Business Analytics for the Executive. (3)" ## [48] "ISA 650. Business Analytics Practicum. (3; maximum 6)" ## [49] "ISA 677. Independent Studies. (0-6)" ## [50] "ISA 681. Studies-Management Information Systems. (1-3)" ``` ] --- # Demo: Scraping the Course Descriptions - We will build on the previous example and we will scrape the **course descriptions** associated with these courses. - Then, we will create a **data frame** containing **both** the **course titles** and **descriptions** - Then, we will **export the results to a CSV** so that we can analyze that in a separate program if we wanted to. --- # Non-Graded Class Activity <div class="countdown" id="timer_6f1d79d3" data-update-every="1" tabindex="0" style="top:0;right:0;font-size:2em;"> <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div> <code class="countdown-time"><span class="countdown-digits minutes">04</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code> </div> .panelset[ .panel[.panel-name[Activity] .small[ - Go to [this database on plane crashes](http://www.planecrashinfo.com/2024/2024.htm) - Scrape the HTML table. **Note the difference from text elements:** + The CSS selector for `html_elements()` will be different. + You will extract a table (in its **entirety**) and hence: * we will use `html_table()` instead of `html_text2()` - Store the scraped data in an appropriate location on your computer (e.g., within the data folder for ISA 401) ] ] .panel[.panel-name[Your Solution] .small[ > _Over the next 4 minutes, use a <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:1em;width:1.13em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg> script file to perform the tasks outlined in the activity panel._ ] ] .panel[.panel-name[My Solution] **Please refer to our discussion in class** ] ] --- class: inverse, center, middle # Legal and Ethical Issues with Web Scraping --- # `Robots.txt` When scraping/crawling the web you need to be aware of `robots.txt`. > _The robots exclusion standard, also known as the robots exclusion protocol or simply robots.txt, is a standard used by websites to communicate with web crawlers and other web robots. The standard specifies how to inform the web robot about which areas of the website should not be processed or scanned_. --- [Wikipedia](https://en.wikipedia.org/wiki/Robots_exclusion_standard) Using the excellent [robotstxt](https://cran.r-project.org/package=robotstxt/vignettes/using_robotstxt.html) <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:gold;overflow:visible;position:relative;"><path d="M50.7 58.5L0 160H208V32H93.7C75.5 32 58.9 42.3 50.7 58.5zM240 160H448L397.3 58.5C389.1 42.3 372.5 32 354.3 32H240V160zm208 32H0V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192z"/></svg> to check if scraping/crawling a specific directory is allowed. ``` r if(require(robotstxt)==FALSE) install.packages("robotstxt") robotstxt::paths_allowed(paths = "2024/", domain = "planecrashinfo.com", bot = "*") ``` ``` ## [1] TRUE ``` --- # Terms of Service Most large companies have **terms of service** that supplement what is permitted and/or disallowed on their `robots.txt` file. Examples include: - [Yelp's US Terms of Service](https://terms.yelp.com/tos/en_us/20200101_en_us/) - [LinkedIn Terms of Service](https://www.linkedin.com/legal/l/service-terms) --- counter: false # Ethical/Legal Considerations - **Use of publicly available reviews as a part of your service:** Would you classify the [Yelp vs Google Feud as such an example](https://www.nytimes.com/2017/07/01/technology/yelp-google-european-union-antitrust.html)? <center> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Wow Google, congrats on a new low. Consumer searches for Yelp gets "reviews" which are Google Ads. <a href="https://t.co/gKSeOOhzWG">pic.twitter.com/gKSeOOhzWG</a></p>— Jeremy Stoppelman (@jeremys) <a href="https://twitter.com/jeremys/status/876978936177082368?ref_src=twsrc%5Etfw">June 20, 2017</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </center> --- counter: false # Ethical/Legal Considerations - **Use of publicly available profiles as a part of your service:** + [LinkedIn vs Hiq Labs: Ninth Circuit Decision in 2019](https://cdn.ca9.uscourts.gov/datastore/opinions/2019/09/09/17-16783.pdf) + [Revival of Case in 2021 by Supreme Court](https://techcrunch.com/2021/06/14/supreme-court-revives-linkedin-bid-to-protect-user-data-from-web-scrapers/) --- counter: false # Ethical/Legal Considerations - **What about scraping entire websites/webpages for the purpose of archiving the internet?** <div class="figure" style="text-align: center"> <img src="data:image/png;base64,#../../figures/wayback_google.PNG" alt="The evolution of the home page for Google per the Wayback Machine" width="80%" /> <p class="caption">The evolution of the home page for Google per the Wayback Machine</p> </div> --- class: inverse, center, middle # Recap --- # Summary of Main Points By now, you should be able to do the following: - Understand when can we scrape data (i.e., `robots.txt`) - Scrape a webpage using <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:1em;width:1.13em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#C3142D;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg>. --- # Things to Do to Prepare for Next Class - Go over your notes, read through the supplementary material (below) and complete [Assignment 04](https://miamioh.instructure.com/courses/223961/assignments/2903164) on Canvas. .pull-left[ .center[ <img src="data:image/png;base64,#../../figures/web_scrape_in_data_science.PNG" height="300px" style="display: block; margin: auto;" /> ] * [PDF of Published Paper](https://www.tandfonline.com/doi/pdf/10.1080/10691898.2020.1787116) * [ePub of Published Paper](https://www.tandfonline.com/doi/epub/10.1080/10691898.2020.1787116?needAccess=true) ] .pull-right[ .center[<img src="https://raw.githubusercontent.com/rstudio/hex-stickers/main/PNG/rvest.png" height="300px">] * [Selector Gadget](https://rvest.tidyverse.org/articles/articles/selectorgadget.html) * [Getting Started with rvest](https://rvest.tidyverse.org/articles/articles/selectorgadget.html) * [Practical Web Scraping in R](https://www.r-bloggers.com/2019/04/practical-introduction-to-web-scraping-in-r/) ]