Monday 30 September 2013

How to use hsla color in CSS

Learn Html
September 28 via mobile
In the following example i'm gonna show You how to use hsla colors...You will see how we use alpha.

<html>
<body>
<style>
body {
background: url(here add image or link to image);
}
textarea {
background: hsla(216,100%,50%,0.5);
}
</style>
<textarea rows="13" cols="50">
</textarea>
</body>
</html>

or You can use divs.

<html>
<body>
<style>
body {
background: url(here add image or link to image);
}
#alphaEffect {
width: 500px;
height: 300px;
background: hsla(216,100%,50%,0.5);
}
</style>
<div id="alphaEffect">
<h1> Cool...</h1>
</div>
</body>
</html>

#Griffin

Paste The Above Examples In Notepad. Than Save as the file as .html .
Than Open The .html file to see the result.

Thank For All Your Likes Fans!!!!!!!!

CSS 3 Borders

Learn Html
September 29 via mobile
Next CSS3 lesson!!!!!!
CSS3 borders.

Just copy the below code in notepad. Click File > Save As > Save as type > save the file as html or htm > than open the .html file which You saved to see the result.

<html>
<body>
<style>
#container {
width: 200px;
height: 300px;
background: #09F;
border: 5px (here place every of the below words, but not in brackets) #F00;
}

</style>
<div id="container">
</div>
</body>
</html>

1. groove
2. dashed
3. dotted
4. double
5. inset
6. outset
7. ridge
8. solid
9. inherit

#Griffin

Enjoy and if you like it comment, like and share>>>!!!!!!!!!!!!
Unlike ·  · 

How to add sound files to web page using HTML

<<<ADDING SOUND FILES TO WEB PAGES>>>

***WORKING WITH SOUND
Use the EMBED command to embed a sound file and have it play in the background. Upload the sound file to your server as raw data and include the following tag in your HTML document:

<EMBED SRC="hal.wav" HIDDEN=TRUE
AUTOSTART=TRUE LOOP=TRUE>

EMBED SRC tells the browser where to find the sound file.

HIDDEN=TRUE tells the browser to load the sound file but not to display a sound control panel. If you use the attribute HIDDEN=FALSE, a sound player control panel with play, stop, pause, and volume control buttons will be displayed. Keep in mind, however, that if you choose to display this sound control panel, you must also specify a WIDTH and HEIGHT attribute for the CONSOLE (WIDTH=144 HEIGHT=74 is suggested). Your tag would then look like the following:

<EMBED SRC="hal.wav" HIDDEN=FALSE
AUTOSTART=FALSE LOOP=FALSE WIDTH=144
HEIGHT=74 CONTROLS=CONSOLE>

Just click on the arrow button in the middle of the console below to hear hal.wav:

AUTOSTART=TRUE specifies that the sound file will automatically start to play as soon as the file is loaded. If you change the attribute to AUTOSTART=FALSE, the audio will not start to play until the user instructs it to do so.

LOOP=TRUE specifies that the sound file will play an infinite number of times. With LOOP=FALSE, the sound file will play only once. LOOP=4 (or any number you choose) will cause the sound file to play 4 times.

Sound files can be uploaded and played in WAV, AIFF, AU, and MIDI format. In addition, you can use the EMBED tag to play QuickTime movies, AVI and VRML files.

BY #ADMINBIIGZEE DONT FORGET TO LIKE AND SHARE OUR POSTS LOVELY FANS.

How to add or remove left, right, top or bottom border in CSS


      How to add or remove left, right, top or bottom border in CSS

If You want to remove left, right, top, or bottom border use this CSS code


<html>
<body>
<style>
body { 
background: #F00;
}
#cont {
width: 300px; 
height: 200px;
background: #333
border: 3px solid #CFF;
border-top: none;
}
</style>
<div id="cont">
</div>
</body>
</html>

#Griffin

NOTE:

in "border-top: none;" You can replace "top" with "left, right and bottom". You can also use "hidden" instead "none" .
DO NOT ADD THE QUOTES.

