Learn HTML
HTML stands for Hyper Text Markup Language, which is the most widely used language on the web to enhance web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML text published in 1995. HTML 4.01 was a major version of HTML and was published in late 1999. Although HTML 4.01 version is widely used, we currently have the HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.
Why Read HTML?
Initially, HTML was developed to explain the structure of texts such as titles, categories, lists, etc. to facilitate the distribution of scientific knowledge among researchers. Now, HTML is widely used to format web pages with the help of different tags available in HTML language.
HTML REQUIRED for students and professionals working to become a major Software Engineer especially when working on Web Development Domain. I will list some of the key benefits of reading HTML:
Create a website - You can create a website or customize an existing web template if you know HTML well.
Become a Web Designer - If you want to start a carrer as a professional web designer, HTML and CSS design is a must.
Understand the web - If you want to optimize your website, increase its speed and performance, it's good to know that HTML has the best results.
Learn other languages - Once you understand the basics of HTML then other related technologies such as JavaScript, php, or angular become easier to understand.
Hello World using HTML.
To give you a little fun with HTML, I will give you a little standard HTML Hello World program, You can try it using the Short link.
Live demo
<!DOCTYPE html> <html> <head> <title>This is Page title</title> </head> <body> <h1>This is a heading tag</h1> <p>Hello Friends!</p> </body> </html>
As mentioned earlier, HTML is one of the most widely used languages on the web. I will list a few of them here:
Web Page Upgrade - HTML is used to create web-based pages. Almost every webpage has html tags in it to provide its details in the browser.
Internet Navigation - HTML provides tags that are used to navigate from one page to another and are widely used in Internet navigation.
Responsive UI - HTML pages now-a-day work well on all platforms, mobile phones, tabs, desktops or laptops thanks to responsive response strategy.
Offline support - pages can be made offline online without the need for internet.
Game development - HTML5 has traditional support for rich experience and is now also useful for games.
Audience
This HTML tutorial is designed for Web Designers and Developers who need to understand HTML with enough detail and all simple visuals, and realistic examples. This tutorial will give you enough ingredients to start with HTML from where you can take them to a higher level of expertise.
Prerequisite
Before proceeding with this tutorial you should have a working knowledge of Windows or Linux operating system, in addition you should know -
- Experience with any text editor such as booklet, brochure ++, or Edit integration etc.
- How to create indexes and files on your computer.
- How to use different guides.
- How to type content on file and save on computer.
- Understanding images in various ways such as JPEG format, PNG.
Learn HTML Basic Tags
Heading Tags
Any text begins with a title. You can use different sizes for your topics. HTML also has six levels of themes, using elements <h1>, <h2>, <h3>, <h4>, <h5>, & <h6>. While displaying any topic, the browser adds one line at the front and one line at the back of this title.
For example
Live demo
<! DOCTYPE html>
<html>
<head>
<title> Heading </title>
</head>
<body>
<h1> This is the title 1 </h1>
<h2> This is article 2 </h2>
<h3> This is article 3 </h3>
<h4> This is article 4 </h4>
<h5> This is the theme 5 </h5>
<h6> This is the 6th article </h6>
</body>
</html>
This will produce the following results -
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Paragraph tag
The <p> tag provides a way to organize your text into various categories. Each section of the text should fit between the opening <p> and closing tag </p> as shown below in the example -
For Exp.
<! DOCTYPE html>
<html>
<head>
<title> Sample Example </title>
</head>
<body>
<p> Here is the first paragraph of the text. </p>
<p> Here is the second part of the text. </p>
<p> Here is the third paragraph of the text. </p>
</body>
</html>
This will produce the following results -
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag
Whenever you use the <br /> object, Anything following starts at the next line. This tag is an example of an empty object, where you do not need to open and close the tags, because nothing will fit between them.
The <br /> tag has a space between the letters br and the forward slash. If you leave this space, older browsers will have trouble providing line break, while if you miss the previous slash character and just use <br> is not allowed in XHTML.
For example
<! DOCTYPE html>
<html>
<head>
<title> Example of Unrolling Line </title>
</head>
<body>
<p> Hello <br />
You submitted your assignment on time. <br />
Thank you <br />
Mahnaz </p>
</body>
</html>
This will produce the following results -
Hello
You submitted your assignment on time. <br />
Thank you
Mahnaz
Centering Content
You can use the <center> tag to place any content in the middle of a page or cell of each table.
For exp.
<! DOCTYPE html>
<html>
<head>
<title> Model Content Model </title>
</head>
<body>
<p> This text is not in the middle. </p>
</center>
<p> This text is in the middle. </p>
</center>
</body>
</html>
This will produce the following results -
This text is not in the middle.
This text is in the middle.
Horizontal lines
Horizontal lines are used to separate parts of the document. The <hr> tag creates a line from the current location in the document to the right-hand line and breaks the line accordingly.
For example, you may want to provide a line between two categories as in the example given below -
For example
<! DOCTYPE html>
<html>
<head>
<title> Example of Horizontal Line </title>
</head>
<body>
<p> This is the first stage and should be more </p>
<hr />
<p> This is the second category and should be below </p>
</body>
</html>
This will produce the following results -
This is paragraph one and should be on top
This is paragraph two and should be at bottom
And the <hr /> tag is an example of an empty object, where you do not need to open and close the tags, because nothing will fit between them.
The <hr /> item has a space between the hr characters and the forward slash. If you leave this space, older browsers will have trouble providing a horizontal line, while if you miss the front slash character and just use <hr> it is not allowed in XHTML
Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in an HTML document. In these cases, you can use the pre-made tag <pre>.
Any text between the opening tag <pre> and the closing tag </pre> will save the format of the source document.
For example
<! DOCTYPE html>
<html>
<head>
<title> Save the Format Example </title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}</pre>
</body>
</html>
This will produce the following results -
function testFunction( strText ){
alert (strText)
} Try using the same code without saving it inside the <pre> ... </pre> tags
Non-breaking spaces
Suppose you want to use the phrase "12 Angry Men." Here, you wouldn't want the browser to split "12, Angry" and "Men" into two lines -
An example of this technique appears in the movie "12 Angry Men."
An example of this process comes from the movie "12 Angry Men."
In some cases, where you do not want the client browser to violate the text, you should use a space that does not break more than normal space . For example, when entering a code in the "12 Angry Men" section, you should use something similar to the following code -
For exp.
<! DOCTYPE html>
<html>
<head>
<title> Example of Unbreakable Space </title>
</head>
<body>
<p> An example of this process comes from the movie Angry "12 Angry Men." </p>
</body>
</html>
This will produce the following results -
An example of this technique appears in the movie "12 Angry Men."
Learn HTML Elements
An HTML element is defined by a starting tag and end by a closing tag.
| Starting Tag | Content | Closing Tag |
|---|---|---|
| <p> | This is paragraph content. | </p> |
| <h1> | This is heading content. | </h1> |
| <div> | This is division content. | </div> |
| <br /> |
So here <p> your content </p> is HTML object, <h1> your content </h1> is another HTML object. There are some HTML elements that do not need to be closed, such as <img ... />, <hr /> and <br />. These are known as empty elements.
HTML documents contain a tool for these and specify how HTML documents should be constructed, and what type of content should be placed in a specific section of the HTML document.
HTML Tag Vs. Element
The HTML object is defined by the original tag. If an element contains other content, it ends with a closing tag.
For example, <p> starts the role tag and </p> closes the same paragraph tag but <p> This is a paragraph </p> is a category item.
Featured HTML Element
It is widely allowed to store one HTML object within another HTML object -
For exp.
<!DOCTYPE html> <html> <head> <title>Nested Elements Example</title> </head> <body> <h1>This is <i>italic</i> heading</h1> <p>This is <u>underlined</u> paragraph</p> </body> </html>
Display the following result −
This is italic heading
This is underlined paragraph
