HTML Tutorial – 8 (Tables and comments in HTML)

HTML Tutorial – 8(Tables and comments in HTML)

Hello Everyone. Now we have how we can attach other webpages to this webpage by using <a> tag. Today we are going to learn Tables. Tables play very important role in designing a webpage, even in during early google and internet whole website was built using tables in different shapes.

So lets start, tables are basically inserted into a webpage using <table> tag. This is double tag which has separate opening and closing tag </table>. As you all know you can change the properties of the table after pressing a space inside the opening tag, like width , heath  etc.

When <table> tag is started then you have to put a row in the table and then you will have to devide that row into number of columns you want. You have to put <tr> in between opening and closing tags, remember <tr> is a double tag so you have to close </tr> also.

Now you have created a row in the table now will devide the row into several columns by using <td> tag in between the opening and closing <tr> tag. <td>is also a double tag. Its not that difficult really.

Lets have a practical:-

Output:-

You can see the results, you can see columns are printed but there is no border around them, so you have to use border property inside the opening table tag which we will see in our Next Tutorial. You can see there some text written like <!—Now starting 2^nd row !-->. These are called comments. Anything that is a comment browser will not read it. Its just for your understanding. We will also discuss this in our Next Tutorial. So please practice this a little… have fun. bye

Previous Tutorial

HTML Tutorial – 7 (Links OR Anchor tag in HTML)

HTML Tutorial – 7(Links OR Anchor tag in HTML)

Hello everyone, hope you are all in good health. Today we are going to talk about one of the most important thing in a webpage called Links.
What are links? Links are basically paths which lead to another webpage in a website having other specific information. Tag we use to link pages is <a>, this tag has two parts and different from other tags we have already studied.
In <a> tag, we have to use a property in starting tag called “href” to browse the page we are going to attach in this link. And then text that appears as links name is added between <a> and </a>.

The output will be.

Previous Tutorial

HTML Tutorial – 6 (Images and Paragraphs in HTML)

HTML Tutorial – 6

(Images and Paragraphs in HTML)

Hello everyone. Hope you are in best of your health. Our HTML tutorials are going well, I am sure you have practiced about what you have learned so far because for a programmer practice is very very important. Practice makes a man perfect, it is true.

Till now we have learned how we can style text in HTML so we can now easily start to use text in many other tags like link names and image names and inserting other text information.

Today we are going to learn how to add a paragraph using <p> tag and how to insert an image into a webpage using <img> tag. So lets begin, <p> tag is used to insert a paragraph into a page simply. It goes like this, <p>”all the paragraph text goes here”</p> for example:-

As you can see text in both paragraphs are automatically separated and printed in two separate lines.

The other tag we are going to learn is <img>. This tag is used to insert an image in the page. This is a single tag means it has no closing tag. So all the stuff we have to do with the image is inside < > these arrow brackets, I mean the properties of the <img>  tag. Just give a space into <> these brackets after img and you will see a list of properties, one of them is src it means source. This property determines the address where the image is located in the hard drive. When you type src and press enter in Dreamweaver to browse the image simply or type <img src=”path of the image”> it will attach the image to the webpage. You can also use height, width and title property in img tag to define a specific size of the image and give it a name like:-

Output will be like this, note the test in the corner of the image, it is here because my mouse pointer was there when I captured this snapshot. Test and try other properties of the tag. Thanks for reading. 

Previous Tutorial                                                                                                                Next Tutorial

HTML Tutorial – 5 (Styling Text in HTML) Bold, Italic, And Font Tag

HTML Tutorial – 5

(Styling Text in HTML)

Hello Everyone, in this tutotial we are going to learn about how you can simply style text in HTML. I mean how you can make text bold, italic or both, how you can change text color or font style etc.

Text display requirements are not always same. Sometimes we need specific colored text so we make it by special tags and their properties in HTML.

So let’s start, to make text bold we use <b> tag and to make text italic we use <i> tag. We can use both tags at once to get bold italic effect.

If you want to make any other modifications you have to use <font> tag in HTML.

When you press a space inside the starting tag you can see the list of its properties in an Advanced editor like Dreamweaver (You cannot see these helpful options in Notepad) you can select any property from there to make your tag modified according to your needs.

Like I have made some changes in the text inside font tag. Our Output will be:

As you can see properties I selected and modified took effect text in font tag. So now open your editors and practice it a little. Ask me if you have any question about it. Thank you for reading


Previous Tutorial                                                                                                                 Next Tutorial

HTML Tutorial – 4 (Learning about Headings in HTML)

HTML Tutorial – 4

(Learning about Headings in HTML)

Hello Everyone. Hope you are in good health. Today I am going to tell you about some text handling in HTML. My tutorials might be very slow in speed but they are very helpful to learn HTML with good base, because HTML is the core language of web developing so I am focusing to make it strong.

