Learn to Code via Tutorials on Repl.it!

← Back to all posts
Well-Explained HTML tutorial for beginners (with CSS)
DoggoPro

Hey Everyone!

You Probably want to learn HTML.

In this tutorial, you will learn HTML basics. Follow DoggoPro (me) please!

Formatting

HTML default formatting starts like this:

<!DOCTYPE html>

In HTML, there are tags, which are text in these symbols: <>
There is usually an ending tag, and you put text between those: </(something)>

Example: <tag>Hi!</h1>

Full formatting:

Now I will explain what every tag does.

<html> includes everything included in the file.<head> Includes the important stuff that is loaded before the content in <body> is.<title> Represents this: ![image](https://storage.googleapis.com/replit/images/1634761018749_45bbe0ff85a2e88bb58f81ef10db4cde.png) I think it is important.<h1> - Heading (Text) It would be this big: # Hi!

h1 goes all the way until h6!
<h7>Hi!</h7>

Other forms of text

<p> It stands for paragraph. <span> (Same as paragraph), but easier to style. <em> Means *Italic text*! <strong> Means **BOLD TEXT**! ![image](https://storage.googleapis.com/replit/images/1634762697031_8da27fec70fd22527eb26d5cddd21224.png)

Oh no! ITALIC and Bold are on the same line! I want them on separate lines, so we will use the <br> tag.
Unlike other tags, this one doesn't require an ending tag.

Great, that's better.
To add images, use <img>.

Just like <br>,
No ending tags! </br>

To actually ADD AN IMAGE, use src in the <img> tag.
Like this: <img src="(link)">

To make links, use a href (stands for anchor.)
<a href="(link)">Click Me!</a>.

With these basic tags, a lot is possible.

Like for part 2!

Voters
DoggoPro
Comments
hotnewtop
OldWizard209

bruh, this is not even a tutorial

Baconman321

@OldWizard209 It's a very vague one, but at that point the line at which a tutorial becomes a documentation is heavily blurred.

Although I'll admit, it's not as easily followed as I had hoped.

At least it's not a question like some people do in the tutorials section :/

sn236

Maybe fix your markdown because it's difficult to read or understand and you could explain the tags better and if there isn't any css remove the with css from the title.

MrVoo

Your markdown kinda broke, and there's no CSS in the tutorial .-.

SomeBoyPlayz

@MrVoo Part 2 might have CSS xD