HTML_DOM_Basics_ipynb.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "HTML DOM Basics. ipynb",
      "private_outputs": true,
      "provenance": [],
      "collapsed_sections": [],
      "toc_visible": true,
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/scholargj/SRET-INT200-JUNE2021/blob/master/HTML_DOM_Basics_ipynb.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "On1oQTQdZmOI"
      },
      "source": [
        "import IPython\n",
        "\n",
        "js_code = \\\n",
        "'''\n",
        "let message = \"Hello world!\";\n",
        "document.querySelector(\"#output-area\").appendChild(document.createTextNode(message));\n",
        "'''\n",
        "\n",
        "display(IPython.display.Javascript(js_code))"
      ],
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "w5g_mlbq938a"
      },
      "source": [
        "# **HTML Document Object Model(DOM)**\n",
        "\n",
        "Authored by\n",
        "\n",
        "**Dr.G.Jayanthi,**\n",
        "\n",
        "Faculty of Engineering and Technology, \n",
        "\n",
        "SRIHER."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "JRiKcmG6nOkr"
      },
      "source": [
        "#HTML DOM : 1. Document Summary\n",
        "\n",
        "**How to break the code up in different components.**\n",
        "\n",
        "`<html>....</html>`\n",
        "\n",
        "\n",
        "This tag specifies that the web page is written in HTML. It appears at the very first and last line of the web page. It is mainly used to show that the page uses HTML5 - The latest version of the language. \n",
        "\n",
        "This is the root element, this tag can be thought of as a parent tag for every other tag used in the page.\n",
        "\n",
        "`<head>.....</head>`\n",
        "\n",
        "\n",
        "This tag is used to specify the meta data about the webpage. It includes the webpage's name, its dependence (Js and CSS scripts), font usage etc.,\n",
        "\n",
        "\n",
        "`<title>....</title>`\n",
        "\n",
        "\n",
        "This tag contains the title/name of the webpage. You can see this in your brwoser's title bar of every webpage open in the browser. Search engines use this tag to extract the topic of the web page, which is quite convenient when ranking relevant search result."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "EfF5HSIIoNS8"
      },
      "source": [
        "**Example-1: Sructure of HTML Document** "
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "sj1n9qvAoTef"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<html>\n",
        "\n",
        "<head>\n",
        "\t<title> Welcome to this Page </title>\n",
        "</head>\n",
        "<body>\n",
        "This is My First Page\n",
        "</body>\n",
        "\n",
        "</html>\n",
        "'''\n",
        "\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "W-3v8IhcTMjH"
      },
      "source": [
        "#Examples on Headings, and Paragraphs."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "EK-lyIDHFUob"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<html>\n",
        "<title> This is about Me </title>\n",
        "<body>\n",
        "Name:................. Your name. Tell few lines about you.\n",
        "<p>Engineering is design of a product using economic raw materials and produce cost effective goods and commodities while, technology is advancements in the field of engineering that is being applied in the design of product</p>\n",
        "<h1>Sri Ramachandra Institute of Higher Education and Research</h1>\n",
        "<h2>Sri Ramachandra Engineering and Technology </h2>\n",
        "<h3>Faculty of Engineering and Technology</h3>\n",
        "<h4>Porur</h4>\n",
        "<h5>Chennai</h5>\n",
        "<h6>Tamil Nadu, India</h6>\n",
        "</body>\n",
        "</html>\n",
        "'''\n",
        "\n",
        "display(IPython.display.HTML(html_code))\n"
      ],
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "CjEM7Ycpn75n"
      },
      "source": [
        "#HTML DOM : 2. Document Information\n",
        "\n",
        "`<base/>`\n",
        "\n",
        "Used to specify the base URL of your site, this tag makes linking to internal links on your site cleaner.\n",
        "\n",
        "\n",
        "`<meta/>`\n",
        "\n",
        "This is the meta data tag for the webpage. Can be useful for mentioning the page's author keywords and other off page information, original published date etc.\n",
        "\n",
        "`<link/>`\n",
        "\n",
        "This is used to link to scripts external to the web page. Typically utilised for including sylesheets.\n",
        "\n",
        "\n",
        "`<style> ....<style>`\n",
        "\n",
        "The style tag can be used as an alternative to an external style sheet, or complement it. Includes the web page's appearence information.\n",
        "\n",
        "`<script>....</script>`\n",
        "\n",
        "Used to ass code snippets, typically in JS to make webpage dynamic. It can also be used to just link to an external script.\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "8vj_gvxFTf5H"
      },
      "source": [
        "#Example: Dynamic pages"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "zPkQf-XBoLKs"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<html>\n",
        "\t<head>\n",
        "\t<head>\n",
        "\n",
        "<link rel=\"stylesheet\" href=\"Style.css\">\n",
        "</head>\n",
        "\t\t<title>Caclulator page</title>\n",
        "\t\t<script type=\"text/javascript\">\n",
        "\t\t\tfunction TwoNumbers(textBox1, textBox2, operator)\n",
        "\t\t\t{\n",
        "\t\t\t\tvar x=document.getElementById(textBox1).value;\n",
        "\t\t\t\tvar y=document.getElementById(textBox2).value;\n",
        "\t\t\t\tvar op=document.getElementById(operator).value;\n",
        "\t\t\t\t\t\t\t\n",
        "\t\t\t\tlet result;\n",
        "\n",
        "\t\t\t\t\n",
        "switch(op) \n",
        "{\n",
        "    case '+':\n",
        "         result = Number(x) + Number(y);\n",
        "         document.createElement(result);\n",
        "\t\t document.body.appendChild(result);\n",
        "\t\t\n",
        "        break;\n",
        "\n",
        "    case '-':\n",
        "         result = Number(x) - Number(y);\n",
        "        alert(\"Differecne is: \" + result);\n",
        "        break;\n",
        "\n",
        "    case '*':\n",
        "         result = Number(x) * Number(y);\n",
        "        alert(\"Multiply: \" + result);\n",
        "        break;\n",
        "\n",
        "    case '/':\n",
        "         result = Number(x) / Number(y);\n",
        "        alert(\"Division: \" + result);\n",
        "        break;\n",
        "\n",
        "    default:\n",
        "        alert('Invalid operator');\n",
        "        break;\n",
        "}\t\n",
        "\t\n",
        "\t}\n",
        "\t\t</script>\n",
        "\t</head>\n",
        "<body>\n",
        "\t<h1>Welcome to Basic Calculator Page</h1>\n",
        "\t<b>Enter first Number: </b><br>\n",
        "\t<input type=\"text\" id=\"textIn1\"/><br>\n",
        "\t<b>Enter second Number: </b><br>\n",
        "\t<input type=\"text\" id=\"textIn2\"/><br><br>\n",
        "\t<b>Enter Operator: </b><br>\n",
        "\t<input type=\"text\" id=\"operator\"/><br><br>\n",
        "\t\n",
        "\t\n",
        "\t<input type=\"button\" id=\"btnCalc\" value=\"Calculate\" onClick=\"TwoNumbers('textIn1','textIn2','operator')\"/>\n",
        "\t\n",
        "</body>\n",
        "\n",
        "</html>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "zhLgnABuhNc2"
      },
      "source": [
        "#HTML DOM : 3. Document Structure\n",
        "\n",
        "`<h1.......h6> ... </h1...h6>`\n",
        "\n",
        "\n",
        "six different variations of writing a heading. \n",
        "\n",
        "<h1> has the largets font size, while <h6> has the smallest.\n",
        "\n",
        "\n",
        "`<div>....</div>`\n",
        "A webpage's content is usally divided into blocks, specified by the div tag.\n",
        "\n",
        "\n",
        "`<span>.....</span>`\n",
        "\n",
        "This tag injects inline elements, like an image, icon, emoticon without running the formatting /styling of the page.\n",
        "\n",
        "`<p>....</p>`\n",
        "\n",
        "Plain text is placed inside this tag.\n",
        "\n",
        "\n",
        "`<br/>`\n",
        "\n",
        "A line break for webpages. Is used when wanting to write a new line.\n",
        "\n",
        "`<hr/>`\n",
        "\n",
        "similar to the above tag. But in addition to switching to the next line, this tag draws a horizontal bar to indicate the end of the section."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "7j3wgTp56SCO"
      },
      "source": [
        "#Text Formatting\n",
        "\n",
        "`<strong>.....</strong> `\n",
        "\n",
        "Makes text bold. Used to emphasis a point.\n",
        "\n",
        "`<b>....</b>` \n",
        "\n",
        "Alternative to the above tag, alos creates bold text.\n",
        "\n",
        "`<em>...</em>`\n",
        "\n",
        "Another emphasis tag, but displays in talics\n",
        "\n",
        "`<i>....</i>`\n",
        "Also used to display text in italics, but does not emphasize it like the above tag.\n",
        "\n",
        "`<tt>...</tt>`\n",
        "\n",
        "Formatting for typewriter -like text. Not supported in HTML5.\n",
        "\n",
        "`<strike>....</strike>`\n",
        "\n",
        "Another old tag, this is used to draw a line at the center of the text, so as to make it appear unimportant or no longer useful.\n",
        "\n",
        "`<cite>....</cite>`\n",
        "\n",
        "Tag for citing author of a quote.\n",
        "\n",
        "`<del>....</del>`\n",
        "\n",
        "Pre-formatted, monospace text laid out with whitespace inside the element intact.\n",
        "\n",
        "`<ins>....</ins>`\n",
        "Denotes text that has been inserted into the webpage.\n",
        "\n",
        "`<blockquote>....</blockquote>`\n",
        "\n",
        "<blockquote>\n",
        "Anyone who has never made a mistake has never tried anything new.<cite>-Albert Einstein</cite>\n",
        "</blockquote>\n",
        "\n",
        "`<q>...<q>`\n",
        "similar to above tag, but for shorter quotes.\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "-U_6R8vtnG6a"
      },
      "source": [
        "`<abbr>...</abbr>` \n",
        "\n",
        "Denotes abbreviations, along with the full forms.\n",
        "\n",
        "\n",
        "`<acronym>...</acronym>`\n",
        "\n",
        "Tag for acronyms. Not supported in HTML 5\n",
        "\n",
        "`<address>..<address>`\n",
        "\n",
        "`<dfn>...</dfn> `\n",
        "\n",
        "tag dedicated for definitions.\n",
        "\n",
        "`<p><dfn>HTML</dfn>` \n",
        "\n",
        "is the standard markup language for creating web pages.</p>\n",
        "\n",
        "`<code>....<code>`\n",
        "This is used to display code snippets within a paragraph.\n",
        "\n",
        "`<sub>...<sub>`\n",
        "\n",
        "Used for writing a subscript (smaller fonts just below the mod-point of normal font). Example: ax\n",
        "\n",
        "`<sup>....<sup>`\n",
        "similar to the above tag, but for superscripiting.\n",
        "\n",
        "`<small>...<small>`\n",
        "\n",
        "Reduces text size. In HTML 5 it often refers to redundant or invalid information."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "JIyYE3EXSePx"
      },
      "source": [
        "#Examples on Text formatting"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "yBiqmKyX6N0E"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<!---Text Formatting -->\n",
        "<html>\n",
        "<body>\n",
        "<!--Plain text-->\n",
        "<p>\n",
        "<!--strong make bold text-->\n",
        "<strong>Bold text</strong>\n",
        "<!--b is alternate to strong tag-->\n",
        "<b> I am an Engineer</b> Regular Text \n",
        "<!--em is to emphazie the text with italics-->\n",
        "<em>Some words in italics</em>\n",
        " \n",
        "<!-- i is to make test italics-->\n",
        "<i> This is my italics -- Hello</i>\n",
        "regular text once again.</p>\n",
        " \n",
        "<!--abbr tag abbreviation-->\n",
        "The <abbr title=\"World Health Organization\">WHO</abbr> was founded in 1948.\n",
        " \n",
        "<address> Mail us at  \n",
        "<a href=\"mailto:jayanthig@sret.edu.in\">Faculty of Engineering and Technology</a>.<br>\n",
        "Visit us at:<br>\n",
        "www.sret.edu.in<br>\n",
        "Sri Ramachandra Engineering and Technology<br>\n",
        "Porur, Chennai - 600 116.\n",
        "</address>\n",
        " \n",
        "<blockquote>\n",
        "Anyone who has never made a mistake has never tried anything new.<cite>-Albert Einstein</cite>\n",
        "</blockquote>\n",
        " \n",
        "<pre>Some pre-formatted text</pre>\n",
        " \n",
        "<p>A code snippet:<code>#include\"stdio.h\"</code></p>\n",
        " \n",
        "<!--sub tag is subscripts-->\n",
        "<p>This is i<sub>th</sub> elements in an array</p>\n",
        "<p> Today 27<sup>th</sup>April 20201</p>\n",
        " \n",
        "<!--sup is superscript-->\n",
        " \n",
        "<small> This is my alternate mail id</small>\n",
        " \n",
        "</body>\n",
        "</html>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "i_Zo1APwaOaM"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<p>Now this is <i>really</i> awesome!</p>\n",
        "<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Python.svg/768px-Python.svg.png'></img>\n",
        "'''\n",
        " \n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "aCS0UgdYSok3"
      },
      "source": [
        "#Examples on Tables"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "a-6NcP-5afLn"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<table style=\"width:100%\">\n",
        "  <tr>\n",
        "    <th>Firstname</th>\n",
        "    <th>Lastname</th>\n",
        "    <th>Age</th>\n",
        "  </tr>\n",
        "  <tr>\n",
        "    <td>Jill</td>\n",
        "    <td>Smith</td>\n",
        "    <td>50</td>\n",
        "  </tr>\n",
        "  <tr>\n",
        "    <td>Eve</td>\n",
        "    <td>Jackson</td>\n",
        "    <td>94</td>\n",
        "  </tr>\n",
        "</table>\n",
        "'''\n",
        " \n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "MAzBUn-CSyw0"
      },
      "source": [
        "#Examples on List"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "9rdzP-NYaxV8"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<dl>\n",
        "  <dt>Coffee</dt>\n",
        "  <dd>- black hot drink</dd>\n",
        "  <dt>Milk</dt>\n",
        "  <dd>- white cold drink</dd>\n",
        "</dl>\n",
        "'''\n",
        "\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "lmHG4oA5KNh_"
      },
      "source": [
        "html_code = \\\n",
        "'''\n",
        "<html>\n",
        "<head>\n",
        "<style>\n",
        "body {\n",
        "  background-color: lightblue;\n",
        "}\n",
        "\n",
        "h1 {\n",
        "  color: yellow;\n",
        "  text-align: Left;\n",
        "}\n",
        "\n",
        "p {\n",
        "  font-family: Arial;\n",
        "  font-size: 20px;\n",
        "}\n",
        "</style>\n",
        "</head>\n",
        "<body>\n",
        "\n",
        "<h1>Welcome to my course CSE150 Web Design - Front End Development </h1>\n",
        "<p>This is my first Cascading Style Sheet with background color in blue, Heading is h1 of yellow color, Text alligned to left, The font family is Arial with size 25px</p>\n",
        "\n",
        "</body>\n",
        "</html>\n",
        "'''\n",
        "display(IPython.display.HTML(html_code))"
      ],
      "execution_count": null,
      "outputs": []
    }
  ]
}