WELCOME TO BHATI TRICKS WRITE FOR US ADVERTISE YOUR BLOG/SITE HERE POST YOUR ARTICLE/TRICK HERE



Showing posts with label WEB DESIGN. Show all posts
Showing posts with label WEB DESIGN. Show all posts

Friday, 19 July 2013

ADVANCED ATTRIBUTES IN HTML

0 comments 01:57 Posted by Unknown
Labels: , , ,
HTML-ADVANCED-TAGS

In that post you will learn that, how to customize attributes in  tags in HTML like <button>, <marquee> etc.
you can customize the various attributes like width, height, colors etc in html. In that post you will found mainly three tags that are important in html.
1.) THE MARQUEE TAG:-generally, marquee tag is a stylish tag. You can customize the various attributes in that tag like SCROLLAMOUNT, BEHAVIOUR, and ONMOUSE etc.
SCROLLAMOUNT: You can change the speed of moving text by changing it.
EXAMPLE:-
SCROLLAMOUNT="10"
SCROLLAMOUNT="100"
BEHAVIOR:- BY the behavior tag, You can change the behavior of text or image under the marquee tag.
EXAMPLE:-
behavior="alternate"
behavior="scroll”
behavior="slide"
onmouseover="stop()":- when you put cursor on the text under marquee tag then the onmouseover will stop the marquee text in the browser.
onmouseout="start()":-   When you move out cursor from the marquee text then it will start the marquee text in the browser. 


TO CHECK OUT THE FOLLOWING CODE, PASTE THE FOLLOWING CODE IN NOTEPAD AND SAVE IT AS abc.html

<html>
<body>
<marquee SCROLLAMOUNT="50" behavior="alternate" onmouseover="stop()" onmouseout="start()">CYBER SOLUTIONS</marquee>
</body>
</html>
*** SOME TIMES THAT ATTRIBUTE DID NOT WORK IN CHROME
THE OUTPUT OF ABOVE CODE IS:-
CYBER SOLUTIONS


2.) FORMATTED TEXT:- IN HTML you can change the format of text in any way by changing the attributes such as font-family, font-size, font-weight, color.
Font-family: there are many type types of font families like LED, MONOTYPE, ARIAL BLACK and etc.
EXAMPLE:
font-family: 'Monotype Corsiva'
font-family: 'ARIAL BLACK'
font-family: 'LED'
font-size:you can change the size of text by change the value in font-size.
Example:
font-size: 40px
font-size: 20px
font-weight:-you can change the weight of text by changing the value of that attribute.
Example:
font-weight: lighter;
font-weight: heavy;
color: you can change the color of text by changing the hex-code in color attribute. You can find the hex-code of your favorite color here:-linkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
TO CHECK OUT THE FORMATTED TEXT: PASTE THE FOLLOWING CODE IN NOTEPAD AND SAVE IT AS format.html
<html>
<body>
<title>formatted text</title>
<h1 style="font-family: 'Monotype Corsiva'; font-size: 40px; font-weight: lighter; color: #0000FF;">
YOUR-TEXT-HERE</h1>
</body>
</html>
THE OUTPUT OF ABOVE CODE IS:

YOUR-TEXT-HERE

BUTTON:- By the button tag you can link any page to it. You can customize it by changing the attributes like size of button, z-index etc.
For check out this, paste the following code in notepad, and save it as button.html
<html>
<body>
<title>button</title>
<button style="z-index: 1; left: 526px; top: 288px; position: absolute; height: 44px; width: 275px">CYBER SOLUTIONS</button>
</body>
</html>


NOTE:- IF YOU GOT STUCK AT ANY POINT, PLEASE LEAVE A COMMENT FOR US. AND DON'T FORGET TO SUBSCRIBE US FOR LATEST UPDATES.

Thursday, 4 July 2013

3 IMPORTANT FORM TAGS IN HTML

0 comments 03:18 Posted by Unknown
Labels: , ,
3 IMPORTANT FORM TAGS IN HTML
IMPORTANT-FORM-TAGS-IN-HTML

 In HTML forms are widely used, and a well designed form is necessary for a good website. In this article, you will learn  3 important tags that are most important in forms designing in HTML.
FORM DESIGNING IN HTML IS VERY SIMPLE.THERE ARE 3 HTML TAGS THAT ARE VERY IMPORTANT IN FORM DESIGNING.
1.)LABELS: each form field have its own label.
  FOR Example:
<html>
</body>
  <form>
<label for=”key”>key</label>
<input name=“key” id=”key”>
</form>
</body>
</html>
the output of the above code is:

Labels have the  bonus of  browsers rendering the labels themselves click able, putting the focus on the particular form field.
Both name and Id  attributes are typically required.
2 LEGEND AND FIELDSET:-by legand tag you can group the fields in a manner,say(name-first,middle,last) or address(street,area,city,state etc).you can set a caption with the legand tag.
FOR EXAMPLE:-
<html>
<head>
<title>LEGEND AND FIELDSET </title>
</head>
<body>
<form>
<form action="abc.cgi" >
    <fieldset>
        <legend>YOUR NAME</legend>
        <p>First NAME <input name="FIRSTName"></p>
