{ "cells": [ { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "HTML Introduction\n", "====\n", "\n", "## Unit 17, Lecture 2\n", "\n", "*Numerical Methods and Statistics*\n", "\n", "----\n", "\n", "#### Prof. Andrew White, April 21, 2016" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "Websites are made using three core technologies: HTML, CSS, and Javascript. From HTML, there also evolved SVGs which is the same format but describes 2D graphics. Similarly, WebGL is a 3D graphics technology." ] }, { "cell_type": "code", "execution_count": 7, "metadata": { "slideshow": { "slide_type": "slide" } }, "outputs": [ { "data": { "text/html": [ "\n", "

A level-3 (smaller) heading

\n", "\n", "

This is a paragraph about HTML. HTML surprisingly only has about 5 elements you need to know:

\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "

A level-3 (smaller) heading

\n", "\n", "

This is a paragraph about HTML. HTML surprisingly only has about 5 elements you need to know:

\n", " " ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "Links\n", "----" ] }, { "cell_type": "code", "execution_count": 6, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [ { "data": { "text/html": [ "\n", " This link will take you on a journey to the beyond!" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", " This link will take you on a journey to the beyond!" ] }, { "cell_type": "code", "execution_count": 10, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "text/html": [ "\n", "\n", "\n", "

Here I've made this entire section a link.

\n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "\n", "\n", "

Here I've made this entire section a link.

\n", "" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "Content Arrangement\n", "---\n", "\n", "Spans, divs and breaks are ways to arrange content. They do not do much alone. Instead you use javascript and CSS to manipulate them. For example, divs are how jupyter notebooks separate input cells, from the notebook, from the top, etc." ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "Inspecting Tools\n", "===\n", "\n", "The best way to learn HTML is to look at different webpages. Try right-cliking and inspecting something!" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "Connecting CSS with HTML\n", "===" ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [ { "data": { "text/html": [ "\n", "

This is a header

\n", "\n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "

This is a header

\n", "\n", "" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "Wow\n", "====\n", "\n", "Notice it made all headers red" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "In order to finely tune the connection between CSS, JS and HTML, there is something called selectors. " ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [ { "data": { "text/html": [ "\n", "

This is an important header

\n", "\n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "

This is an important header

\n", "\n", "" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "There is an established philosophy that HTML = content, CSS = style. Therefore, it's incorrect to create a class called \"blue-class\" because now you've spilled over some style into your HTML." ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ " Testing out you're own stuff\n", "==\n", "\n", "So with spans and divs, we're able to attach classes to HTML elements. If you want to learn more, I would recommend [jsfiddle](https://jsfiddle.net/) which is a wonderful place for testing out. If you want to have a structured lesson, check out [w3schools](w3schools.com) and [codeacademy](http://codeacademy.com)" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "Javascript\n", "====\n", "\n", "JS is the programming language of the web. It allows you to manipulate elements." ] }, { "cell_type": "code", "execution_count": 19, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "text/html": [ "\n", "

This header will change soon

" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "

This header will change soon

" ] }, { "cell_type": "code", "execution_count": 18, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "application/javascript": [ "\n", "var grabme = document.querySelector('.grab-me');\n", "grabme.textContent = 'Hoopla';" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "\n", "var grabme = document.querySelector('.grab-me');\n", "grabme.textContent = 'Hoopla';" ] }, { "cell_type": "code", "execution_count": 21, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "text/html": [ "\n", "
" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "
" ] }, { "cell_type": "code", "execution_count": 26, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "application/javascript": [ "\n", "var fruits = ['strawberry', 'mango', 'bannana'];\n", "\n", "fruits.forEach(function(i) {\n", " document.querySelector('.fill-me').innerHTML += '
  • ' + i + '
    • ';\n", "});" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "\n", "var fruits = ['strawberry', 'mango', 'bannana'];\n", "\n", "fruits.forEach(function(i) {\n", " document.querySelector('.fill-me').innerHTML += '
  • ' + i + '
    • ';\n", "});" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "There's a lot of stuff going on in there! Here are some differences with Python:\n", "\n", "\n", "1. You need semicolins at the end of lines\n", "2. The for loops syntax is different. Rather than have code below, we call a forEach function and give it a function we define right there.\n", "3. We also used the innerHTML instead of textContent this time around" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "Using HTML, CSS, and JS in your notebook\n", "===" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "Example 1 — Changing font\n", "----\n", "\n", "Using the inspector, I've discovered that all the paragraphs in rendered cells can be selected by `.rendered_html`. I'll now change their fonts" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "This cell below grabs the fonts from google's font collection" ] }, { "cell_type": "code", "execution_count": 34, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "text/html": [ "\n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "" ] }, { "cell_type": "code", "execution_count": 40, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "text/html": [ "\n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "subslide" } }, "source": [ "I can also change headings to be something different" ] }, { "cell_type": "code", "execution_count": 36, "metadata": { "slideshow": { "slide_type": "fragment" } }, "outputs": [ { "data": { "text/html": [ "\n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "Example 2 — Changing the background\n", "---\n", "\n", "Using the inspector, I've found that the dull gray background is from the `.notebook_app`. " ] }, { "cell_type": "code", "execution_count": 47, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "text/html": [ "\n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "" ] }, { "cell_type": "markdown", "metadata": { "slideshow": { "slide_type": "slide" } }, "source": [ "Example 3 — Creating a nice results report\n", "---\n", "\n", "If you just web-search for HTML table, you'll see the syntax. Basically you have this:\n", "\n", "```\n", "\n", " each row \n", "
    \n", "```\n", "\n", "with more than one column:\n", "```\n", "\n", " \n", " \n", " \n", " \n", "
    row 1 column 1 column 2
    \n", "```" ] }, { "cell_type": "code", "execution_count": 74, "metadata": { "collapsed": true, "slideshow": { "slide_type": "subslide" } }, "outputs": [], "source": [ "import IPython.display as display\n", "\n", "def make_pretty_table(x, y):\n", " html = '''\n", " \n", " \n", " '''\n", " for xi,yi in zip(x,y):\n", " html += ' \\n'.format(xi,yi)\n", " html += '
    x y
    {} {}
    '\n", " d = display.HTML(html)\n", " display.display(d)" ] }, { "cell_type": "code", "execution_count": 75, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "text/html": [ "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
    x y
    0 10
    1 11
    2 12
    3 13
    4 14
    5 15
    6 16
    7 17
    8 18
    9 19
    " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "x = range(10)\n", "y = range(10,20)\n", "\n", "make_pretty_table(x,y)" ] }, { "cell_type": "code", "execution_count": 98, "metadata": { "collapsed": true, "slideshow": { "slide_type": "subslide" } }, "outputs": [], "source": [ "def make_really_pretty_table(x, y):\n", " html = '''\n", " \n", " \n", " '''\n", " for xi,yi in zip(x,y):\n", " html += ' \\n'.format(xi,yi)\n", " html += '
    x y
    {} {}
    '\n", " \n", " html += '''\n", " \n", " \n", " '''\n", " \n", " d = display.HTML(html)\n", " display.display(d)\n", " " ] }, { "cell_type": "code", "execution_count": 99, "metadata": { "slideshow": { "slide_type": "subslide" } }, "outputs": [ { "data": { "text/html": [ "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
    x y
    0 10
    1 11
    2 12
    3 13
    4 14
    5 15
    6 16
    7 17
    8 18
    9 19
    \n", " \n", " \n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "x = range(10)\n", "y = range(10,20)\n", "\n", "make_really_pretty_table(x,y)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Further Reading\n", "---\n", "\n", "[JS with Python](https://jakevdp.github.io/blog/2013/06/01/ipython-notebook-javascript-python-communication/)" ] } ], "metadata": { "celltoolbar": "Slideshow", "kernelspec": { "display_name": "Python 3", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.5.2" } }, "nbformat": 4, "nbformat_minor": 1 }