franklin huasacca: septiembre 2019

jueves, 26 de septiembre de 2019

QUINTA CLASE

EN EL MENU

<a href="cuerpo.html" target ="derecha"><span style="background-color: #46CC2C">musica 1</span></a>

PARA LA MUSICA

<audio src="musicas/f.mp3" controls="controls" type="audio/mpeg" preload="preload"> </audio>rap

CODIGO DE VIDEO

<h3> Video Libre 04</h3>
<p> <video src="videos/05.mp4" width="50%" height="190" controls>
Tu navegador no implementa el elemento <code>video</code>.</video>
<br>
CODIGO PARA BOTON

EL ENLACE

<head>
<link rel="stylesheet" href="css/sin_linea.css">
<link rel="stylesheet" href="css/boton.css">
</head>

PARA EL BOTON

SOLO PONER CLASS="BOTON"

ejemplo

<a href="video.html" target ="derecha"class="boton">videos</a>

CODIGO CSS

.boton {

padding: 4px 70px;

background: rgb(19, 143, 247);

border: 1px solid #1161B0;

color: #fff

}PARA BOTON

SIN LINEA

a:link { text-decoration: none; }

CODIGO DE IMAGEN EN MOVIMIENTO

<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled</title>
</head>
<script>
var imagenes=new Array(
'imagenes/g.jfif',
'imagenes/m.jpg',
'imagenes/r.jfif',
)
function rotarImagenes()
{
var index=Math.floor((Math.random()*imagenes.length));
document.getElementById("imagen").src=imagenes[index];
}
onload=function()
{
rotarImagenes();
setInterval(rotarImagenes,1000);
}

</script>
<body bgcolor="#CC352A">
<center>
<div style="border:1px solid black;" >
<img src="" id="imagen" width="50%" height="430">
</center>
</body>

</html>

CODIGO EN HTML EN JAVASCRIPT PARA MOVIMIENTO DE IMAGEN

var imagenes=new Array(
'imagenes/g.jfif',
'imagenes/m.jpg',
'imagenes/r.jfif',
)
function rotarImagenes()
{
var index=Math.floor((Math.random()*imagenes.length));
document.getElementById("imagen").src=imagenes[index];
}
onload=function()
{
rotarImagenes();
setInterval(rotarImagenes,1000);
}

PARA ENLAZAR JAVASCRIPT

<script src=" el lugar"> </script>

martes, 24 de septiembre de 2019

CUARTA CLASE DE HTML

codigo de paneles
<!DOCTYPE HTML>

<html>

<head>

</head> <frameset rows="15%,*" >
<frame name="superior"src="encabezado.html" marginwidth="10"marginheight="10" scrolling="no"frameborder="0">
<frameset cols="25%,*">
<frame name="arriba" src="menu.html" marginwidth="10" marginheight="10" scrolling="SI"frameborder="1">

<frameset cols="75%,1">
<frame name="izquierda" src="cuerpo.html" marginwidth="10" marginheight="10" scrolling="SI"frameborder="0">
</frameset>
</frameset>
</frameset>

</html>

codigo del encabezado

<!DOCTYPE HTML>

<html>

<head>

</head>

<body bgcolor="#CC7314">
( ENCABESADO ) LOGOTIPO , DATOS DE EMPRESA O USUARIO ACTIVO, FECHA HORA ,ETC
ENCABEZADO. HTML
</body>

</html>

codigo de menu

<!DOCTYPE HTML>

<html>

<head>

</head>

PANEL DE MENU PRINCIPAL USO CON BOTONES O TEXTO CON REFERENCIAS MENU.HTML

</body>

</html>

codigo del cuerpo

<!DOCTYPE HTML>

<html>

<head>

</head>

<span style="background-color: #CC2623">CONTENIDO A MOSTRAR DE LOS BOTONES QUE ESTAN AL COSTADO IZQUIERDO

CUERPO</span>

</body>

</html>

viernes, 20 de septiembre de 2019

TERCERA CLASE DE HTML

html.pas.net instalar 

CODIGO DE UNA PAGINA CON MARCOS

<html>

