Pertemuan9

Pertemuan 9
ATTRIBUT VISIBILITY & DISPLAY
Attribut ini bisa digunakan untuk mengatur penampakan suatu tag HTML. Sehingga penampakan
komponen di dokumen dapat lebih dinamis.
Berikut penjelasan mengenai kedua attribut tersebut:
Attribut Visibility
Attribut ini dapat diberi dua buah nilai, yaitu :
“hidden” berarti tidak tampak
“visible” berarti tampak
Attribut Display
Attribut ini dapat diberi dua buah nilai, yaitu :
none berarti tidak tampak
“ “ berarti tampak
Visibility dan display sama – sama untuk mengatur penampakan suatu tag HTML pada page, tetapi
ada satu hal yang membedakan kedua attribut ini, yaitu:
Visibility hanya mengatur tampak atau tidaknya suatu tag HTML.
Display tidak hanya mengatur tampak atau tidaknya suatu tag HTML , tetapi juga mengatur
ruang yang ditempati tag HTML tersebut.
Dan Cobalah buat HTML seperti berikut, serta bandingkan hasil dari attribut display dan visibility!
(simpan dgn nama CSS8.htm)
Attribut display cocok untuk pembuatan menu yang dapat di-collapse dan di-
expand.

<HTML>
<Style>
Div {font-size: 12pt;}
</Style>
<Script Language="JScript">
function disp_on()
{
kata12.style.display=""
}
function disp_off()
{
kata12.style.display="none"
}
function vis_on()
{
kata22.style.visibility="visible"
}
function vis_off()
{
kata22.style.visibility="hidden"
}
</Script>
<Body>
<Input type="Button" onclick="disp_on()" value="Display On">
<Input type="Button" onclick="disp_off()" value="Display Off"> <BR>
<Div ID="kata11">Text Percobaan Display 1</Div>
<hr>
<Div ID="kata21">Text Percobaan Visible 1</Div>
<Div ID="kata22">Text Percobaan Visible 2</Div>
<Div ID="kata23"></Div>
Text Percobaan Visible 3<Input type="Button" onclick="vis_on()"
value="Visible On">
<Input type="Button" onclick="vis_off()" value="Visible Off">
</Body>
</HTML>

Cobalah buat HTML seperti berikut, serta pelajari logika dan script-nya!

lanjutan css9.htm :
<html>
<head>
<title>Menu & SubMenu</title>
<style>
li.menu {
cursor: hand;
margin: 6px;
}
li.submenu {
cursor: crosshair;
}
ul.menu {
margin-top: 0px;
margin-left: 6px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FF0000;
}
ul.submenu {
font-size: 12px;
font-weight: normal;
color: #0066FF;
}
</style>
</head>
<script language="JavaScript">
function buka()
{
var z;
z = 1 + window.event.srcElement.sourceIndex;
if (document.all(z).style.display=="none")
{
document.all(z).style.display=""
}
else
{
document.all(z).style.display="none"
}
}
</script>

Cobalah buat HTML seperti berikut, serta pelajari logika dan script-nya!
Bandingkan hasilnya dengan file css9.htm !!!
<body>
<ul class="menu">
<li class="menu" onClick="buka()">Menu A
<div style="display: none">
<ul class="submenu">
<li class="submenu">Menu A Submenu 1</li>
</ul>
</div>
</li>
<li class="menu" onClick="buka()">Menu B
<li class="submenu">Menu B Submenu 1</li>
</ul>
</div>
</li>
<li class="menu" onClick="buka()">Menu C
<li class="submenu">Menu C Submenu 1</li>
</ul>
</div>
</li>
</ul>
</body>
</html>

<html>
<head>
<title>Menu & Submenu</title>
</head>
<style>
span.menu {
font-size: 16px;
color: #FF0000;
font-weight: bolder;
cursor: hand;
}
span.submenu {
font-weight: normal;
color: #0000FF;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
cursor: crosshair;
}
</style>
<script language="JavaScript">
function buka()
{
var z;
z=window.event.srcElement.id;
if (z=="menuA")
{
if (submenuA.style.display=="none")
{
submenuB.style.display="none";
submenuA.style.display="";
}
else
{
submenuA.style.display="none"
}
}

lanjutan css10.htm :
if (z=="menuB")
{
if (submenuB.style.display=="none")
{
submenuA.style.display="none";
submenuB.style.display="";
}
else
{
submenuB.style.display="none"
}
}
</script>
<body>
<hr>
<span id="menuA" class="menu" onClick="buka()">Menu A </span>
<span id="submenuA" class="submenu" style="display: none"> }
<span>| Menu A Submenu 1 |</span>
</span>
<span id="submenuB" class="submenu" style="display: none">
<span>| Menu B Submenu 1 |</span>
</span>
<span id="menuB" class="menu" onClick="buka()">Menu B </span>
</body>
</html>

Pertemuan9

More Related Content

Viewers also liked

Similar to Pertemuan9

Pertemuan9