How to Auto Refresh web page

#easilylearnhtml #Javascript

     How to Auto Refresh Web Page

This script allows you to refreshes a webpage, after the specified amount of time. "Why use JavaScript to do this.

Simply insert the below code into the <head> portion of your page:

<script>
<!--

/*
Auto Refresh Page with Time script
By #adminBiigzee #zspc #eaSIlylearnhtml
*/

//enter refresh time in "minutes:seconds" Minutes should range from 0 to inifinity. Seconds should range from 0 to 59
var limit="0:30"

if (document.images){
var parselimit=limit.split(":")
parselimit=parselimit[0]*60+parselimit[1]*1
}
function beginrefresh(){
if (!document.images)
return
if (parselimit==1)
window.location.reload()
else{
parselimit-=1
curmin=Math.floor(parselimit/60)
cursec=parselimit%60
if (curmin!=0)
curtime=curmin+" minutes and "+cursec+" seconds left until page refresh!"
else
curtime=cursec+" seconds left until page refresh!"
window.status=curtime
setTimeout("beginrefresh()",1000)
}
}

window.onload=beginrefresh
//-->
</script>

you can also make use of the meta alternative code which is short and more precise

To make the page reload or refresh itself with meta tag, insert the below meta tag:

<meta http-equiv="refresh" content="5" >

The attribute http-equiv="refresh" calls for refresh of the page.

The attribute content="5" sets the time for refresh.

The time after which the page has to reload is set using the content attribute.

So if you want the page to refresh after every 10 seconds, set content value to 10.

We would recommend the time of refresh [reloading interval] be above 5 seconds. This is because you have to consider the page loading time.

by #adminbiigzee dont forget to like and share this post.!!

Friday 27 September 2013

List of TOP 10 WEB HOSTING COMPANIES

List of TOP 10 WEB HOSTING COMPANIES

Making the right choice is always difficult especially when you want to decide who to host you website. Below are the list of TOP 10 Web Hosting companies. The web hosting companies are feature rich, reliable and affordable.

Rank Provider Price Space/Transfer Features
$4.95 /mo
Discounts with Hostgator coupons
Unlimited (both) cPanel/WHM, Fantastico,
ASP, Curl, Cron, Pay Monthly
» HostGator Review
2 $4.45 /mo
Discounts with JustHost coupons
Unlimited (both) Free Domain for Life, Site Builder, Anytime Money Back
» JustHost Review
3 $4.50 /mo
Discounts with iPage coupons
Unlimited (both) Easy & Green hosting,
Drag and Drop Site Builder
» iPage Review
4 $6.95 /mo
Discounts with BlueHost coupons
Unlimited (both) In business since 1996,
SSH support (Secure Shell)
» BlueHost Review
5 $4.95 /mo
Discounts with WebHostingHub coupons
Unlimited (both) 90-Days Money Back,
Easy Wordpress hosting,
» WebHostingHub Review
6 $4.95 /mo
Discounts with GreenGeeks coupons
Unlimited (both) Instant Setup,
Real 24/7 customer support,
» HostMonster Review
7 $4.67 /mo
Discounts with FatCow coupons
Unlimited (both) 100% wind powered
Online Store Building tool
» FatCow Review
8 $2.95 /mo
Discounts with WebHostingPad coupons
Unlimited (both) Cheapest web hosting
Hassle-Free Unlimited plan
» WebHostingPad Review
9 $3.95 /mo
Discounts with IXwebHosting coupons
Unlimited (both) eCommerce Hosting, Dedicated IP addresses
» IXwebHosting Review
10 $5.95 /mo
Discounts with Hosting.com.ru coupons
Unlimited (both) PHP 5 hosting,
Web hosting UK and Europe,
» Hosting.com.ru Review
  

How to Set DAte and Time With Javascripts

                           HOW TO SET DATE AND TIME WITH SCRIPTS

Here is the Source code for adding current time and date to your project with javascripts.

<script type="text/javascript">
var d=new Date();
document.write('Today is ' + d + ' <br> ');
</script>

