Thbopica

Cancel
html

Your first html

HTML stands for Hyper Text Markup Language. Markup languages don't really do anything, they just display stuff. So why do you learn html? Well just try it! Create a text file on your computer. (Doing this on Mac might be hard, if you don't know how to create a text file look it up.) Make sure you enable file extensions, on windows you have to click "view" then click on the check mark (around the top right) that says something like: View file extensions.

Your text file should look like: "text.txt" or something. The ".txt" extension means that this is a text file, if you want your computer to recognize it as a html file change the name from "text.txt" to maybe "index.html". To test if you did it right double click the file, if it opens a browser, that means your did it right! Is this a website? No! This is just your web browser opening up a file.

Edit the html file by right clicking it and select edit. If your on windows it will open up notepad, which is a terrible editor. I'd recommend notepad++:
Notepad++
(They have a dark mode theme!)

Paste the following into your file (it's fine if your still using notepad, it is just a pain to code on notepad.):

<html>
<body>
<h1>This is my first html file!!!</h1>
<p>I'm excited to learn more!</p>
</body>
</html>

(Sorry my markup language TML is in it's early stages, that's why this looks weird...)

Play around with the text trying different things, for me that is the best way to learn. Also h1 stands for header 1, try header 2 (h2), h3, h4, h5, and h6. (h7 doesn't exist)

So let me now explain what that all means. Html has code blocks called flags, each flag is surrounded with "<>". In this example a "p" is enclosed with "<>" (p means paragraph). This means that everything after the "<p>" is a paragraph. Now you probably don't want everything after your p flag to be a paragraph, so that's why we end it with a "</p>". This means that the flag is complete, and everything between those two will be displayed with the flag. It would be called almost the flag's value.

Some further syntax:

<flagtype argument="something" argument2="something else">Some other stuff here</flagtype>

So the first flag we define is the html flag, this is just a standard cloak that surrounds the rest of our code. The body flag is the flag that has all the website's (or in this case the html file's) content inside. Everything your reading here is inside a body flag. Now usually we'd have a head flag, but that contains code that this tutorial doesn't cover.

Just to let you know, you can rearrange flags in the body, you can add more, and you can remove them. You aren't limited by this template. If you want to learn more about html, I probably will write more articles on the subject. But for the time being, check out w3schools, they have excellent html reference:
W3schools html
 Thbop

Feel free to ask questions...