02_Web_Scraping_With_Beautiful_Soup/01_HTML_Basics.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "o3u4y5wrL5Vm"
      },
      "source": [
        "To open this notebook in Google Colab and start coding, click on the Colab icon below.\n",
        "\n",
        "<table style=\"border:2px solid orange\" align=\"left\">\n",
        "    <td style=\"border:2px solid orange\">\n",
        "        <a target=\"_blank\" href=\"https://colab.research.google.com/github/neuefische/ds-meetups/blob/main/02_Web_Scraping_With_Beautiful_Soup/01_HTML_Basics.ipynb\">\n",
        "        <img src=\"https://www.tensorflow.org/images/colab_logo_32px.png\" />Run in Google Colab</a>\n",
        "    </td>\n",
        "</table>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "gXQBz-1sU2zb"
      },
      "source": [
        "---\n",
        "\n",
        "# Revisiting... HTML basics for Web scraping\n",
        "\n",
        "HTML stands for HyperText Markup Language. You can deduce that it’s a language for creating web pages. It’s not a programming language like Python or Java, but a markup language. It describes the elements of a page through tags characterized by angle brackets.\n",
        "\n",
        "\n",
        "#### Learning objectives for this Notebook\n",
        "At the end of this notebook you should:\n",
        "* have an idea how an HTML document is structured\n",
        "* know the most commonly used HTML elements and their tags\n",
        "* know how the class and id attribute can be used\n",
        "\n",
        "\n",
        "#### How to use this Notebook\n",
        "This notebook is supposed to be follow-along. Feel free to change stuff and experiment as much as you want, though. \n",
        "\n",
        "## 0. Introduction\n",
        "\n",
        "When dealing with HTML documents, it is always helpful to have a preview of the rendered file. There are many HTML editors or IDEs that offer such a preview out of the box, but did you know that you can also use HTML (to a certain extent) in Markdown files? In this notebook you will find some examples of how HTML affects the design of your Markdown cells. As there are some limitations when it comes to applying different styles, we have prepared the same examples using an online HTML editor called [codepen](https://codepen.io/)."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "4US0WOGJU2ze"
      },
      "source": [
        "## 1. HTML in Markdown\n",
        "\n",
        "Let's start with a code snippet that will create a very simple example website:  \n",
        "\n",
        "\n",
        "```html\n",
        "<html>\n",
        "    <head>\n",
        "        <title></title>\n",
        "    </head>\n",
        "    <body>\n",
        "        <h1>A Beginner Guide to Aquaristics</h1>\n",
        "        <h2>My first aquarium</h2>\n",
        "        <p>Are you looking for a new hobby to invest your time and money in? Look no further!</p>\n",
        "    </body>\n",
        "</html>\n",
        "```\n",
        "The document always begins and ends using `<html>` and `</html>`. The `<head>` element usually contains the title of the website, some kind of metadata or styling rules. \n",
        "The actual content of a website can be found in the `<body>...</body>` part. It contains the visible part of an HTML document. In our example the document's body consists of two headings (`<h1>, <h2>`) and a short paragraph `<p>`.\n",
        "\n",
        "We can see the raw HTML code above because we have enclosed it in quotes, so Markdown will treat it as a code snippet. \n",
        "In the next cell we removed the quotes to get a preview of what our website would look like. If you want to change or add some elements, feel free to use the [example on codepen](https://codepen.io/ma-re/pen/mdMLrqp).\n",
        "\n",
        "---"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "_1x22F8iqJSR"
      },
      "source": [
        "<html>\n",
        "    <head>\n",
        "        <title></title>\n",
        "    </head>\n",
        "    <body>\n",
        "        <h1>A Beginner Guide to Aquaristics</h1>\n",
        "        <h2>My first aquarium</h2>\n",
        "        <p>Are you looking for a new hobby to invest your time and money in? Look no further!</p>\n",
        "    </body>\n",
        "</html>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "tOR2ShYILDMD"
      },
      "source": [
        "---\n",
        "## 2. Adding lists\n",
        "\n",
        "To make our website a little more exciting, we can add some lists. There are two types of lists that can be defined in HTML. We can create an unordered list by using the `<ul>...</ul>` tag or an ordered list specified by the `<ol>...</ol>` tag. Each item of a list has to be enclosed by the `<li>...</li>` tags. In the cell below you can see an example of an ordered list. You can have a look at the raw HTML code by either double clicking on the cell or opening the [example on codepen](https://codepen.io/ma-re/pen/NWvwzeM).\n",
        "\n",
        "To be honest, I would prefer an unordered list. Can you change it? \n",
        "\n",
        "---"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "EY3dI_tPalPY"
      },
      "source": [
        "<html>\n",
        "    <head>\n",
        "        <title></title>\n",
        "    </head>\n",
        "    <body>\n",
        "        <h1>A Beginner Guide to Aquaristics</h1>\n",
        "        <h2>My first aquarium</h2>\n",
        "        <p>Are you looking for a new hobby to invest your time and money in? Look no further! An aquarium will make your dreams come true.</p>\n",
        "        <ol>\n",
        "            <li>Perfect for those who have always wanted a pet but are afraid of vets.</li>\n",
        "            <li>Fish are loyal pets. You don't have to worry about training them or that they might run away.</li>\n",
        "            <li>Be sure that the exciting life of your new pets will be great conversation starters at any party.\n",
        "</li>\n",
        "        </ol>\n",
        "    </body>\n",
        "</html>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "2kJm_Lq5An9i"
      },
      "source": [
        "---\n",
        "## 3. Adding Pictures and Links\n",
        "\n",
        "Nice, so far we know how to create the structure of a very simple and frankly boring website. Let's spice it up with pictures and a link. \n",
        "\n",
        "`<a>...</a>` is called an anchor element and defines a hyperlink, which is used to link from one page to another or to different chapters of the same page. It uses the *href* attribute to specify the target of the link, either a URL or a section in the same document. \n",
        "\n",
        "For adding images we can use the `<img>` tag, which has the attributes *src* and *alt*. *src* takes the URL or path to the image you want to display and *alt* can store an alternate text that describes the image and gets printed when the image for some reason cannot be displayed. The `<img>` tag is also called an empty tag, since it does not have a closing tag.  \n",
        "\n",
        "You can have a look at the HTML code [in codepen here](https://codepen.io/ma-re/pen/JjyvbmB) or in the cell below to see how we added a link and the pictures to our website:\n",
        "\n",
        "---"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "8zDNTT_y4CyV"
      },
      "source": [
        "\n",
        "<html>\n",
        "    <head>\n",
        "        <title></title>\n",
        "    </head>\n",
        "    <body>\n",
        "        <h1>A Beginner Guide to Aquaristics</h1>\n",
        "        <h2>My first aquarium</h2>\n",
        "        <p>Are you looking for a new hobby to invest your time and money in? Look no further! An aquarium will make your dreams come true.</p>\n",
        "        <ol>\n",
        "            <li>Perfect for those who have always wanted a pet but are afraid of vets.</li>\n",
        "            <li>Fish are loyal pets. You don't have to worry about training them or that they might run away.</li>\n",
        "            <li>Be sure that the exciting life of your new pets will be great conversation starters at any party.\n",
        "</li>\n",
        "        </ol>\n",
        "        <p>If you need more reasons to convince you that aquaristics is an awesome hobby, click <a href=\"https://growers-planet.com/should-you-get-an-aquarium-pros-cons/\">here.</a></p> \n",
        "        <img src=\"https://cdn.pixabay.com/photo/2016/12/31/21/22/discus-fish-1943755__340.jpg\" alt=\"Fish in aquarium\">\n",
        "        <img src=\"https://cdn.pixabay.com/photo/2015/09/28/11/40/fish-961953_1280.jpp\" alt=\"Colorful fish in aquarium\">\n",
        "    </body>\n",
        "</html>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "-dk6_4WrU2zh"
      },
      "source": [
        "## 4. Class and ID\n",
        "\n",
        "Pictures make our website more interesting, but the size and arrangement does not really fit yet. Let's make both pictures the same size and add some more colours to the text of the web page. Therefore we will have a look at how classes and IDs can help us to style particular elements of our website.  \n",
        "\n",
        "Class and ID are both attributes that can be added to the opening tags of HTML elements.\n",
        "\n",
        "* An ID serves as a unique identifier for one particular element in your HTML document. You cannot add the same ID to more than one element. \n",
        "\n",
        "* The same class on the other hand can be used for several elements in your HTML document. It enables you to style or manipulate multiple elements in the same way. It is e.g. useful when you want to style some phrases of the text with the same font, colour, or size. \n",
        "\n",
        "IDs and classes can be defined within the `<style>... </style>` element in the `<head>` section.\n",
        "While class definition uses a period (.) followed by the class name, defining an ID starts with a hashtag (#) followed by the name of the ID. Every class/ID can have properties, that are determined in curly brackets ({}) after the name. Once you defined a class/ID between the `<style>` tags you can add them to the opening tags of the HTML element(s) you want to modify. \n",
        "\n",
        "\n",
        "In our case, we have added the class *images* to both `<img>` tags and we have defined a unique ID (*first_element*, *second_element*, *third_element*) for each list element.\n",
        "\n",
        "The HTML code now looks like this. Unfortunately, our styling changes are not applied in Markdown cells. To see how our changes affect the look of our web site, you need to open the [code in codepen](https://codepen.io/ma-re/pen/porVRWL).\n",
        "\n",
        "```html\n",
        "<html>\n",
        "    <head>\n",
        "    <style>\n",
        "        .images {\n",
        "            height: 300px;\n",
        "            float: left;\n",
        "        }\n",
        "        #first_element {\n",
        "            color: #ff5a36;            \n",
        "        }\n",
        "        #second_element {\n",
        "            color: #069e2d;\n",
        "        }\n",
        "        #third_element {\n",
        "            color: #33658a;\n",
        "        }\n",
        "    </style>\n",
        "    <head>\n",
        "    <body>\n",
        "        <h1>A Beginner Guide to Aquaristics</h1>\n",
        "        <h2>My first aquarium</h2>\n",
        "        <p>Are you looking for a new hobby to invest your time and money in? Look no further! An aquarium will make your dreams come true.</p>\n",
        "        <ul>\n",
        "            <li id=\"first_element\">Perfect for those who have always wanted a pet but are afraid of vets.</li>\n",
        "            <li id=\"second_element\">Fish are loyal pets. You don't have to worry about training them or that they might run away.</li>\n",
        "            <li id=\"third_element\">Be sure that the exciting life of your new pets will be great conversation starters at any party.</li>\n",
        "        </ul>\n",
        "        <p>If you need more reasons to convince you that aquaristics is an awesome hobby, click \n",
        "      <a href=\"https://growers-planet.com/should-you-get-an-aquarium-pros-cons/\">here.</a>\n",
        "        </p>\n",
        "        <img class=\"images\" src=\"https://cdn.pixabay.com/photo/2016/12/31/21/22/discus-fish-1943755__340.jpg\" alt=\"Fish in aquarium\">\n",
        "        <img class=\"images\" src=\"https://cdn.pixabay.com/photo/2015/09/28/11/40/fish-961953_1280.jpp\" alt=\"Colorful fish in aquarium\">\n",
        "    </body>\n",
        "</html>\n",
        "```"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "zd8Z5n4LFHmv"
      },
      "source": [
        "## 5. The `<div>` tag\n",
        "\n",
        "The last thing we will cover in this notebook is the `<div>` tag, since it is probably the most common element you can find on a web page. Those elements are usually called blocks or containers. They are used to group several elements together for example to apply the same properties.  \n",
        "The elements we have looked at so far (`<h1>`, `<h2>`, `<p>`...) can belong to the same block. This makes it easy for us to divide the web page into several parts and style each part independently. Let's add the `<div>...</div>` tags to our web page so that they surround our subheading, the paragraphs and list. Now we can easily choose different background colours for the whole page and our newly defined block. \n",
        "Again, the Markdown cells in the notebook will not show the changes, but you can have a look at the [code in codepen](https://codepen.io/ma-re/pen/RwZyjmo?editors=1000) and feel free to change the colours as you like. (If you need inspiration for choosing a colour, click [here](https://www.w3schools.com/cssref/css_colors.asp).) \n",
        "\n",
        "```html\n",
        "<html>\n",
        "    <head>\n",
        "    <style>\n",
        "        body {\n",
        "            background-color: Teal;\n",
        "        }\n",
        "        div {\n",
        "            background-color: DarkTurquoise;\n",
        "        }\n",
        "        .images {\n",
        "            height: 300px;\n",
        "            float: left;\n",
        "        }\n",
        "        #first_element {\n",
        "            color: #ff5a36;            \n",
        "        }\n",
        "        #second_element {\n",
        "            color: #069e2d;\n",
        "        }\n",
        "        #third_element {\n",
        "            color: #33658a;\n",
        "        }\n",
        "    </style>\n",
        "    <head>\n",
        "    <body>\n",
        "        <h1>A Beginner Guide to Aquaristics</h1>\n",
        "        <div>\n",
        "            <h2>My first aquarium</h2>\n",
        "            <p>Are you looking for a new hobby to invest your time and money in? Look no further! An aquarium will make your dreams come true.</p>\n",
        "            <ul>\n",
        "                <li id=\"first_element\">Perfect for those who have always wanted a pet but are afraid of vets.</li>\n",
        "                <li id=\"second_element\">Fish are loyal pets. You don't have to worry about training them or that they might run away.</li>\n",
        "                <li id=\"third_element\">Be sure that the exciting life of your new pets will be great conversation starters at any party.</li>\n",
        "            </ul>\n",
        "            <p>If you need more reasons to convince you that aquaristics is an awesome hobby, click \n",
        "      <a href=\"https://growers-planet.com/should-you-get-an-aquarium-pros-cons/\">here.</a>\n",
        "            </p>\n",
        "        </div>\n",
        "        <img class=\"images\" src=\"https://cdn.pixabay.com/photo/2016/12/31/21/22/discus-fish-1943755__340.jpg\" alt=\"Fish in aquarium\">\n",
        "        <img class=\"images\" src=\"https://cdn.pixabay.com/photo/2015/09/28/11/40/fish-961953_1280.jpp\" alt=\"Colorful fish in aquarium\">\n",
        "    </body>\n",
        "</html>\n",
        "```"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "bdMSauHcmu3y"
      },
      "source": [
        "## Let's move on...\n",
        "\n",
        "So far so good. There are still many tags and attributes that we haven't talked about yet. But this short introduction should be sufficient for the actual goal of this Meetup. Let's now turn to more exciting topics: Scraping the Web with Beautiful Soup!\n"
      ]
    }
  ],
  "metadata": {
    "colab": {
      "collapsed_sections": [],
      "name": "01_HTML_Basics.ipynb",
      "provenance": []
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    },
    "language_info": {
      "name": "python"
    },
    "orig_nbformat": 4
  },
  "nbformat": 4,
  "nbformat_minor": 0
}