domingo, 20 de septiembre de 2020

Calculadora HTML / CSS / JS

See the Pen MWyzKmv by Fabian Albarracin (@fabianalbarracin) on CodePen.

en

viernes, 31 de julio de 2020

Etiqueta Style

Etiqueta style

Erase una vez HTML

El Padre

El padre de la Web, Tim Berners-Lee, es tambien el padre del lenguaje HTML, Hypertext Markup Language.

La estandarización

El lenguaje HTML está estandarizado por el W3C, el World Wide Consortium.
La version actual de HTML es la 5, aunque no esta completa.
Se espera que este terminada en el 2014








<!DOCTYPE html>



<html lang="en">



<head>



    <meta charset="UTF-8">



    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <title>Etiqueta style</title>



    <style type="text/css">



        body {



            background-color: #ccc;



            color: rgb(180, 205, 238)



        }



        h1,



        h2 {



            font-family: Georgia;



        }



        h1 {



            font-size: 3em;



        }



        h2 {



            font-size: 2em;



        }



        p {



            font-family: Arial, Helvetica, sans-serif;



        }



    </style>



</head>



<body>



    <h1>Erase una vez HTML</h1>



    <h2>El Padre</h2>



    <p>El padre de la Web, <strong>Tim Berners-Lee</strong>, es tambien el padre del lenguaje HTML,



        <em>Hypertext Markup Language</em>.</p>



    <h2>La estandarización</h2>



    <p>El lenguaje HTML está estandarizado por el W3C, el <em>World Wide Consortium</em>.</p>



    <p>La version actual de HTML es la 5, aunque no esta completa.</p>



    <p>Se espera que este terminada en el <strong>2014</strong></p>



</body>



</html>
en

Atributo style

"Atributo" Style !

Erase una vez HTML

El Padre

El padre de la Web, Tim Berners-Lee, es tambien el padre del lenguaje HTML, Hypertext Markup Language.

La estandarización

El lenguaje HTML está estandarizado por el W3C, el World Wide Consortium.
La version actual de HTML es la 5, aunque no esta completa.
Se espera que este terminada en el 2014

Erase una vez HTML "ahora con atributo style"

El Padre

El padre de la Web, Tim Berners-Lee, es tambien el padre del lenguaje HTML, Hypertext Markup Language.

La estandarización

El lenguaje HTML está estandarizado por el W3C, el World Wide Consortium.
La version actual de HTML es la 5, aunque no esta completa.
Se espera que este terminada en el 2014








<!DOCTYPE html>



<html lang="en">



<head>



    <meta charset="UTF-8">



    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <title>"Atributo" Style !</title>



</head>



<body>



    <h1>Erase una vez HTML</h1>



    <h2>El Padre</h2>



    <p>El padre de la Web, <strong>Tim Berners-Lee</strong>, es tambien el padre del lenguaje HTML,



        <em>Hypertext Markup Language</em>.</p>



    <h2>La estandarización</h2>



    <p>El lenguaje HTML está estandarizado por el W3C, el <em>World Wide Consortium</em>.</p>



    <p>La version actual de HTML es la 5, aunque no esta completa.</p>



    <p>Se espera que este terminada en el <strong>2014</strong></p>



</body>



<body style="color:rgb(196, 18, 18);background-color: rgb(0, 0, 0);">



    <h1 style="font-family:Georgia;font-size: 3em;">Erase una vez HTML "ahora con atributo style"</h1>



    <h2 style="font-family:Georgia;font-size: 2em;">El Padre</h2>



    <p style="font-family: Arial,Helvetica, sans-serif;">El padre de la Web, <strong>Tim Berners-Lee</strong>, es



        tambien el padre del lenguaje HTML,



        <em>Hypertext Markup Language</em>.</p>



    <h2 style="font-family:Georgia;font-size: 2em;">La estandarización</h2>



    <p style="font-family: Arial,Helvetica, sans-serif;">El lenguaje HTML está estandarizado por el W3C, el <em>World



            Wide Consortium</em>.</p>



    <p style="font-family: Arial,Helvetica, sans-serif;">La version actual de HTML es la 5, aunque no esta completa.</p>



    <p style="font-family: Arial,Helvetica, sans-serif;">Se espera que este terminada en el <strong>2014</strong></p>



</body>



</html>
en

Practica formularios

Forms

TIENES ALGO PARA DECIR?

A traves de este formulario puedes enviarme un mensaje para ayudarme a corregir errores a mejorar mi blog o simplemente para decir hola. Cualquier cosa que tengas que decir estaré feliz de contestarte.
Mensaje


Nuevos temas Que temas te gustaria que trate mas en mi sitio? 








<!DOCTYPE html>



<html lang="en">



<head>



    <meta charset="UTF-8">



    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <title>Forms</title>



</head>



