Programación de aplicaciones WEB

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Programación de aplicaciones WEB"

Sebastián Serrano Cárdenas
hace 8 años
Vistas:

1 Programación de aplicaciones WEB Tecnologías del lado del del cliente 1 Tecnologías del lado del cliente Estructura HTML/XHTML Presentación Hojas de estilo (CSS) Comportamiento JavaScript 2

del cliente Estructura HTML/XHTML Presentación

2 Introducción a HTML 3 QUE ES HTML? Hyper Text Markup Language Un lenguaje diseñado para la creación de páginas web. Los archivos utilizan la extensión.htm,.html 4

3 HyperText Markup Language Especifica la estructura, contenido y presentación del documento La tendencia actual es a separar el contenido de la presentación Cascading Style Sheets incluyen la información de presentación 5 HTML Versions HTML 1.0 ( ) HTML 2.0 (1995) HTML 3.0 (1996) HTML 3.2 (1997) HTML 4.01 (1999) HTML 5.0 (2008) 6

Style Sheets incluyen la información de presentación 5 HTML Versions HTML 1.

4 Estructura de un documento HTML <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html> 7 <TITLE>Bucky Badger s web page</title> <BODY> <H1>Welcome to Bucky's web page</h1> <IMG SRC="bucky.gif"> <P>I am Bucky, the mascot for University of Wisconsin athletics. Please visit <A HREF=" the web page of our football team</a> and <A HREF=" the web page of our basketball team</a>. </BODY> 8

gif"> <P>I am Bucky, the mascot for University of Wisconsin athletics. Please visit <A HREF="http://www.uwbadgers.

5 Ejemplos: Etiquetas HTML <title>, <p>, <div>, <table> Generalmentese usanenpares (abriry cerrar): <table> </table> Etiquetas simples (no se cierran): <hr>,<br> Las etiquetashtml no son sensiblesa las mayúsculas ó minúsculas pero la convención es usar minúsculas. 9 Elementos Block e Inline HTML Block Elements Incluyen una línea en blanco antes y después del elemento. Ejemplos: <h1>, <p>, <ul>, <table>, <div> HTML Inline Elements Se despliegan en una misma línea mientras haya suficiente espacio. Ejemplos: <a>, <img>, <span> 10

9 Elementos Block e Inline HTML Block Elements Incluyen una línea en blanco antes y después del elemento.

Elementos Block e Inline (cont ) Los elementos de nivel bloque empiezan en un nueva línea. No es posible desplegar 2 elementos de tipo bloque en la misma línea (a menos que se utilicen CSS).

6 Elementos Block e Inline (cont ) Los elementos de nivel bloque empiezan en un nueva línea. No es posible desplegar 2 elementos de tipo bloque en la misma línea (a menos que se utilicen CSS). Los bloques pueden contener otros bloques ó elementos de tipo en-línea Los elementos de tipo en-línea se despliegan en el lugar que ocurren en el documento. Solo pueden contener texto y otros elementos de tipo en-línea. 11 Vertical division <div> <div> permite dividir en bloques una página HTML. Generalmente se utiliza en combinación con las hojas de estilo para definir la presentación de un segmento del documento. <div>este es un bloque</div> <div>este es otro bloque</div> Este es un bloque Este es otro bloque

Los bloques pueden contener otros bloques ó elementos de tipo en-línea Los elementos de tipo en-línea se despliegan en el lugar que ocurren en el documento.

7 Horizontal division <span> Este elemento también permite dividir arbitrariamente un documento pero opera en línea. Her limericks weren t worth a <span style="color:blue">p</span>enny Her limericks weren t worth a Penny Encabezados <!DOCTYPE html> <html> <body> <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> <h4>this is heading 4</h4> <h5>this is heading 5</h5> <h6>this is heading 6</h6> </body> </html> This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 14

DOCTYPE html> <html> <body> <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> <h4>this is heading 4</h4>

8 Texto párrafo <p>este es un párrafo, HTML agrega una línea en blanco antes y después del texto<p> Centrar el texto en la página <center>hola</center> Alinear el texto a la derecha de la página <p align= right >Hola</p> 15 Comentarios HTML  16

<center>hola</center> Alinear el texto a la derecha de la página <p

9 Caracteres especiales Algunos caracteres tienen un significado especial en HTML, si queremos que el browser los despliegue hay que remplazarlos en el código HTML. Caracter Descripción Remplazo Non-breaking space < Less than < > Greater than > & Ampersand & Quotation mark " Copyright á Letra a con acento agudo á é Letra e con acento agudo é ñ Letra ñ ñ 17 Listas Lista no ordenada Código: <ul> <li>pera</li> <li>manzana</li> </ul> Salida: Pera Manzana Lista ordenada Código: <ol> <li>pera</li> <li>manzana</li> </ol> Salida: 1. Pera 2. Manzana 18

Caracter Descripción Remplazo Non-breaking space < Less than < > Greater than > & Ampersand & Quotation mark " Copyright á Letra a con

10 Tablas <table border= 1"> <tr> <th>encabezado 1</th> <th>encabezado 2</th> </tr> <tr> <td>fila 1, columna 1</td> <td>fila 1, columna 2</td> </tr> <tr> <td>fila 2, columna 1</td> <td></td> </tr> </table> Encabezado 1 Encabezado 2 fila 1, columna 1 fila 1, columna 2 fila 2, columna 1 19 Hipertexto Links < a href= > Página del profesor</a> Salida: Página del profesor <a href= mailto:raul.perez@itesm.mx > correo</a> Salida: correo 20

1, columna 1 fila 1, columna 2 fila 2, columna 1 19 Hipertexto Links < a href= http://cs.mty.itesm.mx/profesores/raul.

11 Insertando Imágenes <img src> es una etiqueta simple (no se cierra) <img src= homepage.gif > Salida: Imagen usada como Hyperlink <a href= ><img src= homepage.gif ></a> Salida: 21 Tamaño de la imagen <img height= 100" width= 150" src="homepage.gif > Height Width 22

gif > Salida: Imagen usada como Hyperlink <a href= http://cs.mty.itesm.

12 Formas Unaforma esun áreaquepuedecontener elementos. <form></form> Los elementosmascomunmenteutilizadosen las formas son: Text fields Radio buttons Checkboxes Submit buttons 23

Documentos relacionados

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto) HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional