If we zoom out a bit, we see that computers without code are pretty stupid. You need to tell them what to do, you need to give them code they can understand.
Your browser, when you enter google.com, doesn't know what that is, but once the computer on the other side responded with code, it comes up with the website that it then shows to you.
The main structure that the browser is sent right away is in a language called HTML.
HTML stands for Hyper Text Markup Language
Language as in programming language? Yeah, almost. A "markup" is a lot like a programming language but it's a bit more limited in it's purpose.
All that HTML can do is say what's on a website, and maybe what else the browser should load to make the website show uo correctly.
HTML can contain references to, for example, images. That can be a myPhoto.jpg file which is often a photo, and it could also be a catz.gif file which is mostly likely a cat doing something silly.
Very often HTML also contains some CSS. Not super important what it stands for, but it's basically code that defines how content (for example a headline and some text and images) in HTML should look.
You can find CSS in it's own myStyles.css file, or as part of HTML code. In that case it's either inside a <style> element or in a style attribute of some other element. We'll look at what elements exactly are a little bit later.
If a website needs any real "programming", it contains some JavaScript. You can find it as it's own myScript.js file or inside of HTML code, and then it's often written inside a <script> element.
JavaScript, sometimes people just say or write "js", let's you do pretty much anything. Here's an example:
let included = [1, 2, 3].includes(2);This is code that finds out if a list of the numbers 1, 2 and 3 contains the number 2. Of course it does, and therefor JavaScript stores the value true in a variable that we decided to call included.
We'll get behind what vasriables are a bit later.
It doesn't end there, HTML can contain or refer to Videos, Sounds and a lot of other things as well.
If you click on this link, you will get a website that's yours, on a platform (that's also just a website) called Glitch. Glitch will give it a random name that you will see in the top left.
Your site, like many others, is mainly made of HTML. Now what is HTML again? It's code that represent a website. That code describes a structure of elements. In case of your blog, the HTML contains this text:
<h1 class="main">What's a blog?</h1><h1 |
Starts an h2 element (sometimes also called a tag). h1 stands for the most important headline in the document |
class="main" |
adds a "class" attribute for the h1 element |
> |
finishes the start of the h2 element |
What's a blog? |
This is text that's inside the h1 element |
</h1> |
Closes the h1 element. |
So what we have here is an h1 element with a class attribute with the attribute value "main" and the text What's a blog? inside of it.
You don't need them all on day 1, but there are plenty, really. They all tell the browser something different about what to show. <head>, <body>, <script> and <style> are all important for the structure of the page, but you can't see them.
<h1>, <h2>, <h3> and so on are headlines (from more to less important).
<p> stands for paragraph.
<li> stands for a list item.
These all make the most sense with some text in them, like the "What's a blog?" from above.
<img>, <audio> and <video> on the other hand can bring the respective media into the document but don't have any text in them.
All these tags can have attributes, like the class of the <h1> in the example. Different attributes make sense for different element types.
class is grouping a bunch of elements that have something in common. Often that can be about looking the same, maybe all class="funny" elements should have a pink box around them.
src and href refer to other files, like <img src="myImage.gif"> for example.