Well, hello, world. This is your mate team themidom. Before getting further, I want to ask you a question that, are you a beginner, or do you want to be a web developer. If yes, then you may be confused about, what to learn to be a good web developer or front-end developer. Don't worry mate, that's the common question that arises in everyone's mind. just stick with this blog.
So, guys for being a good web developer first you need to learn the basics of web development i.e. HTML/HTML5, CSS/CSS3, JavaScript. If you can learn the above-mentioned languages, you can be a good web developer. Thus let's get started with HTML.
HTML
HTML stands for HyperText Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. That means whatever pages you see in the web browser, are made of HTML, it was developed by an English computer scientist Tim Berners Lee in the year 1991, and a fun fact, he also invented the WWW (world wide web). Web browsers receive HTML documents from a web server or from any local storage and render the page into a multimedia document or web page. And HTML describes the structure of any web page, so you can say that HTML is the skeleton of every web page over the internet. Now each HTML document are divided into various HTML elements or you can say tags, these are normally building block of HTML pages, if you still don't understand what a tag is, So, mate tag is the set of characters that are written using angle brackets for example <p>. There were about 5 HTML versions and HTML5 is the latest, nearly every web page uses an HTML5 version. HTML provides a means to create structured documents by denoting structural semantics for text such as titles, paragraphs, lists, quotes, etc. And one good thing about HTML is that you don't need any additional dependencies, you only need one lightweight text editor and your browser.
So, fellas, get ready for your first HTML tutorial. First, you need a text editor. You can use MS word, notepad. open your text editor, then copy the HTML snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello world
</body>
</html> After copying it, just paste it in your text editor then save it as "index.html". and then navigate to the index.html file and click on it then it will open with your default web browser. If it shows the following result then congratulation mate.
First of all, we define the whole document with "<!DOCTYPE HTML>" which means we are declaring the whole document as an HTML5 document.
After that, we wrote the opening and closing html tag (<html>this is opening html tag</html>this is closing html tag), It is the root element of an HTML page.
After that, we defined the opening and closing head tag ((<head>this is opening head tag</head>this is the closing head tag)), which contains meta-information about the HTML page.
Then we wrote the opening and closing title tag this specific title for html page. you can understand more after seeing the below image.
And, there comes the body tags inside of which all the visible content appears like a paragraph, images, hyperlinks, etc.
And remember when you define some tag it is necessary to close this tag, for example, when you pass paragraph tag <p> then you need to close it </p>. Hopefully, you got it, or if you want to get a rough idea then, it will be like
<tag> Content...... </tag>
Now let's understand some other tags
1) p tag: this tag defines the paragraph, which means you can write your content inside of it.
<p>your content</p>
2) h tags: This tag lets you write heading in big fonts. there are 6 h tags.
<h1>headng goes here </h1>
<h2>headng goes here </h2>
<h3>headng goes here </h3>
<h4>headng goes here </h4>
<h5>headng goes here </h5>
<h6>headng goes here </h6>
you can try it in your html document, just write any one of these inside of body tag and see the results.
3) br tag: This tag breaks the line between the contents. And it does not have any closing tag.
write something like <p>Hello world <br/> this is your mate </p> inside your body tag and see the result.
4) a tag: This tag is used to put any link inside of an HTML document, it may be a link to another page or any other website.
just write below lines inside the body tag and see the result
<a href="https://www.themidom.in/">Click here</a>
5) img tag: This tag helps insert an image in an HTML document.
try it and see the result.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1a272A0lIC_D_V9SUytCpFAHke6XKKg5OP0CoBtL3ub5g9ZG-DqeapDfsxvOI-4RS4nDYcxABLvAfo_QDww1doSMDjNNTBdN6PfN2wV4Xx5hxqVsuWq7_uZPufvkYgXzPH0MnNs0ewg/s16000/WhatsApp+Image+2021-06-07+at+9.52.25+PM.webp" alt="W3Schools.com" width="104" height="142">
7) hr tag: This tag draws an line between the content.
<p>hello world</p><hr/><p>Next Line</p>
8) table tag: This tag helps you to draw tables inside an HTML document. Below I am going to show you how you can draw a simple calculator structure using only HTML, but remember it won't be functional, for making it functional you need to use JavaScript (If you want to know about javascript go to themidom.in and in search bar write javascript you will get an article for Javascript).
So, guys open another HTML document and then paste the code below.
<!DOCTYPE html>
<html>
<head><title>Calculator</title>
<style>
table{
width:30%;
height:60%;
}
td,th{
padding:15px;
}
</style>
</head>
<body>
<center>
<table border="3" BORDERCOLOR="RED">
<CAPTION>
calculator
<tr ALIGN=RIGHT>
<td colspan="6">0</td>
</tr><br>
<tr>
<td style="color:red;width:40%;height:40px"colspan="2" >Backspace</td>
<td style="color:red"colspan="2">CE</td>
<td ALIGN="RIGHT"colspan="2">C</td>
</tr><br>
<tr >
<td style="color:red";width:100px;height:100px> MC</td>
<td style="color:blue"> 7</td>
<td>8</td>
<td>9</td>
<td font color="red"> /</td>
<td style="color:blue"> sqrt</td>
</tr><br>
<tr>
<td style="color:red"> MR</td>
<td style="color:blue"> 4</td>
<td> 5</td>
<td> 6</td>
<td style="color:red"> *</td>
<td style="color:blue"> %</td>
</tr><br>
<tr>
<td style="color:red"> MS</td>
<td style="color:blue"> 1</td>
<td> 2</td>
<td> 3</td>
<td style="color:red"> -</td>
<td style="color:red"> 1/x</td>
</tr><br>
<tr>
<td style="color:red"> MS</td>
<td > 0</td>
<td> +/-</td>
<td> .</td>
<td style="color:red"> +</td>
<td > =</td>
</tr><br>
</caption>
</table>
</center>
</body>
</html>
9) input tag: This tag allows the user of the website to give any input.
there are many types of input are there like text, password, submit, reset, radio, checkbox, button, file, image. HTML5 added some other input types like color, date, datetime-local, email, month, number, URL, week, search, tel. One example for input
<input type="text" name="firstname" placeholder="enter your name">
It also doesn't have any closing tag.
10) ul tag: unordered list tag is another HTML tag that lets you create a list, it is followed by li tag. here is an example for you, paste it into another HTML document and see the result.
<!DOCTYPE html> <html> <body> <h1>The ul tag example</h1> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScipt</li> </ul> </body> </html>
11) textarea: This tag creates a container where you can enter any character as much as you want.
12) Form tag: This tag allows you to create a form in an HTML document, and after submitting it submits data to the backend(if there is any).
13) center tag: This tag pushes every content inside of it to center
So, this is are some tag, if you want to know more just comment below you will get to know more.
One, surprise for you guys is that we are going to make a sign-up form completely with the above-mentioned HTML tags.
For making a form we are going to use input tags, then we are going to use radio, checkboxes, textarea, just wait and watch.
So, here's the code you can copy or just you can write yourself.
<!DOCTYPE html>
<html>
<head>
<title>
online application form
</title>
</head>
<body>
<center>
<table border="2">
<tr>
<td>
<center>
<h1>
ENQUIRY FORM
</h1>
</center>
<form>
1.Name
     
<input Name="student Name" type="text" size="30" maxlength="50">
<br>
2.password
     
<input Name="course name " type="password" size="30" maxlength="50">
<br>
3.Gender
<br>
<input Name="gender" type="radio" value="m">Male
     
<input Name="gender" type="radio" value="f">Female
<br>
4.Language you prefer
<br>
<input Name="lang" type="checkbox" value="e">English
<input Name="lang" type="checkbox" value="b">Hindi
<input Name="lang" type="checkbox" value="h">Spanish
<br>
5. State
<br>
<select Name="state" size="3">
<option>Mumbai
<option>Arunachal pradesh
<option>Assam
<option>Goa
<option>Madhrya pradesh
<option>Delhi
</select>
<br>
6. Why do you want to join
<br>
<textarea Name="opinion" cols="30" rows="10">
</textarea>
<br>
<input type="submit" value="register">
<input type="reset" value="clear">
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
If you want to know more about HTML, just comment and it's a promise you will see awesome staff.
That's it for this post, see ya in the next post. Thank you
--Team Themidom😇😇😇