<body>



    <h1>TIENES ALGO PARA DECIR?</h1>



    <p> A traves de este formulario puedes enviarme un mensaje para ayudarme a corregir errores



        a mejorar mi blog o simplemente para decir hola. Cualquier cosa que tengas que decir



        estaré feliz de contestarte.



    </p>



    <form action="../../form-result.php" target="_blank">



        <fieldset>



            <legend>Mensaje</legend>



            <p><label>Tu nombre <input type="text" name="nombre"></label></p>



            <p><label>Tu direccion de correo <input type="text" name="correo"></label></p>



            <p><label>Tu mensaje <br>



                    <textarea name="mensaje"></textarea>



                </label>



            </p>



            <fieldset>



                <legend>Nuevos temas</legend>



                <p>



                    Que temas te gustaria que trate mas en mi sitio? <br>



                    <label> <input type="checkbox" name="html">HTML</label>



                    <label> <input type="checkbox" name="Graficos">Graficos</label>



                    <label><input type="checkbox" name="Videojuegos">VideoJuegos</label>



                    <label> <input type="checkbox" name="Arte">Arte</label>



                    <label> <input type="checkbox" name="Musica" id="">Musica</label>



                </p>



            </fieldset>



            <p>



                <input type="submit" value="Enviar mensaje">



                <input type="reset" value="Comenzar de nuevo">



            </p>



        </fieldset>



    </form>



</body>



</html>
en

domingo, 26 de julio de 2020

Ejercicios Tablas Html.

Tablas!
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6

Hoy Mañana Miércoles
Soleado Mayormente soleado Parcialmente nublado
19°C 17°C 12°C
E 13 km/h E 11 km/h S 16 km/h

Dia Hoy Mañana Miércoles
Condición Soleado Mayormente Soleado Parcialmente nublado
Temperatura 19°C 17°C 12°C
Vientos E 13 km/h E 11 km/h S 16 km/h

Consumo de combustible de los autos a lo largo de las pruebas de manejo.
Car Enero Febrero Marzo
Chevrolet Camaro 1254 lts 1582 lts 1502 lts
Lamborguini Aventador 1854 lts 1978 lts 1502 lts

"colspan"
Dia 1 Dia 2 Dia 3 Dia 4
Mike (Lastimado) 0 km 4 km
Susan 23 km 18 km 19 km 15 km

"Rowspan"
Basico Completo
Instalación Gratis! $49.99
Primer año $19.99
Segundo Año $9.99 $29.99

thead,tbody,tfoot
Anthony Lione
Fecha Entrada Salida Entrada Salida
15/07 $200,00 $50,00 $0 $0
28/07 $0,00 $100,00 $100,00 $0,00
09/08 $0,00 $50,00 $0,00 $80,00
22/08 $40,00 $0,00 $0,00 $110,00
25/08 $0,00 $20,00 $0,00 $0,00
Balance $20,00 $10,00

Agrupación de Columnas
Mike Tara
Primera prueba Segunda prueba Primera prueba Segunda prueba
Dia 1 25 km 38 km 28 km 37 km
Dia 2 22 km 35 km 30 km 35 km 











<html lang="en">



<head>



    <meta charset="UTF-8">



    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <title>Tablas!</title>



</head>



