Full HTML Tutorial
h
Kookiez (316)

HTML TUTORIAL

Hi! This is a tuorial made by @Kookiez and @necronova. This will cover most of the basics in HTML, plus a little CSS. There are 2 parts to this tutorial, and in this tutorial we will show you the basics of HTML, plus a little CSS. The second tutorial will talk more about CSS, and maybe a little JS.

This tutorial is divided into 4 sections, plus a bonus part!

History and Facts about HTML

HTML was first created by Tim Berners-Lee in 1993. Since then, there's been more versions of HTML, and this version we use in repl.it, (and the version pretty much everyone uses) is HTML5, which is the 5th version. HTML is used to make websites. You can also use Flask and Django to make websites in Python, but HTML is the easiest because it is and if you don't agree with me, go learn Django and make a website that looks good compared to just HTML and CSS that you can make in just 30 minutes.

HTML is rarely used alone. Almost every HTML project uses CSS and JavaScript in conjunction to make stylish and functional webpages. Sometimes other programming languages are used, but implimenting them is tricky, and certainly not required.

As the language that makes up pretty much everything you see on the internet, HTML is also one of the easiest "programming languages" to learn! It doesn't take long for you to become an amazing web developer! Edit:
@xpertHacker - HTML stands for HyperText Markup Language

Markup

:/

Getting Started

Click the blue + button to create a new repl, and then select HTML, CSS, JS to get started!

So first, when you open a new HTML, CSS, JS repl, it will look 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>
    <script src="script.js"></script>
  </body>
</html>

So, we'll do a quick overview about what does what!

The <!DOCTYPE html> is very important in HTML. It may look like a tag, but it's actually a statement informing the browser that this code is HTML, and it is also stating what version of HTML it is. This is so the web browser can handle it correctly.

Then there is the <html> tag. This tag represents the root of a HTML document. The <html> tag is the container for all other tags except for <!DOCTYPE html>.

The <head> tag is a container to store information about metadata. Metadata is information about the document, but it doesn't get displayed.

The <title> tag is the text that gets displayed when you open it. So open your repl in a new tab. The tab has some text on it, and the code that does it is <title>repl.it</title>. Your title will be called repl.it.

The <body> tag is where most of your HTML will go. It defines your, well, body of the code. You can write paragraphs, headers, lists, hyperlinks, images, and much more here.

The <script> tag means that the script, the JS, will be found from the file script.js. You can put all your JS in the script.js code.

Some future reference to learn about (and might be important sometime) is HERE and HERE.

Alright, enough, let's get to the funner part (is funner a word?🤔).

Section 1: Headers, Paragraphs, and Comments

NOTE: All of this code is written in the <body> section.

Alright, one of the first things you might learn in HTML are headers. The headers go from <h1>(the biggest) to <h6>(the tiniest). Here is how to write a header:

<h1>Hi there, I'm a header!</h1>
<h2>I'm a little smaller, but still a header.</h2>
<h3>I'm a header too!</h3>
<h4>I'm another header.</h4>
<h5>I'm a header too, but I'm really small.<h5>
<h6>I'm the smallest header...</h6>

Did you notice this part </h1>? It has a / in front. Why is that? Well, it's just the way it is... because I'm a terrible explainer. Actually, no. Here's a helpful explanation from w3Schools.

Now let's test it out! The text may appear ugly, plain - but it still works! You can style it with CSS, which we'll explain later.

Now let's learn about another tag - the paragraph tag! It's the <p> tag. It's basically like a paragraph - hence its name, and here's how you do it!

<p>This is a paragraph. My text is small, because it's a paragraph, not a header.</p>
<p>This is another paragraph.</p>

Try it out on your own! It's smaller, but you can adjust its size and font using CSS. We're not going into that yet, but we will.

Alright, we'll look at how to make comments! People make comments to save code they want to use later, or explain what this specific code does. Comments are not displayed by the browser. Think of them as a little note telling you about stuff. Here is how to make a comment:

<!-- I'm a comment, I appear light gray in light mode, and green in dark mode -->

Alright, let's have a "checkpoint":

Checkpoint

  • We learned how to make headers
  • We also learned how to make paragraphs
  • And lastly, we learned how to make comments and the purpose of them

I've seen that we sound so serious and we...
speel meeny thangs rite an wee r xperts at grammer.

And that sentence above was probably the BEST grammar I've ever written.

Alright, that wraps up Section 1, and we're going about lists, styling text, and line breaks in the next part!

Section 2: Lists, Styling Text, and Line Breaks

Alright, let's start out with lists. So, to make a list, there are two kinds:

  • Ordered lists <ol>
    -Unordered lists <ul>

    So, let's learn about ordered lists first.

To make an ordered list, here is an example:

<ol>
  <li>We are part of an ordered list!</li>
  <li>Yep, we're in an ordered list.</li>
</ol>

Alright, so you see <ol> stands for ordered list, and <li> makes up each little 1. or 2. or 3. Ordered lists may be useful for explaining steps in a recipe, giving instructions, or maybe ordering things from your favorite to your least favorite. Any of these choices are good for an ordered list. But what if you don't want an ordered list? Well, then we'll use an unordered list.

An unordered list is made up of bullet points. Test this example out:

<ul>
  <li>I am part of an unordered list.</li>
  <li>Me too!</li>
<ul>

It's the same "format" as an ordered list, just replaced by <ul>.

So moving on to these 2 tags, <strong> and <em>. The <strong> tag is used to emphasize text, not just to make it bold. So, for example:

<p>I <strong>like</strong> cookies!</p>

Test it out. The "like" will be bold.

The <b> tag also works. But, the <strong> tag means that THIS TEXT IS IMPORTANT! LOOK AT IT! while the <b> tag just means that the text is bold. The <b> tag is used in the same way the <strong> tag is.

<p>The word <b>banana</b> is bold.</p>

Now let's see what the <em> tag does. It makes the text italicized, and <i> also works, but the <em> tag works the most. So, it is used like this:

<p>I read the book <em>Harry Potter</em> last week.</p>

The <i> tag is used in the same way.

<p><i>Please?</i> Please, please, please, please...</p>

Now let's learn about the <br> tag.

The <br> tag is used for line breaks. It has no end tags. So try out the example here:

<h1>I AM A HEADER!</h1>
<br>
<p>oops. caps lock.</p>

Also, one last thing. A b element might not always be bold, and an i element may not always be italic. So it is strongly recommended to not use these tags and use other tags that do similar things. And that's why it's recommended to use the <strong> and <em> tags.

Checkpoint

  • We learned about unordered and ordered lists
  • We learned about <em>, <b>, <strong>, and <i> tags
  • We learned about the <br> tag

Yay! Now we will learn about links and images in the next section!

Section 3: Links and Images

Images are important (most of the time). They make your website look better (most of the time). Anyways, the image tag looks like this: <img>. There is no end tag in the <img> tag because it's special and you're not... actually, maybe you are special. But the <img> tag still doesn't have an end tag.

You can search for an image on the internet, or upload one of your own. To upload an image, you can:
1. Click the 3 vertical dots and select "Upload file" and choose your own image to upload!
2. Drag and drop your image - it's that easy!

Alright, whether you choose an image from the internet or upload your own, this is how you declare that it is an image:

<img src = "image.jpg">

See? It's that easy! Also, keep in mind that this is inside the <body> tag, and above the <script> tag.

If the browser can't display it, you can provide some alternate text:

<img src = "image.jpg" alt = "Image">

Yay! Now let's see how to adjust the size of your image. To adjust the size of your image, you do this:

<img src = "image.jpg" alt = "Image" height = "100px" width = "100px"> 

