New YouTube Feature – View as a returning Subscriber

YouTube just pushed a new feature – View as a returning Subscriber. Just like Facebook allows its users to view their profile as public or as a specific person, YouTube now allows YouTube creators to see their YouTube channel as a returning Subscriber.

Here’s how it looks like on my channel:

Screenshot 2015-04-03 23.12.10

Share your thoughts on this new feature in the comments below. And if you haven’t subscribed to The Curious Engineer already, go ahead and check it out.

Edit: Ok I just noticed something, when you browse to the playlist tab of the channel while viewing as a returning subscriber, you can see private playlists in the list as well.

Which is basically like viewing the channel’s playlist tab as yourself and not as a returning subscriber. I guess they’re still working on this! I’ll use the feedback button for now.

How To Validate HTML Form Using JavaScript

In the previous post, I have written about HTML forms. So you know how to create an HTML form but do you know how to validate it? Validation basically means to check if the the form information is valid.

One of the example would be to check if the user has left a required field empty. If he has left the field empty then the user shouldn’t be allowed to submit the form. If the user submits the form by keeping a required field empty then we’ll alert the user with a message and shift the user’s focus or cursor to the empty field.

Suppose we have a simple form which asks the user to enter the first name and last name. The code for the same is given below. We have added the submit button here using the input tag with type as submit.


<form name="yoform" >
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit">
</form>

I assume you don’t need any explanation for the HTML code. Once we have the HTML form ready we’ll create the JavaScript function. Given below is the code for JavaScript function which we’ll use to validate the given form.


<script>

function validateForm()
{

var x = document.yoform.fname;
if (x.value == null || x.value == "")
{
alert("Please enter first name!");
x.focus() ;
return false;
}

var y = document.yoform.lname;
if (y.value == null || y.value == "")
{
alert("Please enter first name!");
y.focus() ;
return false;
}

}

</script>

We have written JavaScript code inside the script tags. The code contains a JavaScript function called validateForm(). Inside this function we have two parts. First part is for fname and the second part is for lname.

In the first part we created a variable x. This variable x points to document > yoform > fname. Then we check if value of x is null or an empty string. If its null or empty then we’ll alert the user by a message and then move the control or focus of the user to x.

Here x is basically the input field called fname inside yoformwithin the document. (document.yoform.fname). So when user leaves the fname field empty and hits submit, he’ll be alerted and the fname field will be focused upon. The same concept is used for second part.

Putting it together

Use the two codes given above in one single HTML file and you’re good to go. You can find the live form here. Try to submit the form keeping the fields empty and you’ll see how it works.

I hope this was helpful. Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

Creating Form, Radio Button, Checkbox and Dropdown in HTML

In this post we’ll see how we can create forms in HTML. The forms can be used to get information from the users. And that information can be of different types.

So we can create simple text areas, radio buttons, check boxes and drop down menus to get information from the user. This information which we will get from the HTML form can be processed later on with programming languages like JavaScript, PHP, etc.

I’ll show you how to use that information using JavaScript and PHP in my upcoming posts. But for now, lets just create the form without worrying about the functionality.

Creating A Simple HTML Form

To create form you’ll have to use the form tag in HTML. Inside the form tags you can create an input field using the input tag. Now the input can be of different types. For this example, we’ll use a simple text input.


<form name="MyForm" action="SomeFile.html" method="get" >
Enter Country: <input type="text" name="Country" />
</form>

Enter Country:  

Explanation – We have used form tag to create an HTML form. We have used name, action and method as form attributes.

  1. The attribute name defines the name of this form.
  2. The attribute action defines the file which the browser should open when the form is submitted.
  3. The attribute method defines the way in which the information should be sent.

Just ignore the form attributes for now. We’ll look into that in another post. Inside the form tags we have used input tag. The input tag defines an empty field. We have used two attributes with input tag.

  1. The type attribute defines the type of input.
  2. The name attribute defines the variable name. name=”abc” is almost same as $abc = <user input> or String abc = <user input>. I hope you get the idea.

Password Field

Instead of using simple input box, we can use a special type of input box for Passwords. In this way the password will be hidden when entered. You have to change the type to password to create a password field.


&lt;form name="MyForm" action="SomeFile.html" method="get" &gt;
Enter Password: &lt;input type="password" name="UserPassword" /&gt;
&lt;/form&gt;

