Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Monday, 20 January 2014

Labels: , ,

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

Posted by Unknown at 01:48 No comments :

ALL HTML TAG

  • <!DOCTYPE> 
  • <a> 
  • <abbr> 
  • <acronym> 
  • <address> 
  • <applet>  
  • <area> 
  • <article> 
  • <aside> 
  • <audio> 
  • <b> 
  • <base> 
  • <basefont>  
  • <bdi> 
  • <bdo> 
  • <big> 
  • <blockquote> 
  • <body> 
  • <br> 
  • <button> 
  • <canvas> 
  • <caption> 
  • <center>  
  • <cite> 
  • <code> 
  • <col> 
  • <colgroup> 
  • <command> 
  • <datalist> 
  • <dd> 
  • <del> 
  • <details> 
  • <dfn> 
  • <dir> 
  • <div> 
  • <dl> 
  • <dt> 
  • <em> 
  • <embed> 
  • <fieldset> 
  • <figcaption> 
  • <figure> 
  • <font> 
  • <footer> 
  • <form> 
  • <frame> 
  • <frameset> 
  • <h1> - <h6> 
  • <head> 
  • <header> 
  • <hgroup> 
  • <hr> 
  • <html> 
  • <i> 
  • <iframe> 
  • <img> 
  • <input> 
  • <ins>
  • <kbd> 
  • <keygen> 
  • <label> 
  • <legend> 
  • <li> 
  • <link> 
  • <map> 
  • <mark> 
  • <menu> 
  • <meta> 
  • <meter> 
  • <nav> 
  • <noframes> 
  • <noscript> 
  • <object> 
  • <ol> 
  • <optgroup> 
  • <option> 
  • <output> 
  • <p> 
  • <param> 
  • <pre> 
  • <progress> 
  • <q> 
  • <rp> 
  • <rt> 
  • <ruby> 
  • <s> 
  • <samp> 
  • <script> 
  • <section> 
  • <select> 
  • <small> 
  • <source> 
  • <span> 
  • <strike> 
  • <strong> 
  • <style> 
  • <sub> 
  • <summary> 
  • <sup> 
  • <table> 
  • <tbody> 
  • <td> 
  • <textarea> 
  • <tfoot> 
  • <th> 
  • <thead> 
  • <time> 
  • <title> 
  • <tr> 
  • <track> 
  • <tt> 
  • <u> 
  • <ul> 
  • <var> 
  • <video>  
  • <wbr>
Read More
Labels: , ,

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

Posted by Unknown at 01:47 No comments :


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>
Read More
Labels: , ,

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

Posted by Unknown at 01:45 No comments :


IMAGE TAG

  • The img tag is used to put an image in an HTML document and it looks like this:
  1. <img src="http://www.blogwritter.com/badge1.gif" width="120" height="90" alt="blogwritter">
  • The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as “ash.jpg” in a directory called “images” then the code would be <img src="images/ash.jpg"...
  • The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
  • The alt attribute is the alternative description. This is an accessibility consideration, providing meaningful information for users who are unable to see the image.
  • Note that, like the br tag, because the img element does not enclose any content, no closing tag is required.

LIST TAG

  • The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.
  1. <ul> 
  2. <li>To learn HTML</li> 
  3. <li> To show off 
  4. <ol> 
  5. <li>To my boss</li> 
  6. <li>To my friends</li> 
  7. <li>To my cat</li> 
  8. <li>To the little talking duck in my brain</li> 
  9. </ol> 
  10. </li> 
  11. <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li> 
  12. </ul>

TABLE TAG

  • Tables are used when you need to show "tabular data".
  • The table element defines the table.
  • The tr element defines a table row.
  • The td element defines a data cell. These must be enclosed in tr tags, as shown above.
  1. <table> 
  2. <tr> 
  3. <td>Cell 1</td> 
  4. <td>Cell 2</td> 
  5. </tr> 
  6. <tr> 
  7. <td>Cell 3</td> 
  8. <td>Cell 4</td> 
  9. </tr> 
  10. </table>
  • The two attributes colspan and rowspan are used when you want to create fancy tables. Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:
  1. <table border="1"> 
  2. <tr> 
  3. <td colspan="2">Cell 1</td> 
  4. <td>Cell 2</td> 
  5. </tr> 
  6. <tr> 
  7. <td>Cell 3</td> 
  8. <td>Cell 4</td> 
  9. <td>Cell 5</td> 
  10. </tr> 
  11. </table>

  • rowspan specifies how many rows a cell should span over
  1. <table border="1"> 
  2. <tr> 
  3. <td rowspan="3">Cell 1</td> 
  4. <td>Cell 2</td> 
  5. </tr> 
  6. <tr> 
  7. <td>Cell 3</td> 
  8. </tr> 
  9. <tr> 
  10. <td>Cell 4</td> 
  11. </tr> 
  12. </table>
Read More
Labels: , ,

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

Posted by Unknown at 01:43 No comments :

HEADING TAG

  • The Heading tags are h1, h2, h3, h4, h5 and h6.
  • The h1 tag is only used once, as the main heading of the page. h2 to h6, however, can be used as often as desired, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>My first web page</title> 
  5. </head> 
  6. <body> 
  7. <h1>My first web page</h1> 
  8. <h2>Ash Paulzz</h2> 
  9. <p>My best wapka friend </p> 
  10. <h2>Why this is</h2> 
  11. <p>To learn HTML</p> 
  12. </body> 
  13. </html>

ATTRIBUTE TAG

  • Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like <tag attribute="value">Margarine</tag>
  • Attributes are always written within a start tag and are followed by an equals sign and the attribute details written between inverted commas. The semicolon after the attribute is for separating different style commands.
  1. <h2 style="background-color:#ff0000;">Ash is a Good boy and adgamma is a bad boy</h2>

LINK TAG

  • An anchor tag <a> is used to define a link.

  1. <a href="http://www.blogwritter.com">Blogwritter.com</a>

  • The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as “http://www.blogwritter.com”, or it can be relative to the current page. So if, for example, you had another file called “test.html” in the same directory then the line of code would simply be <a href="test.html">Title</a> or something like this. Ex:
  1. <a href="page2.htm">Click here to go to page 2</a>
  2. <a href="subfolder/page2.htm">Click here to go to page 2</a>
  3. <a href="../page1.htm">A link to page 1</a>
Read More
Subscribe to: Posts ( Atom )