Easy, right? Now let's talk about hyperlinks.

Well, if you cite something, you will make a link. The most common way to make a hyperlink is to use the <a> tag. This has an end tag, if you were wondering.

Here is an example of a link:

<a href = "link">Link</a>

The href tells you what website, image, or anything the link wants you to redirect to. Oh, and a little tip:

IF you want to link to open in a new tab, add this:

<a href = "link" target = "_blank">Link</a>

Magic! Now, you may notice that your links are a different color than normal text and are underlined. Well, the default ones are like this when they haven't been clicked yet:

And links look like this when they've already been clicked:

They're still underlined, but they're purple now. Well, maybe you want them to be a different color, like orange, for example. Well, that's easy. All we need is some CSS. Well, so... you will learn some CSS in the next section, but why not right now?

So, you can select them by element type (all <p> text will be blue, all <h1> text to be underlined...) since that's the easiest.

Well, let's go into the style.css part. I think it's the easiest way to put your CSS there. The next section will touch up on some things we will learn about CSS in this part, so I don't have to explain much! Yay!

Alright, go to the style.css part. It's blank, but you can change that by writing the CSS shown below:

a {
  color: orange;
  text-decoration: none;
}

This CSS tells all of the text inside each and every <a> tag to be orange, and to have no underline.

Test it out, or swap some of the colors out! Remember, you should always put a semicolon ; after each "statement", but don't put them behind the curly brackets. {}.

Maybe you could even change the font, how about this?

a {
  color: orange;
  text-decoration: none;
  font-family: monospace;
}

Now, it's time for our checkpoint!

Checkpoint

  • We learned about how to make images
  • We learned about how to make hyperlinks
  • We learned how to use some CSS!

Now, you're more than halfway there! Yay! The next section will cover some basic CSS. Excited yet?

Section 4: Styling Elements and Using CSS

Our webpage is coming along nicely, but doesn't it look a bit bland? Lets spice it up by changing things like the size, color, and font of different elements.
Let's take a look at a paragraph: <p> This is some text. </p>

It works, but it could be better. Let's start with adding a bit of color.

HTML allows you to style elements a few different ways. The first method we'll explore goes inside the tag of the element, like this:
<p style="color: red;"> This text is now red </p>

As you can see, you only have to put the style tag in the opening <p> tag. Let's try making the text bigger, and give it a blue background:
<p style="color: red; background-color: blue; font-size: 20px;"> This text is really exciting</p>

Now, styling elements like this works, but as you can probably see, it can get a bit cluttered when designing an entire website. This is where our second method of styling comes into play: the <style></style> tags. This set of tags usually goes in the <head> tag of your file, and helps to keep your code nice and neat.

Styles can select elements by id, class, or element type. We'll start with element type since its the easiest:

<head>
  <style>

    p {
      color: red;
      background-color: blue;
      font-size: 20;
      text-align: center;
    }

  </style>
</head>

Now any element in your webpage that uses the <p> tag will have that style applied to it.

What if you want different paragraphs to have different styles? That's where IDs become useful. Let's make 2 paragraphs:

<p id="RedText">This text is red</p>
<p id="BlueText">This text is blue</p>

Now let's style them:

<head>
  <style>

    #RedText {
      color: red;
    }
    
    #BlueText {
      color: blue;
    }

  </style>
</head>

Note that we use a # to show that we are selecting an id. if we had used a class instead, like <p class="myClass">This text has a class</p> we would have used a ., which would look like:

.myclass {

}

Classes are similar to IDs. The difference is that classes are usually used to style multiple similar elements, while IDs are usually used when styling select elements, such as a specific text box on a page.

The final way to style elements is through an external file. This is especially useful when you want to use the same styles across multiple pages on a website. You may have noticed the "style.css" file when you first opened your project. This file is styled just like the <style> tags in the head of your document. In order to use it on your webpage, you need to add it in the head of your document as a link, like this:

