exercícios de xhtml, css e javascript computação internet...
TRANSCRIPT
Exercícios de XHTML, CSS e JavaScript Computação Internet, 2004/2005
1. Explique brevemente o que distingue o XHTML do HTML.
2. Explique brevemente quais são os três principais DTDs definidos para o XHTML.
3. Indique o que significa cada uma das seguintes regras de estilo do CSS: a) h2, p.special {font-size: 22px;} b) .sublines b {font-size:16px;} c) #test ul {font-size:16px;} d) dt:first-child { border-top: none; padding-top: none;} 4. Indique o que significa cada uma das seguintes regras de estilo do CSS. a) background-image: url("/images/bgdesert.jpg"); background-repeat: repeat-y b) p.capitalize {text-transform: capitalize} c) a:link {color: #FF0000}; a:visited {color: #00FF00}; a:hover {color:
#FF00FF} ; a:active {color: #0000FF} d) * {font-style: italic;} 5. Indique o layout do seguinte documento XHTML quando se aplica a seguinte
folha de estilo.
<style type="text/css"> p.uppercase {text-transform: uppercase} p.margin {margin: 2cm 4cm 3cm 4cm} div {color = blue} div p{color = red} p#para1{ text-align: center; color: green } } </style>
<body> <p class="uppercase"> primeiro texto</p> <div> segundo texto <p class="margin"> terceiro texto </p> </div> <p id=para1 > quarto texto </p> </body>
Nota: indique a dimensão e o espaçamento aproximado de cada elemento.
6. Indique o layout do seguinte documento XHTML quando se aplica a seguinte
folha de estilo
#one,#two,#four { position : static; width : 50%; background-color:yellow; } #three { left : 10em; position : relative; top : -6em; width : 40%; background-color:blue; }
<body> <h1>CSS Positioning: Relative</h1> <p id="one"><br/><br/><br/><br/> </p> <p id="two"><br/><br/><br/><br/></p> <p id="three"><br/><br/><br/></p> <p id="four"><br/></p> </body>
Nota: indique a dimensão e o espaçamento aproximado de cada elemento.
7. Diga qual é o resultado em cada um dos exemplos do uso dos CSS. Explique os mecanismos utilizados.
<html> <head> <style type="text/css"> p#para1{ text-align: center; color: red } </style> </head> <body> <p id="para1">1º parágrafo.</p> <div id="para1">2º parágrafo.</div> </body> </html>
<html> <head> <style type="text/css"> div{color: blue} </style> </head> <body> <div>O texto dos elementos <div> tem cor?? <p> Este parágrafo está dentro de um elemento <div>.logo a sua cor é ?? Porque </p> </div> <p>Este parágrafo não está dentro de nenhum elemento que lhe deixe uma ???</p> </body> </html>
8. Explique o que faz o seguinte código JavaScript neste documento. function exercicio4() { var head1 = document.getElementById("head1"); var head2 = document.getElementById("head2"); var shead1 = document.form1.head1.checked; var shead2 = document.form1.head2.checked; head1.style.visibility=(shead1) ? "visible" : "hidden"; head2.style.visibility=(shead2) ? "visible" : "hidden"; }
<body> <h1 ID="head1">First heading</h1> <h1 ID="head2">This is the second heading</h1> <form name="form1"> <input type="checkbox" name="head1" checked onClick="exercicio4();"> <b>Show first heading</b><br> <input type="checkbox" name="head2" checked onClick="exercicio4();"> <b>Show second heading</b><br> </form> </body>
9. Explique o que faz o seguinte código JavaScript neste documento. <script language="Javascript"> function changehead() { i = document.form1.heading.selectedIndex; headcolor = document.form1.heading.options[i].value; document.getElementById("head1").style.color = headcolor; } function changebody() { i = document.form1.body.selectedIndex; doccolor = document.form1.body.options[i].value; document.getElementById("p1").style.color = doccolor; } </script>
<BODY> <h1 ID="head1">Pergunta 4 - 1.5 valores</h1> <p ID="p1">Exame de 1ª Época - 2ª Chamada</p> <FORM NAME="form1"> <B>Escolher Cor: </B> <select name="heading" onChange="change1();"> <option value="black">Black</option> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="yellow">Yellow</option> </select> <br> <B>Escolher Cor: </B> <select name="body" onChange="change2();"> <option value="black">Black</option> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="yellow">Yellow</option> </select> </FORM> </BODY>
10. Explique o que faz o seguinte código JavaScript: <script language="javascript"> function Toggle(item) { obj=document.getElementById(item); visible=(obj.style.display!="none") key=document.getElementById("x" + item); if (visible) { obj.style.display="none"; key.innerHTML="[+]"; } else { obj.style.display="block"; key.innerHTML="[-]"; } } </script>
<body> <h1>Question 3</h1> <p>JavaScript</p> <hr> <b><a ID="xproducts" href="javascript:Toggle('products');">[+]</a> Products</b><br> <div ID="products" style="display:none; margin-left:2em;"> <a href="prodlist.html">Product List</a><br> <a href="order.html">Order Form</a><br> <a href="pricelist.html">Price List</a><br> </div> <b><a ID="xsupport" href="javascript:Toggle('support');">[+]</a> Support</b><br> <div ID="support" style="display:none; margin-left:2em;"> <a href="sforum.html">Support Forum</a><br> <a href="sforum.html">Contact Support</a><br> </div> <b><a ID="xcontact" href="javascript:Toggle('contact');">[+]</a> Contact Us</b> <div ID="contact" style="display:none; margin-left:2em;"> <a href="contact1.html">Service Department</a><br> <a href="contact2.html">Sales Department</a><br> </div> </body> </html>