<BODY bgcolor="#33FFFF">

    <CENTER>

        <font color="RED">

            <h1>MARCO PRINCIPAL </h1>

        </font>

    </CENTER>

    <center><b><u> ESTADISTICAS </u></b></center> <br>

    <b><u> 1.ESTUDIO EN: </u></b>

    <ul>

        <a name="arriba"> <li>seleccionar : </li></a>

       <a href="#p"> <li> peru </li></a>

       <a href="#b"> <li> brazil </li></a>

        <a href="#e"><li> ecuador </li></a>

    </ul>

    <b><u> 2.POBLACION: </u></b>

    <table class="egt" border="3" align="center" widht="25% " bgcolor="#fffcc">

        <tr>

            <th> </th>

            <th> VARONES</th>

            <th>MUJERES </th>

        </tr>

        <tr>

            <td>PERU</td>

            <td>100</td>

            <td>300</td>

        </tr>

        <tr>

            <td>BRAZIL</td>

            <td>300</td>

            <td>500</td>

        </tr>

        <tr>

            <td>ECUADOR</td>

            <td>200</td>

            <td>500</td>

        </tr>

    </table>

    <H2> CANTIDAD DE PERSONAS QUE VIVEN EN:</H2>

    1.            PERU es: varones=100 <br>

                           mujeres=300 <br>

    total= 400<br>

    2. BRAZIL es: varones= 300 <br>

    mujeres= 500 <br>

    total= 800<br>

    3. ECUADOR es: varones= 200 <br>

    mujeres= 500 <br>

    total= 700

    <br>

    <br>

    <br>

    <b><u> 3.  PAIS: </u></b> definicion <br>

    <br>

   <a name="p"></a> 3.1 <b><u>  peru: </u></b> <br>

   <a name="b"></a>  3.2<b><u>  brazil: </u></b><br>

   <a name="e"></a> 3.3 <b><u>  ecuador: </u></b><br>

   <a href="#arriba"> 3.4 <b><u>  ir arriba : </u></b><br></a>

</BODY>

</html>
codigo de una pagina web 

<html>

    <head>

        <title> LAYOUT </title>

    </head>

    <body>

        <header>

            <div>

                <img src="insertar direccion" 

                width="70" alt="no se ecuentra">

            </div>

        </header>

        <h1> CONTENIDO PRINCIPAL </h1>

        <P>DOCUMENTO DE ESTRUCTURA DE CONTENIDO</P>

        <P> Es la forma de aqrupar el contenido dentro de la pagina

            web, </P>

            <ul>

               <a href=""> <li> documento </li></a>

               <a href=""> <li> estructura </li></a>

               <a href=""> <li> contenido</li></a>

            </ul>

<h2> CONTENIDO SEGUNDARIO</h2>

<P> representa un seccion de un documento.sirve para determinar </P>

<h2> COPIA DEL CONTENIDO SEGUNDARIO</h2>

<P> se puedenutilizar duplicar la   <b><u> etiqueta h2 </u></b></P>

  <p> representa una seccion de un documento .sirve para determinar</p>

<h2> ELEMENTO ASIDE </h2>

<P> es el contenido relacionado indirectamente con el contenido principal</P>

<p>SENATI</p>

<p>carrera de ingenieria de software</p>

<p>desarrollo de aplicacion web 01</p>

</body>

</html>

jueves, 19 de septiembre de 2019

CURSO DE HTML 2da CLASE

ENLACES

<html>

  <title>  programa de enlace </title>

  <p>enlace de una pagina 

  <a href="venta.html "> venta</a>

</p>

<p>enlasando a google

    <a href="https://www.google.com/">ir a google</a>

</p>

</html>

VENTA 

<!DOCTYPE html>

<html> 

<link href="c:/esindex.css" rel="stylesheet" type="text/css">

 <title>VENTAS</title>

<h1>Tienda Cybertron</h1>  <br>

Ventas de equipos de computo en general</b> <br>

producto &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

 p.v.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cantidad &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type=button value="total" onclick="TOT();"> <br>

<input type=text id="tdes1" size = "20">

<input type=text id="tpre1" value="0" size = "4">

<input type=text id="tcan1" value="0" size = "4">

<input type=text id="ttot1" value="0" size = "4">

<br>

<input type=text id="tdes2" size = "20">

<input type=text id="tpre2" value="0" size = "4">

