HTML [Basic] --by Abdulla-al Baset

806 views
467 views

Published on

Basic Information of HTML Attribute.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
806
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML [Basic] --by Abdulla-al Baset

  1. 1. HTML [Basic] --Abdulla-al Baset
  2. 2. HTML __ Beginning HTML __ Element Name <!DOCTYPE> Effect/Example Description <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4 /frameset.dtd> Define browser, Version of HTML. <html>…….. </html> All Tag sit inside(except !DOCTYPE). <head>……..</head> “HTML Tag” Contain info, which view in browser. <title>………..</title> <title>Title Name</title> Define title name. <body>………..</body> <footer>Footer Name</footer> Contain, HTML document. <footer>Copyright by &copy rehan </footer> Define writer/developer/editor name of page/page designer.
  3. 3. HTML __ Head Tag Tag Name Example & Description/Some About Title Tag <title> W3 Programmers l Most Popular Online……………..</title> •The word no. of title tag should be prefer within 40-80. •This is most Important for Indexing our page in SEO. Meta Tag <meta name=“page type” meta content=“type related”> Or <meta http-equiv=“expires” meta content=“sat,30dec,2013,12am,12:00,GMT+6”> • Meta Tag contain almost 3 Attribute_ 1.name: It contain a keyword, which define the type of web page. 2.content: It contain content, that related with meta name/equiv. 3.http-equiv: It used for update page within a specified time. Base Tag <base href="http://www.w3schools.com/images/" target="_blank"/> •Base tag specifie a default target for all links on a page. Script Tag <script> </script> •Script Tag used to define the client side script such as java script. Style Tag <style type="text/css">body {background-color:yellow}p {color:blue}</style> •Style Tag define Style Information of an HTML Document.
  4. 4. HTML __ Link HTML__Link Description <a href=“Source Name“ target=“_blank” title=“click this”> Link Name</a> Create a page Link by <a> or Anchor Tag, with define a target (ex: _self) & Link Title. <img src=“ImageName” alt="Pulpit rock" /> Create a Image Link with define Image type. <a href=mailto:albaset11@yahoo.com”>E-Mail Me</a> Create E-Mail Address Link. href _means URI for Linked Resource. <a name=“tips”>Tips Section</a> Define a Tip Section. <a href="#tips">Tips Section</a> Create a link inside the same document. <ahref="http://google.com/html_links.htm#tips" >Tips Section</a> Create a link from another page. <link rel="stylesheet" type="text/css" href="mystyle.css" media=“screen,projection”/> For CSS Link. “type” _advisory content type. Rel_ forword Link & media _redering media.
  5. 5. HTML _ Font Tag Font Tag Example Detail <b><i><u>…WHAT…</u></i></b> WHAT Use for Font bold, italic & underlined. <em>……..</em> Defines emphasized text. <pre>………………….</pre> Defines preformatted text. H<sub>2</sub> H2O Use for Subscript. 22<sup>nd</sup> June. 22nd June Use for Superscript. <font color=“red” align=“left” face=“sansserif, arial” size=“20”>GOOD</font> GOOD For Internal Font Design (Color, Alignment, Face & Size). <p style="color:blue;marginleft:20px;">BAD</p> BAD For Internal Style. <strong>………….</strong> <abbr title=“…..”>Abbrviation Word</abbr> <s>……………….</s> Write a Strike Word. <blockquote> Defines a long quotation
  6. 6. HTML __ Document HTML Tag Describe <hr> For Horizontal Line <br> For making a break on line. <marquee>.. <marquee> Create an Animated Horizontal Line. <…………………..> Comment For no Display. <p>…….paragraph…….</p> Use for paragraph. <h1>..Heading Tag..</h1> Heading Tag are 6 types.<h1>……….</h6> <li>……………</li> <acronym>….</acronym> Create a Animated horizontal Line. <address>……..</address> Defines contact/address information.
  7. 7. HTML l Common Attribute Attribute Attribute Type http-equiv Response the Header Name. Style & title Associated style & title Info. id & class Define an unique id & class of Element. Target Define the target: _self/_blank/#/ align Define Position: left/center/right. valign Define : top/middle/bottom/baseline. border Define Border Size. width & hight Define Element’s Width & Hight. bgcolor Define Back-ground Color.
  8. 8. HTML _ List Tag List Tag Example Describe <ul type=“circle”> <li>Un-Ordered List</li> <li> Ordered List</li> <li>Defination List</li> </ul> •Un-Ordered List •Ordered List •Defination List Making An Un-Ordered List Within define a type. Type may be circle, square, arrow, round & so on. <ol> <li>Un-Ordered List</li> <li> Ordered List</li> <li>Defination List</li> </ol> 1. Un-Ordered List. 2. Ordered List. 3. Defination List. Making An Ordered List. <dl> List Tag: <dt>List Tag:</dt> _Un-Ordered List. <dd>_Un-Ordered List.</dd> _Ordered List. <dd>_Ordered List</dd> Other: <dt>Other:</dt> _Defination List. <dd>_Defination List </dl> Create a Defination List by use of dl. <dt> define Item of the List. <dd> define describe the item.
  9. 9. HTML __ Table Tag Table Tag <table width=“2” border=“2” cellspacing=“10”> <tr><th>row</th> <th>row2</th> </tr><tr> <td>Data01</td> <td>Data02</td> </tr></table> Example row01 row02 Data01 Data02 Describe Attribute Making a table with define Width, Border & Cell-spacing. <tr> means Table Row. <th> means Table Heading <td> means Table Data. <border> define border size. <cellspacing> define space of cell. <width> Define Table’s Width. <hight> Define Table’s Hight.
  10. 10. HTML _ Table Attribute Table Tag Description cellpadding For Define Table Attribute. rowspan For define Attributes of Row of the Table. colspan Define the Attributes of Data of the Table. CAPTION Define a Table Caption. <colgroup> Defines a group of columns in a table, for formatting <col /> Defines attribute values for one or more columns in a table <thead> <tbody> <tfoot> Groups the header content in a table. Groups the body content in a table. Groups the footer content in a table.
  11. 11. HTML __ Div Layout Tag Attribute <div>…..</div> Create a Division with div Tag. <div class=“box”> Define a unique Class for re-ordering. <div id=“header”> Define a unique ID of Division. <div style= “color: blue; backgroundcolor=green”> Define a Style of Division with Color & Background.
  12. 12. HTML __ Div Style$heet Tag Attribute padding: Create a padding size of Division . Margin: Define margin Division. <div style= “color: blue; backgroundcolor=green”> Define a Style of Division with Color & Background.
  13. 13. HTML __ Form Design <form id='login' action='login.php' method='post' acceptcharset='UTF-8'> <fieldset > <legend>Login</legend> <input type='hidden' name='submitted' id='submitted' value='1'/> <label for='username' >UserName*:</label> <input type='text' name='username' id='username' maxlength="50" /> <label for='password' >Password*:</label> <input type='password' name='password' id='password' maxlength="50" /> <input type='submit' name='Submit' value='Submit' /> </fieldset> </form>
  14. 14. HTML l Font Family Font Family Attribute Arial Rounded MT Bold HTML Font Check. Algerian HTML Font Check David HTML Font Check Acidic HTML Font Check. Acid Bath HTML Font Check. Adobe Arabic HTML Font Check. Adler HTML Font Check. Agency FB HTML Font Check. Bell MT HTML Font Check.
  15. 15. HTML __ Some Word • HTML pages always start with a DTD, or document type definition. • SEO means “Search Engine Optimization”

×