<p>MIDDLE NAME <input name="MIDDLENAME"></p>
        <p>Last NAME <input name="lastNAME"></p>
    </fieldset>
    <fieldset>
        <legend>ADDRESS</legend>
        <p>STREET<textarea name="STREET"></textarea></p>
<p>AREA <textarea name="AREA"></textarea></p>
<p>CITY <textarea name="CITY"></textarea></p>
        <p>PIN CODE <input name="PINCODE"></p>
    </fieldset>
</form>
</body>
</html>
the output of above code is:
YOUR NAME
First NAME
MIDDLE NAME
Last NAME
ADDRESS
STREET
AREA
CITY
PIN CODE
most of the browsers represent field sets with a border surrounding them.
3.)OPTION GROUP:-the optgroup tag groups the option in a particular select box with a heading.but it requires a label attribute by which it can display a non selectable heading that group a number of option in drop down list in browser.
FOR EXAMPLE:-
<html>
<head>
<title>option group</title>
</head>
<body>
<form>
<select name="FOOD">
    <optgroup label="DRINK">
        <option value="TEA">TEA</option>
        <option value="BEAR">BEAR</option>
        <option value="COFFEE">COFFEE</option>
    </optgroup>
    <optgroup label="PIE">
        <option value="SQURE">SQURE</option>
        <option value="RECTANGLE">RECTANGLE</option>
        <option value="CIRCLE">CIRCLE</option>
    </optgroup>
    <optgroup label="HOT">
        <option value="BURGER">BURGER</option>
        <option value="HOT DOG">HOT DOG</option>
        <option value="usa">BUN</option>
    </optgroup>
</select>
</form>
</body>
</html>

the output of the above code is:-

There are many other tags that can be used in designing of forms in html. We will post the other tags in our next post. If you have any confusion regarding these tags, then please post your comments below the post
AND SUBSCRIBE US FOR LATEST POSTS

Thursday, 27 June 2013

MAKE A SIMPLE DROP DOWN MENU WITH CSS

0 comments 23:29 Posted by Unknown
Labels: , , ,
HOW TO MAKE A SIMPLE DROP-DOWN MENU IN CSS
MAKE-A-DROP-DOWN-MENU-WITH-CSS
Drop-down menu is very  important  in web designing. It plays a major role in making of an stylish and user friendly website.you can also change it’s background colour. you can also customize it. You can divide it in child menu and sub menu very simply.For drop-down menu, you have to create a CSS and web page
Firstly you have to create a web page.
step 1:-Open notepad,and paste the yellow lighted code.
step 2:-Save it as menu.html.
<html>
<body>
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">DOWNLOADS</a>
        <ul>
            <li><a href="#">CD</a></li>
            <li><a href="#">SONG</a></li>
            <li><a href="#">SOFTWARE</a></li>
        </ul>
    </li>
    <li><a href="#">HEALTH</a>
        <ul>
            <li><a href="#">DOCTOR</a></li>
            <li><a href="#">MEDICINE</a></li>
            <li><a href="#">HOSPITAL</a></li>
                   </ul>
    </li>
    <li><a href="#">Contact US</a>
        <ul>
            <li><a href="#">Online</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">E-MAIL</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

NOW YOU HAVE TO CREATE A CSS FILE TO THAT WEB PAGE.
step3:- Open notepad, and paste the following code.
ul {
    font-size: 20px;
    margin: 0;
    padding: 0;
    font-family: LED, Verdana;
    list-style: none;
}
ul li {
     float: left;
    display: block;
    position: relative;
    
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 4px 16px 5px 15px;
    background: #00cbcc;
    margin-left: 5px;
    white-space: nowrap;
}
ul li a:hover {
background: #00cbcc;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 12px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #00cbcc;
}

STEP 4:-Save it as menu.css in same directory.
Now you have to insert it into html web page.
step 5:-Now open menu.html with notepad,and paste the following code after the <body> tag.

<link rel="stylesheet" type="text/css" href="mystyles.css"  />

step 6:-Now,you have to change the given path of css file in above script.(path of menu.css)
ex:-<link rel="stylesheet" type="text/css" href="E:\blogging\menu.css" />

step 7:-Then save it, and the task is totally completed.
NOTE:-YOU CAN ALSO CUSTOMIZE THE SIZE OF LIST, SPACE BETWEEN THEM, COLOUR OF IT.
MAKE-A-DROP-DOWN-MENU-WITH-CSS
If you got lost at any point please leave a comment for us.



Subscribe to: Posts (Atom)
 

ABOUT THE AUTHOR

Founder & Author:I ABHISHEK BHATI student of COMPUTER SCIENCE by education a Blogger by profession. Exploring Technology is my passion.BHATI TRICKS is place for Tech Lovers. ABHISHEK BHATI launched his frist Marketing Site in 2013.
...Read More

GET FREE EMAIL UPDATES

Join us for free and get valuable content delivered right in your inbox.



recent comments

BHATI TRICKS Widget

| BHATI TRICKS © BHATI TRICKS. All Rights Reserved | | Back To Top |