Tables are amazing, in fact, tables are one of the things that makes the modern world work. In your school for example, there is a table with the name of each student and their score. Or in your TV there is a table with each program number and the program there (e.g. 24 is 24 Kitchen). On your iPhone there are many programs that use many tables internally to make decisions. There is of course the ASCII table, which can tell you how to get from a character to its raw representation and the other way around. The periodic table is also a famous example. The table on the bus stop tells you which bus will come at what time.
We use tables everywhere.
Here are few examples:
| power | pokemons |
|---|---|
| electiricy | Pikachu |
| fire | Charmander |
| grass | Bulbasaur |
| poison | Bulbasaur |
Or something you have probably seen, a multiplication table:
| a | x | b | = |
|---|---|---|---|
| 5 | * | 5 | 25 |
| 5 | * | 6 | 30 |
| 5 | * | 7 | 35 |
Make new file (or open the some old html page) and type this:
<html>
<body>
<table border="10">
<tr><th>Name</th><th>Year</th></tr>
<tr>
<td>
Donald Duck
</td>
<td>
1937
</td>
</tr>
<tr>
<td>
Daisy Duck
</td>
<td>
1940
</td>
</tr>
<tr>
<td>
Scrooge McDuck
</td>
<td>
1947
</td>
</tr>
<tr>
<td>
Ludwig Von Drake
</td>
<td>
1961
</td>
</tr>
</table>
</body>
</html>
Only 3 new tags we have to learn table, tr, td, th are the main things we will work with, tr means table row and td is table data cell, or a column, th is table header. All the html key words you have learned so far are called tags or elements.
Make <table border="100"> and see what happens.
<html>
<body>
<table border="10">
<tr><th>Name</th><th>Year</th></tr>
<tr>
<td>
<marquee>
hello world
</marquee>
</td>
<td>
<marquee>
hello universe
</marquee>
</td>
</tr>
<tr>
<td>
<b>this does not move</b>
</td>
<td>
<marquee>
<i>this is italic</i>
</marquee>
</td>
</tr>
</table>
</body>
</html>
Now make list in a table
<table border=100>
<tr>
<td>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</td>
<td>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</td>
</tr>
</table>
Super small difference between ul and ol, one means 'unordered list' and the other one 'ordered list', so if you use ol every li will have its own number
Start writing the whole multiplication table (will take more than 1 day)
Finish writing the whole multiplication table.
Spend the day touch typing.
The most powerful feature of HTML is to be able to link to another place in the internet, try this:
<html>
<body>
hi, <a href="https://wikipedia.com">click here</a> to go to wikipedia
</body>
</html>
The a tag with its href attribute is one of the most important things of the modern internet, it means I can have a web page, and I can link to someone else's web page, and they can link to someone else and so on..
Whatever is in the href attribute this is where the browser will go after you click on whatever is inside the <a></a>, in our case click here. So after you click on click here your browser will go to wikipedia.com, and from there when you click somewhere it will go to wherever that a's href points to.
Rainbow:
<html>
<body>
<h1>🌈</h1>
<h1 style="color: red;">red</h1>
<h1 style="color: orange">orange</h1>
<h1 style="color: yellow">yellow</h1>
<h1 style="color: green">green</h1>
<h1 style="color: blue">blue</h1>
<h1 style="color: indigo">indigo</h1>
<h1 style="color: violet">violet</h1>
</body>
</html>
You dont always need html and body, the most browsers will show a page anyway, but it is good practice to do it proper and use html and body tags. Anyway, the next example is not "up to code".
IT will make a sheep that follows your mouse, its pretty cool.
<div id='sheep' style='position:absolute'>🐑</div>
<script>
var sheep = document.getElementById('sheep')
document.body.onmousemove = (e) => {
sheep.style.left = (e.clientX - 5 + 'px');
sheep.style.top = (e.clientY - 5 + 'px');
}
</script>
And a ghost button! it will remove itself when you press it.
<button onclick="this.parentNode.removeChild(this)">👻</button>
The way it works is onclick=... will call the code when you click on the button, in this case it says, "whoever my parent is, tell it to remove myself form its children list".
You see, HTML is like a tree, let me show you.
lets say our page is:
<html>
<body>
<table border="10">
<tr><th>Name</th><th>Year</th></tr>
<tr>
<td>
<mark>
hello
</mark>
</td>
<td>
<h1>
world
</h1>
</td>
</tr>
<tr>
<td>
<b>move</b>
</td>
<td>
<marquee>
<i>italic</i>
</marquee>
</td>
</tr>
</table>
</body>
</html>
It actually is a tree, every tag has children, and siblings
<html>
|
<body>
|
<table>
/ | \
/ | \
/ | \
/ | \
/ | \
/ | \
<tr> <tr> <tr> <--- siblings, same parent
/\ / \ / \
/ \ / \ / \
<th> <th> <td> <td> <td> <td> <--- the two td with same parent
| | | | | | are siblings
Name Year <mark> <h1> <b> <marquee>
| | | |
hello world move <i>
|
italic
Well trees in the world are actually the other way around haha. Leave it to programmers to not know how to make a tree :)
italic
|
hello world move <i>
| | | |
Name Year <mark> <h1> <b> <marquee>
| | | | | |
<th> <th> <td> <td> <td> <td>
\ / \ / \ /
\/ \ / \ /
<tr> <tr> <tr>
\ | /
\ | /
\ | /
\ | /
\ | /
\ | /
<table>
|
<body>
|
<html>
But you can see how all things that have the same parent are related, like brothers and sisters.
This is very important, we will spend the next week thinking about it as well.