So let’s start. Headings are very common thing in everyday’s text work, so HTML offers so quick shortcut tool to make your text Heading by putting just one tag called <h1>. This tag will give your text a specific size and weight. What if you don’t want that much big heading?

Then HTML has its solution too, it offers similar tags like: <h2>, <h3>, <h4>, <h5>, <h6>. These tags assign predefined size and weight to your text. <h1> is the biggest heading and <h6> is the smallest heading tag.

Here is how we will type it into the editor:

Here is how it will be shown in the browser:

If you have any question or suggestion please let me know in the comments below, I’d love to hear from you. Thanks for reading.

Previous Tutorial                                                                                            

HTML Tutorial – 3 (What are different Tags in )

HTML Tutorial – 3

(What are different Tags in <HTML?>)

Hello Everyone.

As I said in my previous tutorial that “<Tags>” are special way of HTML to input data into a web HTML offers many tags to handle data completely in the website. As you may have seen many websites, some of them are Simple Text pages, some of them are social networking, some show images and some are video streaming websites. I am glad to tell you that all of them are built in HTML and other basic languages we discussed earlier.

So don’t think HTML is not that much important in the internet world. HTML is the base. So lets start from where we left.

HTML document (Or file, Or webpage) body consists of many sections. And specific tags allow us to manage and create those sections in the HTML Document. Few of the very basic sections are <Head>, <Body> and <Title>. As you can see in the Snapshot below there is <Head> tag in which <title> tag is embedded. Then </head> tag closes and <body> tag starts. All the content of the website goes into Body tag. Head tag is used many other important function which we will see later. <title> tag is used to give webpage a name and this name is displayed on the tab of the web browser.

There are many other tools that are used to manage and organize data inside <body> tag which we will be studying in out HTML course. Thanks for reading.

Previous Tutorial                                                                                                             Next Tutorial

HTML Tutorial – 2 (Introduction to HTML)

HTML Tutorial – 2

(Introduction to HTML)

What is HTML and Why is it so Important to learn web developing?

It’s simple answer is it is a standard system for making the core of web pages. HTML is the base of a web page, and is one of basics of all the programming languages too. Because if you know HTML you have good chance to learn other advanced programming languages too.

Before starting practicing HTML on a computer you must know which programs you can use to create a HTML document. There are many kinds of HTML editors available. You can simple use any kind of text editor like notepad on your computer for this purpose. All you have to do is save your file with file.html extension. Or you can use more advance editor like NOTepadd++ and Dreamweaver.

Just make a new notepad file and save it with .html extension or if you are using more advanced editor like Dreamweaver click on file>new>Html and then hit create at the bottom. Just go ahead and erase everything prewritten on the page. And before writing anything read this tutorial till the end.

So let’s start HTML. HTML basically works on “Tags”. A Tag is a special format to input data into HTML to show it in a web page. A tag starts with <anyelement> and ends with </anyelement>. And very first tag of HTML that is used in a web page or also called file is <HTML>. HTML tag starts with <HTML> and ends with </HTML> at the end of the file. All the web page code is written within this tag. Like:-

Like I said earlier all the code of a webpage goes into these <html>”Type anything here”</html> tags. Type and save it and open the file with any web browser( OR you can use Preview or world icon in Dreamweaver. Lets test our first webpage:-

 Output in the browser:

So we have learned basic tag and how to start HTML coding. we will see in your next tutorial how you will add other tags in the document and what will those tags do. 

Previous Tutorial                                                                                                              Next Tutorial

HTML Tutorial – 1 (Introduction to Web Developing)

HTML Tutorial – 1

(Introduction)

In this series of Tutorials you will learn Web Developing ie Web developing languages like HTML, CSS, JavaScript and PHP. All these languages are important to build a standard website now-a-days. Little brief intros of all these languages are given below:-

HTML:        HTML or Hyper Text Markup Language is the backbone of web developing. It makes basic shape of a web page and provides a platform for other three to operate and do their job to make a web page more awesome. Current version of HTML is HTML-5.0 and we will be using this version for web development.

CSS:            CSS or Cascading Style Sheet as the name indicates is a styling language. It is used to make fancy look of the web pages by its awesome features. Current version of CSS is CSS-3.0.

JavaScript: JavaScript is basically a scripting language which does small programming features on a webpage. Like small calculations and printing date and time of user computer, etc.

PHP:           PHP is a very useful language to make a dynamic web page that can be interacted by user and can be managed dynamically by the host.

In our next Tutorial we will start with basics of HTML. We will also have practical examples so check my next tutorial for HTML. Please leave comments below if you have any questions.

 Next Tutorial