Loading ...

Learn about web development and design.

Learn HTML in 12 mints

learn html in 12 mints
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

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).

What’s the role of CSS and JavaScript in HTML pages?

CSS:

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.

JavaScript:

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.

html-css-javascript

For learning more about HTML page structure, Elements and Attributes you can check out the article Intro to HTML

Writing your first HTML code...

You need a text editor for writing HTML code It doesn’t matter which editor you use like notepad++ nowadays Sublime and VS Code more popular choose whatever you like.

  1. Create a page with .html extension
  2. You can write the name of the page as “index
  3. 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 mean heading1 we have six heading tags in HTML like

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

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 that check this code for Hello Words!

<h1>Hello World!</h1>

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!

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>

Output:

In this code, I use h1, p, ul, li. In 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 list.

We have tables in HTML  you can learn more about the table and Click here to continue.

Forms 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.

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 between the tags.
  • When using multiple tags, the tags must be closed in the order in which they were opened.

See you there. ?

Leave a Comment

Your email address will not be published. Required fields are marked *