Standard html tags

847
-1

Published on

Standard html tags

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

No Downloads
Views
Total Views
847
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Standard html tags

  1. 1. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  2. 2. Standard HTML Tag’s Nithil.pp nithilp@gmail.com facebook.com/ nithil padinare peediyekal twitter.com/username in.linkedin.com/in/nithil.pp 9995223505
  3. 3. HTML tag’s HTML markup tags are usually called HTML tags • HTML tags are keywords surrounded by angle brackets like <html>. • HTML tags normally come in pairs like <b> and </b>. • The first tag in a pair is the start tag, the second tag is the end tag. • Start and end tags are also called opening tags and closing tags. • The closing tag normally contains a "/" indicate the termination of the action. • HTML tags are not case-sensitive.
  4. 4. Basic HTML Tag Tag Description <html> Defines an HTML document <head> Defines information about the document <title> Defines the document title <body> Defines the document's body <h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule
  5. 5. <html>tag • tells browser that it is an HTML document. • defined at the top and end of the HTML file. Format: <html> <body>.............body of HTML.............</body></html> Example: <html> <body> this is my first page </body></html>
  6. 6. <head> tag • defines information about the document. • The browser does not display the "head information" to the user. • The following tags can be in the head section: <script>, <style>, and <title> etc. • The head tag is used between <html> and <body> tags. Format: <html> <head>.....head sections....</head><body>......body of HTML........</body></html> Example: <html> <head><title>Basic tag</title></head>>body> this is my first page </body></html>
  7. 7. <title> tag • defines the title of the document which appears in the Title bar of the explorer window. • Title tag is used in between <head> and </head>. Format: <html> <head><title>Title of the Page</title></head><body>.....body of HTML......</body></html> Example: <html> <head><title>Basic tag</title></head><body> this is my first page </body></html>
  8. 8. <body> tag • defines the document's body. • contains all the contents of the document (like text, images, colors, graphics etc). Format: <body bgcolor ="color_name" background="file_name" links="color_name" text="color_name"> Example: <body bgcolor ="red" background="c:imgsky.jpg" links="blue" text="black">
  9. 9. <hn>...</hn> Heading Tags • used to display headings in an HTML document. • increase the size of the text. • These tags are <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>,<h6></h6>. Format: <hn>.............. text..............</hn> Example: <h1> this is my first page </h1> <h1 align="right">text</h1>
  10. 10. <p>.....</p> Paragraph Tag • used for creating the paragraph in the web page. • It is used inside the body of file. Format: <p>......longtext..........</p> Example: <p> This is the test of paragraph tag........</p>
  11. 11. <br> tag • inserts a single line break. • Use the <br> tag to enter blank lines, not to separate paragraphs. • This tag has no end tag. Format: text........<br> .....text Example: This is a break <br> in the line.
  12. 12. <hr> tag • The <hr> tag inserts a horizontal rule. • The <hr> tag has no end tag. Format: text......<hr> ......text or text......<hr align=" " size=" " width=" ">.... text Example: This is the test of the tag <hr>
  13. 13. <!--...--> Comment Tag • used to insert a comment in the source code. • will be ignored by the browser. • Can be used to explain your code. Format: <!-- text--> Example: <!-- add here your comments these will not be displayed -->
  14. 14. Strike-through Tag • displays text with a strike. Example: <strike>This is struck through text</strike> displays as This is struck through text
  15. 15. Example for basic command <html> <head> <title>In body tag</title> </head> <body bgcolor="black" text="red"> In body tag, background color is defined as black and textcolor is defined as red. <hr> <strike>This is struck through text</strike> <hr> <h1> this is the h1 header </h1> <h2> this is the h2header </h2> <h3> this is the h3 header </h3>
  16. 16. <h4> this is the h4 header </h4> <h5> this is the h5 header </h5> <hr>This is the use of "Break" tag<br> and you will see use of more tags<br> <hr> look at the use of comment tag it is<!-- It is a comment line --> good <hr><p> This is the use of paragraph tag and you will see use of more tags </p> The effect of "hr" tag <br> <hr> </body> </html>
  17. 17. Character Format Tags • used for the formatting of the text i.e underline, bold, italic, font, size, color of the text. Char Format Tag Description <b> Displays bold text <i> Displays italic text <tt> Renders as teletype or mono spaced text <u> Displays underlined text <em> Displays emphasized text <big> Displays big text
  18. 18. Char Format Tag Description <small> Displays small text <strong> Displays strong text <sub> Displays subscripted text <sup> Displays superscripted text <bdo> Defines the direction of text display <font> Defines the font face, size, and color.
  19. 19. <b> Tag The <b> tag is used to make the text bold. Format: <b> ................text.........</b> <i> Tag The <i> tag displays the italic text. Format: <i> ................text.........</i>; <tt> Tag The <tt> tag displays the typewriter text. Format: <tt> ................text.........</tt>
  20. 20. <u> Tag The <u> tag displays the underlined text. Format: <u> ................text.........</u> <em> Tag The <em> tag displays the emphasized text. Format: <em> ................text.........</em> <big> Tag The <big> tag displays the big text. Format: <big> ................text.........</big>
  21. 21. <small> Tag The <small> tag displays the small text. Format: <small> ................text.........</small> <strong> Tag The <strong> tag displays strong text. Format: <strong> ................text.........</strong> <sub> Tag The <sub> tag displays text in subscripted format. Format: <sub> ................text.........</sub>
  22. 22. <sup> Tag The <sup> tag displays superscripted text. Format: <sup> ................text.........</sup> <bdo> Tag The <bdo> tag defines the direction of the text. Format: <bdo> ................text.........</bdo> <font> Tag The <font> tag defines the font, color, size of the text. Format: <font face="font_name" color="color_name" size="number">........text.........</font>
  23. 23. Example for character tag’s <html><body> <b>This text is bold</b> <br> <strong> This text is strong </strong> <br> <big> This text is big </big> <br> <em> This text is emphasized </em> <br> <i> This text is italic </i> <br> <small> This text is small </small> <br> <u> this is underlined text </u> <br> This text contains <sub> subscript </sub>
  24. 24. <br> This text contains <sup> superscript </sup><br> <tt>typewriter type</tt> This paragraph will go left-to-right.<br> <bdo dir="rtl">This paragraph will go right-to-left.</bdo> <br> The use of font tag <font face="arial" size="3" color="green"> this is use of font tag</font> </body> html>
  25. 25. Output Tags • often used to display computer/programming code. i.e how to display the text containing the spaces, line breaks, programming codes, sample text etc. Tag Description <pre> Defines preformatted text <code> Defines computer code text <kbd> Defines keyboard text <var> Defines a variable <dfn> Defines a definition term <bdo> Defines the direction of text display <samp> Defines sample computer code
  26. 26. <pre>.........</pre>Tag • This is preformatted text. • preserves both spaces and line breaks. • good for displaying computer code. Format: <pre> .....text.....</pre>
  27. 27. Example: <pre> for i = 1 to 10 print i next i </pre> Output: for i = 1 to 10 print i next i
  28. 28. <code> .....text ......</code> Tag This tag is also used to display the computer code. Format: <code> .....text.....</code> <kbd>.....Keyboard Input......</kbd> Tag This tag displays the Keyboard Input. Format: <kbd> ........ Keyboard Input......</kbd>
  29. 29. <samp>....sample text...</samp> Tag This tag displays the sample text. Format: <samp> .....sample text.....</samp> <var> computer variable </var> tag This tag defines the computer variable. Format: <var> computer variable </var> <dfn> definition term </dfn> this tag is used for definition term.
  30. 30. Example <html> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <tt>Teletype text</tt> <br> <samp>Sample text</samp> <br>
  31. 31. <var>Computer variable</var> <br> <p> <b>Note:</b> These tags are often used to display computer/programming code. </p> </body> </html>
  32. 32. List tags • Used to have numbered, unnumbered, and definition lists. • can nest lists within lists. Unnumbered lists • starts with the <ul> tag,. • followed by the actual list items, which are marked with the <li> tag. • ends with the ending tag </ul>. For example: <ul> <li> list item 1 <li> list item 2 <li> list item 3 </ul> Here is how that list would display: * list item 1 * list item 2 * list item 3
  33. 33. Numbered lists same list using a numbered list format: <ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol> Here is how that list would display: 1. list item 1 2. list item 2 3. list item 3
  34. 34. Definition lists Definition lists allow you to work without necessarily having to use bullets. <dl> <dt> This is a term <dd> This is a definition <dd> And yet another definition <dt> Another term <dd> Another definition </dl> Result: This is a term This is a definition. And yet another definition. Another term Another definition
  35. 35. Nested lists • list inside another list. <ul> <li> list item 1 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 2 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 3 <ul> <li> nested item 1 <li> nested item 2 </ul> </ul>
  36. 36. Result: * list item 1 o nested item 1 o nested item 2 * list item 2 o nested item 1 o nested item 2 * list item 3 o nested item 1 o nested item 2
  37. 37. HTML Tables • defined with the <table> tag. • divided into rows with the <tr> tag. • row is divided into data cells with the <td> tag. • td stands for "table data" • A <td> tag can contain text, links, images, lists, forms, other tables, etc. • border attribute:-To display a table with borders • <th> tag:-defines header information. Example: <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
  38. 38. <img> tag • defines an image in an HTML page. • has two required attributes: src and alt. Example: <img src="smiley.gif" alt="Smiley face" height="42" width="42">
  39. 39. HTML <a> Tag • defines a hyperlink. • href attribute, indicates the link’s destination. By default, links will appear as follows in all browsers: • An unvisited link is underlined and blue • A visited link is underlined and purple • An active link is underlined and red Example: <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
  40. 40. Form tag • used to pass data to a server • contain input elements like text fields, checkboxes, radio-buttons, submit buttons etc. • <form> tag is used to create an HTML form. • <input> element is used to select user information.
  41. 41. Example: <form action="demo_form.asp" method="post/get"> <input type="text" name="email" size="40" maxlength="50"><br> <input type="password"><br> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit" value="Send"> <input type="reset"> <input type="hidden"> <select> <option>Apples</option> <option selected="selected">Bananas</option> <option>Cherries</option> </select> <br> <textarea name="comment" rows="6" cols="20"></textarea><br> <select> <option>Apples</option> <option selected="selected">Bananas</option> <option>Cherries</option> </select> </form>
  42. 42. Thank you…
  43. 43. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
  44. 44. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×