The Developer Brains


LEARN HTML

Web Designing | Web Development


SEE MORE

download tdb school app from playstote
Download the App from Play Store













html5 logo

Hyper Text Markup Language

Want to be a professional web designer?
Learn how to design attractive websites most efficiently and smartly by using Hyper Text Markup Language version 5. Give a professional look to your website.



HTML History

The concept of the world wide web was first devised by Tim Berners Lee in the early 1990s. The web, however, as we see it today, is not what it was, at the time of its introduction. It has undergone a series of changes and evolution and has become the web, we love. Each new version has allowed the making of web pages, simpler, easier, and efficient.

Some important landmarks in the history of HTML are:

Version Specification Release Date
HTML 1.0: Non-interactive websites. Just plain text. 1994-01-01
HTML 2.0: Gave HTML its core features. Became standard for web design and development. know more 1995-11-24
HTML 3.2: Introduced and diversified the concept of tags. However, was not much popular know more 1997-01-14
HTML 4.0: Included CSS and became the official standard by May 1998. know more 1998-04-24
HTML 5.0: An extended version of HTML 4.01, which was published in 2014 became popular by the name of HTML 5.0 and is the web as we see it today. It has been developed, keeping in mind, the needs of the present as well as the future. know more 2014-10-28

This is the version, which we will dive deep into in the upcoming tutorials.


LEARN HTML5




HTML_Syntax First_Web_Page Html_Elements Headings Video_Tag Html_Attributes Audio_Tag Style Formatting Images Table Lists Iframe Symbols HTML_Quiz











</HTML5 Tutorial>

HTML is a web technology, web designers use it to create websites.




What Is HTML?

Are you amazed by all those websites that you click upon while referencing the web for a school project? Image search probably. Or do you wonder, what it takes, to make all those amazing social media platforms that you use to communicate with your friends, even strangers? That is what this series is about: HTML, the skeleton for all these “websites”, the backbone of the web.

Coming to the usual stuff: HTML stands for Hyper Text Markup Language.

But what exactly is a Markup Language? A Markup language is defined as a language that uses tags to define the layout and the structuring of a document. Let us take an analogy to understand what is the purpose of Markup Language.

Imagine you are drawing a human face. The human face (just the face), usually, consists of 2 eyes, 1 nose and 1 mouth, excluding the skin. So we have to draw:
  1. 2 Eyes
  2. 1 Nose
  3. 1 Mouth
to define a face, which using Markup Language can be written as: 

		
<face>
	<eyes>
		<eye1>
		  </eye1>
		 <eye2>
		   </eye2>
	 </eyes>
	<nose>
	  </nose>
	<mouth>
	  </mouth>
</face>

That all that we required to draw a face. Notice how eyes came first and then nose and mouth. That’s what we do using Markup Language, we define the layout using tags.

What are tags? Did you see that we used something like <eyes>, <mouth>, and <nose>? These were the tags and tags are the characteristic of a Markup Language, tags are what define a Markup language. Tags like <face> are called opening tags and the ones containing slash like </face> are called closing tags.

So till now, we have understood tags and Markup language, which will make HTML easier to understand.

HTML, using tags, defines how pages look on a website. You can view the website as a collection of web pages. For example, www.facebook.com is a website that is a collection of many pages. When your friend shares something e.g a birthday message with some images, on Facebook, it is the HTML code that specifies, where, and how an image will appear? Will the image be small or big? Would it be on the right side of the text or below it? Something like that.

However, there are some websites too, that have only 1 page.







Similar to the tags we used above, we have some predefined tags in HTML. Yes, we do not have to define our own tags, someone has already done that hard work for us. We just have to reference those tags. The simplest HTML code, that consists of some basic tags, but effectively does nothing, somewhat looks like this: 
	
<!DOCTYPE HTML>
<html>
   <head>
      <title> </title>
    </head>
   <body>
    </body>
