jueves, 7 de abril de 2016

HTML (3 EVALUACION)

PRIMER EJERCICIO

  <html>
 <head>
     <meta charset="UTF-8">
    <title>Ejemplo 1</title>
 </head>
 <body>
   <p><h1><b>Mi nombre es BIC</b></h1></p>
   <p><i>Vivo en españa</i></p>
   <p><font color="blue">Y voy al colegio Liceo Consul</font></p>
 </body>
< /html>


SEGUNDO EJERCICIO

< html>
 <head>
     <meta charset="UTF-8">
    <title>Ejemplo 1</title>
 </head>
 <body>
 <div>
   <p><h1><b>Mi nombre es BIC</b></h1></p>
   <p><i>Vivo en españa</i></p>
   <p><font color="red">Y voy al colegio Liceo Consul</font></p>
 </div>
 <div>
   <p><h1><b>Somos de tercero de la ESO</b></h1></p>
   <p><i>Estamos en TPR</i></p>
   <p><font color="red">En el colegio Liceo Consul</font></p>
 </div>
 </body>
< /html>


TERCER EJERCICIO

<html>
 <head>
     <meta charset="UTF-8">
    <title>SEBASTIAN</title>
 </head>
 <body>
   <p><h1><b>Era un cangrejo muy rojo</b></h1></p>
   <p><i>Que vivía con la sirenita </i></p>
   <p><font color="red">Bajo el mar</font></p>
    <a href=
"http://es.disney.wikia.com/wiki/Sebasti%C3%A1n">Mas información</a>
 </body>



CUARTO EJERCICIO

<html>
 <head>
  <title>colores</title>
 </head>
 <body>
 <h1>estos son ejemplos de colores</h1>
 <p>aqui van los ejemplos</p>
 <ol>
 <li>azul cian</li>
 <li>magenta</li>
 <li>rojo pasion</li>
 </ol>
 <p> aqui estan los colores usados para todo</p>
 <ul>
 <li>magenta</li>
 <li>amarillo</li>
 <li>azul</li>
 </ul>
 </body>
</HTML>


QUINTO EJERCICIO

<html>
 <head>
     <title>EJERCICIO 5</title>
     <meta charset="utf-8">
 </head>
 <body>
 <h1>Razas de perros españoles</h1>
 <table width="500" bgcolor="#DD3355" border="1">
 <tr>
     <td width="100">Alano español</td>
     <td width="400">Perro de agua</td>
  </tr>
 <tr>
    <td>Mastin</td>
    <td>Podenco</td>
 </tr>
 </table>
 <h1>Y estos son otros ejemplos de Alemania<h1>
 <table  width="600"  bgcolor="#DDEE55" border="0">
 <tr>
   <td width="200">Rottweiler</td>
   <td width="400">Bóxer</td>
  </tr>
 <tr>
   <td>Gran Danes</td>
   <td>Pastor Aleman</td>
  </tr>
 </table>
 </body>
</html>


SEXTO EJERCICIO (HTML)

<html>
 <head>
  <title>la naturaleza</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="hoja_estilos.css">
 </head>
 <body>
  <h1>La naturaleza</h1>
  <p>insectos</p>
  <ul><li>abeja</li><li>avispa</li><li>mosca</li></ul>
  <p>flores</p>
  <ul><li>amapola</li><li>margarita</li><li>tulipan</li></ul>
  <p>ecosistema</p>
  <table>
   <tr><td><stong>insectos</stong></td>  <td><strong>flores</strong></td></tr>
   <tr><td>abeja</td><td>amapola</td></tr>
   <tr><td>avispa</td><td>margarita</td></tr>
   <tr><td>mosca</td><td>tulipán</td></tr>
  </table>
 </body>
</html>
 


SEXTO EJERCICIO (CSS)