Example output is shown below:

Today is Wed Sep 18 2013 10:47:51 GMT-0700 (Pacific Standard Time)

by #AdminBiigzee remember to share and like this post!!!

How to Use the Vendor Prefixes in CSS3

Hi im Griffin and im back!

Today im going to show You how to use the vendor prefixes in CSS3.
So now...First You have to know the vendor prefixes, and for what we can use them.
There are 4 main vendors:
1. -webkit-
The -webkit- vendor is used for Google chrome and safari.
With these prefixes we can use styling effects which aren't supported in all browsers.So now You know what is Vendor Prefix!

2. -moz-
The -moz- is used for Mozzila Firefox.

3. -ms-
-ms- for IE(Internet Explorer)
And...
4. -o-
-o- is used for Opera.

#Griffin

Who invented PHP

                     The creator of PHP is Rasmus Lerdof

Rasmus Lerdorf (born 22 November 1968) is a Danish programmer with Canadian citizenship. He is best known for creating the PHP scripting language, authoring the first two versions of the language and participating in the development of later versions led by a group of developers including Jim Winstead (who later created blo.gs), Stig Bakken, Shane Caraveo, Andi Gutmans and Zeev Suraski. He continues to contribute to the project.
 

What is The Meta Tag

                The Basics About The <meta> tag. 

1.Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. 2.Metadata will not be displayed on the page, but will be machine parsable.
3.Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
4.The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Let me Explain You Better

Example 1 - Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Example 2 - Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">

Example 3 - Define the author of a page:
<meta name="author" content="#Griffin">

Example 4 - Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">

#Griffin

How to Add Text boxes, Submit and Reset Buttons

                How to Add Text boxes, Submit and Reset Buttons
 

The INPUT Tag and Text Boxes

For most form elements, the word INPUT is used to set up the element. Next, you type a space followed by the word TYPE. This tells the browser what type of form elements to draw on your page. If you want a text box, the TYPE to use is "Text":

<INPUT TYPE = "Text">

(Notice that there is no end tag for INPUT.)

Next, you add the attributes you want. There are quite a lot of attributes for text boxes. The three most common ones are Size, Value, and Name. Size refers to how long the text box is in pixels rather than the number of characters it can contain. It's a good idea to limit how many text characters can fit into your text box, and for this the Maxlength attribute is used:

<INPUT TYPE = "Text" Size = 20 Value = "" Name = "text1" Maxlength="15">

The Value attribute means the text that will be typed in your text box. You can set some default text, if you like:

<INPUT TYPE = "Text" Size = 20 Value = "Default Text Here" Name = "text1">

Whatever is between the two quote marks of VALUE is what you get back when the form is sent somewhere.

A Name attribute should be added so that you can refer to it in scripts. It distinguishes it from any other text box you may have on your form.

Some other text box attributes are:

Accesskey
Height
TabIndex
Width

Height and Width are self-explanatory. Accesskey refers to a keyboard shortcut you can add, while TabIndex is a number value and refers to where the cursor will end up when you press the Tab key on your keyboard. As an example, take a look at the following three text boxes:

<INPUT TYPE = "Text" TabIndex="2">
<INPUT TYPE = "Text" TabIndex="3">
<INPUT TYPE = "Text" TabIndex="1">


The third of the three text boxes above will be activated first when the tab key is pressed. Press the tab key again and the cursor will appear in the top text box, followed by the middle one. You can really annoy your visitors if you get the tab index wrong!


The Submit Button

If you want your form to be sent somewhere, a Submit button is needed (though you can write code for your own submit button). When the Submit button is clicked, the browser will check the ACTION attribute of the FORM tag to see where you want the data sent. It then checks the METHOD attribute to see what method you want to use, Post or Get. The browser will then try to send the form's data for you.

The code for a Submit button is this:

<INPUT TYPE = "Submit" Value = "Submit">

This time, the TYPE is set to "Submit". The VALUE attribute is the text that will appear on the button itself. The width of the button is determined by the width of the text for the VALUE attribute. If you wanted a really wide button, you can use this old trick:

