Elements:
Elements
give structure to a HTML document and tells the browser how you want
your website to be presented. Generally elements consists of a start
tag, some content, and an end tag
Tags:
Tags
are labels you use to mark up the beginning and end of an element.
All
tags have the same format : they begin with a less-than sign "<"
and end with a greater-than sign ">".
Generally
speaking, there are two kinds of tags - opening tags: <html>
and closing tags: </html>.
The
only difference between an opening tag and a closing tag is the
forward slash "/". You label content by putting it between
an opening tag and a closing tag.
HTML
is all about elements. To learn HTML is to learn and use different
tags.
A normal website code must contain the following tags<html> is the main tag. <head> tag contains information about header of the web page and the <body> tag contain the main body of a web page.<! doctype HTML><html><head></head><body></body></html>
Most Commonly Used Tags:
| Tag | Purpose |
| <title> | Title of the page (used under <head> tag) |
| <h1> to <h6> | Heading of different size .. max is <h1> and min is <h6> |
| <body bgcolor = "pink"> | Body Color |
| <p title=”xy”> | Paragraph with title “xy” in a tool tip windows |
| <font color = "blue"> | |
| Embed Audio or Video | <embed src="1.mp3" width ="400" height = "100" controller = "true" aling="right" > |
| <table> | <table> <caption> heading of table </caption> <table border="2" width="400" > <tr> <th>Name</th> <th>Roll num</th> </tr> <tr> <td>Irfan</td> <td>70</td> </tr> <tr> <td>Khuram</td> <td>104</td> </tr> <tr> <td>Usman</td> <td>62</td> </tr> </table> |
| <ul> | <ul> <ul type = "square"> <li> item1 </li> <li> item2 </li> </ul> |
| <ol> | <ol> <li> time1 </li> <li> time2 </li> </ol> |
| <dl> , <dt> and <dd> | <dl> <dt> Computer </dt> <dd> An electronic Device </dd> </dl> |
| <pre> | Preformatted text. Print as it is |
| <!Doctype html> | |
| Fav Icon | <link href="fb.gif" type = "image/gif" rel = "shortcut icon" /> //Placed under head |
| <figure> | <figure> <img src= “abc.png” > <figcaption> CAPTION </figcaption> </figure> |
| <input> | <label> Name: <input type="text" name="name" size="30" maxlength="100"></label><br /> |
| <tag style=””> | <body style=”color:red; background-color:yellow; font-size:300%; font-family:timesnewroman; text-align:center”> |
| style="property:value;" | <p style=”color:red;”> |
| Text styles | <b> , <i> , <em> , <small> , <strong> |
| <mark>
<del> <ins> <sub> <q> <blockquote> <abbr> <bdo dir="rtl"> <code> |
Html mark property text with line on it text subscript text “text” this is title this is blockquote pragraph here may be quote. <abbr title=”hi”> Abbrevation in tooltip window on mouse over right to left text .. I am ali = ila ma I to display code |
| <sup> | superscript text .can be used for 2^3 |
| <!-- any text here --> | Used for comment. known as comment tag |
| <img> | To insert image. <img src="img address" width="50" height="70" alt = “anytxt” title= “title of image will shown as abbr” /> |
| <a> | <a href="Address">Any Text</a> |
| <br> | Break (new line) |
| <hr /> | Horizontal Line |
| <center> | To bring in center any thing text or image |
| <ul> | An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. |
| <style> for paragraph (CSS) | <style> p { display: block; margin-top: 11em; margin-bottom: 11em; margin-left: 0; margin-right: 0; } </style> |
| Body {} (CSS) | body
{ background-image: url('url here'); background-repeat: no-repeat; //or repeat-x; repeat-y; background-attachment: fixed; // where bg image scroll with page background-position: center; // or top; left; right; bottom; 300px 20px; } |
| <button> | To create button : <button type="button">Push Button</button> |
| style | Used in <img> tag : style="float:left ; width:42px ; height:42px"> |
| <big> | For larger text then normal : <big> any text </big> |
| <em> | Emphasis Text |
| <blockquote> | Separate text from others |
| <meta> | <meta name = "keywords" content = "java,
textbook,kasur"> <meta name = "description" content = "Authors's Website for city kasur"> |
| <marquee> | Marquee BEHAVIOR <marquee behavior="slide">Slide marquee behavior</marquee> <marquee behavior="alternate">Alternate marquee behavior</marquee> Marquee DIRECTION <marquee direction="right">Right marquee direction</marquee> Marquee LOOP • Number of times marquee wiil scroll (loop) <marquee loop="3">This marquee is set to scroll (to loop) 3 times</marquee> Marquee SCROLLAMOUNT • Smaller SCROLLAMOUNT value scrolls marquee slower <marquee scrollamount="10">SCROLLAMOUNT marquee equals 10</marquee> Marquee SCROLLDELAY • Smaller SCROLLDELAY value scrolls marquee faster <marquee scrolldelay="250">SCROLLDELAY marquee. 250 = ¼ sec</marquee> <marquee behavior="alternate"><marquee width="200">Reoccuring Marquee</marquee></marquee> <marquee scrollamount="5" width="40"><<<</marquee>Opposite Direction Marquees<marquee scrollamount="5" direction="right" width="40">>>></marquee> <marquee width="60%" direction="up" behavior="alternate"><marquee direction="right" behavior="alternate">ZigZag Marquee</marquee></marquee> |