Thursday, October 31, 2013

How to use a combobox in html form

Posted By: Unknown on 10:11 PM
Hey guys..so far we have learned how to add textboxes checkboxes,radiobuttons and buttons in a html form..
Today we will learn about combobox,what combobox is and why do we use it for.
A combobox is a list which displays certain items,from that list you can select only one,a combo box opens a dropdown in which the list is displayed and from that you have to select one,for example a if you want to give an option for your users to select a country then you can use a combo box.

<html>
<body>

<select>
  <option value="pakistan">Pakistan</option>
  <option value="japan">Japan</option>
  <option value="india">India</option>
  <option value="china">China</option>
</select>
 
</body>
</html>

This is how combo box will look when you will click on the small arrow facing downwards.
Read More


Wednesday, October 30, 2013

How to add radio buttons in html form

Posted By: Unknown on 11:15 PM
Hey everyone,our topic for today is Radio Buttons.
We will learn how to add radiobuttons in a form,the process is the same as we used in adding checkboxes and textboxes so you will fine it very easy.
The purpose of using radio buttons is that if we want to give user an option to select one out of the all,for example in a registration form we give an option to the user about his/her gender.
Below is the code for using radio buttons.

<html>
<body>

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

</body>
</html>
Read More


Tuesday, October 22, 2013

How to use checkboxes in html

Posted By: Unknown on 9:51 PM
Hey everyone how are you guys,
so far we have learned about forms and how to create a form will textboxes and a button.
Today we will learn to add checkboxes in a form.
The reason for using a checkbox option in a form is if we want to select multiple items for example if we want to give a few options to the person and want him to select one or more than one items from the giving options in the checkboxes and the person selects from it.

<html>
<head>
<body>

<form>
<input type="checkbox" name="option1" value="Car"> Car<br>
<input type="checkbox" name="option2" value="Bike"> Bike<br>
<input type="checkbox" name="option3" value="Truck"> Truck<br>
</form>

</body>
</html>


So above is the code for adding checkboxes in a form,the procedure is the same as the procedure for adding the textbox fields.Anywhere in your website where you want to add checkboxes your will have to follow this procedure which is very simple and i assure your all that your will automatically memorize this after you use it once or twice.
I hope this helps,thank you for reading everyone..next we will learn to add radio buttons to our form.
Read More


Monday, October 21, 2013

How to create an html form

Posted By: Unknown on 8:10 AM
Hey every one how are you..
Today we will learn about forms.A form in html has the same meaning as any form which you fill out on paper.You can create your forms for your website such as a registration form etc.
To start with the basic you should know that the <form> tag is used to create an HTML form and when you are done creating a form your will have to close it as well using </form>

<html>
<body>

 <form>
First name: <input type="text" name="firstname"><br><br>
Second name: <input type="text" name="secondname"><br><br>

 <input type="submit" value="Submit">
</form>
</body>
</html>



So guys what i did above is i just gave 2 fields and a button to send the the data inserted into the fields to somewhere you want it to go.
First i wrote  the title for the fields so that the viewer of the form would know that this fields is for writing the first name or the second name.
Then i started by giving the type of input to be entered in the field which is "text",input data can be integer,float,char,string etc..
And then i gave a name to the field to be identified when you will have to insert it in the database table or to simply display it somewhere.
<br> tag stands for break line,it is used for giving a line space.
In the button I did the same,first i defined the type of input which is the submit,submit is used for submitting data to someplace.
Then i defined the value of the submit button. which will be displayed on the button as well.So this is how you create a form,further we will learn how to use check boxes,combo box,radio buttons and password in an HTML form.
Read More


Saturday, October 19, 2013

How to create ordered list,unordered list and description list

Posted By: Unknown on 5:26 AM
Hey everyone..
The topic for today is HTML List.A list in HTML has the same meaning as any list of items etc.
The 2 most common types of lists in HTML
1. Ordered
2. Unordered

To start an ordered list we use the tag <ol> and then <li> tag to write the name of each item of the list.
To start an unordered list we use the tag <ul> and then <li> tag to write the name of each item of the list.
To start description lists list we use the tag <dl> .Description list is a list of names, with a description of each name.
By using the following tags you can make a list of anything you want.The procedure is very simple you just have to open the <ol> or <ul> tags and inside them define the <li> tag which stands for link and give the name of the item you want to display in the list.
Code of ordered list

<html>
<body>