Value = " Submit ">

Here, spaces are added to the left and right of the text. The browser will see the spaces as text and adapt the width accordingly.


The Reset Button

The Reset button returns the form to the state it was originally in when it was loaded. Any default values you added will be retained. The code for a rest button is this:

<INPUT TYPE = "Reset" Value = "Clear">

Note the TYPE is now "Reset". The value attribute works in the same way that the Submit button does - it's the text that will appear on the button.

To test out the text box element and the buttons, add the following between the BODY tags of your HTML code:

<FORM>
<INPUT TYPE="Text">
<P>
<INPUT TYPE="Submit" Value="Submit">
</FORM>


The form is just a text box and a button. Notice that the two are separated by a P tag, otherwise they'd be side-by-side.

Save your work and view the results in your browser. You should see this:

A Submit button and a text box on a HTML form

Type something into your text box and click the button. What you'll find is that the text will disappear. If you had added Method and Action attributes to the FORM tag then the text box data would be sent to a location of your choice (email address, script, etc).

Now amend your INPUT TYPE="Text" line and add SIZE and VALUE attributes:

<INPUT TYPE="Text" Size="25" Value="Enter your first name">

When you save and reload, the browser will look like this:

Default text for a text box on a HTML form

The text box will be longer and your default text will display.

Styling Form Buttons

Buttons, like any form element can have a CSS style applied. In the code below, we've applied various styles to our form button:

#Button1 {

Height: 30px;
Width: 180px;
background-color: #820404;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFFFFF;

}


#Button1:hover {

background-color: #CCCCCC;

}


Add an ID attribute to your button:

<INPUT TYPE="Submit" Value="Submit" ID="Button1">

Then try some CSS styles in your own code to see how they work. Try the padding and border properties to see what happens. The border-color property is also worth trying out.

Before implementing any button styles, though, it's worth checking out the results in more than one browser, especially when it comes to borders.

You can actually use images as buttons, if you like. But they need Javascript switched on in the browser to make them work. The TYPE to use is IMAGE:

<INPUT TYPE="image" SRC="image_name.gif" ALT="alt text" onClick="submit_function()">

If you're selling things on your site then image buttons may not be a good idea as some of your users won't see them.
by #AdminBiigzee

How to add Facebook comment box to blog posts (For Bloggers)

              How to add Facebook comment box to blog posts (For Bloggers)


Step 1:-
At first go to Blogger Dashboard > Template >
Then Back up your template!

Step 2:-
Click Edit HTML.
Then mark the "Expand Widget Templates"

Step 3:-
Now find this code from your blogger template. To find easily, simply press Ctrl + F.

<data:post.body/>

After finding the code, Paste this new code after the previous code.

<h3>Post Comment</h3>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='5' width='500'/>

Your job is almost done.
Now click "Save Template" and save this editing on your blogger template.

Now visit your blog again and check it.
This feature, Facebook comments box not only make the commenting system easy but also make your blog beautiful.
So add this gadget on your blog and make your blog better looking and more friendly.

 

» if you have problems in adding this gadget, comment below.

Admin
#Johnnygan
The Learn HTML Team

Wednesday 25 September 2013

how to Disable Back button using JavaScript

                          Disable Back button using JavaScript 
 
sometimes, you may want to disable the browser back button on your webpage for personal reasons, Below code snippet will let you do this. The most important thing here is that you need to put this code in page where you don't want user to come back. code as showed below.

Reference: Disable Browsers Back Button
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
onpageshow="if (event.persisted) noBack();" onunload="">

by #ADMINBIIGZEE

Sunday 22 September 2013

Why you should not leave your charger plugged in to a power outlet.

ICT SAFETY


             Why you should not leave your charger plugged in to a power outlet.

