Modern Web

Posted on Jul 23, 2021

Learn web development 01 - About HTML

#html #beginners #webdev #css

Hello, Welcome. My name is kunaal. From today, I am going to start "Learn web development" series for all beginners and for those who want to start web development.

In this series, we'll learn about HTML (Hyper Text markup language), CSS (Cascading style sheet) , JS (javascript).

In this series, I will be explaining you each and every concepts, and after that you should practice each example that I'll perform in the article. And I will give you some problems as a homework which you can solve to practice web development.

So, I think that enough introduction about this series.

Let's start then.

How Computer works ?

Well, as we all use languages like English, Spanish, Hindi, etc to communicate with others. The same way we communicate with computers. But, computers are not very smart as they seem. They only understand binary codes.

What are binary codes ?

Binary codes are sets of 0 and 1. Computer understand different combinations of 0 and 1.

For example

Binary Code	Value
1	1
10	2
11	3
100	4

You can see computers are more complicated. And as a human, it's impossible to remember all these combinations, to order computer. That's why we have programming languages.

What is programming language?

Programming languages are used by programmers to communicate with machines. We have lot's of programming languages like JavaScript, Python, Java, C/C++ and more. But, as computer only know binary codes, so to make them understand programming languages, we have interpreter and compilers which basically convert your code to binary codes.

I think that's enough, as we no need to worry about compilers and binary codes for web development.

HTML

HTML - Hyper Text Markup Language. HTML is a structured language. HTML is used to define the structure of website. HTML is used add content to the web page. Basically HTML is used to create a web page.

We do not consider HTML as a programming languages. We consider it as a structured language because it is used to create structure.

VS code.

Vs code is an IDE. Programmers use it to write codes. You can also use notepad if you want. But even if you are beginner, I'll recommend you to use VS code or any other text editor except Notepad.

Download Vs Code

Create a web page.

Now, let's talk about HTML in detail. Before that, create a file, name it index.html (index is a file name and .html is a extension which tells computer that this is an HTML file). It should look like your default browser icon.

Open this file in your code editor. And write this

<!DOCTYPE html>
<html>
<head>
    <title>title of the page</title>
</head>
<body>

</body>
</html>

Let's understand each line.

Doctype

<!DOCTYPE html>

This tells the version of HTML language. HTML 5 is the latest version and to tell browser that we are writing HTML 5 we use this. It also enable some HTML 5 features.

HTML tag

In HTML,text with angular brackets < > know as tags. Tags are like a block. Which used to define an element or make space for an element in the document. We have lot's of tags to create specific elements.

Notice mostly all these tags end like this </ >. This define the end of the block.

<html>
</html>

Now, this Html tag means we are starting our html block. Anything that our web page contain should be inside html tag.

Head Tag

<html>
   <head>
   </head>
</html>

you can see we added this <head> tag inside our <html></html> tag and we are closing it by </head>.

<head> tag is used to define the head portion of the document which contains information related to the document.

Title tag

<html>
   <head>   
       <title>title of the page</title>
   </head>
</html>

Title tag is used to set web page's title. remember to close all these tags.

output for the above code

Body tag

<body>
   hello world
</body>

<body> tag is used to define web page body. You can see, I typed hello world inside <body> tag.

Output

Remember to close all these tags.

Homework

You can practice writing HTML basic Structure. I recommend you write it 5-6 times. And practice closing all tags.

So, that's sit about HTML for today. In next article we'll learn about heading tags, para tags and other font related tags.

If I missed something or you have any doubt feel free to ask me in discussion.

If you like, you can subscribe my youtube channel.I create awesome web development tutorials. You can also watch tutorial on Gradient Text Stroke

Thanks For reading.

DEV Community