Html

24
HTML 4.01 Mohd Ridza bin Mohd Zainuri Syah Ali Reza bin Yaacob Ahmad Affendi bin Hashim Muhammad Nur bin Ismail

description

Introduction to iframe span div and frameset

Transcript of Html

Page 1: Html

HTML 4.01

Mohd Ridza bin Mohd ZainuriSyah Ali Reza bin Yaacob

Ahmad Affendi bin HashimMuhammad Nur bin Ismail

Page 2: Html

2

HTML Is the predominant markup language

for web pages. 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.

Page 3: Html

3

<IFrame> Tag

Page 4: Html

4

Definition and Usage

HTML element which makes it possible to embed another HTML document inside the main document

Example :

Source Output<iframe src ="/default.html"width=15% height=15%></iframe>

<html><body bgcolor="blue"></body></html>

Page 5: Html

5

IFrame Standard Attributes

Standard attributes such as : id – A unique id for the element class - The class of the element title – A text to display in a tool tip style - An inline style definition

Page 6: Html

6

IFrame Optional Attributes

Align - how to align the iframe according to the surrounding text

Frameborder – display a frame border or not Height – Defines the height of the iframe Longdesc - A URL to a long description of the

frame contents Marginheight - Defines the top and bottom

margins of the iframe Marginwidht - Defines the left and right margins of

the iframe

Page 7: Html

7

IFrame Optional Attributes (Cont…)

Name – Specifies a unique name of the iframe

Scrolling – Define scroll bars Src – The URL of the document to show

in the iframe Width - Defines the width of the iframe

Page 8: Html

8

<span> Tag

Page 9: Html

9

Definition and Usage

The <span> tag is used to group inline-elements in a document.

Page 10: Html

10

ExampleSource Output

<p>This is a paragraph <span style="color:#0000FF;">This is a paragraph</span> This is a paragraph</p> <p>

<span style="color:#FF000;">This is another paragraph</span></p>

This is a paragraphThis is a paragraphThis is a paragraph

This is anotherparagraph

Page 11: Html

11

Example Output

Page 12: Html

12

Standard Attributes

Id - A unique id for the element Class - The class of the element Title - A text to display in a tool tip Style - An inline style definition Dir - Sets the text direction Lang - Sets the language code

Page 13: Html

13

Event Attributes Mouse Event

Onclick - What to do on a mouse click Ondblclick - What to do on a mouse doubleclick Onmousedown - What to do when mouse button is pressed Onmouseup - What to do when mouse button is released Onmouseover - What to do when mouse pointer moves over

an element Onmousemove - What to do when mouse pointer moves Onmouseout - What to do when mouse pointer moves out of

an element

Keyboard Event Onkeypress - What to do when key is pressed and released Onkeydown - What to do when key is pressed onkeyup - What to do when key is released

Page 14: Html

14

<div> Tag

Page 15: Html

15

<div> Tag

<div> tag is used for defining a division/section in a HTML document.

Syntax Output

ABC123<div style="color: green;"> <h4>This is a header in a div section</h4><p>TEST</p></div>

Page 16: Html

16

<div> attributes

<div> tags can attach several attributes for formatting the text.

Standard attributes such as: id, class, title, style, dir, align.

Event attributes such as: onclick, onmouseover, onkeypress.

Page 17: Html

17

Example

ABC123<div style="color: blue;“

align="center"><h2>TTT</h2><p>TEST</p> </div>

Page 18: Html

18

Screenshot

Page 19: Html

19

<frame>, <frameset> Tag

Page 20: Html

20

Definition <frame>

Defines a sub window (a frame). 

Page 21: Html

21

Definition <frameset>

Used to organize multiple windows (frames).

Each frame holds a separate document.

Page 22: Html

22

Example of Codes

<html><frameset cols = "25%, 25%,*">  <frame src ="venus.htm" />  <frame src ="sun.htm" />  <frame src ="mercur.htm" /> </frameset></html>

Page 23: Html

23

Attributes - <frame>

Page 24: Html

24

Attributes - <frameset>