Descargar la presentación
La descarga está en progreso. Por favor, espere
1
HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto en forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Los documentos html pueden ser multimediales. Los navegadores se encargan de interpretar el código html de los documentos y mostrar el resultado.
2
Compatibilidad con Navegadores Los distintos navegadores o las distintas versiones de uno mismo, pueden visualizar de manera diferente una misma página. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página.
3
Etiquetas Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a ser: texto afectado texto afectado La tag del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las tags tienen principio y final pero esto lo veremos más adelante.
4
Estructura de la página Una página básica: <html><head>.....</head><body>.....</body></html>
5
: etiqueta de comienzo de toda página escrita en este lenguaje. La extensión del archivo que la contiene debe ser html o htm : etiqueta de comienzo de toda página escrita en este lenguaje. La extensión del archivo que la contiene debe ser html o htm : cabecera. Se utiliza para agrupar información propia de la página, como puede ser su título, entre otras. : cabecera. Se utiliza para agrupar información propia de la página, como puede ser su título, entre otras. : el título de la página que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él. Cierra con el tag. : el título de la página que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él. Cierra con el tag.<html><head> curso de html curso de html </head>........................</html>
7
Cuerpo del documento Contiene la información propia del documento, o sea, lo que queremos que se visualice: texto, imágenes, etc. Todos estos elementos tienen que encontrarse entre las etiquetas y que van justo debajo de la cabecera. Contiene la información propia del documento, o sea, lo que queremos que se visualice: texto, imágenes, etc. Todos estos elementos tienen que encontrarse entre las etiquetas y que van justo debajo de la cabecera.
8
El texto Algunos tags del texto: : salto de linea. No necesita etiqueta de cierre. : salto de linea. No necesita etiqueta de cierre. y : texto preformateado. y : texto preformateado. y : resaltado de texto. y : resaltado de texto. y : cursiva. y : cursiva. y : subrayado. y : subrayado. y : subíndice. y : subíndice. y : párrafo. y : párrafo. y : alineación del párrafo. y : alineación del párrafo. y : encabezado. y : encabezado.
9
Ejemplo <html><head> página con varios tags página con varios tags </head><body> Encabezado 1 Encabezado 1 Encabezado 2 Encabezado 2 párrafo centrado párrafo centrado Otro párrafo centrado Otro párrafo centrado Párrafo usando la etiqueta div Párrafo usando la etiqueta div Otro párrafo usando la etiqueta div Otro párrafo usando la etiqueta div En este texto se incluye el resaltado, subrayado, En este texto se incluye el resaltado, subrayado, cursiva, subíndice. cursiva, subíndice. <pre> Tambien está este texto preformateado que respeta los espacios en blanco y texto preformateado que respeta los espacios en blanco y en general, la forma en que fue escrito en el editor.... en general, la forma en que fue escrito en el editor....</pre><p> </p></body></html>
11
Hiperenlaces Es la utilidad básica del hipertexto, permite indicar zonas de texto o imágenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual. Para definir un hiperenlace podemos utilizar casi cualquier elemento HTML, no debe ser texto necesariamente, podemos usar, cabeceras ( ), cualquiera de los estilos, una imagen, etc.... Un hiperenlace igualmente podrá definirse dentro de cualquier elemento HTML: listas, párrafos de texto, tablas, formularios.
12
Hiperenlaces - sintaxis Texto del Hiperenlace Texto del Hiperenlace y también texto y también texto Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutas entenderemos la URL completa, es decir, http://maquina.dominio/camino/fichero.html. En el caso de las relativas todo lo que no pongamos de la URL se tomará de la URL del documento que contiene el hiperenlace, por ejemplo si no indicamos el servidor, se considerará el actual y si sólo indicamos un fichero html se considerará que se encuentra en el servidor y directorio del documento que lo referencia. Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutas entenderemos la URL completa, es decir, http://maquina.dominio/camino/fichero.html. En el caso de las relativas todo lo que no pongamos de la URL se tomará de la URL del documento que contiene el hiperenlace, por ejemplo si no indicamos el servidor, se considerará el actual y si sólo indicamos un fichero html se considerará que se encuentra en el servidor y directorio del documento que lo referencia.
13
Nos encontramos en el documento http://www.unav.es/cti/web.html y en éste se encuentran los siguientes hiperenlaces. URL relativa:.. URL relativa:.. URL que sea activa: http://www.unav.es/cti/reservas.html URL que sea activa: http://www.unav.es/cti/reservas.html Explicación: En este caso se indica la URL completa, por tanto no es relativa y no se podrá utilizar ningún dato de la posición actual. Explicación: En este caso se indica la URL completa, por tanto no es relativa y no se podrá utilizar ningún dato de la posición actual. URL relativa:.. URL relativa:.. URL que sea activa: http://www.unav.es/reservas.html URL que sea activa: http://www.unav.es/reservas.html Explicación: En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace: www.uca.es y al comenzar la directorio por / se indica que éste se toma desde la raíz del servidor, no siendo válido en este caso ningún dato del directorio actual. Explicación: En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace: www.uca.es y al comenzar la directorio por / se indica que éste se toma desde la raíz del servidor, no siendo válido en este caso ningún dato del directorio actual.
14
Destino del enlace El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores _blank: abre el documento vinculado, en una ventana nueva del navegador. _blank: abre el documento vinculado, en una ventana nueva del navegador. _parent: abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _parent: abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _self: es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: abre el documento vinculado en la ventana completa del navegador. _top: abre el documento vinculado en la ventana completa del navegador.
15
Punto de fijación Sirve para indicar puntos de un documento que son accesibles directamente. Marcará las distintas zonas de un documento. Texto del ancla Texto del ancla La forma de especificar un enlace que acceda a un punto determinado del mismo documento es: Texto del enlace al ancla Texto del enlace al ancla También es posible acceder a un ancla de un documento externo de la forma: Texto del enlace al ancla Texto del enlace al ancla
16
Otros tipos de enlace Correo electrónico Correo electrónico texto texto Vínculo a archivo para descarga Vínculo a archivo para descarga texto texto
17
Tablas Las tablas están formadas por celdas, que se obtienen como resultado de la inserción entre una fila y una columna. Para crear una tabla hay que crear las etiquetas y. Entre dichas etiquetas habrá que especificar las filas y las columnas que formarán la tabla. Fila: Es necesario insertar las etiquetas y por cada una de las filas de la tabla. Columna: Es necesario insertar las etiquetas y por cada una de las celdas que compongan cada una de las filas de la tabla. Habrá que insertar esas etiquetas entre las etiquetas y.
18
Ejemplo de una tabla <tr><td>Jueves</td><td>Viernes</td></tr><tr><td>Seminario</td><td>Seminario</td></tr><tr> Programación Av. 2 Programación Av. 2 </tr></table>
20
Otro ejemplo de Tabla <html><head> Otro ejemplo de tabla Otro ejemplo de tabla </head><body> <tr> Jueves Jueves Viernes Viernes </tr><tr> Seminario Seminario </tr><tr> Programacion Av. 2 Programacion Av. 2 </tr> </body></html>
22
Marco
23
Marco Los conjuntos de marcos se definen a través de las etiquetas y, que van después de la etiqueta. A través de estas etiquetas se indica el número de marcos en que se dividirá la ventana, cada uno de los cuales será una especie de subventana. Los conjuntos de marcos se definen a través de las etiquetas y, que van después de la etiqueta. A través de estas etiquetas se indica el número de marcos en que se dividirá la ventana, cada uno de los cuales será una especie de subventana. Cuando se insertan estas etiquetas no hay que insertar las etiquetas y, ya que el cuerpo del documentos será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos. Cuando se insertan estas etiquetas no hay que insertar las etiquetas y, ya que el cuerpo del documentos será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos. Los atributos que pueden especificarse sobre estas etiquetas son: cols, rows, frameborder, framespacing, border, bordercolor. Los atributos que pueden especificarse sobre estas etiquetas son: cols, rows, frameborder, framespacing, border, bordercolor. Es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana. Es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana.
24
Marco...... Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el alto de la ventana. Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el alto de la ventana. Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres columnas. La primera sería de 142 pixeles de ancho, la tercera del 25% de la ventana y la segunda lo que queda. Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres columnas. La primera sería de 142 pixeles de ancho, la tercera del 25% de la ventana y la segunda lo que queda. : indica qué documento se cargará en el marco. Se ubica entre las etiquetas y y no necesita etiqueta de cierre. : indica qué documento se cargará en el marco. Se ubica entre las etiquetas y y no necesita etiqueta de cierre. src: modificador de etiqueta que indica el documento que se cargará en el marco. src: modificador de etiqueta que indica el documento que se cargará en el marco.
25
Marco - Ejemplo <html><head> Documento sin título Documento sin título </head> </frameset></frameset></html>
27
Sin Marcos Las etiquetas y se utilizan para que su contenido sea visualizado en navegadores que no soportan marcos. Las etiquetas y se utilizan para que su contenido sea visualizado en navegadores que no soportan marcos. Si un navegador no soporta marcos, no cargará ningún documento en ningún marco, por lo que tendremos que mostrar el cuerpo del documento actual de algún modo. Por ello, han de introducirse las etiquetas y entre las etiquetas y. Si un navegador no soporta marcos, no cargará ningún documento en ningún marco, por lo que tendremos que mostrar el cuerpo del documento actual de algún modo. Por ello, han de introducirse las etiquetas y entre las etiquetas y.
28
Otros destinos de enlace Además de los destinos para los enlaces, también podemos usar los nombres de los distintos marcos de la página. Página Principal Página Principal
29
Meta Tags Tags que indican información sobre el contenido de la página. Tags que indican información sobre el contenido de la página. Se ubican en la cabecera del documento. Se ubican en la cabecera del documento. Forma: Forma:
30
Formularios y Formularios y Es un elemento que permite recoger datos introducidos por el usuario. Es aconsejable utilizar tablas para organizar los elementos de los formularios. Los formularios se insertan a través de las etiquetas y. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario.
31
Atributos de la etiqueta Atributos de la etiqueta action: indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario. action: indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario. enctype: indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded. enctype: indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded. method: indica el método mediante el que se transferirán las variables del formulario. Su valor puede ser get o post. method: indica el método mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.
32
method El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se hacen consultas sobre una base de datos. El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se hacen consultas sobre una base de datos. El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario mando datos que deben ser almacenados en una base de datos. El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario mando datos que deben ser almacenados en una base de datos. Se recomienda utilizar el valor post. Se recomienda utilizar el valor post........... mailto:formularios@fi.mdp.edu.ar
33
Área de Texto Área de Texto Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Se incluyen las etiquetas y entre las etiquetas y del formulario. El atributos name indica el nombre del área de texto. El atributo rows indica el número de líneas que podrán ser visualizadas en el área de texto (determina el alto). El atributo cols indica el número de caracteres por línea que podrán ser visualizados en el área de texto. texto texto
34
Elementos de entrada Elementos de entrada Se incluye la etiqueta entre las etiquetas y. El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual será evaluado, y el atributo type indica el tipo de elemento de entrada. Existen diferentes tipos de elementos de entrada.
35
Distintos elementos de entrada Campo de texto: para insertar un campo de texto, el atributo type debe tener el valor text. Campo de texto: para insertar un campo de texto, el atributo type debe tener el valor text. Otros atributos: –size: indica el número de caracteres que podrán ser visualizados en el campo de texto, determina el ancho de la caja. –maxlenght: número de caracteres que podrán ser insertados en el campo. –value: valor inicial del campo te texto. Campo de contraseña: para insertar un campo de contraseña, el atributo type debe tener el valor password. Campo de contraseña: para insertar un campo de contraseña, el atributo type debe tener el valor password. Los otros atributos son iguales al campo de texto.
36
Distintos elementos de entrada Botón: sirve para insertar un botón en el formulario, el atributo type debe tener el valor submit, restore o button. Botón: sirve para insertar un botón en el formulario, el atributo type debe tener el valor submit, restore o button. –Submit: al pulsar sobre el botón se enviará el formulario. –restore: al pulsar sobre el botón se reestablecerá el formulario, borrándose todos los campos del formulario y adquiriendo su valor inicial. –button: al pulsar sobre el botón no se realizará ninguna acción. –value: indica el texto que mostrará el botón. Casilla de verificación: para insertar una casilla en el formulario, el atributo type debe tener el valor checkbox. Casilla de verificación: para insertar una casilla en el formulario, el atributo type debe tener el valor checkbox. Otros atributos: –value: indica el valor asociado a la casilla de verificación. Es necesario, aunque el usuario no lo vea. –checked: indica que la casilla aparecerá activada inicialmente.
37
Distintos elementos de entrada Botón de opción: Para insertar un botón de opción, el atributo type debe tener el valor radio. Se usan cuando se desea que una variable del formulario pueda tomar un solo valor entre varios. Botón de opción: Para insertar un botón de opción, el atributo type debe tener el valor radio. Se usan cuando se desea que una variable del formulario pueda tomar un solo valor entre varios. Otros atributos: –value: indica el valor asociado al botón de opción. Es necesario, aunque el usuario no lo vea. Es el valor a enviar. –checked: indica que el botón aparecerá activado inicialmente. Este atributo no toma valores. Para que el usuario envíe un archivo suyo a través del formulario tenemos el tipo file.
38
Distintos elementos de entrada Campos de selección: Se utilizan para insertar menús y listas desplegables. Ejemplo: Campos de selección: Se utilizan para insertar menús y listas desplegables. Ejemplo:<HTML> Campos de seleccion Campos de seleccion <BODY> ---Texto visible--- ---Texto visible--- Perro Perro Gato Gato ---Elije animal--- ---Elije animal--- LORO LORO Perro Perro Gato Gato Pez Pez </BODY></HTML>
40
Campos de selección Es necesario insertar las etiquetas y Es necesario insertar las etiquetas y Atributos: name: indica el nombre del menú o lista, será el nombre de la variable que contendrá el valor seleccionado. size: indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo. multiple: indica que el usuario podrá seleccionar varios elementos de la lista al mismo tiempo. disable: indica que la lista estará desactivada, por lo que el usuario no podrá seleccionar sus elementos. Cada uno de los elementos de la lista ha de insertarse entre las etiquetas y. value: indica el valor a enviar si se selecciona el elemento. selected: indica que el elemento aparecerá seleccionado.
Presentaciones similares
