Browsers on laptops or pcs will allow you to rightclick on any page and then click on View page source, this will show you the HTML of the page your are looking at.
Open https://archive.org then right click on the pager and then click on View page source.
We will spend the rest of the day looking at some page sources
- https://archive.org
- https://www.spacejam.com
- https://www.asciiart.eu/
- https://www.wikipedia.org
- https://www.gutenberg.org/
- https://digitalcomicmuseum.com/
- https://www.terrypratchettbooks.com/
- https://www.goodreads.com/
Make new html file and write the following example:
Right click on this page, click Inspect and then go to Console.
<script>
console.log('🐺🐺🐺🐺 You can see that in the console. 🐺🐺🐺🐺')
console.log('🐺🐺🐺🐺 type 12312*18237978123 in the console and see what happens. 🐺🐺🐺🐺')
</script>
Open the file and then click F12, or right click on the page and click Inspect. You will see the logs.
This will open the developer tools of your browser, you will be able to see the console, where you can run small programs or see the errors and the logs of the current page. Try writing 12312*18237978123 in the console and see the result.
In the inspector you can also modify the HTML that you see. This wont modify the actual page on the server you are downloading from, but you can try things to see how they would look. There are actually many scammers that use this method to lie to people as if they are giving them money, or they say 'I will teach you how to add 10000 robux to your account if you pay me 5$' and they just show you how to inspect and edit the html you see. This does not actually give you robux of course, it just modifies your local version of the html to show different value and after you reload the page you will see the old value.
Lets try it. Make a new file with this content:
<html>
<body>
Your Robux Balance is: <b>0$</b>
</body>
</html>
Open the file and then right click on 0$ and click inspect. Then you will see <b>0$</b> if you double click on it, you will be able to change it, and you will see the new version. Now reload the page, and you will see the old value is back.
To show an image you need the img tag, and give it src attribute with the address of the image, for example if I want to display https://picsum.photos/id/237/200/300 I have to do type it like this:
<html>
<body>
<img src="https://picsum.photos/id/237/200/300">
<img src="https://picsum.photos/id/40/200/300">
</body>
</html>
Lets put the images in a table:
<html>
<body>
<table>
<tr>
<td>
<img src="https://picsum.photos/id/237/200/300">
</td>
<td>
<img src="https://picsum.photos/id/40/200/300">
</td>
</tr>
</table>
</body>
</html>
Now of course we can have img in a, try this:
<html>
<body>
<table>
<tr>
<td>
<a href="https://wikipedia.com">
<img src="https://picsum.photos/id/237/200/300">
</a>
</td>
<td>
<a href="https://gutenberg.org">
<img src="https://picsum.photos/id/40/200/300">
</a>
</td>
</tr>
</table>
</body>
</html>
Now you can click on the dog or the nose and it will lead you to the pages you link to.
Is it possible to have img and text in a? Well I am glad you asked!
<html>
<body>
<table>
<tr>
<td>
<a href="https://wikipedia.com">
<img src="https://picsum.photos/id/237/200/300">
<br>
This dog leads to wikipedia
</a>
</td>
<td>
<a href="https://gutenberg.org">
<img src="https://picsum.photos/id/40/200/300">
<br>
This cat (I think) leads to guttenberg.org
</a>
</td>
</tr>
</table>
</body>
</html>
I even have <br> in the a, now you can click either on the image or on the text.
There is one more very important attribute of the img tag, and this is the alt attribute, it is used by people who are blind or visually impaired to know what kind of picture is on the page. In our example we can put alt="puppy" on the puppy picture.
<p>
Hello, and welcome to my page.
I hope you will like this image.
</p>
<img src="https://picsum.photos/id/237/200/300" alt="puppy">
If a blind person visits this page, they use a screen reader that reads most of the text on the page, and if we have alt attribute on images it will say Image ... and whatever the value of alt is, in our case "puppy". So the reader will say:
Hello, and welcome to my page. I hope you will like this image.
Image puppy.
If you have an image that has no information, like it is just there to make the site pretty, use alt="" then the screen reader will skip it.
If you take a picture of something you are the owner of that picture, and you can put it on your website and say you have the rights of that picture. It is up to you to decide if people should link to it by deciding what under license you will publish the image. There are many licenses you can choose from, there are some that say 'this picture is free for anyone to do whatever they want' or 'you can republish the picture but you cant make money selling it' or 'you can publish it but not print it in books' etc etc.
Complicated stuff this licensing, but the thing you have to remember, it is up to the creator to decide under what license their work can be distributed.
Some licenses you can check out with your parents:
- Creative Commons Licenses CC-BY https://creativecommons.org/licenses/
- GPL https://www.gnu.org/licenses/gpl-3.0.en.html
- MIT License https://opensource.org/licenses/MIT
- Apache License https://www.apache.org/licenses/LICENSE-2.0
- Public Domain https://en.wikipedia.org/wiki/Public-domain-equivalent_license
- Copyright https://en.wikipedia.org/wiki/Copyright
When you want to use someone else's work and it is not clear what license it uses, it is best to ask them. At least that is what I do. People are usually nice and they give me permission to use their work.
It is somewhat controversial what is the right way forward, which license to use and what is the best for you and for the world. Ask to your parent about what happens when you take a picture of a painting of a picture of a video and then you edit the video to include the picture you took in it..
Check out https://tldrlegal.com/ for super short description of licenses
relax and spend the day touch typing
<html>
<head>
<title>THIS IS SPARTA</title>
</head>
<body>
<marquee>
<ul>
<li>
<a href="https://wikipedia.com">click me</a>
</li>
<li>
<mark>hello world</mark>
</li>
</ul>
</marquee>
</body>
</html>
Usually bodies have a <head> hehe.
In html in the head tag you can put things that will help the browser. For example, what is the title of this page? or what language is this page? Who is the author of this page? etc..
You can also put there some style, changing the body's background color, or the color of the text in the h1 or p:
<html>
<head>
<style>
body {
background: blue;
}
p {
color: pink;
}
h1 {
color: cyan;
}
</style>
<title>some title</title>
</head>
<body>
<center>
<p>
Hello Universe
</p>
<h1>hello world</h1>
</center>
</body>
</html>
The language we use inside the style tag is called CSS, and it is quite simple (on its surface). We wont get deep into it for a while, but if you are interested check out at https://developer.mozilla.org/en-US/docs/Web/CSS
You see how in certain tags we can use different language, not html, like in <style> we use CSS, in <script> we use JavaScript, we are going to do more work with it soon, but you can check out at https://developer.mozilla.org/en-US/docs/Web/JavaScript
Many buttons
<button onclick="makeManyButtons()">🤖</button>
<script>
function makeManyButtons() {
// try to make million buttons!
for(var i = 0; i < 100; i++) {
var button = document.createElement('button')
button.innerText = '🐹'
document.body.appendChild(button)
}
}
</script>
Replicator
<button onclick="replicate(10,'🦊')">🤖</button>
<script>
function replicate(n,buttonText) {
// try to make million buttons!
for(var i = 0; i < n; i++) {
var button = document.createElement('button')
button.onclick = function () {
replicate(20,'🦓')
};
button.innerText = buttonText
document.body.appendChild(button)
}
}
</script>
Canvas
<html>
<body style="padding: 0; margin: 0">
<canvas id="squares"></canvas>
<script>
var canvas=document.getElementById('squares');
var ctx=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
function draw() {
ctx.fillStyle= '#' + Math.floor(Math.random()*16777215).toString(16);
ctx.globalAlpha=0.5;
var size=Math.floor((Math.random()) * 60) + 1;
var x = Math.floor(Math.random()*canvas.width)
var y = Math.floor(Math.random()*canvas.height)
ctx.fillRect(x, y, size, size);
};
setInterval(draw,10);
// why dont you try to make them rectangles instead of squares?
// or maybe even circles? google for 'canvas fillRect' and 'canvas arc'
</script>
</body>
</html>
The last one is quite crazy! But I am sure you will like the result when done.