apart from the fact that leaving your battery unnecessarily plugged into the power outlet runs down your battery life, Don't plug your laptop or phone when rain is falling especially when it is accompanied with thunderstorm because you might loose your charger or plus your laptop or phone, if by any change a thunder strikes your power grid or pole especially those supplying your mains or house, an overwhelm surge of voltage will flow through every outlet in your house and cause damage to your appliances. This can cause damage whether you have power supply to your house or not because the thunder itself in a Voltage on a loose. So, please watch out or turn off your socket.

#easilylearnhtml


Background images and Background Positions in CSS

         Background Images and Background Positions 

***someday you will want a beautiful background image for your web site, such as image 1.0 attached to this post, in this chapter, we are going to learn how to fix background image***

You can set your backgrounds to be images, if you prefer. The CSS property to use is background-image. For the value, you specify the location of your image. This goes between round brackets and after the word url. The image name is surrounded with single quote marks:

BODY {

background-image: url('my_image.gif');

}


The same rules on image referencing you learned earlier apply here. The above code, therefore, references an image in the same folder as the current web page. You could place your background images in a folder called backgrounds. The code would then be:



BODY {

background-image: url('backgrounds/my_image.gif');

}


The default for background images is for them to be repeated. For example, if your background image is 100 pixels by 100 pixels this image will be copied until the whole of the screen is filled. This tiling can look awful. (The image 1.1 attached shows Example)

The background image we used above was a 200 by 200 gradient. It looks OK going from left to right (the X direction). But going down (in the Y direction) the tiling looks terrible!

To give you more control of background tiling, the CSS property background-repeat is used. The property can take four values: repeat, repeat-x, repeat-y, and no-repeat. For our gradient above, we want it to only tile from left to right, in the X direction. So we need repeat-x:

BODY {

background-image: url('backgrounds/my_image.gif');
background-repeat: repeat-x;

}


Our background would then look like (the image 1.2 attached):

--if you have seen image 1.1 and 1.2, you will notice the code for 1.2 is more superior and professional.

Background Position in CSS


You can specify a position for background images. For that the CSS property background-position is used. This property takes the following values:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right


But you can also use pixels with X and Y values. It's also possible to use a page percentage. As a practical example, suppose you wanted a logo in the top right of your page. You could do it like this:

BODY {

background-image: url('backgrounds/logo_brolly.gif');
background-position: top right;
background-repeat: no-repeat;

}


The effect would be (image 1.3 attached with this post):

Notice that we've used background-repeat with a value of no-repeat, otherwise we'd get a page full of brollies!

Here are some examples of the other values you can use:

background-position: 300px 100px;

background-position: 80% 0%;


With the pixel values (px) the X direction comes first, followed by the Y direction. A space separates the two. The same is true of the percentage values: X direction first, then Y direction, a space as the separator.

Try them out for yourself. You'll find the background images in the extra files that came with this course, in the extra_files/backgrounds folder. (If you haven't got the extra files yet, the download location is here

http://goo.gl/HDrkyX

Note: this tutorials were made for the benefit of all those who need knowledge of web design, if you receive the posts, please share to others as they also may be needing it. click the like bottom if you understood this chapter.

dont forget to also drop your comments and views on this chapter.

how to make a Blink tag in HTML

                                         THE BLINK TAG

There are many tricks employed in web design, some are hard to pull, but others, maybe easier than the <blink></blink> tag.

if you ever wondered what makes texts in some sites blink, then its the blink tag. its simple and easy to use. example shown below

<blink>
EasilyLearnHtml </blink>

save in your text editor as .html and open in your browser. you should see your text blinking

How to Create A Radio Button

The example demonstrate how to create radio buttons on an HTML form. When a user clicks a radio button, that button becomes selected, and all other buttons in the same group become deselected.

<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked"
name="Gender" value="male">
<br>
Female:
<input type="radio"
name="Gender" value="female">
</form>
</body>
</html>

what are HTML tags

                      What are HTML Tags?
 
HTML markup tags are usually called HTML tags or just tags.
HTML tags are keywords surrounded by angle brackets like <html>.
HTML tags normally come in pairs, like <b> and </b>.
The first tag in a pair is the start tag; the second tag is the end tag.
Start and end tags are also called opening tags and closing tags.

