Introduction
HTML stands for Hyper Text Markup Language which means it's not a programming language. It decides the structure or the skeleton of a website design and it's also the main part of SEO (Search Engine Optimisation). Learning only HTML won't makes us a great developer, but learning HTML is essential to become a great developer. HTML is the base or the starting point of web development. We have to code HTML directly or indirectly to develop a website / web application. Nowadays, most of the web developers use modern frameworks of many programming languages which render the HTML code at last. But a basic understanding of HTML is important for this.
Today we are creating a simple web page with only HTML and we are not using CSS (Cascading Style Sheets) for styling or JS (JavaScript) for extra behaviours. Websites before the 80's looked like what we are going to develop now. The modern designs have been developed more with CSS and JS. But, we are going to develop with plain HTML to understand the basics.
HTML file creation
.htm or .html extension. It's recommended to create the file in a dedicated folder for further development. We have to place the images or script files in the same folder.Code editor
We can use any text editors to edit our html file. You can code even in notepad. But using a code editor or IDE (Integrated Development Environment) will speed up your coding. Code editors will give suggestion while we coding and easy text formatting. VS Code, Atom, Sublime, etc are some examples. I use VS Code as it is my favourite one.
HTML structure
HTML has a burger like structure. If there is a bun in the top, there would be a bun in the bottom. Every HTML file should start with an <html> tag and end with an </html> tag. Everything else should be inside these HTML tags. Inside the <html> tags we should have a <head> and <body> section. Each has a closing tag too.
<html>
<head>
</head>
<body>
</body>
</html> Here we can see we have intended the head and body tags with a space of a tab. It's recommended to do this for reading the code easily. We have to give extra indent space for each tag inside a parent tag.
We use the head section to describe the web page and help the search engines to find our web pages. Title of the web page, Description about the page, Tags describing the page, and also CSS files are linked inside this head tag. What we see in a web web page is the body section and we have to code it inside the body tag. Images, paragraphs, headings, buttons and everything should be inside this body tag.
The head tag
Inside the head tag we have to place the <title> with its closing tag. This is the text we see in the head of the tab in the browser when we open a web page. We give the text inside the tags.
<head>
<title>This is my website</title>
</head>Save your file and open it in any browser. It will result like this.
Conclusion
My whole html file will look like this:
<html>
<head>
<title>This is my website</title>
</head>
<body>
</body>
</html>HTML 5
The latest version of HTML is HTML 5. There are many new features in HTML 5 according to previous versions. Audio and Video, Header and footer are some of them. If we have to use HTML 5, we need to instruct it in the code file. There should be a <!DOCTYPE html> tag above all of the code and it doesn't need any closing tag. Like this:
<!DOCTYPE html>
<html>
<head>
<title>This is my website</title>
</head>
<body>
</body>
</html>Designing the web page
Now we have title and we need to design the web page because it's blank yet. We have to code this inside the body tag. Let's start with a heading. There are 6 heading tags in HTML. h1, h2, h3, h4, h5, h6 are the 6 heading tags. As the number increases, the size of the heading decreases. So, h1 is the biggest one. We need to give a main heading and we are going to use h1.
<body>
<h1>This is my web page</h1>
</body>And it will result like this:
Then, we have to give a paragraph below the heading. We use <p> tag to create paragraphs.
<body>
<h1>This is my web page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis
commodo tortor et euismod. Curabitur porttitor elit eget metus egestas
faucibus.</p>
</body>Here you can see, I used a dummy text to fill the paragraph for the demonstration. And this is the result:
Conclusion
That's all in this article. I will catch you up with another one soon. Follow me if you are interested in this topic. And we deliver a variety of topics in pulimoodan.com