<h4>List of cars</h4>
<ol>
  <li>Toyota Corolla</li>
  <li>Ferrari</li>
  <li>Volvo</li>
</ol>

</body>
</html>



Code of unordered list

<html>
<body>

<h4>An Unordered List:</h4>
<ul>
  <li>Toyota Corolla</li>
  <li>Ferrari</li>
  <li>Volvo</li></ul>

</body>
</html>


Code of description list

<html>
<body>

<h4>List of cars</h4>
<dl>
<dt>Ferrari</dt>
<dd>-Color red</dd>
<dt>Toyota Corolla</dt>
<dd>- Color White</dd>
</dl>

</body>
</html>
Read More


How to create tables in an HTML document.

Posted By: Unknown on 3:14 AM
Hey everyone how are you
Today we will learn how to make tables in HTML.
A table is made so that you can display your data in a format in rows and columns.Tables are defined by the <table> tag and inside this tag you can start making rows of the table.
So lets get started,a table is divided into rows and each row is divided into data cells.
Table row can be defined by <tr></tr> and a table data cell is defined by <td></td>
<tr> stands for table row and <td> stands for table data.
You can put images,forms,lists etc in the table data.
<th> it defines the current cell as a table header.You can place the heading of the row in this <th> tag.

<html>
<body>

<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Konain</td>
<td>Shehzad</td>
</tr>
<tr>
<td>Arnold</td>
<td>Schwarzenegger</td>
</tr>
</table>

</body>
</html>

As you can notice here that we started with the <table> tag and inside it we write border="1" this defines the border of the table you are creating.
Then comes the <tr> tag which means that now we want to add a row and inside that row we gave the headings first name and last name,after giving the headings you will have to close the </tr> tag.What is opened must be closed.
Now you can notice that i have given the <tr>tag to give a row <tr> stands for table row and then <td> tag table data,and inside it i have written the data which i want to display,in this case i have displayed 2 name.
After putting data in the <td> tag i gave the </tr> tag to close it and then i closed the <table> tag by using </table>
This is how this code will give the output when you will try it.
Read More


how to align text by using CSS.

Posted By: Unknown on 1:24 AM
Hey everyone today we will learn how to align our text by using CSS.
Let me explain what align means in HTML.If you want your heading to appear in the center of the page then you can write align="center" and your text will appear in the center,in the same way you can align your text on left and right side of the page as well.
This is very simple,just copy and paste the code and you will see how you can align the text.

<html>
<body>

 <h1 style="text-align:center;">Blogs</h1>
<p>Hey everyone.</p>

 </body>
</html>

So this is how we align the text,"text-align:" this is the keyword and after the colon you can write where you want your text to appear.
This is how you can align your text on the right or left side.
<h1 style="text-align:left;">Blogs</h1>
<h1 style="text-align:right;">Blogs</h1>
Read More


How to change the font-family, color, and font-size by using CSS.

Posted By: Unknown on 1:08 AM
Hey everyone,today we will learn how to change the font-family, color, and font-size by using css.
This is as simple as simple to learn as it was to change the background color of the page.
So let me give you a small piece of code in which you will see how we can change the or, and font-size by using css.

<html>
<body>
<h1 style="font-family:verdana;color:red;">Styling</h1>
<p style="font-family:arial;color:blue;font-size:30px;">how are you today.</p>
</body>
</html>

Just copy and paste this code and you will see how easy it is to work with CSS.
First I gave style to my heading,in which I defined the font family which i wanted,you can keep which ever you like.And then I defined the color of the text.
Secondly I styled my paragraph in the same way i did within the heading tag,the only additional thing you will notice here is the size of the text.
So this is how we can style our web content.
Read More


How to change the background color

Posted By: Unknown on 12:49 AM
Hey everyone how are you all today
Today we will learn about cascading style sheets (css),just the basics.

What Cascading Style Sheets (CSS) is?

It is a simple procedure for adding style for example fonts, colors, spacing to your Web documents.By using CSS you can change the font color font size,change the background color and do a lot more.

Lets start with the very simple code,in this example we will change the background color of the document.

<html>
<body style="background-color:blue;">

</body>
</html>
So what we did here is very simple,start with the html and body tag.Now as you know that the body tag defines the body of the document so we will write the background color of the document inside the body tag.
style="background-color:yellow;"
Style is used just to define that we are starting to style our web page and then equals to the keyword which is background-color: and after colon you write the name of the color you want in the background.So this is how we gave style to our document and changing the background color of the web page.
Read More


