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.
%%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>
This is a paragraph about HTML. HTML surprisingly only has about 5 elements you need to know:
%%HTML
<a href="http://beyond.io"> This link will take you on a journey to the beyond!</a>
%%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>
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.
The best way to learn HTML is to look at different webpages. Try right-cliking and inspecting something!
%%HTML
<h1> This is a header</h1>
<style>
h1 {
color:red;
}
</style>
Notice it made all headers red
In order to finely tune the connection between CSS, JS and HTML, there is something called selectors.
%%HTML
<h1 class="attention-getter"> This is an important header</h1>
<style>
.attention-getter {
color:blue;
}
</style>
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.
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
JS is the programming language of the web. It allows you to manipulate elements.
%%HTML
<h3 class="grab-me"> This header will change soon</h3>
%%javascript
var grabme = document.querySelector('.grab-me');
grabme.textContent = 'Hoopla';
%%HTML
<ul class="fill-me"> </ul>
%%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:
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
%%HTML
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Oswald:400,700' rel='stylesheet' type='text/css'>
%%HTML
<style>
.rendered_html {
font-family: 'Roboto Condensed';
font-size: 125%;
}
</style>
I can also change headings to be something different
%%HTML
<style>
.rendered_html > h1,h2,h3,h4,h5,h6 {
font-family: 'Oswald';
}
</style>
Using the inspector, I've found that the dull gray background is from the .notebook_app
.
%%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>
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>
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)
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 |
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)
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 |