<input type=text id="tcan2" value="0" size = "4">

<input type=text id="ttot2" value="0" size = "4">

<br>

<input type=text id="tdes3" size = "20">

<input type=text id="tpre3" value="0" size = "4">

<input type=text id="tcan3" value="0" size = "4">

<input type=text id="ttot3" value="0" size = "4"><br>

total a pgar es

<input type=text id="tof" value="0" size = "4">

<script>

  function TOT (){

    var n1 = document.getElementById('tpre1').value;

    var n2 = document.getElementById('tcan1').value; 

    var total = parseInt(n1) * parseInt(n2);

    document.getElementById('ttot1').value=total

    var n3 = document.getElementById('tpre2').value;

    var n4 = document.getElementById('tcan2').value; 

    var total = parseInt(n3) * parseInt(n4);

    document.getElementById('ttot2').value=total

  var n5 = document.getElementById('tpre3').value;

    var n6 = document.getElementById('tcan3').value; 

    var total = parseInt(n5) * parseInt(n6);

    document.getElementById('ttot3').value=total

   var n7 = document.getElementById('ttot1').value;

    var n8 = document.getElementById('ttot2').value; 

   var n9 = document.getElementById('ttot3').value; 

    var total = parseInt(n7) + parseInt(n8)+parseInt(n9);

    document.getElementById('tof').value=total

  } 

  </script> 

  <a href="tecnologiaveinte.blogspot.com/"></a>

</html>

CODIGO PARA HACER UN BUSCADOR EN HTML DE GOOGLE CON SU CUADRO

<FORM method=GET action="http://www.google.es/search">

    <fieldset>

        <input type=hidden name=ie value=UTF-8 />

        <input type=hidden name=oe value=UTF-8 />

        <INPUT TYPE=text id="s" name="q" value="" size="50" />

        <font size=-1>

        <input type=hidden name=domains value="http://www.uterra.com" /><br>

        <input type=radio name=sitesearch value="" /> En todo Internet</br>

        <input type=radio name=sitesearch value="http://www.uterra.com" checked />

 En Uterra.Com

        <INPUT type=submit  id="x" name=btnG VALUE="Buscar" />

        </font>

    </fieldset>

    </FORM>

    <form action="http://www.google.es/search" method="get">

    google:

    <input type="search"name="q">

    <input type="submit" value="buscar">

    </form>

CODIGO DE UN FORMULARIO EN HTML

<html>

<form action="/my-handling-form-page" method="post">

    <label for="name">Name:</label>

    <input type="text" name="nom" requerid autofocus />

    <br>

    <label for="mail">E-mail:</label>

    <input type="email" id="mail" />

    <br>

    URL:

    <input type="search" name="q">

    <input type="submit" value="buscar">

    <br>

    <label for="start">fecha:</label>

    <input type="date" id="start" name="trip-start" value="2019-07-22" min="2019-01-01" max="2019-12-31">

    <br>

    <label for="tiempo">tiempo:</label>

    <input type="tiempol" id="tim" />

    <br>

    <!-- Campo de entrada de fecha -->

    fecha y hora:

    <input type="date" name="fecha" min="2019-03-25" max="2019-05-25" step="2">

    <!-- Campo de entrada de hora -->

    <input type="time" name="hora" min="18:00" max="21:00" step="3600">

    <br>

    <!-- Campo de entrada de mes -->

    mess:

    <input type="month" name="fecha" min="mes" max="2019" step="1">

    <br>

    <!-- Campo de entrada de mes -->

    semana:

    <input type="week" name="sema1" min="semana" max="09" step="1">

    <br>

    <label for="num">numero(min-10,max10):</label>

    <input type="num1" id="mnum2" min="-10" max="40" value="0" />

    color favorito: <input type="color" value="#ff0000">

    <input type="submit" value="enviar">

</form>

</html>

CODIGO PARA IMAGEN EN HTML 

<html>

        <img src="descarga.jfif" alt="mensage"

 width="300"heigth="150" title="imagen de una rosa negra" 

alt="no se encontro la imagen" ALIGN=MIDDLE border=3 hspace=30>

        texto alineado al centro

        <img src="DIRRECION DE URLO DE LA IMAGEN" width="300"

        height="150"title="imagen de una rosa negra" alt="no se encontro la imagen" 

