HTML Beginners Tutorial

Saturday, July 14, 2018

Create table using HTML

Today we are going to look at creating a table using HTML.

Its a quick and easy way for your users to understand the data you are displaying. Tables are made up with data that contain rows and columns.

Now there are four central elements to use when creating a table,

<table> everything is embedded inside of this.
<tr> which identifies it as a row.
<td> which contains the actual data.
<th> which identifies it as a column.

Let's go through all of these and know how to use it,

1) First create a table element <table> and then set up the column's using <tr> element.

2) Then create the columns using <th> tag. Put inside heading's of the column's.

Add caption

3) Create some data to put in those columns, again use table row tag <tr> and now we are going to use <td> tag to hold our data. Add some more data,

Table in HTML

Let's save this and open the web page and here you will notice that the columns heading are put in bold by HTML and the tables are not in bold.

Saturday, July 7, 2018

Adding Link to your web page

In this post, we are going to see how to add links in your web page.

Now, why to add links? the ans is what would your web page without links, well it wouldn't be much. Navigation is a key consideration in to design your website.

so we will begin with adding links to your webpage.

There are two ways to adding links,

Link to a section within your web page
Link to an outside web page

Now, first of all we will see second way, how to link to an outside URL.

Links are added with a anchor element ( <a ) and withing this element we use attribute called ( href ).
href attribute tells the anchor element where the destination is for the link and the destination can be like on the same web page or it can be link to an outside website.

And as we know everything comes under the <body> tag. Under this we have to create <p> paragraph tag, because we need to add some text and sentences inside and around your link.
This text is what you actually displayed to the user.

After this add anchor tag ( <a ), where we actually inserting outside URL path.
After putting href attribute, we are going to put in our outside URL that we want to link to in our web page.

After adding the link before closing the tag you have to put some text and that text becomes the link. So the link which we added does not actually get displayed, what will be displayed as a link is the text that we put after the link.

Let's close both the </a> and </p> tag, save this in HTML format.

Click on the link and you will see we have got our link,

& if i click on that link it should go to my blogger address.

technoostuff

Note:- We need to keep this tag ( <a ) open, we do not use angle bracket here because this is all part of link. Put angle bracket after the link and then close the tag.

Tuesday, July 3, 2018

Ordered & Unordered list in HTML

Hello Friends,

Today we are going to look at Unordered and Ordered lists.
Now lists are pretty much an everyday part of life, we constantly putting together lists. You think of buying a bike and you have to have list of accessories and functions you required in that bike. Similarly you can take example of recipe, for that also first you require list of ingredients, etc.

If you look at virtually, every web page they will always have some sort of list and whether that's menu or just a bullet lists.

Now HTML provides two main ways to do lists, Unordered and Ordered lists.

As we looked at in the previous lessons it's just a simple tag that we need to create.
An Unordered list is created with the <ul> tag and an ordered list is created with the <ol> tag.

In HTML, the Unorderd list is kind of default thing people use when they are designing websites.
Ordered lists are used to a lesser extent.

It is common to both Unorderd and Ordered lists is the <li> element tag.The li element is actually the list item embedded inside either the <ul> tag or the <ol> tag.

1) Unorderd List :-

Remember every thing goes within the body element, so lets go ahead and create <ul> tag.
Let's imagine we are creating menu for our website and we want to sell cloths of kids, men's & women's, so kids, men's & women's comes inside a <li> element.

Unordered list

Let's go ahead and save this as an HTML document and there you see we have got our nice list displayed.

Web page

2) Ordered list :-

It's very similar to the Unordered list, we just have to replace <ul> tag with the <ol> tag.

Ordered tag

Now lets go ahead and save this as an HTML file again.

Web page

There you see the the difference, this is why it called a ordered list because we have numbers there. That's the only difference, <ul> tag creates Bullets while <ol> tag creates numbers.

Note:- By using CSS you will style each one of these tags and creates a lot of different effects.

Saturday, June 30, 2018

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.

Thursday, June 28, 2018

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.

Tuesday, June 26, 2018

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.