DEV Community

Cover image for Html for beginner Part 1
TheFoxieDev
TheFoxieDev

Posted on

Html for beginner Part 1

New at HTML? This post is for you :) because i will teach you how to code HTML from basic until you become an expert. but first thing first let me introduce you What Is HTML?

What Is HTML?

Html is a basic program to make a website, HTML stands for hypertext markup language, first version HTML is written by Tim Berners-Lee in 1993.Ok if you guys wanna know more information about HTML, you can click this link

First Code

The First thing you have to do is download a code editor or you can use windows notepad, for me i recomended you to using Notepad ++, Atom, Sublime Text, or you can use another code editor.

HOLD UP!
Before we get into the HTML learning, i want to tell something, i always coding in my very old computer so when i'm downloading atom there is kernel error, so download atom setup in this link.If you download atom setup in atom website it will get error (if you use old PC) but if you guys use my setup it will not error, btw this setup is compatible to 32bit, windows 7,8,8.1,10,11(64bit).

But if you downloading this you can't get update(if you using old pc you can't update automatically,but if you using good and new PC can i still get update automatically. Idk 🤷🏻‍♂️ i never used the setup on a new and good PC, if you guys know you can comment down below) , so if there is a new update you need to install the setup again on atom.io. Ok lets go back into the HTML Learning

Ok now after we already install the code editor, we can open it and create a new file/project

Then Click File>Save As and you need to make the file name like this filename.html, you can name the filename whatever you want but don't remove the .html cause it's HTML file exetensions, if you remove it you can't open it on a browser and it won't show a result of your code.

After you do all of the steps, now it's time to make...

🎉 YOUR FIRST CODE 🎉
1.HTML Structure

Html have a structure, this structure is the very important.

Structure:

<!DOCTYPE html>
<html>
<head>
--- This is head part ---
</head>
<body>
--- This is body part ---
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

So that is the structure, in the structure there is head, and body part

What is the use of the head part and body part?

See this image and maybe you can understand...

_image source: https://www.tutorialride.com/html/html-tags.htm_image source: https://www.tutorialride.com/html/html-tags.htm

The head part can be used for title or link a file.

The body part is the content of the website.

So we know what is the differences of the head and body part.

After you learning about html structure now we learning about html tags.

Note:
If you want to run the HTML file, goto the File Explorer if you are using windows OS and click on the HTML file and it will opening up your browser.

2.Html Basic Tags
In HTML there are heading, paragraph, and many more...

Make sure you write all the tags in body part.

Heading tags
Heading is like a big jumbo text, the tag is like this...

<h1>This is Header</h1>
Enter fullscreen mode Exit fullscreen mode

If you did it correctly the result will like this

This is Header

There are many types of heading.
There are h1, h2, h3, h4, h5, h6

If the number goes very big that mean more small the font size of the heading. (Big number = fontsize more smaller)

Paragraph tags

Paragraph tags is used to creating a text, the paragraph tags look like this

<p>This is paragraph</p>
Enter fullscreen mode Exit fullscreen mode

If you write it correctly the result will be like this

This is paragraph

*Actually the font is times new roman or another font (idk what is the default font is) but i'm 100% sure it's not Microsoft Sans Serif.

Bold tags

The bold tags is look like this:

<b>This is bold text.</b>
Enter fullscreen mode Exit fullscreen mode

If you write the code correctly the result will be like this:

This is bold text.

Italic tags
Italic tags is look like this:

<i>This is Italic text.</i>
Enter fullscreen mode Exit fullscreen mode

The result will be like this:

This is Italic text.

Underline tags
Tags:

<u>This is underline tag.</u>
Enter fullscreen mode Exit fullscreen mode

Result:
This is underline tag.

Strikethrough
Tags:

<s>This is strikethrough text.</s>
Enter fullscreen mode Exit fullscreen mode

Result:
This is strikethrough text.

Thank you guys for watching this article until the end 😁, and if you have any question you can comment down below 👇🏻, and see you again in the part 2 of HTML for beginners 👋🏻.

Discussion (1)

Collapse
thefoxiedev profile image
TheFoxieDev Author

Hey guys, i deleted my github account and i'm gonna make a new one so yeah, all the link that connected to my github repository is no longer available.