Skip to content
← Back to Community
🌐 Getting Started with HTML in 10 minutes. 🌐
Profile icon
joshhies

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? So what the heck is the skeleton of web pages?: Well if you don't know, every website you visit is made of 3 technologies: HTML, Javascript and CSS. You can think about a webpage like this: It like a human body, wiith CSS as the skin, javascript at the brain and HTML as the Skeleton. HTML made up element of the page (like buttons, link, etc.) and CSS make it colorful and good-looking. And Javascript is the brain, so like when you comment on a youtube video, the javascript handle that part and send it to the web server which you don't need to care about it for now. (there is other technologies to create web pages like php, but for now the most popular is still HTML.

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.

image

Just go ahead and put 'Html' in to the bar 'Search for a language , e.g C++'
and select HTML, CSS, JS.

image

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)

image

After fill them in you can click 'Create repl'.

image

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 aheadtag. 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 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: `.

Talking about the body tag, the body tag is a container of everything that is visible or not on a web page.

The script tag is just a tag that link your js file with your html file.

And the 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.

image

And now you will be able to see your webpage next to the code editor
image

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:

image

Yeah, lets talk a little bit more about the

tag, well the

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

,

,

,... 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.

image

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. (<p>)

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:

image

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 <a> tag.

Now you can go ahead and just put this to your website:
<a href="https://repl.it/">Link to awesome repl.it page</a>

The result of adding it:
image

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 tag.

Add this bit to your page and see the different:
<button>Click me plz</button>.

The result:

image

You also can add images to your website this the This file cannot be displayed: 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.

The 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.

image

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

    for ordered and
      for unordered.

      To make a list we also need list items, the tag for it are

    • . 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

      image

      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

Voters
Profile icon
PhilipYu
Profile icon
WolfiePup0703
Profile icon
Ahuman7676
Profile icon
chimarino
Profile icon
AnthonyA4183727
Profile icon
ravengaming2
Profile icon
FITRAH1
Profile icon
PenelopeBirkett
Profile icon
ASargeant1
Profile icon
beanbean47
Comments
hotnewtop
Profile icon
Zachary007

very helpful, but how do I make a button that sends me to a link?

Profile icon
[deleted]

@Zachary007 This is four months late but you can use some javascript for example:
<button onclick"<script>window.open('https://www.google.com/')</script>">This is the text the button displays</button>

Profile icon
ch1ck3n

<button onclick"location.replace('https://example.com/')">Click me to get redirected to a website!</button>

Profile icon
VulcanWM

Thanks a lot. This has helped me a lot!

Profile icon
RachelBrincat

Hello - my text on my second page will not display. It only displays what is on the first page? any suggestions?

Profile icon
VedaSwaroop

@RachelBrincat To move to the second page, use the 'a' tag like <a href='secondFile's name.html'>Page 2 and when u click the link, the text on the first page disappears and redirects u to the second page. :D

Profile icon
hankpeng

helpful! haha

Profile icon
DeepthiSankaran

tysm this was so helpful xD

Profile icon
SamTheCoolest

also how do you make a window for like google or a game open up into your website

Profile icon
SamTheCoolest

so how exactly do i make buttons do stuff

Profile icon
Hadnan

how do I add more pages to my repl HTML web I make

Profile icon
MirandaBonet

this was very helpful ty

Profile icon
sharko212

awsome ty for helping

Profile icon
MasterwuYT

all of the <'s and >'s,why can't it be easy like python or javascript.

Profile icon
Chillmonger

Thanks, this really helps!

Profile icon
[deleted]

this is amazing

Profile icon
rxphasource

warding

Profile icon
vzw20

Useful, thanks!

Profile icon
MANVIGARG

Amazing! THANK YOU. Great work.

Profile icon
RK7633

Thanks for impressive tutorial

Profile icon
lilythewizard12

This is great!
:)

Screenshot 2020-03-19 at 4.23.49 PM - Edited

Profile icon
[deleted]

how do you add an image from your downloads

Profile icon
[deleted]

@AidanCashman also, how do you link to another file in the same program

Profile icon
dankpython

@AidanCashman you link a file (say, repl.jpg) with <a href="repl.jpg">Repl</a>. Look at the documentation on help with uploading files.

Profile icon
MissMemer

:D

Profile icon
msmcvera

good quick guide

Profile icon
ThomasCoder

thanks,just started html but now it is + clear

Profile icon
xxxMarcusxxx

Thanks

Profile icon
Sepplchen

Really great for a starter! Thanks! 👍

Profile icon
ILOVECODINGU

thanks

Profile icon
shamgamer

Good Totorial

Profile icon
Jaytee100

great stuff

Profile icon
LukePatten

YEET