You are on page 1of 18

Repblica Bolivariana De Venezuela. Ministerio Del Poder Popular Para La Defensa.

Universidad Nacional Experimental Politcnica De Las Fuerza Armadas. (UNEFA). Ncleo Bolvar Sede Puerto Ordaz. Carrera: T.S.U Anlisis Y Diseo De Sistemas Asignatura: Metodologa Orientada A Objeto.

Haga clic para modificar el estilo de subttulo del patrn


Facilitadora: Ing. Lourdes Iparraguirre. Bachilleres: Yusliber Basanta. #06 c.i.:16.390.119 Absner Anaya. #17 c.i.:19.910.973

Desarrollo Web.

5/3/12

Temario.

Breve introduccin. Qu es HTML? Sintaxis HTML. partes de un documento HTML. propiedades de la pagina. formato de texto. creacin de listas. listas desordenadas. listas ordenadas. lista de glosario o definicin. creacin de enlaces (hipervnculos).

5/3/12

Breve Introduccin.

HTML es el lenguaje con el que se escriben las pginas web. Las pginas web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador. Este lenguaje nos permite: Texto. Imgenes. Sonidos. Referencias a otras pginas.

5/3/12

Qu es HTML?

El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A travs de las etiquetas vamos definiendo los elementos del documento, como enlaces, prrafos, imgenes, etc.

5/3/12

Sintaxis HTML.

Las etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> Un cierre de tipo </etiqueta> Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta etiqueta. As por ejemplo: Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente cdigo: <b>Esto esta en negrita</b> El resultado Ser:
5/3/12

Partes De Un Documento HTML.


Haga clic en el icono para agregar una imagen

5/3/12

Partes De Un Documento HTML.


<html></html> Al principio y al final de todo documento. <head> </head> Cabecera del documento. Dentro del head se ponen las etiquetas: <title> </title> indica el ttulo de la pgina para el navegador. <meta> permite aportar metainformacin al documento, para su mejor identificacin e indexacin por los motores de bsqueda. Hay distintos tipos: <meta name="description" content="Frase descriptiva de los contenidos de la pgina"> <meta name="keywords" content="Palabras clave que resuman la temtica de los contenidos de la pgina> 5/3/12

Propiedades De La Pagina.

La etiqueta <body> puede llevar incluida informacin sobre las propiedades de la pgina: <body bgcolor="#xxyyzz> <body text="#xxyyzz> <body link="#xxyyzz"> <body vlink="#xxyyzz> <body alink="#xxyyzz"> <body background="imagen.gif">

Todos estos parmetros se pueden agrupar en una nica etiqueta <body>:


5/3/12

Formato De Texto.

<b> </b> negrita (tambin sirve la etiqueta <strong> </strong>) <i> </i> cursiva (tambin sirve la etiqueta <em> </em>) <u> </u> subrayado <font size=X> </font> marca el tamao de los caracteres, donde X es un valor del 1 a 7, o un valor relativo (+ 1-7). <font color=#XXYYZZ> </font> define el color del texto, donde XXYYZZ es un valor formado por letras y nmeros que indica el color. <font face=arial> </font> determina el tipo de
5/3/12

Creacin De Listas. listas desordenadas.

Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo). La cosa queda as: Lista no numerada: <ul> <li>primer elemento de la lista</li> <li>segundo elemento de la lista</li> <li>tercer elemento de la lista</li> </ul> cierra lista
5/3/12

Creacin De Listas. listas ordenada.

Las listas ordenadas sirven tambin para presentar informacin, en diversos elementos o items, con la particularidad que stos estarn predecidos de un nmero o una letra para enumerarlos, siempre por un orden. Para realizar las listas ordenadas usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento ser igualmente indicado por la etiqueta <li>, que ya vimos en las listas desordenadas. lista numerada: <ol> <li>primer elemento de la lista</li>
5/3/12

Creacin De Enlaces (Hipervnculos).

Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino ser introducido bajo forma de atributo, el cual lleva por nombre href. La sintaxis general de un enlace es por tanto de la forma: <a href="destino">contenido</a> En funcin del destino los enlaces son clsicamente agrupados del siguiente modo: Enlaces internos: los que se dirigen a otras partes dentro de la misma pgina. Enlaces locales: los que se dirigen a otras pginas del mismo sitio web. 5/3/12

Creacin De Enlaces (Hipervnculos).

<a href=http://www.servidor.com/directorio/pagina. htm>Enunciado del enlace</a> <a href=mailto:direccin de mail> Vnculo a una direccin de correo-e. <a name=marcador> define un marcador (ancla) en un punto concreto de una pgina, para poder enlazarlo posteriormente. <a href=#marcador> dirige un enlace interno al punto dnde est el marcador. <a href=direccin pgina#marcador> dirige el enlace a un punto concreto de otra pgina.
5/3/12

Insertar imgenes en html.

La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro archivo grfico mediante el atributo src (source). La sintaxis queda entonces de la siguiente forma: <img src="camino hacia el archivo"> <img ... border=X"> establece un borde de X pixels en torno a la imagen. <img ... height="XX" width="YY"> establece un tamao de la imagen (altura y anchura) en pixels.
5/3/12

Tablas en HTML.

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.HTML dispone de una gran variedad de etiquetas para crear tablas, de las cuales veremos una introduccin en este artculo. <table></table> Define dnde comienza y termina la tabla <table width="XX%"> Determina la anchura de la tabla. Puede darse en pxeles (no lleva el smbolo %), o en porcentaje de la pgina. <table height="XX> Determina la altura de la tabla en pxeles. <table border="X"> Establece el grosor en 5/3/12

Tablas en HTML.

Ejemplo de tabla de 2 filas y 3 columnas <table width="100%" height="200" border="1" cellspacing="3" cellpadding="5"> <tr> <td>primera columna de la fila 1</td> <td>segunda columna de la fila 1</td> <td>tercera columna de la fila 1</td> </tr> <tr> <td>primera columna de la fila 2</td> <td>segunda columna de la fila 2</td>
5/3/12 <td>tercera columna de la fila 2</td>

Tablas en HTML.

5/3/12

Gracias

5/3/12

You might also like