ALIGN=MIDDLE border=3 hspace=30>

        <img src="DIRRECION DE URLO DE LA IMAGEN" alt="mensage" width="300"heigth="150" title="

imagen de una rosa negra" alt="no se encontro la imagen" 

ALIGN=MIDDLE border=3 hspace=30>

        <img src="DIRRECION DE URLO DE LA IMAGEN" 

alt="mensage" width="300"heigth="150" title="imagen de una rosa negra"

 alt="no se encontro la imagen" ALIGN=MIDDLE border=3 hspace=30>

</html>
AGRUPACION DE ELEMENTOS

<html>

        <head>

            <title>Agrupar elementos</title>

        </head>

        <body>

            <form action="" method="get">

                <fieldset>

                    <legend>Agrupación de varios controles</legend>

                    Campo de texto:

                    <br>

                    <input type="text" name="campo_de_texto">

                    <br> Lista de selección:

                    <br>

                    <select name="lista_de_selección">

                            <option value="opción 1">Opción 1</option>

                            <option value="opción 2">Opción 2</option>

                            <option value="opción 3">Opción 3</option>

                        </select>

                    <br> Área de texto:

                    <br>

                    <textarea name="area_de_texto" rows="3"

 cols="50">En este control del formulario se pueden escribir varias líneas de texto

</textarea>

                </fieldset>

                <fieldset>

                    <legend>Agrupación de botones</legend>

                    <button type="reset">Resetear</button>

                    <button type="submit">Enviar</button>

                </fieldset>

            </form>

        </body>

        </html>
CODIGO DE TABLA 

<html>

        <b><u> TABLA DE COLORES </u></b>

<table>

    <tr>

        <th> titulo 1</th>

        <th> titulo 2</th>

        <th> titulo 3</th>

    </tr>

    <tr>

        <td>celda 1x1</td>

        <td>celda 2x1</td>

        <td>celda 3x1</td>

    </tr>

    <tr>

            <td>celda 1x2</td>

            <td>celda 2x2</td>

            <td>celda 3x2</td>

        </tr>

        <tr>

                <td>celda 1x2</td>

                <td>celda 2x2</td>

                <td>celda 3x2</td>

            </tr>

</table>

</html>

CODIGO DE TABLA CON BORDE Y COLOR Y TAMAÑO

<html>

        <b><u> TABLA DE COLORES </u></b>

<table border="3" align="center" widht="30% " bgcolor="#fffcc">

    <tr>

        <td width="15%">1</td>

        <td width="50%">2</td>

        <td width="20%">  3</td>

    </tr>

    <tr>

        <td>4</td>

        <td>5</td>

        <td>6</td>

    </tr>

    <tr>

            <td bgcolor="#fffccc">celda 1x2</td>

            <td bgcolor="#fffc00">celda 2x2</td>

            <td bgcolor="#00cccc">celda 3x2</td>

        </tr>

</table>

</html>
CELDA DE COLORES

<html>

        <b><u> TABLA DE COLORES </u></b>

<table border="3" align="center" widht="25% " bgcolor="#fffcc">

    <tr>

        <th colspan="4"> TABLA DE CONTENIDOS</th>

    </tr>

    <tr>

        <th rowspan="2">&nbsp;</th>

        <th colspan="3">Asistencia</th>

    </tr>

    <tr>

        <td>4</td>

        <td>5</td>

        <td>6</td>

    </tr>

    <tr>

        <th>alumno 1</th>

            <td bgcolor="#fffccc">si</td>

            <td bgcolor="#fffc00">no</td>

            <td bgcolor="#00cccc">si</td>

        </tr>

        <tr>

                <th>alumno 2</th>

                    <td bgcolor="#fffccc">no</td>

                    <td bgcolor="#fffc00">si</td>

                    <td bgcolor="#00cccc">si</td>

                </tr>

</table>

</html>
  CODIGO DE FRAME O MARCOS 

<html>

    <head>

        <title> marcos </title>

    </head>

    <frameset cols="15%,*">

        <frame src="H.html">

                <frame src="z.html" name ="principal">

    </frameset>

    <body bgcolor="red">

    </body>

</html>

franklin huasacca

Seguidores