Define head tag,title tag,base tag,meta tag,script tag and style tag.

Posted By: Unknown on 12:24 AM
Hey everyone,today we will learn about head tag,title tag,base tag,meta tag,script tag and style tag.

<head> This tag defines the information about the document.This tag is usually placed beneath the HTML tag at the beginning.

<title> This tag defines the title of a document which means if you want to give a title to your page which it should display in the tab of your browser then you can give a name to your page by using this tag just write <title>Name of the page</title>

<base> This tag defines a default address or a default target for all links on a page

<link> This tag defines the relationship between a document and an external resource,you can place a link on your page so that when one clicks on it the browser opens up new page.

<meta> This tag defines meta data about an HTML document.

<script> This tag defines a client-side script.

<style> This tag defines style information for a document,if you want to use cascading style sheets (CSS) in your website then you can do the styling by using the style tag.
Read More


Monday, October 14, 2013

How to give font styles

Posted By: Unknown on 11:52 AM
Hey everyone how are you all today
The topic for today is how can we change the font style?

This is very very very simple guys you don't need to worry about it.After reading this post you all will be able to change font style like you do in your notepad etc.
So the 5 main font styles are

Bold: Your text will appear in bold,very much prominent 
Italic: Your text will appear in italic format.
strong: This is used for the text which for users to be aware that the written text is important
emphasized: This is also a format for users to understand as important.
code: Text will appear as the output of the computer.
<html>
<body>

<p><b>Text will appear in bold</b></p>
<p><strong>Text will appear as strong</strong></p>
<p><i>Text will appear in italic</i></p>
<p><code>This is the format how the computer gives the output</code></p>
<p><em>Text will appear as emphasized</em></p>


</body>
</html>


Very simple guys,just open the html and body tags,give the paragraph tag,because your will be writing a paragraph,you can also style headings in the same way.
now give the tags and write the sentence <b> hello 
</b><b> is for bold
<i></i> is for italic
<em></em> is for emphasized.

I hope you don't have any problems yet.If you do have any questions please do ask.
Read More


Sunday, October 13, 2013

How to add an image.

Posted By: Unknown on 12:59 PM
Hey everyone how are you guy
Our today's topic is adding images to your website.This is very very simple people,you can add as many images as you want to and they will appear perfectly and with the same picture quality as they are stored in your desktop.So lets get started with the code.

<html>
<body>

<img src="car.jpg" width="100" height="132">

</body>
</html>

Ok so above i wrote the code of adding an image to a website,let me explain it to you guys briefly.

Step 1: Open html tag
Step 2: Open the body tag
Step 3: Write img which means image,write src which means source so these 2 short forms makes a sentence which can be understood as image source.Then in the inverted commas you will have to give the name of the image which you have named it in your laptop/PC, put a full stop and define the type of the image,close the inverted commas,define the width and height of the image and your are done with the task of adding the image.See how simple it is to add an image,now you can add as many images you want to add with the same procedure.
Step 4: Close the body tag
Step 5: Close the html tag
Read More


Saturday, October 12, 2013

How to give hyperlink in html

Posted By: Unknown on 11:42 AM
Hey everyone our today's topic is the <a> tag.

Q:What does <a> tag do?

Ans: This tag is used for giving link,say for instance if you want to make a home page where you will write information about your website and you want to make another page for providing your contact information so that when the user clicks on the home page it should open a page where there is information about your site and if the user clicks on the contact page it should contain the contact information.This can be done by using the <a> tag,this tag is used for creating a page where user can click and open up a page,this tag can also be used for providing other things as well,like if you want to put a document on your site so that when user clicks on it the user can download that document.So guys the purpose of <a> tag is to give a link.

Lets get started with the code.Now friends for giving links on your website all you need to do is open up the <a> tag put the URL of the page your want to open when clicked on it,give a name to the page so that it is visible and understandable for the users and close the tag.Below i am writing a small piece of code and i will also explain it line by line after i am done writing it.


<html>
<body>

<a href="https://www.google.com"> Google</a>
<a href="https://www.facebook.com">Face Book</a>
</body>
</html>

So friends what i did in this code is first i opened my html and body tags,opened up the <a> tag,gave 2 links of the famous and well known sites,put a name to it and closed the tag </a>,and at the end i closed the html and the body tag.
When you will click on Google the browser will load the google page,and if you will click on facebook the browser will open the facebook log in page.Now let me give you guys a little demo of how this code works.
Read More


Friday, October 11, 2013