body{
 font-family:"DROID SERIF",georgia,
 "times new roman",times,serif;
 font-size:87,5%;
 color:#444444;
}
body{
 background-color:#dddddd;
}
 h1{
  font-family: "DROID SANS",arial,helvetica,sans-serif;
  font-weight: 400;
  color:#882233;
  margin:0;
}
h1{
  /*tamaño de 48px;*/
   font-size: 250%;
   line-height: 0.775;
   margin:000.4375em 0;
}
p{font-size: 100%;
line-height: 1.1;
margin:0 0 1.5em 0;
}
/*--formato de las listas*/
ul{
  font-size: 100%;
  line-height: 1.5;
  margin: 0 0 1.5em 0;
}
ul{
  list-style-type: square;
}
li{
  font-size: 100%;
  line-height: 1.5;
  margin-left: 1.2em;
}
/*---enlaces-------*/
a{
  color:#4d87c7;
  background: transparent;
  text-decoration:none;
}
a:active{
  outline:none;
}
a:hover,
a:focus{
  background-color: #4d87c7;
  color:white;
  text-decoration:none;
}
.highlight{
  color:#cc3300;
}
.dimmed{
  color:#888888;
}
/*---tablas-------*/
table{
  width: 100%;
  border-collapse:collapse;
  color: #444444;
  border-top: 1px#ccc solid;
  margin:0 0 1.35714em 0;
}
 table.bordertable{
   border:1px#ccc solid;
}

SÉPTIMO EJERCICIO

<!DOCTYPE html>
<html>
 <title>JAVASCRIPT</title>
 <body>
  <h1>holaaaa !!!</h1>
  <p id="demo"> ejercicio JavaScript .</p>
  <button type="button"
   onclick="document.getElementById('demo').innerHTML = 'que tal??'">
   pinchame!</button>
  <button type="button"
   onclick="document.getElementById('demo').innerHTML = 'como te llamas??'">
   pinchame!</button>
 </body>
</html>



SUBIDAS DE NOTA

1.PAGINA CON DOS ARCHIVOS

<html>
 <head>
 <title>Página 1</title>
 <meta charset="utf-8">
 </head>
 <body>página 1
      <a href="p2.html">enlace</a> pág 2
 </body>
</html>
--------------------------
<html>
 <head>
 <title>Página 2</title>
 <meta charset="utf-8">
 </head>
 <body>página 2
  <a href="p1.html">enlace</a> pág 1
 </body>
</html>



2.CSS

body{
font-family:"DROID SERIF",georgia,
"times new roman",times,serif;
font-size:87,5%;
color:#444444;
}
body{
 background-color:#dddddd;
}
 h1{
  font-family: "DROID SANS",arial,helvetica,sans-serif;
  font-weight: 400;
  color:#882233;
  margin:0;
}
h1{
 /*tamaño de 48px;*/
   font-size: 250%;
   line-height: 0.775;
   margin:000.4375em 0;
}
p{font-size: 100%;
line-height: 1.1;
margin:0 0 1.5em 0;
}
/*--formato de las listas*/
ul{
 font-size: 100%;
 line-height: 1.5;
 margin: 0 0 1.5em 0;
}
ul{
 list-style-type: square;
}
li{
  font-size: 100%;
  line-height: 1.5;
  margin-left: 1.2em;
}
/*---enlaces-------*/
a{
  color:#4d87c7;
  background: transparent;
  text-decoration:none;
}
a:active{
  outline:none;
}
a:hover,
a:focus{
  background-color: #4d87c7;
  color:white;
  text-decoration:none;
}
.highlight{
  color:#cc3300;
}
.dimmed{
  color:#888888;
}
/*---tablas-------*/
table{
  width: 100%;
  border-collapse:collapse;
  color: #444444;
  border-top: 1px#ccc solid;
  margin:0 0 1.35714em 0;
}
 table.bordertable{
   border:1px#ccc solid;
}


3.JAVASCRIPT

<!DOCTYPE html>
<html>
<body>
<title>Javascript</title>
<h1>Javascript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
cliqueame y sabras en que dia estas y a que hora.</button>

<p id="demo"></p>

</body>
</html>

 





No hay comentarios:

Publicar un comentario