Table of Contents Hide
A quick tutorial will help you to learn HTML.
Now, many latest languages introduced no doubt they’re really popular like react, node.js, python, etc. But as we all know that the HTML is the foundation of the web without this we can’t build a website.
Then hurry up and let’s learn about HTML.
What is HTML?
HTML is a markup language used for structuring the content in WWW (World Wide Web).
Role of CSS and JS in HTML page:
However, just a plain HTML website looks pretty ugly, so you’ll need to style it with CSS for making an attractive look. It’s like the skin and clothing of the website.
JS makes the page functional. In our analogy, this is like the brains and muscles of our website.
So, This picture will explain to you what I try to describe.
For learning more about HTML page structure, Elements, and Attributes In the other words, for basic knowledge, you can check this article Introduction to HTML.
Writing your first HTML code
- Create a page with .html extension
- You can write the name of the page as “index”
- So basically you create the page with this name index.html
Let’s write a code for Hello World!
We didn’t discuss tags yet but let me introduce you to one tag that is h1 h means heading its means heading1 we have six heading tags in HTML like
And we have some single body tags / self-closing tags and some are double body tags.
h1 is a double body tag for double body tags we need opening and closing tags like check this code for Hello World!
Here’s how it looks:
< h1 > this is opening tag
< / h1 > this is closing tag
We close the tag with slash “/”. And wrap tag name with angle brackets “< >”
Hello World! with proper HTML document structure:
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello World!</h1> </body> </html>
Single body / Self-Closing tag example:
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <img src="mypic.png" alt="My Profile Picture" /> </body> </html>
IMG tag is an example of a single body tag that means no closing tag and in src write the path of the image and in alt write the alternative text if the image does not show in some cases and you can notice alt is an attribute of img tag element.
So let’s use some other tags and try more code!
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello World!</h1> <p>Welcome, to DevFords</p> <ul> <li>Code</li> <li>Eat</li> <li>Sleep</li> </ul> </body> </html>
In this code, I use h1, p, ul, li on this page you know already about h1 it’s our heading tag, p is paragraph page, ul li these tags use for list items.
Click here and learn more about the list.
We have tables in HTML you can learn more about the table and Click here to continue.
Forms are also an important part of a website mostly websites have forms for taking input from users. It can be a subscription form, login form, registration form, etc. Check out this article for HTML Form.
We have a variety of tags and so much stuff to learn in HTML, if you wanna more learn about all tags Try this one It’s HTML CheatSheet.
You can download this PDF CheatSheet too. However, you can learn a lot from this cheatsheet.
Some Rules To Remember:
- Most of the tags must be opened (< tagname >) and closed (< /tagname >) and content always be between the tags.
- When using multiple tags, the tags must be closed in the order in which they were opened.
See you there 🙂