How to write paragraph in HTML

Posted By: Unknown on 11:50 AM
Hey everyone :) today we will be learning how to write content in your website.For example if you want to write a paragraph on your web page you can easily write one after you read this post :)
So lets get started.In order to write a paragraph in HTML you just need to memorize this tag <p> :) .Below i am writing a small piece of code and you can easily understand this as well because it is very mush similar with the heading tag,i will also explain this code line by line at the end :)

<html>
<body>

<p>Hey my name is konain and i am a blogger</p>


</body>
</html>

So friends first of all we have to give the HTML tag which is to define that we are writing a code in html,after that you give the body tag which means you will be writing something inside the body.Now you will see the <p> tag p stands for paragraph and you can write any thing you want inside the <p> tag and you will have to close it as well after you are done writing your content :)
Read More


Thursday, October 10, 2013

How to give headings in HTML

Posted By: Unknown on 12:10 PM
Hey everyone so far we have learned what html is what is the meaning of markup language and which editors can be used :)
Now we will move on to our next step.Lets get started with the basics of HTML.I will start with very easy and simple examples so that you guys can easily understand and learn :)

On websites you people have seen headings like if you open a page which contains the information about that website like the About us page,on that page you see there is a heading and then underneath that heading there you find information about that site,you might have wondered how did the developer made that heading look bigger than the text written under that heading.Well my friends i will tell you the trick to do that ;) .Below i am writing a small piece of code which is very easy to understand and i will also explain it after i write that code for you people :)


<html>
<body>

<h1>hello everyone</h1>
<h2>hello everyone</h2>
<h3>hello everyone</h3>
<h4>hello everyone</h4>
<h5>hello everyone</h5>
<h6>hello everyone</h6>

</body>
</html>

So in order to code in HTML first you need to start with the HTML Tag which is <html> and then you give the body tag <body> which means you will write something inside the body for example here you gave headings :) ,in simple words <body> defines the body of the document :).After you are done writing your html code you need to close the tags as well just put forward slash like this </body> </html>
In the same way if you want to give a heading you need to give the heading tag which is <h1> or <h2> or <h3> or <h4> or <h5> or <h6> .And then after completing the heading you need to close your tag as well </h1> or </h2> or </h3> or </h4> or </h5> or </h6> :)

Q: Why are you using a number inside your tag like <h1> or <h2> ?

Ans: This number defines the size of your heading.For example if you will write 2 headings one in h1 tag and the other in the h2 tag,the size of the h1 heading will be bigger than the size of the heading in the h2 tag :) and in the same way the size will decrease :) h3 will font will be smaller than the heading in the h2 tag,in html we have heading sizes up til 6 :)

When you are done writing this code just save this file and give a name to it for example myheadings and then type . and type html,like this myheadings.html
Now when you will save it you will see the name of your file under your browser icon when you will double click on myheadings.html it will open in the browser displaying the names of your headings :) .In case if you are still seeing just the notepad file just write click on the file and click on Open with and choose a browser :)

Step 1:

Step 2:

 Step 3:

Read More


Editor

Posted By: Unknown on 3:33 AM
Now the question is where should i be writing my html code and how can i run it and see the output of my code :)

So friends you can write the HTML code in your notepad.By using notepad you wont have to download any editor from the internet.All you need to do is type .The html code will run perfectly in your notepad.But if you want to use any other editor other than notepad then you can use any editor from the following:

Notepad++
Emacs
NetObjects Fusion
EmEditor
Geany
KompoZer
Aptana
HTML-Kit Tools
HomeSite
NetBeans IDE
NoteTab
ActiveState Komodo
Alleycode HTML Editor
Aptana
Dreamweaver
Arachnophilia
BBEdit
BlueGriffon
BlueFish
Brackets
Quanta Plus
Coda
Aloha
EditPlus
CoffeeCup HTML Editor
E Text Editor
Eclipse with the Web Tools Platform
Trellian WebPage
Read More


Introduction To HTML

Posted By: Unknown on 2:43 AM
Q: What does HTML stands for? 


Ans: HTML stands for HyperText Markup Language.

Q: What is HTML?


Ans: HTML is a markup language used for creating the webpages.
         By using HTML your website will look like a website instead of plain text.With HTML you          can: 
  • Create titles,paras,subheadings & headings.
  • Put text in bold or italics or underlined.
  • Add pictures,audios,videos and links to your site.
  • And Much more :)

Q: What do you mean by markup language?

