This is a super easy guide to show you how to work with HTML and create your first pages in 10 minutes!
Disclaimer: This tutorial will only cover the basic of HTML, you won't be able to style or make your professional website with this tutorial alone. But if you are a beginner who want to get started with Web Dev that this will be the perfect tutorial for you to get up and running with HTML.
Ok, so let get started with everything you need to know about HTML. Also I will link to good resources that you can use to learn HTML deeper and also search what you want to do in HTML.
So what the heck is HTML?: HTML stands for Hypertext Markup Language. Long name for a single meaning: The skeleton of Web pages.
ok ok, i understand now, now what do I do to get started with html?:
As I told you before, a website is created with lots and lots of elements, so is HTML. There are lots of HTML tags that represent as the element for the webpage.
But don't worry, you will only need to learn about 10 of them to create a really-good static website. And those I will explain right NOW!
To set up your development environment you will need a text editor and a web browser (for text editor I recommend Visual Studio Code, and for Web Browser Firefox or Chrome will do).
But if you don't want to setup stuff right now locally on your computer you can go ahead and use repl.it to set it up for you.
Just click on that 'new repl' button on the nav bar and you will see this.
Just go ahead and put 'Html' in to the bar 'Search for a language , e.g C++'
and select HTML, CSS, JS.
then just name your repl. (you can also put your Github repo in which you don't need to care right now, and also describe you repl which is extra but you can do it if you want to)
After fill them in you can click 'Create repl'.
You will be directed to that page but don't worry. Also you can see a file named
index.html created for you and there is weird text inside of that file, don't worry I will explain it to ya. (there is also a css file named style.css and a js file named script.js, you don't need to care about any of those for now)
The weird text in the
index.html is this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="script.js"></script> </body> </html>
Ok let do this quickly,
<!DOCTYPE html> is basically just telling the web browser this is a HTML5 Document. Every website that use HTML5 will have that at the start of the document.
<head> and </head> or is it called ahead
tag. It just basiclly where you put your meta and website title and the link to css in.
Ok now we gonna slow down a little, a
tag is basically the a element on a website like a button or a link. The open tag is like this <body> and the close tag is like the same as the open tag but with the
/ character next to the name of the tag. Like this: `</body>.
Talking about the
body tag, the body tag is a container of everything that is visible or not on a web page.
script tag is just a tag that link your js file with your html file.
html tag is a tag that you put everything HTML inside. It just like a start of your webpage.
And this is quite important to know that a file named
index.html is your site's homepage, when open up a website the browser will look for this file name
index.html. So that is why you would want to keep that file in the root directory.
So let mess with the file a little, I want you to add this
<h1>Your message here</h1> inside the
index.html file inside the
body tag right before the
<script> tag. You should have something like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Your message here</h1> <script src="script.js"></script> </body> </html>
After that you can click on the green 'Run' button.
And this is an neat feature about repl.it, it automatically host your website!
You can access the page that you create right in that code editor or through a domain. You can get your own here:
Yeah, lets talk a little bit more about the <h1> tag, well the <h1> tag is in its own family of headers tag. The
h means header and 1 means the size of it. And 1 is the biggest of all header tag, and the size is from 1 to 6. That means there is 6 header tags like <h1>, <h2>, <h3>,... etc. You can mess with it yourself by using the same bit of code I give you earlier and copy and paste and change the number. I won't show you the code cause I want you to be able to mess with stuff your self, but I will give you the result.
And don't worry, you can change the text size later if you want to with CSS, we will do that in a later in another tutorial. But right now you don't really need to care about that :D.
Ok so the important tag to remember is the paragraph tag. (
Let go ahead and mess with the code right now. The paragraph tag do what it name tell us. Put paragraph in to the page.
So let add this bit of code to our website:
<p>AHAHA I know how to put paragraph to my website with the <p> tag!</p>
The result will looks like this:
Ok so you might ask how would I add links to my page. And to that I say you can go ahead and put links to your website with the
Now you can go ahead and just put this to your website:
<a href="https://repl.it/">Link to awesome repl.it page</a>
You may notice the href="" thingy, don't worry, I will explain it right now. That href thingy is one of lots of attribute. An attribute is a way to provide additional info, in this case is the link to the website. An attribute sits inside the opening tag. A tag can contain 1 or more attributes at a time. Don't worry, we will cover more attribute later!
Ok lets move on to some more tags cause this is FUN! How do you add buttons to your web page? Well you do that with the <button> tag.
Add this bit to your page and see the different:
<button>Click me plz</button>.
You also can add images to your website this the <img> tag
<img src="https://repl.it/public/images/logo-small.png" alt="repl.it logo">
Just add that bit to your file and see the result.
src attribute (or the source attribute) is like a url to point to your file, the file can be stored locally or on other websites. And
alt is alternative text, it just a little text that pops up when you hover through the image.
The result you should get after putting that
<img> tag in.
Ok last thing you would want to know is how to create lists with HTML. This require 2 tags but everything is quite simple to do so here is the details.
You can create 2 types of lists, ordered list (list with numbers) or unordered list ( list with dots). And the tags for it are <ol> for ordered and <ul> for unordered.
To make a list we also need list items, the tag for it are <li>. I think I am talking to much and it super simple so here is the example.
for unordered list:
<ul> <li>Repl.it</li> <li>Repl</li> <li>it</li> </ul>
and for ordered list
<ol> <li>Repl.it</li> <li>Repl</li> <li>it</li> </ol>
and see the results
Ok so that is the end for this tutorial. Thanks to you for reading till the end of it. And yeah, after this you have been able to do easy html stuff. Nothing too impressive, but one step of a time.
Resources I recommend: https://www.w3schools.com/html/
Thanks again. You can check out the repl I created for this tutorial: https://repl.it/@joshhies/tutorial-webpage .
If you like this you can give me an upvote. Thanks again! Bye!
Waddle On! - Josh