<head>
<link rel="stylesheet" href="style.css" >
</head>

The "rel" tag tells the document what type of link you're creating, and the "href" tag tells your document the location of your style file.

So, you can write all your CSS in the style.css part, and it'll look even more cleaner and it'll be easier to navigate, since all of the CSS will be in the CSS part, and all of the HTML will be in the HTML part.

Checkpoint

  • We learned about how to use CSS
  • We learned about how to use CSS by using:
    • Classes
    • IDs
    • Element Type

We are at the end! 🎉 Now here's a bonus part... ✨

✨ BONUS TUTORIAL ✨

Now since you've scrolled all you way down here, we have a bonus part! We are going to learn how to get input, make a button, and learn a little JS.

Step 1

In this part, we will add all of the HTML.

So we will make a button and a text box:

<h1>Bonus Tutorial</h1>
<input type = "text" placeholder = "Name" id = "checkInput"></input>
<button onclick = "getInput();">Click Me</button>

So let's break it down.

The first line, <h1>Bonus Tutorial</h1> displays the text "Bonus Tutorial".
The second line is an <input> tag. The "type is text because this is looking for text. The placeholder is "Name" because we want to know the person's name and say hello. The id is "checkInput" since we will need that information later, in the JS. I will elaborate later.
The third line, which has the <button> tag, will notify the JS that the input is done using onclick. The function's name will be getInput, so we will need that.

Now let's add the JS in script.js.

function getInput() {
  if (document.getElementById("checkInput").value == '') {
    alert('Error, try again');

  }  else {
    localStorage.setItem("Name", document.getElementById("checkInput").value);
    alert('Hello, ' + localStorage.getItem("Name") + "!");
  }
}

Well, now let's explain everything.
So, the function tells the JS that you are making a function. The text that follows it, getInput, is its name. Then it is followed by a pair of parentheses, followed by curly brackets. Everything inside the curly brackets is part of the function.

Then there is an if statement. JS if statements are like this:

if (condition) {
  // Whatever thing you want it to do
} else if (another condition) {
  // Do another thing if this is true
} else {
  // Do another thing
}

So, we don't need an else if, so we just use else.

So, the code says:

  if (document.getElementById("checkInput").value == '') {
    alert('Error, try again');

So, the code above is saying, "If the input's value is nothing, then I say, "It's an error, try again." " We know that it's not really an error, but it won't really work if the person doesn't type in anything and it says, "Hello, ".

Now let's get to the else part.

  }  else {
    localStorage.setItem("Name", document.getElementById("checkInput").value);
    alert('Hello, ' + localStorage.getItem("Name") + "!");

So, the code is saying, if the first condition isn't what's happening, then I will do this. The thing that it is saying, is to make a "Name" and the value is the person's input. Then, it says, "Hello, <INPUT>!".

See a demo HERE!

Now add some CSS of your own, and it'll look even better! ✨

Closing Notes

Thanks for reading our tutorial! 😄 Since you've read all the way here, we have a special thing for you. Click HERE to claim your award! Now you have a 1-week hacker plan. Enjoy!

Oh, and don't leave yet! You see, we have a few people to credit:

@k9chelsea - because they said they would help but didn't get the chance, but we're still including them 👏

@JBYT27 - for the same reason 👏

Now let's clap for them!

👏👏👏👏👏👏👏👏👏👏👏👏👏👏

That's a lot of claps.

Here are some tutorials that may help you:

w3schools
TutorialsPoint

Yay! Now thanks, and hope you enjoyed it! 😊

If we made any typos, wrong information, or bad explanations, feel free to correct us in the comments section! We will credit you.

Also, thanks to @xxpertHacker for giving some constructive criticism on how wrong we were on some parts.

You are viewing a single comment. View All
Kookiez (316)

@xxpertHacker lol i'll ping @necronova
wow we're so wrong lol, we'll edit it in a sec