Descargado 12 veces
Subido porLuis Fernando Aguas Bucheli
S1-DAW-2022S1.pptx
Este documento presenta la unidad 1 del curso de Desarrollo de Aplicaciones Web sobre programación web en el cliente. Introduce conceptos básicos de HTML como etiquetas, atributos y estructura de documentos. Explica elementos como párrafos, encabezados, énfasis y citas. También cubre formularios, con elementos como campos de texto, casillas de verificación y botones, así como cómo enviar la información.
Más contenido relacionado
Más de Luis Fernando Aguas Bucheli
S1-DAW-2022S1.pptx
- 1. Facultad de CienciasInformáticas Desarrollo de Aplicaciones Web Unidad 1: Programación web en el cliente PhD(c). Luis Fernando Aguas Bucheli +593 984015184 @Aguaszoft luis.aguas@utm.edu.ec
- 2. No me digaque el cielo es el límite cuando hay huellas en la luna. Paul Brandt.
- 3. Resultado de Aprendizaje principios •Diseñar software apliquen diseño, para que un producto de en el que se de sea robusto, fácil de mantener y modificar • Tema: 1 Programación web en el cliente • 1.1 Introducción, Sintaxis y estructura HTML • 1.1.1 Formularios HTML Contenido
- 4. Objetivos de DesarrolloSostenible Meta 4.7 De aquí a 2030, asegurar que todos los alumnos adquieran los conocimientos teóricos y prácticos necesarios para promover el desarrollo sostenible, entre otras cosas mediante la educación para el desarrollo sostenible y los estilos de vida sostenibles, los derechos humanos, la igualdad de género, la promoción de una cultura de paz y no violencia, la ciudadanía mundial y la valoración de la diversidad cultural y la contribución de la cultura al desarrollo sostenible
- 5. HyperText Markup Language- Lenguaje de marcadode hipertexto HTML es un lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementarel texto con objetos tales como imágenes.
- 6. El HTML seescribe en forma de etiquetas o TAGs, contenidas dentro de corchetes angulares (< y >). html head title Ejemplo /title /head body p Ejemplo /p /body /html
- 7. Los caracteresespeciales sedeben convertir en HTML para mostrarse correctamente en un navegador. Carácter Código HTML á á é é í í ó ó ú ú ü ü ñ ñ ¡ ¡ Carácter Código HTML Á Á É É Í Í Ó Ó Ú Ú Ü Ü Ñ Ñ ¿ ¿
- 8. Los atributosse incluyendentro de la etiquetade apertura para añadirinformación adicional sobre el elemento. Se expresan de la forma: atributo=”valor” <etiqueta atributo=”valor”>contenido</etiqueta> Un elemento HTML está compuestopor una etiqueta de apertura, los atributos, el contenido y la etiqueta de cierre. Estos elementos se aplican al contenido del documento para cambiar la forma en que el navegadorinterpretará esa información en la pantalla.
- 9. El lenguaje HTMLoriginal es muy permisivo con su sintaxis y aunque esto pueda parecer algo bueno (flexible) no lo es, pues trae como resultado páginas desordenadas, difíciles de modificar y poco profesionales.
- 10. Reglas: 1. Las etiquetasse cierran en el mismo orden en quese abren: <html><body>Texto</html></body> <html><body>Texto</body></html> 2. Los nombres de las etiquetas y sus atributos se escriben preferentemente en minúsculas: <HTML><BODY>Texto</BODY></HTML> <html><body>Texto</body></html> 3. Los atributosvan entre comillas: <p align=left>Texto<p> <p align=“left”>Texto<p>
- 11. 4. Los valoresdelos atributos no se contraen o comprimen: <p left>Texto<p> <p align=“left”>Texto<p> 5. Toda etiqueta debe deser cerrarse: <html><body>Texto</body> <html><body>Texto</body></html> Existen etiquetas vacías que son la excepción a esta regla, tales como "regla horizontal" y "salto de línea": <hr> <br> Reglas :
- 12. HTML Browser Esto esunpárrafo. <p>Esto es un párrafo.</p>
- 13. HTML Browser Título 1 Título2 Título 3 Título 4 Título 5 Título 6 <h1>Título 1</h1> <h2>Título 1</h2> <h3>Título 1</h3> <h4>Título 1</h4> <h5>Título 1</h5> <h6>Título 1</h6>
- 14. HTML Browser Texto normal,texto con cursiva. <p>Texto normal, <em>texto con cursiva.</em></p>
- 15. HTML Browser Texto normal,texto en negritas. <p>Texto normal, <strong>texto en negritas</strong></p>
- 16. HTML Browser Texto normal,texto subrayado. <p>Texto normal, <ins>texto subrayado</ins></p>
- 17. HTML Browser Texto normal,texto tachado. <p>Texto normal, <del>texto tachado</del></p>
- 18. HTML Browser Texto Texto enotra línea Texto<br>Texto en otra línea
- 19. HTML Browser Texto normal Textocitado <p>Texto normal</p> <blockquote>Texto citado</blockquote>
- 20. HTML Browser HTML <abbr title=“HiperTextMarkup Languaje”>HTML</abbr>
- 21. Browser Este texto contiene espaciosen blanco que deben serrespetados. HTML <pre>Este texto contiene espacios en blancoque deben ser respetados.</pre>
- 22. HTML Browser if i=0then j=1 <code>if i=0 then j=1</code>
- 23. Formularios ¿Paraquésirven? ElementosparaFormularios CamposdeT exto CasillasdeV erificación Botonesdeopción Menús Botones Camposocultos Camposdecargadearchivos ¿Cómoseenvíalainformación? ¿SepuedenvalidarlosCampos?
- 24. Formularios Elemento<FORM> Atributos: method, action Elemento<INPUT> Atributo: type(text, checkbox,radio,button, hidden) Elemento<SELECT> Elemento<TEXT AREA>
- 25. Más Elementos OtrosElementos Nuevalinea<BR> LíneaHorizontal<HR> Comentarios.<!- - xxxxx- ->
- 26. Formularios • Los formulariossirven para poder enviar informacion desde el browser hacia algun otro lugar (generalmente hacia el servidor mismo) • Los formularios pueden enviar la informacion de dos formas distintas: POST y GET • Cada item (textarea,text) de un formulario TIENE que tener un nombre definido.
- 27. Input Items <input type=”item”name=”nombre” value=”valor”> ●Text ●Password ●Submit ●Checkbox ●Radio ●Select
- 28. Formularios POST ●Cuando se enviainformacion usando el metodo POST, esta se envia de forma “escondida” utilizando el browser. ●Se usa generalmente para los formularios de tipo Login y Password.
- 29. Formularios GET ●Cuando se enviainformacion usando el metodo GET, esta se envia de forma “explicita” en la URL (direccion). ● Se usa generalmente para crear links dinamicos. ●Ejemplo: http://www.uchile.cl/index.java?pagina=inicio&tipo=us uario
- 30. Formularios Ejemplo <form action="test.java" name="formulario"method="POST"> <input type="text" name="nombre"> <br> <textarea name="detalle"> </textarea> <br> <input type="submit" name="add" value="Agregar"> </form>
- 32. Formularios en tablas <tableborder="1"> <form action="test.jsp" name="formulario" method="POST"> <tr> <td> Nombre: </td> <td> <input type="text" name="nombre"> </td> </tr> <tr> <td> Detalle: </td> <td> <textarea name="detalle"> </textarea> </td> </tr> <tr> <td><input type="submit" name="add" value="Agregar"> </td> </tr> </form> </table>
- 34.
- 35. Cuando te despiertastodos los días, tienes dos opciones. Puedes ser positivo o negativo; un optimista o un pesimista. Yoelijoseroptimista.Es todounacuestióndeperspectiva. HarveyMackay