how to Position in CSS, the box model

                                                CSS Positioning - the box model

In this section, you'll learn how to lay out your web pages using CSS positioning. Before doing so, however, it helps to learn about something called the CSS Box Model.

The CSS Box Model
An HTML page is regarded as a series of boxes stacked one on top of the other. These boxes can hold text in paragraphs, images, form objects, etc. Each box is divided up into four areas: a margin, a border, some padding, and finally the content itself.

The margin is transparent and goes around the border. You can't set a colour for margins. It can be big, or set to zero and snuggle right up against the border.
The border goes around the padding and the content. It can take a colour, a size, and a border type (dotted, solid, etc).
The padding is the space between the content and the border. It takes the same colour as the background for the entire box.
The content is things like text and images - the whole point of the box.
All four areas can have their sizes set, You can also set individual sides, if you want:
margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px;

By just using margin, though, you're setting the margin for all four sides. The same is true for border and padding: you can set all four at once, or just set individual values by adding top, right, bottom, or left.
To get the total size of the box, you add up all four parts: margin, border, padding, content. For example, in the code above we have a width of 300 pixels for the first paragraph (the width refers to the content area). The margin is 30 pixels on each side, giving a total margin width of 60 pixels. The border is 1 pixel on the left and 1 pixel on the right. The padding is 20 pixels on the left and 20 pixels on the right. The total width of the entire box is therefore:
Left margin 30
Right margin 30
Left border 1
Right border 1
Left padding 20
Right padding 20
Content width 300
Total box width = 402 pixels

So although we specified a width value of 300 pixels, the width of the box around the entire paragraph was actually 402 pixels. You need to bear this in mind when setting values like this, especially when you float elements left and right. For example, if you have a navigation area floated left then it's a good idea to set the width value, and all of the others values: just remember to add up all the different sizes when calculating the overall size.

by #adminBiigzee

--- -----
i hope you are all getting your template web page ready for the competition at the end of this tutorial, remember, only the best designer will be Rewarded.
--------

How to Test or Run Your PHP code

                                                    HOW TO TEST OR RUN YOUR PHP CODE

if you are asking question such as; " how to run a php code or how to test a php code in a local server or computer then you are at the right place. For you to effectively run or test a php code, you must setup a local server. Mostly you will be advised to configure Apache. But thank God we now have already configured and most complete application or server which you can install will and help you run your php code. That server is called XAMPP, a little Google search should aid u.

Assuming you have your xamp installed in your drive C. To test your php code. Save it in C: \xampp\htdocs.

To test your php code. You don't just double click on the file you saved, you must first open your browser. Then on your browser address bar type:

localhost/index.php

use index.php if you save your php file as index. After typing the above address you should be able to see the output of your php code. Thank you following.

#PHP
#EasilyLearnHTML

How To Make a Simple Progress Bar

                             Create an simple progress bar.

In the below example i will use the <progress> </progress>element to show Your task status.

<p>Status: <progress min="0" max="100" value="30"><span>0</span>%</progress>



Save the above code and see what happens

Saturday 21 September 2013

HTML text transform

                                                                      

                                   HTML text transform


 

EXAMPLE:

<html>
<body>

<p><small>The text is small.</small></p>
<p><strong>The text is strong.</strong></p>
<p><big>The text is big.</big></p>
<p><b>The text is bold.</b></p>
<p><i>The text is italic.</i></p>
<p><em>The text is emphasized.</em></p>
<p><sub>The text is subscripted.</sub></p>
<p><sup>The text is superscripted.</sup></p>
<p><ins>The text is inserted.</ins></p>
<p><del>The text is deleted.</del></p>
<cite>The text is perect for Copyright text.</cite>

</html>
</body>

Paste the above example to notepad. Save as .html and open .html file to see the result.

#Griffin

Autofocus Using HTML5



                                Autofocus Using HTML5 


WHEN MAKING A FORM, SOMETIMES YOU WANT TO THE TEXT CURSOR TO BLINK IN A PARTICULAR FIELD AT DEFAULT. HERE'S THE CODE TO ADD TO YOUR HTML FORM.

