02. session 02 working with html elements

373 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
373
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

02. session 02 working with html elements

  1. 1. Working with HTML Elements Session 2
  2. 2. Contents <ul><li>Explain the basic formatting elements. </li></ul><ul><li>Explain the color properties. </li></ul><ul><li>Explain the phrase elements. </li></ul><ul><li>Explain the image element. </li></ul><ul><li>Explain hyperlinks. </li></ul>Building Dynamic Websites/Session 2/ of 28
  3. 3. Basic text elements <ul><li>Providing a flow to the contents. </li></ul><ul><li>Making the web page comprehensible. </li></ul><ul><ul><li>P </li></ul></ul><ul><ul><li>BR </li></ul></ul><ul><ul><li>HR </li></ul></ul><ul><ul><li>H1 – H6 </li></ul></ul><ul><ul><li>PRE </li></ul></ul>Building Dynamic Websites/Session 2/ of 28
  4. 4. Heading levels <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> </li></ul><ul><li><HTML><HEAD> </li></ul><ul><li><TITLE>Search engines</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><ul><li><H1>H1 Heading</H1> </li></ul></ul><ul><ul><li><H2>H2 Heading</H2> </li></ul></ul><ul><ul><li><H3>H3 Heading</H3> </li></ul></ul><ul><ul><li><H4>H4 Heading</H4> </li></ul></ul><ul><ul><li><H5>H5 Heading</H5> </li></ul></ul><ul><ul><li><H6>H6 Heading</H6> </li></ul></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>Building Dynamic Websites/Session 2/ of 28
  5. 5. Heading level Building Dynamic Websites/Session 2/ of 28
  6. 6. Address element <ul><li>To be a container element. </li></ul><ul><li>Enclosed: </li></ul><ul><ul><ul><li>The address </li></ul></ul></ul><ul><ul><ul><li>Contact information. </li></ul></ul></ul><ul><ul><ul><li>A link to the home page. </li></ul></ul></ul><ul><ul><ul><li>A search string feature. </li></ul></ul></ul><ul><ul><ul><li>Copyright information. </li></ul></ul></ul>Building Dynamic Websites/Session 2/ of 28
  7. 7. Address element <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> </li></ul><ul><li><HTML><HEAD> </li></ul><ul><li><TITLE>Address element</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><li>This is an example of ADDRESS element. </li></ul><ul><li><HR/> </li></ul><ul><li><ADDRESS> </li></ul><ul><li>VEST Technologies<BR/> </li></ul><ul><li>Building 009, West Road<BR/> </li></ul><ul><li>Canberra<BR/> </li></ul><ul><li>USA </li></ul><ul><li></ADDRESS> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>Building Dynamic Websites/Session 2/ of 28
  8. 8. Address element Building Dynamic Websites/Session 2/ of 28
  9. 9. TT element <ul><li>Displaying text such as telewriter type. </li></ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> </li></ul><ul><li><HTML><HEAD> </li></ul><ul><li><TITLE>TT element</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><li>TT element renders <TT>teletype</TT> or <TT>monospaced</TT> text. </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>Building Dynamic Websites/Session 2/ of 28
  10. 10. TT element Building Dynamic Websites/Session 2/ of 28
  11. 11. Character entity Building Dynamic Websites/Session 2/ of 28 Symbol name Entity name Entity number Ampersand (&) &amp; & Greater than (>) &gt; &#62 Less than (<) &lt; &#60 non-breaking space &nbsp; &#160 Quotation mark (“ “) &quot; &#34
  12. 12. Basic formatting <ul><li>B </li></ul><ul><li>BIG </li></ul><ul><li>I </li></ul><ul><li>SMALL </li></ul><ul><li>U </li></ul>Building Dynamic Websites/Session 2/ of 28
  13. 13. Update and Shiting text <ul><li>DEL </li></ul><ul><li>INS </li></ul><ul><li>STRONG </li></ul><ul><li>SUB </li></ul><ul><li>SUP </li></ul>Building Dynamic Websites/Session 2/ of 28
  14. 14. Color property <ul><li>The color name is listed to validate and process with HTML page. </li></ul><ul><li>The color property specifies one of these colors to be applied to the textual content. </li></ul>Building Dynamic Websites/Session 2/ of 28
  15. 15. Color property Building Dynamic Websites/Session 2/ of 28 Color Hexadecimal Value Aqua #00FFFF Fuchsia #FF00FF Gray #808080 Maroon #800000 Navy #000080 Olive #808000 Purple #800080 Silver #C0C0C0 Teal #008080
  16. 16. Phrase elements <ul><li>There are certain phrase elements. </li></ul><ul><li>Displaying a program code in different font emphasizing with a different look. </li></ul>Building Dynamic Websites/Session 2/ of 28
  17. 17. Phrase elements Building Dynamic Websites/Session 2/ of 28 Element Description CODE Displaying the computer program. DFN Displaying the defination of a term. EM Emphasizing the enclosed text SAMP Displaying a sample output of computer programs. VAR Displaying a variable name that refers to a block of memory and holds a value which is referred by the variable name.
  18. 18. Building Dynamic Websites/Session 2/ of 16
  19. 19. Phrase elements <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> </li></ul><ul><li><HTML><HEAD> </li></ul><ul><li><TITLE>Phrase Elements</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><li><H3>Microsoft Excel</H3><HR/> </li></ul><ul><li>Microsoft Excel: <DFN>is the spreadsheet program.</DFN> </li></ul><ul><li><P><CODE>=SUM(first cell address:last cell address)</CODE> is the function that add values appearing in the given cell range.<BR/> </li></ul>Building Dynamic Websites/Session 2/ of 28
  20. 20. Phrase elements <ul><li>The <EM>first cell address</EM> is the address of the starting the cell from where you want to start the addition operation. </li></ul><ul><li>The <EM>last cell address</EM> is the address of the last the cell till where you want to add the values.<BR/> </li></ul><ul><li>The <CODE>SUM</CODE> function adds all numeric values existing in the cells between the first cell and the last cell.</P> </li></ul><ul><li>An example of <CODE>SUM</CODE> function: <SAMP>=SUM(A1:A3)</SAMP> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>Building Dynamic Websites/Session 2/ of 28
  21. 21. Phrase elements Building Dynamic Websites/Session 2/ of 28
  22. 22. SPAN and DIV element <ul><li>These element defines a section in a web page. </li></ul><ul><li>DIV is a block level element. </li></ul><ul><li>SPAN is an in-line level element. </li></ul>Building Dynamic Websites/Session 2/ of 28
  23. 23. IMG element <ul><li>SRC </li></ul><ul><li>WIDTH </li></ul><ul><li>HEIGHT </li></ul><ul><li>ALT </li></ul><ul><li>LONGDESC </li></ul><ul><li>ALIGN </li></ul><ul><li>USEMAP </li></ul>Building Dynamic Websites/Session 2/ of 28
  24. 24. Image maps <ul><li>There are diferrent areas that act as links in an image. </li></ul><ul><ul><li>Map element </li></ul></ul><ul><ul><li>AREA element </li></ul></ul>Building Dynamic Websites/Session 2/ of 28
  25. 25. Image maps <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> </li></ul><ul><li><HTML><HEAD> </li></ul><ul><li><TITLE>Search engines</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><li><H2>Search engines</H2> </li></ul><ul><li><MAP name=&quot;searchmap&quot;> </li></ul><ul><li><AREA href=&quot;http://www.google.com&quot; alt=&quot;Google&quot; shape=&quot;rect&quot; </li></ul><ul><li>coords=&quot;0,0,170,35&quot;/> </li></ul><ul><li><AREA href=&quot;http://www.ask.com&quot; alt=&quot;Ask&quot; shape=&quot;rect&quot; </li></ul><ul><li>coords=&quot;0,28,170,70&quot;/> </li></ul><ul><li></MAP> </li></ul><ul><li><img src=&quot;SearchEngines.JPG&quot; alt=&quot;Search Engines&quot; width=&quot;286&quot; height=&quot;99&quot; usemap=&quot;#searchmap&quot;/> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>Building Dynamic Websites/Session 2/ of 28
  26. 26. Image maps Building Dynamic Websites/Session 2/ of 28
  27. 27. Hyperlinks <ul><li>HREF </li></ul><ul><li>HREFLANG </li></ul><ul><li>NAME </li></ul><ul><li>TARGET </li></ul><ul><li>TITLE </li></ul>Building Dynamic Websites/Session 2/ of 28
  28. 28. Summary <ul><li>Basic text elements providing a flow to the contents. </li></ul><ul><li>Address element enclosed the contact information. </li></ul><ul><li>W3C defined 16 color name for HTML. </li></ul><ul><li>Phrase elements display code in different font emphasizing with a different look. </li></ul><ul><li>There are diferrent areas that act as links in an image. </li></ul><ul><li>Mailto link allows sending emails </li></ul>Building Dynamic Websites/Session 2/ of 28

×