HTML Introduction

Unit 17, Lecture 2

Numerical Methods and Statistics


Prof. Andrew White, April 21, 2016

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.

In [7]:
%%HTML

<h3> A level-3 (smaller) heading</h3>

<p> This is a paragraph about HTML. HTML surprisingly only has about 5 elements you need to know: </p>
    <ul>
        <li> Paragraphs</li>
        <li> breaks </li>
        <li> lists </li>
        <li> links </li>
        <li> images </li>
        <li> divs </li>
        <li> spans</li>
    </ul>

A level-3 (smaller) heading

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

  • Paragraphs
  • breaks
  • lists
  • links
  • images
  • divs
  • spans
In [6]:
%%HTML

<a href="http://beyond.io"> This link will take you on a journey to the beyond!</a>
In [10]:
%%HTML

<a href="http://unsplash.com">
<img width=400px src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=f35997a68b394f08caf7d46cf2d27791"/>
<p> Here I've made this entire section a link.</p>
</a>

Content Arrangement

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.

Inspecting Tools

The best way to learn HTML is to look at different webpages. Try right-cliking and inspecting something!

Connecting CSS with HTML

In [1]:
%%HTML

<h1> This is a header</h1>

<style>

h1 {
    color:red;
}

</style>

This is a header

Wow

Notice it made all headers red

In order to finely tune the connection between CSS, JS and HTML, there is something called selectors.

In [2]:
%%HTML

<h1 class="attention-getter"> This is an important header</h1>

<style>

.attention-getter {
    color:blue;
}

</style>

This is an important header

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.

Testing out you're own stuff

So with spans and divs, we're able to attach classes to HTML elements. If you want to learn more, I would recommend jsfiddle which is a wonderful place for testing out. If you want to have a structured lesson, check out w3schools and codeacademy

Javascript

JS is the programming language of the web. It allows you to manipulate elements.

In [19]:
%%HTML

<h3 class="grab-me"> This header will change soon</h3>

This header will change soon

In [18]:
%%javascript

var grabme = document.querySelector('.grab-me');
grabme.textContent = 'Hoopla';
In [21]:
%%HTML

<ul class="fill-me"> </ul>
In [26]:
%%javascript

var fruits = ['strawberry', 'mango', 'bannana'];

fruits.forEach(function(i) {
    document.querySelector('.fill-me').innerHTML += '<li>' + i  + '</li>';
});

There's a lot of stuff going on in there! Here are some differences with Python:

  1. You need semicolins at the end of lines
  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.
  3. We also used the innerHTML instead of textContent this time around

Using HTML, CSS, and JS in your notebook

Example 1 — Changing font

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

This cell below grabs the fonts from google's font collection

In [34]:
%%HTML

<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Oswald:400,700' rel='stylesheet' type='text/css'>
In [40]:
%%HTML

<style>

.rendered_html {
    font-family: 'Roboto Condensed';
    font-size: 125%;
}

</style>

I can also change headings to be something different

In [36]:
%%HTML

<style>

.rendered_html > h1,h2,h3,h4,h5,h6 {
    font-family: 'Oswald';
}
</style>

Example 2 — Changing the background

Using the inspector, I've found that the dull gray background is from the .notebook_app.

In [47]:
%%HTML

<style>

.notebook_app {
    background-image: url('https://images.unsplash.com/photo-1453106037972-08fbfe790762?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=cbaaa89f2c5394ff276ac2ccbfffd4a4');
    background-repeat: no;
    background-size: cover;
}

</style>

Example 3 — Creating a nice results report

If you just web-search for HTML table, you'll see the syntax. Basically you have this:

<table>
    <tr> each row </tr>
</table>

with more than one column:

<table>
    <tr> 
        <td> row 1 column 1</td> 
        <td> column 2</td> 
    </tr>
</table>
In [74]:
import IPython.display as display

def make_pretty_table(x, y):
    html = '''
    <table>
        <tr> <th> x</th> <th> y </th> </tr>
    '''
    for xi,yi in zip(x,y):
        html += '<tr> <td> {} </td> <td> {} </td> </tr> \n'.format(xi,yi)
    html += '</table>'
    d = display.HTML(html)
    display.display(d)
In [75]:
x = range(10)
y = range(10,20)

make_pretty_table(x,y)
x y
0 10
1 11
2 12
3 13
4 14
5 15
6 16
7 17
8 18
9 19
In [98]:
def make_really_pretty_table(x, y):
    html = '''
    <table class='pretty-table'>
        <tr> <th> x</th> <th> y </th> </tr>
    '''
    for xi,yi in zip(x,y):
        html += '<tr> <td> {} </td> <td> {} </td> </tr> \n'.format(xi,yi)
    html += '</table>'
    
    html += '''
    <style>
        .pretty-table > tbody > tr:nth-child(odd) {
           background-color: #ccc;
    }
        
        .pretty-table > tbody > tr > td, th {
            text-align: center !important;
        }
    </style>
    
    '''
    
    d = display.HTML(html)
    display.display(d)
    
In [99]:
x = range(10)
y = range(10,20)

make_really_pretty_table(x,y)
x y
0 10
1 11
2 12
3 13
4 14
5 15
6 16
7 17
8 18
9 19

Further Reading

JS with Python