Monday 20 January 2014

Labels: , ,

A Complete HTML Guide And Tutorial For Beginner And Newbie Part 5

Posted by Unknown at 01:47


CSS

  • Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL.
  • For example, you can set the font type and size on a paragraph:
  1. <p style="font-size:20px;">This is typed in size 20px</p> 
  2. <p style="font-family:courier;">This is typed in Courier</p> 
  3. <p style="font-size:20px; font-family:courier;">This is typed in Courier size 20px</p>
  • CSS can be used for much more than specifying font types and sizes. For example, you can add colours and backgrounds. Here are some examples for you to experiment with:
  1. <p style="color:green;">Green text</p> 
  2. <h1 style="background-color: blue;">Heading on blue background</h1> 
  3. <body style="background-image: url('http://www.html.net/logo.png');">

HTML FORMS

  • The basic tags used in the actual HTML of forms are form, input, textarea, select and option.

Form

  • form defines the form and within this tag,
  • an action attribute is needed to tell the form where its contents will be sent to.
  • The method attribute tells the form how the data in it is going to be sent and it can have the value get, which is default, and latches the form information onto a web address, or post, which (essentially) invisibly sends the form’s information.
  1. <form action="processingscript.php" method="post"> 
  2. </form>

INPUT

  • form defines the form and within this tag,
  • <input type="text"> or simply <input> is a standard textbox.
  • <input type="password"> is similar to the textbox, but the characters typed in by the user will be hidden.
  • <input type="checkbox"> is a checkbox, which can be toggled on and off by the user
  • <input type="radio"> is similar to a checkbox, but the user can only select one radio button in a group
  • <input type="submit"> is a button that when selected will submit the form.

TEXTAREA

  • textarea is, basically, a large, multi-line textbox. The anticipated number of rows and columns can be defined with rows and cols attributes.
  1. <textarea rows="5" cols="20">A big load of text</textarea>

SELECT

  • The select tag works with the option tag to make drop-down select boxes.
  1. <select> 
  2. <option>Option 1</option> 
  3. <option>Option 2</option> 
  4. <option value="third option">Option 3</option> 
  5. </select>

NAMES

  • All of the tags mentioned above will look very nice presented on the page but if you hook up your form to a form-handling script, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge">.
  1. <form action="contactus.php" method="post"> 
  2. <p>Name:</p> 
  3. <p><input type="text" name="name" value="Your name"></p> 
  4. <p>Comments: </p> 
  5. <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p> 
  6. <p>Are you:</p> 
  7. <p><input type="radio" name="areyou" value="male"> Male</p> 
  8. <p><input type="radio" name="areyou" value="female"> Female</p> 
  9. <p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p> 
  10. <p><input type="radio" name="areyou" value="asexual"> Asexual</p> 
  11. <p><input type="submit"></p> 
  12. </form>

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )