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

Transcripción

1 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 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 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: <tag> texto afectado </tag> 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 Una página básica: <html> <head>... </head> <body>... </body> </html>

5 <html> : etiqueta de comienzo de toda página escrita en este lenguaje. La extensión del archivo que la contiene debe ser html o htm <head> : cabecera. Se utiliza para agrupar información propia de la página, como puede ser su título, entre otras. <title> : 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 </title>. <html> <head> <title> curso de html </title> </head>... </html>

6

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 <body> y </body> que van justo debajo de la cabecera.

8 El texto Algunos tags del texto: <br> : salto de linea. No necesita etiqueta de cierre. <pre> y </pre> : texto preformateado. <b> y </b> : resaltado de texto. <i> y </i> : cursiva. <u> y </u> : subrayado. <sub> y </sub> : subíndice. <p> y </p> : párrafo. <div align=...> y </div> : alineación del párrafo. <H1> y </H1> : encabezado.

9 Ejemplo <html> <head> <title>página con varios tags</title> </head> <body> <h1>encabezado 1</h1> <h2>encabezado 2</h2> <p align="center">párrafo centrado</p> <p align="center">otro párrafo centrado</p> <div align="center">párrafo usando la etiqueta div</div> <div align="center">otro párrafo usando la etiqueta div</div> <div align="center"> </div> <div align="center">en este texto se incluye el <b>resaltado</b>, <u>subrayado</u>, <i>cursiva</i>, <sub>subíndice</sub>.</div> <div align="center"> <p align="left"> </div> <pre> Tambien está este texto preformateado que respeta los espacios en blanco y en general, la forma en que fue escrito en el editor... </pre> <p> </p> </body> </html>

10

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 (<Hn>), 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 <A HREF="URL a la que se accede">texto del Hiperenlace</A> <A HREF="URL a la que se accede"><img SRC="Imagen"> y también texto</a> Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutas entenderemos la URL completa, es decir, 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 y en éste se encuentran los siguientes hiperenlaces. URL relativa: <A HREF="cti/reserva.html">.. URL que sea activa: 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: <A HREF="../cti/reserva.html">.. URL que sea activa: Explicación: En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace: 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. _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. _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. <A NAME="Id. del ancla">texto del ancla</a> La forma de especificar un enlace que acceda a un punto determinado del mismo documento es: <A HREF="#Id. del ancla">texto del enlace al ancla</a> También es posible acceder a un ancla de un documento externo de la forma: <A HREF="Dirección URL#Id. del ancla">texto del enlace al ancla</a>

16 Otros tipos de enlace Correo electrónico <a href= mailto: direccion de mail > texto </a> <a href= mailto: direccion de mail?subject=asunto > texto </a> Vínculo a archivo para descarga <a href= ejemplo.wav target=_blank> texto </a>

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 <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y las columnas que formarán la tabla. Fila: Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Columna: Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

18 Ejemplo de una tabla <table border= 1 > <tr> <td>jueves</td> <td>viernes</td> </tr> <tr> <td>seminario</td> <td>seminario</td> </tr> <tr> <td>programación Av. 2</td> <td>programación Av. 2</td> </tr> </table>

19

20 Otro ejemplo de Tabla <html> <head> <title>otro ejemplo de tabla</title> </head> <body> <table with="70%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#ffcc99" height="68%" width="70%"> <tr> <td height="19" align="center">jueves</td> <td height="19" align="center">viernes</td> </tr> <tr> <td height="19" align="center">seminario</td> <td height="19" align="center">seminario</td> </tr> <tr> <td height="18" align="center">programacion Av. 2</td> <td height="18" align="center">programacion Av. 2</td> </tr> </table> </body> </html>

21

22 Marco

23 Marco Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>, que van después de la etiqueta <head>. 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 <body> y </body>, 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. 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 <frameset rows= * cols= 142,*,25% >...</frameset> 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. <frame>: indica qué documento se cargará en el marco. Se ubica entre las etiquetas <frameset> y </frameset> y no necesita etiqueta de cierre. src : modificador de etiqueta que indica el documento que se cargará en el marco.

25 Marco - Ejemplo <html> <head> <title>documento sin título</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <frameset rows="*" framespacing="1" frameborder="yes" border="1"> <frameset cols="*,75%" framespacing="1" frameborder="yes" border="1"> <frame src="index3.html" name="mainframe"> <frame src="index2.html" name="rightframe" scrolling="yes" noresize> </frameset> </frameset> </html>

26

27 Sin Marcos Las etiquetas <noframes> y </noframes> 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 <body> y </body> entre las etiquetas <noframes> y </noframes>.

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. <a href= htpp:// target= marcoderecho >Página Principal<a>

29 Meta Tags Tags que indican información sobre el contenido de la página. Se ubican en la cabecera del documento. Forma: <meta name= nombre content= valor > <meta http-equiv= nombre content= valor >

30 Formularios <form> y </form> 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 <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario.

31 Atributos de la etiqueta <form> 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. 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 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. <form action=mailto:formularios@fi.mdp.edu.ar method= post enctype= text/plain >...</form>

33 Área de Texto <textarea> Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Se incluyen las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> 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. <textarea name= ejemplo area cols= 30 rows= 3 >texto</textarea>

34 Elementos de entrada <input> Se incluye la etiqueta <input> entre las etiquetas <form> y </form>. 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. 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. <input name= campo type= text value= Campo de texto size= 20 maxlenght= 15 > 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. <input name= contra type= password value= contraseña size= 20 maxlength= 15 >

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. 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. 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. <input name= casilla type= checkbox value= acepto checked>

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. 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. <input name = prefiere type= radio value= estudiar chequed> <input name = prefiere type= radio value= trabajar chequed> 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: <HTML> <head> <title>campos de seleccion</title> </head> <BODY> <select name="mascota"> <option selected>---texto visible---</option> <option>perro</option> <option>gato</option> </select> <br /><br /><br /><br /><br /> <select name="animal" size="3" multiple> <option selected>---elije animal---</option> <option value= ave >LORO</option> <option>perro</option> <option>gato</option> <option>pez</option> </select> </BODY> </HTML>

39

40 Campos de selección Es necesario insertar las etiquetas <select> y </select> 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 <option> y </option>. value: indica el valor a enviar si se selecciona el elemento. selected: indica que el elemento aparecerá seleccionado.