Enter Password:

Radio Buttons

Radio buttons are useful when you want the user to select one option from many. For example, Radio buttons can be used to get information about gender of the user. The user can choose only one option – male or female.


&lt;form name="MyForm" action="SomeFile.html" method="get" &gt;
&lt;input type="radio" name="sex" value="male"&gt; Male &lt;br/&gt;
&lt;input type="radio" name="sex" value="female"&gt; Female &lt;br/&gt;
&lt;/form&gt;

Male
Female 

When we type name=”sex” value=”male”, it is almost same as saying sex=”male”. Here we cannot select both radio buttons because there is only one name but two values. And name can only have one value at a time.

But if these two radio buttons have different name attribute then you’ll be able to select both radio buttons. You can see the live example below.


&lt;form name="MyForm" action="SomeFile.html" method="get" &gt;
&lt;input type="radio" name="sex" value="male"&gt; Male &lt;br/&gt;
&lt;input type="radio" name="gender" value="female"&gt; Female &lt;br/&gt;
&lt;/form&gt;

Male
Female 

Check Box

Like radio buttons, you have something called as Check box in HTML. Using check box you can allow user to select multiple options from the list.


&lt;form name="MyForm" action="SomeFile.html" method="get" &gt;
Which languages do you know?
&lt;input type="checkbox" name="mybox" value="php"&gt; PHP &lt;br/&gt;
&lt;input type="checkbox" name="mybox" value="javascript"&gt; JavaScript &lt;br/&gt;
&lt;/form&gt;

Which languages do you know?
PHP
JavaScript 

Use the same name attribute for a list of check box. This is like having a box called “mybox” and putting all the selected items into “mybox”. Now when we open the box called “mybox”, you’ll be able to retrieve all the items inside that box.

Drop Down Menu

You can create a drop down menu using select and option tags. Suppose you want the user to choose from Windows, Linux, Mac. You can create a drop down menu for that using the following code –


&lt;select name="OPSYS" &gt;
&lt;option value="WIN" &gt; Windows &lt;/option&gt;
&lt;option value="LIN"&gt; Linux &lt;/option&gt;
&lt;option value="MAC"&gt; Mac &lt;/option&gt;
&lt;/select&gt;

The concept is almost the same. The value of selected option will be set to the name of menu. In this case, if we select Linux from the drop down then variable OPSYS will be set to LIN as follows: OPSYS=”LIN”.

I hope this was helpful. Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

Using Cascading Style Sheet In HTML

Cascading Style Sheet is something which you can use to style up your HTML documents. CSS comes in three types – Inline CSS, Internal CSS and External CSS. We’ll cover all these types in this post.

We will use basic CSS styles like background-color, font-family, font-size, border, padding, margin. We’ll not go into detailed explanation of how these properties work. For now, we’ll just focus on how Inline, Internal and External style sheet works.

Inline CSS

Inline CSS is basically the styles which you can use inside the tag without any kind of selector or hook. For now just ignore the words like selector. All you need to know is that Inline styles are used with the help of style attribute in the HTML Tag. Check the example given below.


&lt;div style="background: lightblue;
font-family: Segoe UI;
font-size: 12px;
border: 2px solid black;
padding: 10px;
margin: 10px;" &gt;

&lt;p&gt; Hello World &lt;/p&gt;

&lt;/div&gt;

Using CSS in HTML

This is a simple example of Inline CSS. In the code given above we have applied Inline styles to div tag of HTML document. So everything within the opening div tag and closing div tag will acquire the properties of style attribute.

Internal CSS

If we had to use the same styles as Internal CSS then we’ll have to make some changes and move the styles into the header of HTML Document. Also the role of selector or hook comes into picture now. First check the code given below with the result.


