1.Introduction of HTML
So, The HTML stands for Hypertext Markup Language. Where Hyper Text represents the Hyperlinks that are present on the web pages. The Markup simply means that it’s displayed the content on the web pages sequentially. The HTML is used for making web pages. Use tags to display documents etc.
Some Important Tags are <Html>where the HTML is Start. The tags mostly come with pair like <b></b>and this < > brackets are called angle brackets. What is present in these brackets are called elements. We learn much more about tags in our further course. Now let’s see how the HTML document is created.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
Hello World!!
</body>
</html>Save this document with .html format and click it where you save this document it will open with your default web Browser.
Output
Note: Every html document end with .html extension. Make sure that when you open the tag you close that well like <html></html> the / is use in closing tags
2What is a head and body tag?
1. What is the head?
So, basically, the head is used to store Metadata. The Metadata is just about the information of the HTML document and it defines the document title, character set, styles, scripts, and other Meta information. It just defines information about the document. We can identify Meta tag using <head> tag which tags are in the <head> tag are called Meta tag some example are following:<title>, <script>, <meta>, <link>, <style> etc.
2. What is the body?
Let’s see what the body of the HTML document is. The body uses to contain all the contents of an HTML document like images, videos, text, etc. basically body is the part that is mostly used by users.
Code
<html>
<head>
<title>This is title Meta tag</title>
</head>
<body>
<h1>See the title and this is the body of the document</h1>
</body>
</html> Save this document with .html format and click it where you save this document it will open with your default web Browser.
Output
Note: So, Every html document have the head and body tag.
3 What is heading in HTML?
There my, Friends Headings are important because the heading is the first thing you will see on the web page. So, Heading is defined as which kind of content you reading, and mostly heading is used to make understand the topics. In HTML various types of Headings are available.
1.How do I make a heading in HTML?
In the HTML heading are 6 types. The H1 to H6, where the H1 is the largest heading and you got that, H6 is the smallest heading.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<H1>I’m The Largest Heading H1.</H1>
<H2>I’m The Second Largest Heading H2.</H2>
<H3>I’m The Third Largest Heading H3.</H3>
<H4>I’m The Third Smallest Heading H4.</H4>
<H5>I’m The Second Smallest Heading H5.</H5>
<H6>I’m The Smallest Heading H6.</H6>
</body>
</html>Save this document with .html format and click it where you save this document it will open with your default web Browser.
Output
Note: Heading is very important in the HTML. Search engines use the headings to index the structure and content of your web pages.
4. HTML Paragraphs and Line Breaks
1.Why use paragraph tags
So, if I want to show some text information like articles in my web browse or website I used this HTMLParagraph tag to show my text information on the web pages. The paragraph tag is we Pas the element.
We identify the paragraph tag as <p>and </p>. So, if you want show your text information is display on the web page as paragraphs you have to put your text in between these tags. See the code how we can do that.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>This is a first paragraph</p>
<p>This is a secon dparagraph</p>
</body>
</html> Save this document with .html format and click it where you save this document it will open with your default web Browser.
Output
Note: we use the <p>tag to adding extra spaces or extra lines in your HTML code.Because the browser will remove all extra spaces and extra lines when the page is displayed.
2.LineBreaksIn HTML
We use line brake to write a paragraph without using a new paragraph. Line brake gives us the freedom to write multiple lines to write in a single page. The <br>tag comes with no closing tag.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>This is a first line <br> and This is a second line in one paragraph </p>
</body>
</html> Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: we use the <p>tag to adding extra spaces or extra lines in your HTML code.Because the browser will remove all extra spaces and extra lines when the page is displayed.
5 Tables and Text Formatting
1.Create tables in HTML
In web pages you see the all data in the form of tables. So, how do we create that tables using HTML?
Let, I tell you here we use <table>tag to create a table. In the table tag, we put <tr>tag which use to make table rows, and the <th> tag we use to define the table headers. We use the <td>tag to put data in the table row.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ram</td>
<td>30</td>
</tr>
<tr>
<td>Krishna</td>
<td>29</td>
</tr>
</table>
</body>
</html> Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: in the table we can put text, images etc. using <td>tag.
2.Text Formatting In HTML
In the HTML several text formatting tags are available. But we learn only those tags which are generally use. Some tags are <b>use to make text bold,<i>is use to make text italic and many more. See the code to get the idea.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>
<b>This is bold text</b>
<br>
<i>This is italic text</i>
<br>
<ins>This is inserted text</ins>
<br>
<del>This is deleted text</del>
</p>
</body>
</html> Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: Every html document end with .html extension. Make sure that when you open the tag you close that well like <html></html> the / is use in closing tags.
6. Use of Images and links in HTML
1.Insert an image in HTML
We use <img> tag to insert an image in HTML web pages. The <img>tag content src attribute to locate the image. There is also an important attribute called alt. It helps the user when the image is not showing on the web page due to a slow internet connection the alt gives the information about the image.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<img src=”cat.png” alt=”cat image”>
</body>
</html>Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: make sure that the image is in the same direction where the .html file is content. If not the image is not showing on the web page.
2.Use of Links in HTML
In the HTML we use the <a>tag to make links. The links are used to go from one page to another page. Links are very useful in web development.
In the <a>tag href attribute content the address of another page where the person wants to go. We use links in many ways like going from page bottom to top and going to another.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>Check Out The link</h1>
<a href="https://www.developersnation.co.in">Go to my site</a>
</body>
</html>Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: to make the link don’t forgot the http:// it’s very important.
7. Comments in the HTML
1. Use of comments in HTML
In any kind of codes the comments are very useful to understand the code. In HTML we make comment by using <!– –>this kind of symbol. The comment is start from <!–this and end with –>this.
Using comments the user and coder both can easily understand the code what is going on. Making comments in your code is very good practice.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<!--This is a comment -->
<p>This is a paragraph.</p>
<!--Remember to add more information here -->
</body>
</html>Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: comments are not shown in web pages because comments are neglected by Browsers.
8. Play video and audio In HTML
1.Play video file in a web browser
To play the video on the web page we use the <video>tag to play the video. The <source>tag contains the source file of the video. Make sure that the files are located in the same directory.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<video width=”320”height=’’240’’controls>
<source src=”search.mp4”>
</video>
</body>
</html>Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: make sure that you mention the controls, width and height attributes in video tag.
2.Play the audio on web pages
In web pages, we can play the audio using the <audio> tag. The audio and video are making web pages very useful and very attractive.
The audio file belongs to the same directory to play the audio on the web page. To play any media the src attribute is very important. Make sure that the extension
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<audio controls>
<source src=”song.mp3”>
</audio>
</body>
</html> Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: make sure that the video and audio format is specify.
9. Use Special Character in HTML
1. Some frequently used Characters.
To make special characters like copy right, registered trademark, less than, greater than etc. symbols we can show in our web pages just using simple code. We call these codes entity name like < this code is use for making ‘’<‘’ code.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h3>This is less than symbol < </h3>
<h3>This is greater than symbol > </h3>
<h3>This is euro symbol € </h3>
<h3>This is copyright symbol © </h3>
<h3>This is registered trademark symbol ® </h3>
</body>
</html> Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: When you use the <or >symbols it makes errors in HTML that’s why we use the special symbols in ours web page.
10. Form in HTML
1.Making Log in the form in HTML
We all see some kind of login forms on the web pages. The <form>tag is used for making form. There are many kinds of forms are used in web development. The form contains some elements like check boxes, submit buttons, text fields, etc.
Code
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>Log In</h2>
<form>
Enter Name<br>
<input type=”text”><br>
Enter Password <br>
<input type=”password”><br>
<input type=”submit”value=”submit”>
</form>
</body>
</html> Save this document with .html format and click it where you save this document it will open with your default web browser.
Output
Note: forms will be any type like sing up, log in, contact etc.