Learn to Code via Tutorials on Repl.it!

← Back to all posts
Basic HTML tutorial
bwoop (166)

Wanting to learn HTML?

This lesson covers:

  • Basic HTML
  • How to add JS
  • How to add CSS

What is HTML?

Html stands for Hyper-Text-Markup-Language, and it is the basic language that makes up the web. Html works with CSS and JS (javascript).

The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000's was HTML 4.01, which became an official standard in December 1999. Another version, XHTML, was a rewrite of HTML as an XML language.

Why should you use it?

Well, for starters, html is a great way to start off coding. There is a variety of things you can do with it, and it helps you use javascript and CSS a lot easier.

The basics

Now that we've gotten my history lesson and propaganda out of the way, lets get into the actual coding.

First we start with building our first file, commonly named index.html. To start it, we should make it like this:


<!DOCTYPEhtml>
<html>
<head>
<title> Example of html </title>
</head>
<body>
<h1> Webpage title here </h1>
<p> Webpage text here </p>
</body>
</html>


Doctype html tells the computer that the code is in html.

Using the <html> tag lets the computer know where the code goes.

In the <head> tag, you can add the title of the webpage.

Not to be confused with a header, the <title> is the words that go in your tab.

The body is where your content will be.

Headers, like markdown, get smaller the higher you go. So, an <h1> header would be the biggest, and an <h6> header would be the smallest.

<p> is your paragraph, where your words will go. To close any tag, you have to restate that tag but add / to it. `<p> Words </p>`

Adding more pages

Html pages will almost always end in (.html). To link a page, your code would be like this,
<a href="newpage.html">Click here!</a>

Adding CSS

CSS is a styling language, and can be used in many different ways. Most CSS pages are style.css, so if you wanted to have CSS from a file your code would be:
<link rel="stylesheet" href="style.css" type="text/css">

However, you can add CSS directly to your HTML with the <style> tag. Adding CSS directly to a file is better for if you have only one page, or if you want all your pages to look different, but having a seperate .css file and linking it is better if you have multiple pages that you want to look the same.

Adding JS

HTML provides the <canvas> tag for JS and CSS, which can be used to make games, animations, etc.

Most JS files end in (.js), and adding them is a bit more complicated. To add JS to HTML, you need to use the <script> tag. If you wanted to add a seperate .js file, like CSS, you would use <script src="example.js"></script>. Or, also like CSS, you could add it individually by just using
<script> code here </script>

A little more complicated now

Using a link is nice, but a button can be useful at times, like if you wanted a picture to be the link.
Speaking of pictures, if you wanted to add one, your code would look like this:
<img src="picture.jpg" alt"example picture">
You can add a gif, a jpg, a jpeg, a png, etc to your <img> tag. Your alt is what is displayed if a computer cannot preview the image.
A button would look something like this:
<button>Name of button</button>
In the middle of the 2 buttons is where you would put the thing displayed. In there you would put the <img> tag. You may be asking yourself, but bwoop, you said a button could be like a link? Well, have no fear! The code for that would look like this:
<button onclick="location.href='file.html'>Click me!</button>
The onclick feature can be used in a variety of ways. You can use it to call a JS function,
<button onclick="myFunction()">Click me!</button>
or other things.

Spaces and separators

If you wanted to create space between some stuff on your page, you could put <br/> which would be the same as pressing "enter" on a replit comment. You could also use <hr>, which would create a horizontal line across the page, separating whatever was before or after it.

I hope you learned at least a little bit, if there is anything you are confused about, lmk in the chat and tell me what i could do to fix it!

Comments
hotnewtop
AaronDouglas (0)

Thanks for the tips

bwoop (166)

@Hell0oo disgust...ed at the fact you never knew this before?

cjmatthy09 (33)
  1. Referring to:

    Html pages will always end in (.html)

Sometimes they end in .htm too, but it's fairly uncommon.

  1. Please make sure to include tabs/spaces in your code to make it cleaner. It is better to learn at the start

Otherwise, great tutorial!

bwoop (166)

@cjmatthy09 thanks, i actually didn't know it could end in .htm, but i am confused on what you mean by
"be sure to include tabs/spaces"
Did you mean like <br/> or <hr>?

bwoop (166)

@cjmatthy09 or did you LITERALLY mean to add spaces in the tutorial so that it'd be easier to read

cjmatthy09 (33)

@bwoop I mean like indentation

bwoop (166)

@cjmatthy09 but did you mean to add how to indent with code, or indent on the tutorial?

bwoop (166)

@cjmatthy09 ok well i'll get on that, thats for the suggestion!

JWZ6 (368)

@bwoop honestly, this looks better:

<!DOCTYPE html>
<html>
<head>
<title> Example of html </title>
</head>
<body>
<h1> Webpage title here </h1>
<p> Webpage text here </p>
</body>
</html>
bwoop (166)

@JWZ6 changed it, look better?

JWZ6 (368)

@bwoop i mean i guess
just do 3 backticks(`) and type html
like

for example:

<p>I know HTML</p>
cjmatthy09 (33)

@bwoop
do this:

<!DOCTYPE html>
<html>
    <head>
        <title> Example of html </title>
    </head>
    <body>
        <h1> Webpage title here </h1>
        <p> Webpage text here </p>
    </body>
</html>
bwoop (166)

@cjmatthy09 how do i do that? sorry im not used to markdown