HTML 4.01  Mohd Ridza bin Mohd Zainuri Syah Ali Reza bin Yaacob Ahmad Affendi bin Hashim Muhammad Nur bin Ismail
HTML <ul><li>Is the predominant markup language for web pages.  </li></ul><ul><li>HTML can also describe, to some degree, ...
<IFrame> Tag
Definition and Usage <ul><li>HTML element which makes it possible to embed another HTML document inside the main document ...
IFrame Standard Attributes <ul><li>Standard attributes such as : </li></ul><ul><ul><li>id – A unique id for the element  <...
IFrame Optional Attributes <ul><li>Align - how to align the iframe according to the surrounding text  </li></ul><ul><li>Fr...
IFrame Optional Attributes (Cont…) <ul><li>Name – Specifies a unique name of the iframe  </li></ul><ul><li>Scrolling – Def...
<span> Tag
Definition and Usage <ul><li>The <span> tag is used to group inline-elements in a document.  </li></ul>
Example This is a paragraph This is a paragraph This is a paragraph This is another paragraph <p>This is a paragraph <span...
Example Output
Standard Attributes <ul><li>Id - A unique id for the element  </li></ul><ul><li>Class - The class of the element  </li></u...
Event Attributes <ul><li>Mouse Event </li></ul><ul><ul><li>Onclick  - What to do on a mouse click  </li></ul></ul><ul><ul>...
<div> Tag
<div> Tag <ul><li><div>  tag is used for defining a division/section in a HTML document.  </li></ul>ABC123 <div style=&quo...
<div> attributes <ul><li><div> tags can attach several attributes for formatting the text. </li></ul><ul><li>Standard attr...
Example <ul><li>ABC123 </li></ul><ul><li><div style=&quot;color: blue;“ align=&quot;center&quot;> </li></ul><ul><li><h2>TT...
Screenshot
<frame>, <frameset> Tag
Definition  <frame> <ul><li>Defines a sub window (a frame).   </li></ul>
Definition  <frameset> <ul><li>Used to organize multiple windows (frames).  </li></ul><ul><li>Each frame holds a separate ...
Example of Codes <ul><li><html> <frameset cols = &quot;25%, 25%,*&quot;>   <frame src =&quot;venus.htm&quot; />   <frame s...
Attributes - <frame>
Attributes - <frameset>
Upcoming SlideShare
Loading in …5
×

Html

844 views

Published on

Introduction to iframe span div and frameset

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

  • Be the first to like this