<input id="example1" name="example1" type="text" autofocus />
Placeholders Using HTML5 with the "Autofocus" tag.

Often when we are creating a form, even when that form is a single field, we want to let the user know the type of information they are expected to enter into the form. We don't, however, want them to have to manually delete that text from the form field before they can enter their own text. Previously we had to use JavaScript to do so, but now we can do it like this:

<input id="example2" name="example2" type="text" placeholder="suggestive text" /> 


by #adminBiigzee

The Rowspan and Colspan Attributes, Web Design is Easy


The ROWSPAN and COLSPAN Attributes 

For example, you want a complex table of different cell sizes, you can use ROWSPAN and COLSPAN in html4. This can get quite complex. But remember that Columns go down, and Rows go across. To have one big cell stretch horizontally across two smaller cells, the code would be this:

<TR>
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team<BR></TD>
</TR>

The attribute COLSPAN has the value of two because one TD cell is going to stretch across two columns. We have 4 columns in our table above, so the first TD tag will span two columns, and so will the second one.
If we add some other table tags, you might get a better idea of what's going on.

<CAPTION><B>Football Scores</B></CAPTION>

<TR>
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team<BR></TD>
</TR>

<TR >
<TD>Arsenal</TD>
<TD>2</TD>
<TD>Leeds</TD>
<TD>1</TD>
</TR>

If we wanted one big cell to stretch over all our rows, running down the left side, we would use ROWSPAN. The code would be this (the <BR> tag gets you a blank cell):

<TR>
<TD ROWSPAN = 6><BR></TD>
</TR>

save to your templates and preview.

You might have noticed that although the code was this:

<TR>
<TD ROWSPAN = 6><BR></TD>
</TR>

The number of rows in the table was actually only five. So why set the ROWSPAN to 6? Well, it's because we had 5 sets of TR tags in our table, plus the one TR tag we added for the ROWSPAN making 6 in total.
There's no doubt about it, though - setting up a complex table with cells spanning across other cells can be a tricky business when you're coding by hand!

In the next lesson, you'll learn about table attributes.

by #AdminBiigzee please ask questions and leave your comments below. thanks.

HTML5 Video Element Full Instructions.

                                            HTML5 Video Element Full Instructions.


After 4 lessons about #HTML5 video element let me show you all steps for adding video to webpage.
1.We use the <video> element.
2.We use *src element to show the browser where is our video.
3.We use *width and *height to resize our video frame.
4.We also use *poster element to choose video poster image.
5.We use *controls and *autoplay elements. The control elements shows controls on Your video like Play, Pause, Full Screen button etc. If you don't want Your video to start automatically remove autoplay element.
6.We use <source> element to allow inclusion of multiple video formats. The *src element again is used to show the location of our video. The *type attribute also allows a codec parameter to be specified, which defines the
video and audio codecs for the requested file.

<video src="example.mp4" width="375" height="280" poster="set image here.jpg" controls autoplay></video>
<source src="example.mp4" type="video/mp4">

We are Learn Html. And we are best.
#Griffin

#EasilyLearnHTML

Friday 20 September 2013

How to know if a site is a scam or fake

KNOWING IF A SITE IS A SCAM


The internet is growing so also is the number of people visiting the internet every is. the greatest bane to this or bad news to this is that there are many increasing lying websites or fake websites, especially those that tells us how to make money. They deceive us and collect our mail, make us work for them with their fake referral links and at the end with no reward. Well, if you are a victim of this kind of site or you are just trying to find our how to know if a website is fake then you at the right place. Below is the list of how to verify if a site is fake or is a scam or if it has any reputation at all.

1.  http://www.webutation.net/ 


2. http://www.web.cash.m.webs.com
shows the list of many website that are considered to be scam

3. Google.com
a little search on google using the following search term will help you get answers;

- "how to know if a site is fake"
-"how to identify fake website"
-"how to know if a site is a scam"
-"how to identify a legitimate site"