<body>



    <table border="1">



        <tr>



            <td>Celda 1</td>



            <td>Celda 2</td>



            <td>Celda 3</td>



        </tr>



        <tr>



            <td>Celda 4</td>



            <td>Celda 5</td>



            <td>Celda 6</td>



        </tr>



    </table>



    <br>



    <table border="1">



        <tr>



            <th>Hoy</th>



            <th>Mañana</th>



            <th>Miércoles</th>



        </tr>



        <tr align="center">



            <td>Soleado</td>



            <td>Mayormente soleado</td>



            <td>Parcialmente nublado</td>



        </tr>



        <tr align="center">



            <td>19°C</td>



            <td>17°C</td>



            <td>12°C</td>



        </tr>



        <tr align="center">



            <td>E 13 km/h</td>



            <td>E 11 km/h</td>



            <td>S 16 km/h</td>



        </tr>



    </table>



    <br>



    <table border="1">



        <tr>



            <th scope="row">Dia</th>



            <th>Hoy</th>



            <th>Mañana</th>



            <th>Miércoles</th>



        </tr>



        <tr align="center">



            <th>Condición</th>



            <td>Soleado</td>



            <td>Mayormente Soleado</td>



            <td>Parcialmente nublado</td>



        </tr>



        <tr align="center">



            <th>Temperatura</th>



            <td>19°C</td>



            <td>17°C</td>



            <td>12°C</td>



        </tr>



        <tr align="center">



            <th>Vientos</th>



            <td>E 13 km/h</td>



            <td>E 11 km/h</td>



            <td>S 16 km/h</td>



        </tr>



    </table>



    <br>



    <table border="1">



        <caption> <strong> Consumo de combustible de los autos a lo largo de las pruebas de manejo.</strong></caption>



        <tr>



            <th scope="col">Car</th>



            <th>Enero</th>



            <th>Febrero</th>



            <th>Marzo</th>



        </tr>



        <tr>



            <th>Chevrolet Camaro</th>



            <td>1254 lts</td>



            <td>1582 lts</td>



            <td>1502 lts</td>



        </tr>



        <tr>



            <th>Lamborguini Aventador</th>



            <td>1854 lts</td>



            <td>1978 lts</td>



            <td>1502 lts</td>



        </tr>



    </table>



    <br>



    <table border="1">



        <caption> <strong>"colspan" </strong></caption>



        <tr scope="col">



            <th></th>



            <th>Dia 1</th>



            <th>Dia 2</th>



            <th>Dia 3</th>



            <th>Dia 4</th>



        </tr>



        <tr align="center">



            <th>Mike (Lastimado)</th>



            <td colspan="3"> 0 km</td>



            <td>4 km</td>



        </tr>



        <tr align="center">



            <th>Susan</th>



            <td>23 km</td>



            <td>18 km</td>



            <td> 19 km</td>



            <td>15 km</td>



        </tr>



    </table>



    <br>



    <table border="1">



        <caption><strong>"Rowspan"</strong></caption>



        <tr>



            <th></th>



            <th>Basico</th>



            <th>Completo</th>



        </tr>



        <tr>



            <th>Instalación</th>



            <td rowspan="2">Gratis!</td>



            <td>$49.99</td>



        </tr>



        <tr>



            <th>Primer año</th>



            <td>$19.99</td>



        </tr>



        <tr>



            <th>Segundo Año</th>



            <td>$9.99</td>



            <td>$29.99</td>



        </tr>



    </table>



    <br>



    <table border="1">



        <caption><strong>thead,tbody,tfoot</strong></caption>



        <thead>



            <tr>



                <th></th>



                <th colspan="2">Anthony</th>



                <th colspan="2">Lione</th>



            </tr>



            <tr>



                <th>Fecha</th>



                <th>Entrada</th>



                <th>Salida</th>



                <th>Entrada</th>



                <th>Salida</th>



            </tr>



        </thead>



        <tbody style="background-color: rgb(248, 73, 4);">



            <tr>



                <th>15/07</th>



                <td>$200,00</td>



                <td>$50,00</td>



                <td>$0</td>



                <td>$0</td>



            </tr>



            <tr>



                <th>28/07</th>



                <td>$0,00</td>



                <td>$100,00</td>



                <td>$100,00</td>



                <td>$0,00</td>



            </tr>



        </tbody>



        <tbody style="background-color: rgb(100, 11, 243);">



            <tr>



                <th>09/08</th>



                <td>$0,00</td>



                <td>$50,00</td>



                <td>$0,00</td>



                <td>$80,00</td>



            </tr>



            <tr>



                <th>22/08</th>



                <td>$40,00</td>



                <td>$0,00</td>



                <td>$0,00</td>



                <td>$110,00</td>



            </tr>



            <tr>



                <th>25/08</th>



                <td>$0,00</td>



                <td>$20,00</td>



                <td>$0,00</td>



                <td>$0,00</td>



            </tr>



        </tbody>



        <tfoot>



            <tr>



                <th>Balance</th>



                <td colspan="2">$20,00</td>



                <td colspan="2">$10,00</td>



            </tr>



        </tfoot>



    </table>



    <br>



    <table border="1">



        <caption><strong>Agrupación de Columnas</strong></caption>



        <colgroup>



            <colgroup span="2" style="background-color: rgb(70, 87, 235);"></colgroup>



            <colgroup span="2" style="background-color: rgb(212, 35, 88);"></colgroup>



        </colgroup>



        <tr>



            <th></th>



            <th colspan="2">Mike</th>



            <th colspan="2">Tara</th>



        </tr>



        <tr>



            <th></th>



            <th>Primera prueba</th>



            <th>Segunda prueba</th>



            <th>Primera prueba</th>



            <th>Segunda prueba</th>



        </tr>



        <tr>



            <th>Dia 1</th>



            <td>25 km</td>



            <td>38 km</td>



            <td>28 km</td>



            <td>37 km</td>



        </tr>



        <tr>



            <th>Dia 2</th>



            <td>22 km</td>



            <td>35 km</td>



            <td>30 km</td>



            <td>35 km</td>



        </tr>



    </table>



</body>



</html>
en
Suscribirse a: Entradas (Atom)

Calculadora HTML / CSS / JS

See the Pen MWyzKmv by Fabian Albarracin ( @fabianalbarracin ) on CodePen .