</html>
If you will write the above code in an IDE and run it, to obtain your very first web page, you will get a blank screen. You might think, “All this work, just to see a blank screen?” To make, atleast something appear on the screen, type the following code:

<h4>This is a Paragraph</h4>

Now you will notice that, instead of blank screen, the following text appears on the screen:

This is a Paragraph

.


<!DOCTYPE html>
<html>
	<head>
		<!--Title-->
		<title>Page Title</title>
	</head>
<!--Body-->
<body>
	<p>This is a Paragraph</p>
</body>
</html>


Try it Yourself



Now that you have got your hands dirty with HTML, lets us dive onto what exactly each tag does:

<!DOCTYPE HTML>
The latest version of HTML is HTML5 and this tag informs the browser that the code you have written is using HTML5 syntax, or else the browser won’t understand, which version of HTML to use for displaying the content. Unlike other tags present in our code, this tag is case insensitive, implying that we can either write it, the way we already have, or <!DOCTYPE html> or <!doctype HTML> or <!doctype html>.

<html>
This is the root element of HTML document. What it means is that every other tag is the child of <html> tag, just as you are a child of your parents. As you see, all other tags, including <head>,<body> are the descendants/children of <html> tag. Just as you are the descendant of your father, your father of your grandfather, your grandfather of your great grandfather, and so on, tags too are descendants. As in this example, <head> is the child of <html>, <body> too is the child of <html>, therefore, these two tags are at the same level and are siblings of one another.

<head>
This tag contains information pertaining to the title of the HTML document and meta information, which is used for ranking purpose.

<title>
No prizes for guessing, this tag contains the title of the webpage, which is displayed on the tab, usually on the top right corner of the browser.

<body>
This is where all the magic happens! This is where we write our “main” code, for our HTML document, that we want to be displayed on the screen. We will learn more about this in the upcoming tutorials.
















</HTML5 SYNTAX>

This is the HTML5 basic Syntax



	
	<!DOCTYPE html>
	<html>
	<head>
		<!--Title-->
		<title>Title</title>
		<!--External StyleSheet-->
		<link rel="stylesheet" href="css_file.css">
		<!--Internal StyleSheet-->
		<style>
			.class_name{property:value}
			#id_name{property:value}
		</style>
	</head>
	
	<!--Body-->
	<body>

		<!--Inline StyleSheet-->
		<p style="property:value">This is a paragraph</p>
		
		<!--Heading-->
		<h1>H1 Heading</h1>

	</body>
	</html>










</HTML5 Code Editor>

Now run your code online using TDB Code Editor



<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
<body>
	<h2>This is a Heading</h2>
</body>
</html>

Try it Yourself

Result

This is a Heading
















</How to create your first web page using HTML5>

It is very easy to create your first html page.
Just Follow these instructions and start your journey in web designing field.





REQUIREMENTS

Install latest software on your PC
i.e. Google Chrome Web Browser, VS Code Text Editor





FOLLOW THESE STEPS

  1. Step 1 Open VS Code Editor

  2. Step 2 Create a new file

  3. Step 3 Copy HTML Syntax

    			
				<!DOCTYPE html>
				<html>
					<head>
						<title>Page Title</title>
					</head>
				<body>
					<h2>This is a Heading</h2>
				</body>
				</html>


  4. Step 4 Now Save it as index.html

  5. Step 5 Open your Saved File on Google Chrome Web Browser

  6. Now you can check your webpage on Chrome Browser







Next: Getting started with HTML


Next Page












  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers










IMPORTANT PROPERTIES

OTHER PROPERTIES

LINKS

ABOUT US!

TDB School is a leading web developer's website. Here you will learn how to code amazing, modern, responsive, and attractive (static and dynamic) websites by using the latest web technologies. Learn Web Development in the easiest & smartest way. Start your journey from a beginner level to a professional level with the full support of our Expert Developer's Team.




Copyright © 2020 www.tdbschool.com
Powered by The Developer Brains