Line breaks , comments & spaces

HELLO FRIENDS !!! welcome to your 3rd tutorial on HTML.

In this tutorial we are going to look at how to add line breaks, private comments and spaces to your HTML code.

Now if you read the last tutorial, we are going to go ahead and use that HTML file we created in last post.

Web page we created in last tutorial.

Now what we want to do is we need to add some lines between header section and paragraph section.
What we are going to do now is reopen that file in notepad.
(Right click on that file, select open with & select notepad) that will allow us to look at the code we did.

(Example)

As you know, we used <h>  section two times & <p>  section two times,

So what you want to do is go ahead and hit ENTER button three times in between the two sections, that should give us the space between our sections. Then save as the file in HTML format (test.html) and reopen the file by double clicking on the file & you will  notice that nothing is happens there.

why??

Actually you have to identify line breaks with HTML code otherwise it's as if nothing happened, it will just ignore these and keep going to next section. So we actually do have to put line break there, for this you have to put the BR tag .

& if you remember i said about empty elements in my introductory post and an empty element does not need a closing tag.

The reason is because we are not putting anything in between these tags. Late's go ahead and save this again in HTML format.

Reopen this file & you will see we have got our line breaks.

Now lets do a comment section, it is used to keep notes in your HTML code, that is you want notes for your code but you do not want it to be displayed on your web page. In order to do that we use this opening tag  (  <!--  ). Then you can put whatever you want there, it will only display to you in your 

coding file, it is like private notes on your code. Now close it with this closing tag  (  -->  ).

Remember exclamation mark ( ! ) is the most important in this tag otherwise it will display on your web page like a text.

Go ahead, save this file & reopen the file you will notice nothing is displayed on the web page.

Now i will show you how to add spaces or additional spaces between text. In HTML it automatically creates only single space  in between two words. 

In order to accomplish that we have to put in (  &nbsp  ). You can put this no of times as many spaces you want, so if you put this four times it will create a four spaces. 

Late's save again and if you open the file,  there you will see spaces added between two words.

So, That's it for this tutorial.

---

Note:- Try to create you own web page examples for practice. later on we will see how to add your web pages on google.

Create a web page using HTML

HELLO FRIENDS !!!  Welcome to your 2nd tutorial on beginning of HTML.

---

Q. How to create a web page using HTML?

---

As i said in my previous introductory blog on HTML, all you need is notepad, so you should go ahead and open up notepad & that's all you need to follow this tutorial.

Now, Web browsers display a lot of different documents, its not only HTML. So the very first thing we have to do is, tell the  browser what type of file this is and we do that by using the document type declaration .
Its just a declaration and we are telling the browser exactly what to show here and so lets go ahead & type in doc type HTML, so the browser moves in top-down manner.

(1)

We are going to use HTML 5.2 (most current version). If the version changes in future, you won't need to come back here & change this, because we are using very current version & this code will still be relevant.

Now the very first thing that comes after the doc type declaration is the HTML element.We create that by typing HTML and then as i said in my first tutorial, every opening tag has a closing tag. 

(2)

Now its more like a wrapper, where we put all of our code into and that is everything in our document we'll go between this HTML element opening tag & closing tag. 

Its just like a starting and ending point that tells the browser where the HTML starts and where the HTML ends.

After this first section we need that comes after HTML is called as head section.

as you know, we need a head tag and a closing tag.

(3)

In this section contains the lot of info about the page itself.

This is not a huge & critical section you need to be concerned about.

The title of the page, that's actully the only thing that you display here that goes in the top menu.

Title element is what shows up in the title bar of the web browser.

Now, lets move on to the body section which come after the head section and this is where all of the action takes place.

This is really the heart of your web page and it needs also a closing tag as well. 

This is the primary section of your web page, it all happens in the body section. Everything that's displayed to the user will be done  within the body element. 

Now we need to insert something within our body tags. We are just gonna insert some simple headings & some simple texts.

First thing we need is heading and we use the H tag for that and its h1 and then we are gonna close that tag as well. It creates larger text because this is gonna identify a section of our website. 

So that's the text for our header and all the text will be contained in there for our header.

Now, we need to tell what this website about and so lets use the P element and what the P element does is it creates a paragraph & obviously it stands for Paragraph. So anything that we want to tell that we put in a paragraph.

(5)

Now lets go ahead and render this and see how these headers and paragraphs are displayed in our first web page.

Go ahead & save the file. ( Ex. My web page.html )

After this double click on that file & there you see we have our first web page.

(THIS IS HOW OUR WEB SITE LOOKS)

This is just an example of web page, from next tutorial we are going to know many more HTML tags. I hope you get the idea of how the basic structure works in HTML.

If you can understand this structure, you will surely understand the HTML.

so that's it for this tutorial.

---

Note :- As you can see in image our h1 tag is in largest text, with the use of number of h1, h2, h3 etc tags size gets smaller. Later on we can also learn about the font size.

Introduction to HTML

HELLO FRIENDS !!! welcome to your very first tutorial on beginning of HTML.

HTML is the base of World Wide Web & if you are going to do anything even in other languages involving the web it is highly important you know HTML, so lets take a look at some of points mentioned in below image & again this is an introductory blog, in the next blog we actually start doing code .

HTML stands for hypertext markup language and you might say wow what is that but it's actually very easy to use HTML.

HTML is a document that contains text, that's it. It is very easy to read, so its not like java which kind of reads like hieroglyphics.

So it is similar to like Microsoft Word or even notepad or Word-pad. Now once you have created your HTML document, web browsers can read and display documents that contain HTML so Firefox, Google, Internet Explorer they all do the same thing. They are going to take that document and display to the user.

OK ! so lets move to the next step. It's all about tags in HTML.

As you can see some examples in above image, every tag has a closing tag & then we can put something inside those tags.  If you have an opening tag you got to have a closing tag and

the closing tag is identified by the slash ( / ).

Following are those two types of elements that we are going to be dealing with,

1) Markup element :- It is a set of tags has something that goes inside of it.

Ex.:-    <body>          </body>

2) Empty Elements  :- There are few tags in HTML where you don't need to have an closing tag & those are called empty elements.

Ex.:-  

  < br > :- BR stands for line break so that means you're basically putting spaces
between your lines.We don't need to put inside that, its just creating a  line break, so it not requires an end tag.

In next tutorial ,we will do our first web page. see you soon.

---

Note:-  Remember an HTML document is simply a text file. For  this, all you have to use is NOTEPAD.