No Downloads
Views
Total views
844
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html

  1. 1. HTML 4.01 Mohd Ridza bin Mohd Zainuri Syah Ali Reza bin Yaacob Ahmad Affendi bin Hashim Muhammad Nur bin Ismail
  2. 2. HTML <ul><li>Is the predominant markup language for web pages. </li></ul><ul><li>HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors. </li></ul>
  3. 3. <IFrame> Tag
  4. 4. Definition and Usage <ul><li>HTML element which makes it possible to embed another HTML document inside the main document </li></ul><ul><li>Example : </li></ul><iframe  src =&quot;/default.html&quot; width=15% height=15%> </iframe> <html> <body bgcolor=&quot;blue&quot;> </body> </html> Output Source
  5. 5. IFrame Standard Attributes <ul><li>Standard attributes such as : </li></ul><ul><ul><li>id – A unique id for the element </li></ul></ul><ul><ul><li>class - The class of the element </li></ul></ul><ul><ul><li>title – A text to display in a tool tip </li></ul></ul><ul><ul><li>style - An inline style definition </li></ul></ul>
  6. 6. IFrame Optional Attributes <ul><li>Align - how to align the iframe according to the surrounding text </li></ul><ul><li>Frameborder – display a frame border or not </li></ul><ul><li>Height – Defines the height of the iframe </li></ul><ul><li>Longdesc - A URL to a long description of the frame contents </li></ul><ul><li>Marginheight - Defines the top and bottom margins of the iframe </li></ul><ul><li>Marginwidht - Defines the left and right margins of the iframe </li></ul>
  7. 7. IFrame Optional Attributes (Cont…) <ul><li>Name – Specifies a unique name of the iframe </li></ul><ul><li>Scrolling – Define scroll bars </li></ul><ul><li>Src – The URL of the document to show in the iframe </li></ul><ul><li>Width - Defines the width of the iframe </li></ul>
  8. 8. <span> Tag
  9. 9. Definition and Usage <ul><li>The <span> tag is used to group inline-elements in a document. </li></ul>
  10. 10. Example This is a paragraph This is a paragraph This is a paragraph This is another paragraph <p>This is a paragraph <span style=&quot;color:#0000FF;&quot;>This is a paragraph</span> This is a paragraph</p> <p> <span style=&quot;color:#FF000;&quot;> This is another paragraph </span> </p> Output Source
  11. 11. Example Output
  12. 12. Standard Attributes <ul><li>Id - A unique id for the element </li></ul><ul><li>Class - The class of the element </li></ul><ul><li>Title - A text to display in a tool tip </li></ul><ul><li>Style - An inline style definition </li></ul><ul><li>Dir - Sets the text direction </li></ul><ul><li>Lang - Sets the language code </li></ul>
  13. 13. Event Attributes <ul><li>Mouse Event </li></ul><ul><ul><li>Onclick - What to do on a mouse click </li></ul></ul><ul><ul><li>Ondblclick - What to do on a mouse doubleclick </li></ul></ul><ul><ul><li>Onmousedown - What to do when mouse button is pressed </li></ul></ul><ul><ul><li>Onmouseup - What to do when mouse button is released </li></ul></ul><ul><ul><li>Onmouseover - What to do when mouse pointer moves over an element </li></ul></ul><ul><ul><li>Onmousemove - What to do when mouse pointer moves </li></ul></ul><ul><ul><li>Onmouseout - What to do when mouse pointer moves out of an element </li></ul></ul><ul><li>Keyboard Event </li></ul><ul><ul><li>Onkeypress - What to do when key is pressed and released </li></ul></ul><ul><ul><li>Onkeydown - What to do when key is pressed </li></ul></ul><ul><ul><li>onkeyup - What to do when key is released </li></ul></ul>
  14. 14. <div> Tag
  15. 15. <div> Tag <ul><li><div> tag is used for defining a division/section in a HTML document. </li></ul>ABC123 <div style=&quot;color: green;&quot;> <h4>This is a header in a div section</h4><p>TEST</p> </div> Output Syntax
  16. 16. <div> attributes <ul><li><div> tags can attach several attributes for formatting the text. </li></ul><ul><li>Standard attributes such as: id, class, title, style, dir, align. </li></ul><ul><li>Event attributes such as: onclick, onmouseover, onkeypress. </li></ul>
  17. 17. Example <ul><li>ABC123 </li></ul><ul><li><div style=&quot;color: blue;“ align=&quot;center&quot;> </li></ul><ul><li><h2>TTT</h2> </li></ul><ul><li><p>TEST</p> </li></ul><ul><li></div> </li></ul>
  18. 18. Screenshot
  19. 19. <frame>, <frameset> Tag
  20. 20. Definition <frame> <ul><li>Defines a sub window (a frame).  </li></ul>
  21. 21. Definition <frameset> <ul><li>Used to organize multiple windows (frames). </li></ul><ul><li>Each frame holds a separate document. </li></ul>
  22. 22. Example of Codes <ul><li><html> <frameset cols = &quot;25%, 25%,*&quot;>   <frame src =&quot;venus.htm&quot; />   <frame src =&quot;sun.htm&quot; />   <frame src =&quot;mercur.htm&quot; />  </frameset> </html> </li></ul>
  23. 23. Attributes - <frame>
  24. 24. Attributes - <frameset>

×