Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML 2

    Cargado por

    isacabe
    14 vistas15 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    14 vistas15 páginas

    HTML 2

    Cargado por

    isacabe

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 15

    PROGRAMACION WEB HTML

    TAGS <ol> Lista ordenada ol ( ordened list ) li ( list item)

    Este elemento HTML es til cuando debemos numerar una serie de objetos. Se emplea la marca <ol> y su correspondiente marca de cerrado es </ol> En su interior cada uno de los items se indica con el elemento li, que tambin tiene la marca de comienzo <li> y la marca de fin de item </li> <html> <head> </head> <body> <ol> <li>Rodriguez Pablo</li> <li>Gonzalez Raul</li> <li>Lopez Hector</li> </ol> </body> </html> TAGS <ul> Lista NO ordenada ul ( un ordered ) li ( list item)

    Una lista no ordenada como su nombre lo indica no utiliza un nmero delante de cada items sino un pequeo smbolo grfico. La forma de implementar este tipo de listas es igual a las listas ordenadas. <html> <head> </head> <body> <h2>Lenguajes de programacin.</h2> <ul> <li>C</li> <li>C++</li> <li>Java</li> <li>C#</li> </ul> </body> </html>

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    TAGS <dl> Lista de definiciones

    dl ( definition list ) dt ( definition term) dd (definition description)

    Se utiliza para asociar un trmino y la definicin del mismo. El navegador se encarga de destacar y separa el trmino y su definicin. <html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programacin, diseado a mediados de los aos 1980, por Bjarne Stroustrup, como extensin del lenguaje de programacin C.</dd> <dt>Java</dt> <dd>Es un lenguaje de programacin orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la del lenguaje C.</dd> </dl> </body> </html>

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    LISTAS ANIDADAS Es posible anidar listas de distinto tipo, por ejemplo una lista no ordenada y uno de los item puede ser una lista ordenada. Para el anidamiento de listas solo se debe tener cuidado en la correcta apertura y cerrado de las marcas. <html> <head> </head> <body> <ol> <li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nacin</a></li> <li><a href="http://www.clarin.com.ar">Clarn</a></li> <li><a href="http://www.pagina12.com.ar">Pgina 12</a></li> </ul> </li> <li>Espaa <ul> <li><a href="http://www.elpais.es">El Pas Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li> <li>Mxico <ul> <li><a href="http://www.jornada.unam.mx">La Jornada</a></li> <li><a href="http://www.el-universal.com.mx">El Universal</a></li> </ul> </li> </ol> </body>

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML


    </html> TAGS <table> Tablas tr ( table row ) td ( table data )

    El objetivo de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas. Anteriormente se utilizaban las tablas para organizar y distribuir el contenido de una pgina completa, en la actualidad se hace mediante CSS, es decir hojas de estilo. Para la creacin de una tabla intervienen una serie de elementos: <table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre. <tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table. Este elemento requiere la marca de cierre. <td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr. Este elemento requiere la marca de cierre. <html> <head> </head> <body> <table border="1"> <tr> <td>China</td><td>1300 millones hab</td> </tr> <tr> <td>India</td><td>1080 millones hab</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones hab</td> </tr> </table> </body> </html>

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML


    TABLAS CON ENCABEZADO <th> th ( table header cell)

    Para indicar que se trata de una celda de encabezado se utiliza el elemento <th> en lugar de <td> <html> <head> </head> <body> <table border="1"> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML


    TABLAS CON TITULO <caption> caption ( titulo)

    Para colocar un ttulo a una tabla se debe incluir el elemento caption inmediatamente despus de abrir la marca table. El elemento caption requiere la marca de apertura y cierre. <html> <head> </head> <body> <table border="1"> <caption>Poblacin de los paises con mayor cantidad de habitantes.</caption> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    TABLAS COMBINACION DE CELDAS Si fuera necesario que una celda ocupe el lugar de dos o ms celdas en forma horizonzal o vertical, los tags td o th disponen de dos propiedades llamadas rowspan y colspan. A estas propiedades se les asigna un valor entero a partir de 2. <html> <head> </head> <body> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    TAG <title> Contenido de cabecera de la pagina El elemento title permite definir el ttulo que aparecer en la barra del navegador (es decir en la parte ms alta de la ventana) <html> <head> <title>TITULO DE LA PAGINA</title> </head> <body> <h1>Prueba del elemento title</h1> </body> </html>

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    TAG <meta> Contenido de cabecera de la pgina meta es un elemento que no se visualiza tiene por objetivo especificar informacin sobre el propio documento. Las dos propiedades fundamentales de la marca meta y los valores ms comunes con los que se incializa son: <meta name="nombre de la propiedad" content="valor de la propiedad"> No existe ninguna especificacin de la W3C que defina los valores posibles para el atributo name, si bien existen algunos que son estandares de facto (description, keywords, author etc.) Ejemplo de algunas propiedades y valores ms comunes: <meta name="keywords" content="html, programacin, webmaster"> Los buscadores tienen en cuenta los metadatos. Si en la pgina se inicializa la propiedad name del elemento meta con el valor keywords el navegador buscar en la propiedad content las distintas palabras claves ms representativas para dicha pgina. Esto es muy til para posicionar nuestra pgina segn el contenido que provee. <meta name="description" content="El objetivo de este tutorial es presentar los conceptos bsicos de HTML. Es objetivo prioritario respetar los estndares del W3C"> <meta name="author" content="Diego Rodriguez"> <html> <head> <title>HTML</title> <meta name="keywords" content="html, programacin, webmaster, tutorial"> <meta name="description" content="El objetivo de este tutorial es presentar los conceptos bsicos de HTML. Es objetivo prioritario respetar los estndares del W3C"> <meta name="author" content="Diego Rodriguez"> <meta name="copyright" content="Interpolacion inc."> </head> <body> </body> </html>

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    TAG Sintaxis para caracteres Especiales En ocasiones es necesario utilizar caracteres que son considerados por el navegador como parte de la sintaxis de HTML, en esos casos se utiliza otra sintaxis como se muestra a continuacin.

    < &lt; > &gt; & &amp; " &quot; &nbsp; &copy; &euro;
    La sintaxis consiste en teclear un ampersand seguido de un nombre significativo y finalmente un punto y coma. Ejemplo: Desplegar la siguiente ecuacin. 10+x*y < 12*z <html> <head> <title>Ttulo de la primer pgina</title> </head> <body> <h1> 10+x*y &lt; 12*z </h1> </body> </html>

    //Espacio en blanco.

    10

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    TAGS <form> FORMULARIOS <input> Un formulario permite que el visitante capture datos que sean enviados a un servidor. Es el medio ideal para registrar comentarios del visitante sobre el sitio, solicitar productos, sacar turnos etc. I M P O R T A N T E !! El lenguaje HTML solo tiene el objetivo de crear el formulario. El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta actividad est delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP etc.) Para crear un formulario se utiliza el elemento form, que tiene marca de comienzo y fin. Dentro de la marca form se pueden incluir otros elementos para crear botones, editores de lnea, cuadros de chequeo, radios de seleccin etc. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <input type="submit" value="enviar"> </form> </body> </html>

    En el elemento form se deben definir dos propiedades (action y method): <form action="/registrardatos.php" method="post"> La propiedad action se inicializa con el nombre de la pgina que procesar los datos en el servidor. La propiedad que se debe inicializar es method. Esta propiedad puede almacenar nicamente dos valores (post o get) Normalmente un formulario se enva mediante post (los datos se envan con el cuerpo del formulario) En caso de utilizar get los datos se envan en la cabecera de la peticin de la pgina, utilizando el mtodo get estamos limitados en la cantidad de datos a enviar, no as con el mtodo post) El elemento input permite definir un cuadro de texto (editor de lnea) siempre y cuando se asigne a la propiedad type el valor "text".

    11

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML


    Todo cuadro de texto debe inicializar la propiedad name con un nombre para el cuadro de texto. Este es un dato fundamental para poder recuperar el dato ingresado en el servidor. La propiedad size con el valor 20, significa que el cuadro de texto se dimensiona para permitir mostrar 20 caracteres (no se limita la cantidad de caracteres a ingresar por parte del visitante sino la cantidad de caracteres que se pueden visualizar) <input type="submit" value="enviar"> Tambin mediante el elemento input se define un botn para el envo de datos al servidor. Es necesario inicializar la propiedad type con el valor submit, con esto se obtiene un botn para el envo de datos. La propiedad value almacena la etiqueta que debe mostrar el botn.

    12

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    TAGS <form> FORMULARIOS PASSWORD Y BORRAR CONTENIDOS <input> Utilizando el TAG input es posible definir cuadros para el ingreso de una clave y botones para borrar el contenido de todos los controles del formulario. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html>

    <input type="password" name="clave" size="12"> Se utiliza el elemento input pero se inicializa la propiedad type con el valor "password", con esto se logra que cuando el visitante ingrese la clave se visualicen asteriscos en lugar de los caracteres tecleados. Para definir un botn que permita borrar todos los datos ingresados hasta el momento se hace mediante: <input type="reset" value="borrar"> Se inicializa la propiedad type con el valor "reset", con esto sabe el navegador que cuando dicho botn sea presionado debe borrar todos los controles de ingreso de datos de dicho formulario. I M P O R T A N T E !! Tener en cuenta que la propiedad name de cada elemento input debe tener un nombre distinto (esto debido a que el servidor recibe datos a partir de ese nombre)

    13

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    TAGS <form> FORMULARIOS TEXTAREA <textarea> Es un elemento que requiere una marca de comienzo y una de finalizacin. El elemento de tipo textarea (input/text) permite el ingreso de varias lneas a diferencia del cuadro de texto

    Es muy utilizado cuando se desea ingresar un comentario de una longitud de caracteres grande. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Ingrese su mail: <input type="text" name="mail" size="50"><br> Comentarios:<br> <textarea name="comentarios" rows="5" cols="60"></textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>

    La sintaxis para definir un rea de texto para el ingreso de mltiples lneas es: <textarea name="comentarios" rows="5" cols="60"></textarea> La propiedad name similar a los otros elementos relacionados a formularios tiene dos propiedades llamadas rows y cols. Estas dos propiedades indican la cantidad de filas y columnas que visualiza el rea de texto.

    14

    Profesora M. en Informtica Georgina Salazar Partida

    PROGRAMACION WEB HTML

    TAGS <form> FORMULARIOS CHECKBOX <input> Un checkbox presenta casillas de seleccin en la que cada opcin tiene dos posibles estados seleccionado o no seleccionado.

    <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione los lenguajes que conoce: <br> <input type="checkbox" name="java">Java<br> <input type="checkbox" name="cmasmas">C++<br> <input type="checkbox" name="c">C<br> <input type="checkbox" name="csharp">C#<br> <input type="submit" value="Enviar"> </form> </body> </html>

    La sintaxis para definir controles de formulario de tipo checkbox: <input type="checkbox" name="java">Java<br> Se utiliza el elemento HTML input, se inicializa la propiedad type con el valor checkbox. Un control checkbox no muestra texto, solo una casilla que el usuario puede seleccionar o NO. Si se desea que aparezca un mensaje junto al checkbox solo se agrega seguido al elemento input. I M P O R T A N T E !! Los caracteres permitidos de la propiedad name son los caracteres alfabticos y dgitos. Siempre y cuando no comience con un digito.

    15

    Profesora M. en Informtica Georgina Salazar Partida

    También podría gustarte