Ans: Markup language is a language for computers,it is a computer language which uses tags to define elements inside or within a document.Markup language is human readable language which means that the markup files contains standard words rather than complicated and difficult programming syntax.There are many markup languages such as:

HyperText Markup Language (HTML)
Turing Machine Markup Language (TMML)
Tutorial Markup Language (TML)
Universal Rule Markup Language (URML)
Virtual Reality Markup Language (VRML)
Voice Extensible Markup Language (VoiceXML)
Why Markup Language (YML)
Wireless Markup Language (WML)
Yet Another Markup Language (YAML)
ASN.1 Markup Language (AML)
Astronomical Instrument Markup Language (AIML)
Astronomical Markup Language (AML)
Automatic Site Markup Language (ASML)
Theological Markup Language (ThML)
Transaction Authority Markup Language (XAML)
Trading Partner Agreement Markup Language (TPAML)
Transaction Authority Markup Language (XAML)
Bean Markup Language (BML)
Better Markup Language (BML)
Bibliography Markup Language (BibML)
Bioinformatics Sequence Markup Language (BSML)
BIOML -  BIOpolymer Markup Language
Board Game Markup Language (BGML)
Business Rules Markup Language (BRML)
Comics Markup Language (ComicsML)
Chemical Markup Language( CML)
Claris Dynamic Markup Language (CDML)
DARPA Agent Markup Language (DAML)
Dynamic Markup Language (DML )
E-business eXtensible Markup Language (ebXML)
Earth Science Markup Language (ESML)
Environmental Markup Language (EML)
eXtensible Application Markup Language (XAML)
eXtensible rights Markup Language (XrML)
eXtensible Telephony Markup Language (XTML)
eXtensible Graph Markup and Modeling Language (XGMML)
Description Logic Markup Language (DLML)
Directory Services Markup Language (DSML)
Document Template Markup Language (DTML)
Dynamic Hypertext Markup Language (DHTML)
eXtensible Hypertext Markup Language (XHTML)
eXtensible Markup Language (XML)
Farleden Dynamic Markup Language
Field Data Markup Language  (FDML)
FileMaker Dynamic Markup Language (FDML)
Financial products Markup Language (FpML)
Financial Services Markup Language (FSML)
Forms Data Markup Language (FDML)
Form Document Markup Language (FDML)
Forms Definition Markup Language (FDML)
Forms Markup Language (FML)
Gene Expression Markup Language (GEML)
Geometry Description Markup Language (GDML)
Geography Markup Language (GML)
Handheld Device Markup Language (HDML)
Hypertext Markup Language (HTML)
Human Markup Language (HumanML)
Human Resources Markup Language (HRML)
ICAAP eXtended Markup Language (IXML)
Image Markup Language (IML)
Instrument Control Markup Language (ICML)
Instrument Markup Language (IML)
International Development Markup Language (IDML)
Java Speech Markup Language (JSML)
Karst Markup Language (KML)
Koala Bean Markup Language (KBML)
Lambda Markup Language (LML)
Learning Material Markup Language (LMML)
Legal Extensible Markup Language (LegalXML)
Liturgical Markup Language (LitML)
Log Markup Language (LOGML)
Mail Markup Language (MML)
Maker Markup Language (MML)
Market Data Markup Language (MDML)
Mathematical Markup Language (MathML)
Meaningful Text Markup Language (MTML)
Medical Markup Language (MML)
Mind Reading Markup Language (MRML)
Modest Markup Language (MML)
Multimedia Retrieval Markup Language (MRML)
Music Markup Language (MML)
Outline Processor Markup Language (OPML)
Pet Name Markup Language (PNML)
Procedural Markup Language (PML)
Printing Industry Markup Language (PrintML)
Question and Answer Markup Language (QAML)
Quest Markup Language (QML)
Relational-Functional Markup Language (RFML)
Research Information Exchange Markup Language (RIXML)
Rule Markup Language (RuleML)
Security Assertion Mark-up Language (SAML)
Security Services Markup Language (S2ML)
Simple Markup Language (SML)
Application Markup Language (AppML)
Architecture Description Markup Language (ADML)
Artificial Intelligence Markup Language (AIML)
Simulation Module Markup Language (SiMMaL)
Spacecraft Markup Language (SML)
Standard Generalized Markup Language (SGML)
Synchronization Markup Language [SyncML]
Synthesis Markup Language

But the most famous and widely used languages are XML and HTML.
Read More


Subscribe to: Posts (Atom)