&lt;head&gt;
&lt;style&gt;
.mystyle {
background: lightblue;
font-family: Segoe UI;
font-size: 12px;
border: 2px solid black;
padding: 10px;
margin: 10px;"
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="mystyle"&gt;
&lt;p&gt; Hello World &lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;

Using CSS in HTML

The output would be same because we’re just switching the ways to use CSS and not changing the actual code. So what is really different in Internal CSS ? Let’s understand by looking at the changes which we made between the two codes given above.

As you can see, we have used a class selector (class begins with .) named .mystyle and added all the styling properties inside curly brackets which we had previously used inside style attribute.

Then we simply removed style attribute from div tag and added the class selector with label mystyle. So basically the browser understands div element should contain the properties of mystyle class. That’s how you can use Internal CSS.

So in Internal CSS, we define the class and group the styles inside the class. Then we can apply all these styles to any HTML element by adding that particular class label to that element.

External CSS

In External CSS, everything is almost the same but we just have to make a completely separate CSS file for storing all the style sheet information. In this way if you have about hundreds of HTML pages then you can simply change their style information by accessing one single file. So in short, one CSS file to style up many HTML pages.

Now let’s create two files. One is style.css and other is test.html. The code for these two files is given below. Make sure you put these two files in the same folder to get it to work.

Style.css


.mystyle {
background: lightblue;
font-family: Segoe UI;
font-size: 12px;
border: 2px solid black;
padding: 10px;
margin: 10px;"
}

Test.html


&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="mystyle"&gt;
&lt;p&gt; Hello World &lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;

The result remains same. But for External CSS, we have created two files. One file contains the styling information while the other file is the main HTML page.

In the HTML page, we just replaced the style tag with link tag. So basically instead of filling the page with styling information, we are linking the file to get the styling information.

Here the link tag will tell the browser to use stylesheet information from style.css which is of the type text/css and the relation is stylesheet.

I hope you get the idea of Inline, Internal and External CSS. Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

Creating Lists in HTML

In HTML you can create lists using the <li> tag. There are two types of lists in HTML, Ordered lists and Unordered lists. In Ordered list, every item is marked with numbers. While in Unordered list, items are marked with bullets.

Unordered Lists

All the items in an Unordered list will be marked with bullets (or certain symbols).  The Unordered list is represented by <ul> tag. Check the example given below to understand how Unordered lists work in HTML.


&lt;ul&gt;
&lt;li&gt;Google&lt;/li&gt;
&lt;li&gt;Facebook&lt;/li&gt;
&lt;li&gt;YouTube&lt;/li&gt;
&lt;/ul&gt;

Unordered list in html
Unordered list – Default Disc Type

In the example above, you can see that we have used <li> tags to insert items into the list. Also all the items are then enclosed within opening and closing <ul> tags.

Type Attribute Of Unordered Lists

In the example given above, You can see that the bullets are disc shaped. The default type of bullets are disc.

However you can make them square or circle according to your wish. To do that, you can use the attribute type for <ul> tag. Check the example given below.


&lt;ul type="square" &gt;
&lt;li&gt;Google&lt;/li&gt;
&lt;li&gt;Facebook&lt;/li&gt;
&lt;li&gt;YouTube&lt;/li&gt;
&lt;/ul&gt;

&lt;ul type="circle" &gt;
&lt;li&gt;Gmail&lt;/li&gt;
&lt;li&gt;Ymail&lt;/li&gt;
&lt;li&gt;Hotmail&lt;/li&gt;
&lt;/ul&gt;

Unordered List – Square and Circle

Ordered Lists

All the items in Ordered lists will be marked with numbers. The Ordered Lists are represented by <ol> tag. Check the example given below to understand how Ordered lists work in HTML.


&lt;ol&gt;
&lt;li&gt;Windows 8&lt;/li&gt;
&lt;li&gt;Windows 7&lt;/li&gt;
&lt;li&gt;Windows XP&lt;/li&gt;
&lt;/ol&gt;

Ordered List
Ordered List

In the example above, you can see that we have used <li> tags to insert items into the list. Also all the items are then enclosed within opening and closing <ol> tags.

Start Attribute in Ordered List

You can specify the number with which the list should start using the Start attribute. Check the example given below.


&lt;ol start="5" &gt;
&lt;li&gt;Windows 8&lt;/li&gt;
&lt;li&gt;Windows 7&lt;/li&gt;
&lt;li&gt;Windows XP&lt;/li&gt;
&lt;/ol&gt;

Start Attribute
Start Attribute

Type Attribute in Ordered List

You can specify the type of numbering in the list. The types can be numerical, alphabetical (lowercase or uppercase), capital roman, small roman, etc. Check the example given below.


&lt;ol type="1" &gt;
&lt;li&gt;Windows 8&lt;/li&gt;
&lt;li&gt;Windows 7&lt;/li&gt;
&lt;li&gt;Windows XP&lt;/li&gt;
&lt;/ol&gt;

&lt;ol type="a" &gt;
&lt;li&gt;Windows 8&lt;/li&gt;
&lt;li&gt;Windows 7&lt;/li&gt;
&lt;li&gt;Windows XP&lt;/li&gt;
&lt;/ol&gt;

&lt;ol type="A" &gt;
&lt;li&gt;Windows 8&lt;/li&gt;
&lt;li&gt;Windows 7&lt;/li&gt;
&lt;li&gt;Windows XP&lt;/li&gt;
&lt;/ol&gt;

&lt;ol type="I" &gt;
&lt;li&gt;Windows 8&lt;/li&gt;
&lt;li&gt;Windows 7&lt;/li&gt;
&lt;li&gt;Windows XP&lt;/li&gt;
&lt;/ol&gt;

&lt;ol type="i" &gt;
&lt;li&gt;Windows 8&lt;/li&gt;
&lt;li&gt;Windows 7&lt;/li&gt;
&lt;li&gt;Windows XP&lt;/li&gt;
&lt;/ol&gt;

Types Of Ordered List
Types Of Ordered List

In this way you can use the start attribute and the type attribute for ordered lists. You can also use these attributes together in one single list.

For instance, if you want to create a ordered list with uppercase alphabets and starting with symbol E then you can use the code given below:


&lt;ol type="A" start="5"&gt;
&lt;li&gt;Windows 8&lt;/li&gt;
&lt;li&gt;Windows 7&lt;/li&gt;
&lt;li&gt;Windows XP&lt;/li&gt;
&lt;/ol&gt;

Using Start and Type Attribute Together
Using Start and Type Attribute Together

You can test all these codes in the Codefap Online HTML Editor. Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Everything about Tables In HTML

In this post, I’ll explain the very basics about tables in HTML. You will learn about how to add table border, spacing, padding, colspan, rowspan, etc.

To create a table in HTML you’ll need the following tags – <table>, <tr>, <td>. The <table> tag represents a HTML table. <tr> tag represents a row inside table. <td> tag represents a cell within a row.

Creating A Simple HTML Table

Given below is the code to create a very basic HTML table. This code creates a HTML table with a single row and 2 columns.


&lt;table&gt;

&lt;tr&gt;
&lt;td&gt; Row 1 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 1 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;

The result will be somewhat as shown below. It doesn’t look like a table because there is no table border. So we will add table border in our next step.

HTML Table

Border Attribute

You can add table border using the attribute border. In the code given below, i have added a table border of size 2 pixels. You can set this value according to your wish.


&lt;table border="2px" &gt;

&lt;tr&gt;
&lt;td&gt; Row 1 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 1 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;

HTML TABLE BORDER

We got the table border but the content in this table is too tightly packed. So lets add some padding to it.

Cell Padding Attribute

The cellpadding attribute in table will basically add some space between the text and the cell border (not the table border). And you can set the amount of space in pixels.


&lt;table border="2px" cellpadding="10px" &gt;

&lt;tr&gt;
&lt;td&gt; Row 1 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 1 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;

Cell Padding

Now you know whats cellpadding but then what is cellspacing? Lets check it out.

Cell Spacing Attribute

The cellspacing attribute in table will add some space between the cell border and the table border. You can set the amount of space in pixels.


&lt;table border="2px" cellpadding="10px" cellspacing="20px" &gt;

&lt;tr&gt;
&lt;td&gt; Row 1 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 1 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;

Cell Spacing

Cell Background Color

To add background color to a particular cell, we will use style attribute. Inside the style attribute we will have background property with some value. Check the code given below.


&lt;table border="2px" cellpadding="10px" cellspacing="20px" &gt;

&lt;tr&gt;
&lt;td style="background: yellow" &gt; Row 1 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 1 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;

Cell Background Color

This code turns background color of Cell 1 into yellow. You can try and change it to red or any color of your choice. In the same way you can add color to any other cell.

Adding Multiple Rows

You can add multiple rows by using <tr> tag. Previously we had just one pair of <tr> tag, now lets add two pair of <tr> tags. This will create two rows.


&lt;table border="2px" cellpadding="10px" cellspacing="20px" &gt;

&lt;tr&gt;
&lt;td style="background: yellow" &gt; Row 1 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 1 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt; Row 2 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 2 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;

Multiple Rows in HTML TABLE

Table Header

Apart from tr and td, there’s one more tag called the th (table header) tag. You can use it to make the text bold or strong. Check the code given below.


&lt;table border="2px" cellpadding="10px" cellspacing="20px" &gt;

&lt;tr&gt;
&lt;th&gt; Row 1 - Cell 1 &lt;/th&gt;
&lt;th&gt; Row 1 - Cell 2 &lt;/th&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt; Row 2 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 2 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;

HTML TABLE HEADER TAG

We have learned a lot about tables in this post. Now only two things are remaining – rowspan and colspan attribute of cells.

Row Span

The rowspan attribute of table data (td) tag will convert the cell to occupy multiple rows. For example, if rowspan is 2 for a particular cell then that cell will occupy 2 rows.


&lt;table border="2px" cellpadding="10px" cellspacing="20px" &gt;

&lt;tr&gt;
&lt;td rowspan="2"&gt; Row 1 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 1 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt; Row 2 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 2 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;

HTML ROW SPAN 2

Col Span

The colspan attribute of table data (td) tag will convert the cell to occupy multiple columns. For example, if colspan is 2 for a particular cell then that cell will occupy 2 columns.


&lt;table border="2px" cellpadding="10px" cellspacing="20px" &gt;

&lt;tr&gt;
&lt;td colspan="2"&gt; Row 1 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 1 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt; Row 2 - Cell 1 &lt;/td&gt;
&lt;td&gt; Row 2 - Cell 2 &lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;

HTML COL SPAN 2

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Adding Images And Links To HTML Document

In this post we will see how to add images and links to our existing HTML document. This is very simple but i’ll try to show you more details about the same.

To add any image or link you will need Attributes. A Attribute in HTML is something which gives more information about a particular tag. So image tag (img) can have a attribute (src) which gives information about the location of image. Also anchor tag (a) which is basically a link, can have attribute (href) which gives information about destination web page.

Directory

Before we start to add Images or Links, I’ll create some set of folders in C drive. The directory and contents of these folders are displayed in the image given below.

directory

NOTE – We are inside the main directory and we are working on the document MAIN.html. All the codes given below in this post will be added only to MAIN.html.

Adding Image In HTML

You can add images using the image tag given below. Note that image tag has no closing tag but there’s a forward slash at the end of the tag. Also you can see the tag has SRC attribute which basically means SOURCE. We have to specify the source of image file.


&lt;title&gt; MAIN &lt;/title&gt;

&lt;img src="LINK_GOES_HERE" /&gt;

We are currently in MAIN folderMAIN.html directory. We can display A.JPG, B.JPG, C.JPG and D.JPG image using the code given below. Also at the very end, i have displayed an image from the web.


&lt;title&gt; MAIN &lt;/title&gt;

&lt;h3&gt; Images &lt;/h3&gt;

&lt;img src="A.JPG" /&gt;

&lt;img src="PROGRAMSB.JPG" /&gt;

&lt;img src="PROGRAMSJAVAC.JPG" /&gt;

&lt;img src="D:IMAGESD.JPG" /&gt;

&lt;img src="http://1.bp.blogspot.com/-hXJpiNe4aJs/Uj0izJNsPSI/AAAAAAAASjw/E5z5HyKyxxA/s1600/google-plus-logo-tilt-100x100.png" /&gt;

Note that – To add a image from the web, we have used HTTP protocol. If we remove the HTTP part, the browser will search for the image inside the same folder in which the current HTML document is present. Also we have used forward slash instead of backward slash for fetching the source from the web.

Title Attribute For Image Tag

Did you notice that D.JPG is not present and thus the image will not be displayed. We can add title attribute to describe the image. So even if the image doesn’t show up, user can move the cursor over the image area and a title will be displayed.


&lt;title&gt; MAIN &lt;/title&gt;

&lt;h3&gt; Images &lt;/h3&gt;

&lt;img src="A.JPG" title="Image A" /&gt;

&lt;img src="PROGRAMSB.JPG" title="Image B" /&gt;

&lt;img src="PROGRAMSJAVAC.JPG" title="Image C" /&gt;

&lt;img src="D:IMAGESD.JPG" title="Image D" /&gt;

&lt;img src="http://1.bp.blogspot.com/-hXJpiNe4aJs/Uj0izJNsPSI/AAAAAAAASjw/E5z5HyKyxxA/s1600/google-plus-logo-tilt-100x100.png" title="Image from Google" /&gt;

html title

Adding Text Links In HTML

Similarly we can add Links in HTML. The only differences are – we have a tag and href attribute instead of img and src. And a tag has closing tag.  We can enclose any text or image between opening anchor tag and closing anchor tag and it will turn into a link.


&lt;title&gt; MAIN &lt;/title&gt;

&lt;h3&gt; Text Links &lt;/h3&gt;

&lt;p&gt; &lt;a href="A.JPG"&gt; Open A Image &lt;/a&gt; &lt;/p&gt;
&lt;p&gt; &lt;a href="X.HTML"&gt; Open X Document &lt;/a&gt; &lt;/p&gt;
&lt;p&gt; &lt;a href="PROGRAMSY.HTML"&gt; Open Y Document &lt;/a&gt; &lt;/p&gt;
&lt;p&gt; &lt;a href="PROGRAMSJAVAZ.HTML"&gt; Open Z document &lt;/a&gt; &lt;/p&gt;
&lt;p&gt; &lt;a href="http://www.google.com/"&gt; Open Google &lt;/a&gt; &lt;/p&gt;

I have added paragraph tags here because i want to links to appear on different lines and not on one single line.

Creating Image Links

Once you know how to add images and links to HTML document, you can easily create a image link. To do so, we will insert image between opening anchor tag and closing anchor tag.


&lt;a href="DESTINATION_URL"&gt; &lt;img src="IMAGE_LOCATION" /&gt; &lt;/a&gt;

I’ll add A.JPG, B.JPG and C.JPG and link them to X.HTML, Y.HTML and Z.HTML respectively. So when i click on A.JPG, the browser will open X.HTML web page.


&lt;title&gt; MAIN &lt;/title&gt;

&lt;h3&gt; Image Links &lt;/h3&gt;
&lt;p&gt; &lt;a href="X.HTML"&gt; &lt;img src="A.JPG" title="Image A" /&gt; &lt;/a&gt; &lt;/p&gt;
&lt;p&gt; &lt;a href="PROGRAMSY.HTML"&gt; &lt;img src="PROGRAMSB.JPG" title="Image B" /&gt; &lt;/a&gt; &lt;/p&gt;
&lt;p&gt; &lt;a href="PROGRAMSJAVAZ.HTML"&gt; &lt;img src="PROGRAMSJAVAC.JPG" title="Image C" /&gt; &lt;/a&gt; &lt;/p&gt;

Source Code

I have uploaded the files required for this post in zip format on dropbox. Just download the file and extract it in your C drive. You can then open main.HTML in web browser. Also you can play around with the code if you want to.

Download Link – Dropbox

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

The Basics Of HTML Language

In this post, i’ll try to cover up all the basics of HTML (Hyper Text Markup Language). Markup word itself means that there are certain set of symbols and rules.

There are tags in html. Almost all tags come in pairs (opening tag and closing tag) but there are some exceptions. Lets get started by creating a simple HTML document.

Creating simple HTML document

To create an HTML file or document, all you need is NOTEPAD. You don’t need any complex tools for HTML. But i’ll highly recommend you to use notepad++ for coding.

  1. Open Notepad file
  2. Type in some text like – Hello World
  3. File > Save as > Save as type – All Files
  4. Enter file name as helloworld.html
  5. Click save. (preferably save it on desktop)

Hello World

HTML Hello WorldOpen helloworld.html in web browser and you’ll see Hello World in the website content. But you can also see the title says helloworld.html. But i want it to show up Learning HTML. So lets add title.

Adding title to HTML document

  1. Open the helloworld.html in notepad++
  2. Add <title> Learning HTML </title> above the text Hello World inside this document
  3. Save the file and Open it in web browser.

&lt;title&gt; Learning HTML &lt;/title&gt;

Hello World

title htmlYou can now see Learning HTML in the title bar. We created simple HTML document but lets dress it up with rules.

Dressing it up

We will just add more stuff like opening and closing HTML tags at the top and bottom to represent that its an HTML document. All the page content and rest of the tags will go between opening <html> tag and closing </html> tag.

HTML document is basically divided into two parts – the Header and the Body. So we will add head and body tags just like we added HTML tags. And title tag always goes inside header part, so it comes between head tags. Check below.


&lt;html&gt;

&lt;head&gt;
&lt;title&gt; Learning HTML &lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
Hello World
&lt;/body&gt;

&lt;/html&gt;

Formatting Basics

You can format the text into bold, italic, underlined, strikeout, etc. Copy paste the code below in your helloworld.html, save it and open it in the browser to see how it works.


&lt;html&gt;

&lt;head&gt;
&lt;title&gt; Learning HTML &lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
Hello World.
I am &lt;s&gt;not&lt;/s&gt; &lt;i&gt;learning&lt;/i&gt; &lt;b&gt;HTML&lt;/b&gt; &lt;u&gt;language&lt;/u&gt;
&lt;/body&gt;

&lt;/html&gt;

Formatting in HTML

What you can notice in the screenshot above is that i have written text on two different lines but still the browser shows the entire text on one single line. Why does that happen?

Paragraph tags in HTML

This happens because we didn’t tell the browser that these are two different paragraphs. To represent these lines as two separate paragraphs, we will need to enclose the text in paragraph tags as shown below.


&lt;html&gt;

&lt;head&gt;
&lt;title&gt; Learning HTML &lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;Hello World.&lt;/p&gt;
&lt;p&gt;I am &lt;s&gt;not&lt;/s&gt; &lt;i&gt;learning&lt;/i&gt; &lt;b&gt;HTML&lt;/b&gt; &lt;u&gt;language&lt;/u&gt; &lt;/p&gt;
&lt;/body&gt;

&lt;/html&gt;

Paragraph tags in html

Headings in HTML

You can add headings to the paragraphs in HTML. There are SIX types of headings in HTML (from h1 to h6). To test heading tags, try to code given below.


&lt;html&gt;

&lt;head&gt;
&lt;title&gt; Learning HTML &lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;Hello World.&lt;/p&gt;
&lt;p&gt;I am &lt;s&gt;not&lt;/s&gt; &lt;i&gt;learning&lt;/i&gt; &lt;b&gt;HTML&lt;/b&gt; &lt;u&gt;language&lt;/u&gt; &lt;/p&gt;
&lt;/body&gt;

&lt;h1&gt; HTML is Awesome &lt;/h1&gt;
&lt;h2&gt; HTML is Awesome &lt;/h2&gt;
&lt;h3&gt; HTML is Awesome &lt;/h3&gt;
&lt;h4&gt; HTML is Awesome &lt;/h4&gt;
&lt;h5&gt; HTML is Awesome &lt;/h5&gt;
&lt;h6&gt; HTML is Awesome &lt;/h6&gt;

&lt;/body&gt;

&lt;/html&gt;

headings in html

That’s all in this post. I hope this helps. We will see more about HTML images, links, etc in the next post. Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Zoom In And Out Of Websites Quickly In Google Chrome

This post is a short tip on how to Zoom in and out of websites quickly in Google Chrome. This must work on almost every other browser like Internet explorer or Mozilla Firefox.

Lets say you brought a new high resolution big screen monitor. And now all these websites appear so tiny and the text is very difficult to read. But don’t worry, you can zoom in and out using the keyboard shortcuts.

These keyboard shortcuts will be very useful for day to day tasks and make your browsing experience easy.

  1. For zooming in the website just hit Control and + (plus) key on the keyboard.
  2. For zooming out, hit Control and – (minus) key on the keyboard.
  3. To reset zoom back to normal, just hit Control and 0 (zero) key on the keyboard.

Note that, you can also zoom in and out by holding the CTRL key and using the mouse scroll.

I hope this is helpful. Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

How To View Email Subscribers List In FeedBurner

Most of you use feedburner for sending out feeds to your subscribers. Some people have asked me if they can view the complete list of email subscribers in feedburner.

The answer is yes. You can view the entire list of email subscribers in feedburner. Also you can see how many of them are verified/active subscribers.

To check this list of email subscribers, just follow the steps given below –

  1. Log in to your Feedburner account
  2. Select the feed title from the list.
  3. Click on Publicize tab.
  4. From the services list, Click on Email Subscriptions.
  5. Now scroll the page and select View Subscriber Details.
  6. This will show up the full list of email subscribers for your feedburner account.

You can also export this list of email subscribers from feedburner account to any other rss feed service. Right after you click on ‘View Subscriber details’, you can see an option for Export: CSV.

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.