internet
Upcoming SlideShare
Loading in...5
×
 

internet

on

  • 868 views

 

Statistics

Views

Total Views
868
Views on SlideShare
868
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    internet internet Presentation Transcript

    • <html> (Listas No Numeradas) <head> <title> Listas no numeradas </title> </head> <body> Mis aficiones: <ul> (etiqueta unordered list) <li> El cine. (etiquetq list item) <li> La montaña. <li> La música. </ul> </body> </html>
    • <html> (Listas Numeradas) <head> <title> Listas numeradas </title> </head> <body> Mis preferencias: <ol> (etiqueta ordered list) <li> Viajar. <li> Salir con mis amigos. <li> Dormir. (etiqueta sin cierre) </ol> </body> </html>
    • <html> <head> <title> Listas anidadas </title> </head> <body> <h3>Animales:<h3> Etiqueta de encabezado tercer orden <ul> <li> VERTEBRADOS. <ul> <li>Anfibios <li>Peces <li>Reptiles <li>Aves <li>Mamíferos </ul> <li> INVERTEBRADOS. <ul> <li>Insectos <li>Arácnidos <li>Crustáceos <li>Miriápodos </ul> </ul> </body> </html> Ejemplo: listas anidadas
    • <html> <head> <title> Listas de definiciones (Tema) </title> </head> <body> <dl> (Etiqueta de apertura) <dt>Concepto 1 <dd>Definición del Concepto 1 <dt>Concepto 2 <dd>Definición del concepto 2 </dl> (Etiqueta de cierre) </body> </html> (Los conceptos a definir van con dt y las definiciones con dd)
    • <html> <head> <title> Sangrados </title> </head> <body> Este texto está justificado a la izquierda. <blockquote> Éste está sangrado respecto del anterior </blockquote> Éste vuelve a estar justificado a la izquierda. </body> </html> Sangrados:Se realizan con la etiqueta <blockquote> de apertura y su correspondiente de cierre. Aumentan, también, el interlineado, por eso se emplean para hacer una cita textual.
    • <html> Se puede utilizar más de una <head> etiqueta si deseamos un sangrado <title> mayor: Sangrados múltiples </title> </head> <body> Este texto está justificado a la izquierda. <blockquote> <blockquote> <blockquote> Éste está más sangrado </blockquote> </blockquote> </blockquote> Éste vuelve a estar justificado a la izquierda. </body> </html>
    • Negrita, cursiva y <html> subrayado. Para remarcar una <head> cadena de caracteres empleamos las <title> etiquetas <b> y </b> Negrita, cursiva y subrayado (bold). Para hacer que un </title> texto se muestre en </head> cursiva: <i> e </i> (italic). <body> Para subrayar empleamos <u> y </u> Los textos siguientes:<p> (underlined). <b>Éste está en negrita</b><br> <i>Éste está en cursiva</i><br> <u>Éste está subrayado</u> </body> </html>
    • <html> <head> <title> Subíndices y superíndices </title> </head> <body> f<sub>(x)</sub>= X<sup>2</sup> + 5X </body> </html> Más formato: Subíndices y superíndices. El subíndice se consigue con la etiqueta <sub> y su correspondiente de cierre. El superíndice con la etiqueta <sup> y su correspondiente de cierre.
    • <html> <head> <title> Barra de separación </title> </head> <body> Pongamos una separación: <hr> </body> </html> Línea de separación. Se consigue con la etiqueta <hr> (horizontal rule) sin etiqueta de cierre.
    • <html> <head> <title> Comentarios </title> </head> <body> Los textos siguientes:<p> <!-- Voy a añadir un sangrado --> <blockquote> <b>Éste está en negrita</b><br> <i>Éste está en cursiva</i><br> <u>Éste está subrayado</u> </blockquote> </body> </html> Comentarios. Si queremos introducir texto que sirva de recordatorio de lo que hicimos o dejamos de hacer o para dar explicaciones a otras personas que pueden acceder al código pero que no queremos que se visualicen en pantalla empleamos la etiqueta (medio etiqueta) <!-- para el comienzo y la etiqueta --> para el final del comentario.
    • <html> <head> Tablas. <title> Empezamos con un tema algo Tablas 1 </title> complejo. </head> <body> Una tabla se define entre las etiquetas <table> <tr> <table> y </table> <td></td> <td></td> A partir de este momento hay que <td></td> definir las filas de la tabla que se </tr> <tr> definen con <tr> y </tr> (table row). Un <td></td> par de etiquetas para cada una de las <td></td> <td></td> filas. </tr> <tr> Dentro de cada fila se definen las celdas <td></td> que forman esa fila con las etiquetas <td></td> <td></td> <td> y </td> (table data). </tr> </table> Vamos a empezar definiendo una tabla </body> </html> de 3 filas y 3 columnas (para nuestro lenguaje serán tres filas, cada una de ellas con tres celdas):
    • <html> ¿Qué ha pasado? No se ve nada. Esto <head> <title> ocurre porque: Tablas 2 1.-Dentro de las celdas no hemos </title> </head> puesto nada. <body> 2.-La tabla no tiene bordes. <table border> <tr> Tablas con borde y con casillas <td>&nbsp;</td> vacías. <td>&nbsp;</td> <td>&nbsp;</td> Vamos a arreglar estos dos temas: Por </tr> un lado vamos a indicar que queremos <tr> <td>&nbsp;</td> una tabla con borde. Esto se hace <td>&nbsp;</td> dentro de la etiqueta <table> con el <td>&nbsp;</td> </tr> atributo border. Así: <table border>. <tr> Por otro lado, vamos a poner algo <td>&nbsp;</td> <td>&nbsp;</td> dentro de cada celda. Pero, en lugar de <td>&nbsp;</td> poner algo concreto y visible, vamos a </tr> utilizar una cadena de caracteres que </table> </body> ya hemos visto que se utilizaba para </html> añadir un espacio a la separación entre palabras: &nbsp;
    • <html> Otros atributos de la tabla. <head> <title> Podemos hacer que nuestra Tablas 3 tabla esté centrada en la </title> </head> página con el atributo <body> align="center". O "left" o <table border="3" align="center" width="50%" "right" bgcolor="#ffcccc"> <tr> Que ocupe una determinada <td>&nbsp;</td> proporción del espacio en <td>&nbsp;</td> <td>&nbsp;</td> horizontal con el atributo </tr> width="50%". O "30%" o <tr> <td>&nbsp;</td> "70%" o... <td>&nbsp;</td> Que el borde sea mayor que <td>&nbsp;</td> </tr> el establecido por defecto <tr> (que es 1): border="3". O ... <td>&nbsp;</td> <td>&nbsp;</td> Que tenga un color de fondo <td>&nbsp;</td> con el atributo </tr> bgcolor="#6699FF" . O </table> </body> cualquier otro ( </html> ver colores html).
    • <html> Atributos de las filas y las <head> <title> celdas. Tablas 4 De manera similar a los </title> </head> atributos de la tabla, podemos <body> definir todos esos parámetros <table border="3" align="center" width="50%" a las filas o a las celdas. bgcolor="#ffcccc"> <tr> Por ejemplo podemos <td width="10%">&nbsp;</td> empezar asignando a las <td width="30%">&nbsp;</td> <td width="60%">&nbsp;</td> celdas de la primera fila un </tr> ancho diferente. Si a este <tr> <td>&nbsp;</td> respecto no hago nada más en <td>&nbsp;</td> las otras celdas, lo que haga <td>&nbsp;</td> afectará a todas las columnas. </tr> <tr> Puedo definir colores <td bgcolor="#ff00cc">&nbsp;</td> diferenciados. En este caso, el <td bgcolor="#ffcc00">&nbsp;</td> <td bgcolor="#00cccc">&nbsp;</td> color de la fila o de la celda </tr> prevalecerá sobre el definido </table> en el conjunto de la tabla </body> </html>
    • Tablas con celdas de distinto tamaño. Es bastante habitual tener que diseñar este tipo de tablas: Una celda puede ocupar dos columnas, tres,... o dos filas, tres,... Supongamos que tenemos que diseñar una tabla como ésta: lo primero que hay que tener claro es el número máximo de columnas y filas que tiene la tabla: En este caso es 4 columnas y 3 filas. Pues bien, tendremos que establecer 4 celdas en cada una de las 3 filas. Luego, agruparemos celdas con las etiquetas correspondientes. Empezamos con la primera fila. Se extiende ocupando las 4 columnas. La etiqueta que debemos emplear es un atributo para la primera celda de la primera fila (debe "extenderse" sobre las cuatro columnas) <td colspan="4">. Lógicamente la primera fila ya se ha acabado. Pasamos a la segunda fila. La primera celda se extiende sobre 2 filas. Escribiremos <td rowspan="2">. Después de esta celda siguen las otras tres que son normales. Por último definimos la tercera fila. Como la primera celda ya ha sido definida en la fila anterior, sólo nos queda la segunda celda, que es normal, y la tercera que se extiende sobre dos columnas <td colspan="2"> Pondremos un &nbsp; para meter algo aunque no se vea y, para asegurarnos de la simetría de la tabla, estableceremos el ancho con el atributo width en la tabla (30% por ejemplo) y una proporción del espacio total de la tabla en cada columna (25%) y lo haremos en las celdas que nos parezca (en las "normales" de ancho). El código podría quedar así:
    • <html> <head> <title> Tablas 5 </title> </head> <body> <table border align="center" width="30%" bgcolor="#ffcccc"> <tr> <td colspan="4">&nbsp;</td> </tr> <tr> <td rowspan="2" width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td colspan="2">&nbsp;</td> </tr> </table> </body> </html>
    • <html> <head> Título de la tabla. <title> Tablas 6 Disponemos de una </title> </head> etiqueta para poner <body> el título de la tabla. <table border align="center" width="30%" bgcolor="#ffcccc"> Es <caption> con su <caption>Éste es el título de la tabla</caption> <tr> correspondiente de </tr> <td colspan="4">&nbsp;</td> cierre. <tr> <td rowspan="2" width="25%">&nbsp;</td> Se coloca después de <td width="25%">&nbsp;</td> la etiqueta de <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> definición de la tabla </tr> <tr> y añade un texto por <td>&nbsp;</td> <td colspan="2">&nbsp;</td> encima de la tabla y </tr> centrado con ésta. </table> </body> </html>
    • <html> <head> Celdas de cabecera. <title> Tablas 7 Disponemos de una </title> etiqueta especial para </head> <body> aquellas celdas que son <table border align="center" width="50%" cabecera respecto de bgcolor="#ffcccc"> <caption>Ejemplo de celdas de cabecera</caption> las celdas situadas <tr> debajo de ellas. <th>Nombre</th> <th>Apellido 1</th> Son las etiquetas <TH> <th>Apellido 2</th> (table header). </tr> <tr> El texto situado en ellas <td width="25%">José</td> <td width="25%">Pérez</td> queda centrado y en <td width="25%">Pérez</td> negrita. </tr> <tr> Lo único que hay que <td>Luis</td> <td>Román</td> hacer es sustituir la <td>Sánchez</td> etiqueta normal de </tr> </table> celda por esta otra. </body> </html>
    • Alineaciones dentro de las celdas. Veamos como se pueden alinear los objetos dentro de las celdas de una tabla: Primera fila (alineación horizontal): En la primera celda el texto está alineado a la izquierda. No hay que hacer nada, es la alineación que se establece por defecto. (Podría escribirse, de todas formas: <td align="left">). En la segunda celda el texto está alineado en el centro: <td align="center">. En la tercera celda el texto está alineado a la derecha: <td align="right">. Segunda fila (alineación vertical): En la primera celda el texto está alineado en la parte superior: <td valign="top">. En la segunda celda el texto está alineado en la parte central. No hay que hacer nada, es la alineación vertical establecida por defecto. (Podría escribirse, de todas formas: <td valign="middle">) . En la tercera celda el texto está alineado en la parte inferior: <td valign="bottom">. Para observar mejor los resultados se ha forzado la altura de las celdas a 50 píxeles. Basta escribirlo en la primera celda de cada fila: <td height="50"> pero podría escribirse en todas ellas.
    • <html> <head> <title> Tablas 8 </title> </head> <body> <table border width="60%" align="center" bgcolor="#ffffcc"> <caption>Alineaciones de celdas</caption> <tr> <td width="33%" height="50">xxx</td> <td width="34%" align="center">xxx</td> <td width="33%" align="right">xxx</td> </tr> <tr> <td height="50" valign="top">xxx</td> <td align="center">xxx</td> <td align="right" valign="bottom">xxx</td> </tr> </table> </body> </html>
    • Separaciones entre celdas y entre borde y contenidos. La separación por defecto entre las celdas es de 2 píxeles. Se puede modificar esta distancia con el atributo de table cellspacing. Tabla con cellspacing de 15 píxeles: En la segunda tabla se ha aumentado la altura de las celdas a 70 píxeles para observar la alineación vertical. Veamos los códigos:
    • <html> <head> <title> Tablas 9 </title> </head> <body> <table border width="60%" align="center" bgcolor="#ffffcc" cellspacing="15"> <caption> Tabla con espacio entre celdas de 15 píxeles </caption> <tr> <td width="33%" height="50">xxxx</td> <td width="34%" align="center">xxxx</td> <td width="33%" align="right">xxxx</td> </tr> <tr> <td height="50" valign="top">xxxx</td> <td align="center">xxxx</td> <td align="right" valign="bottom">xxxx</td> </tr> </table> </body> </html>
    • html> <head> <title> Tablas 10 </title> </head> <body> <table border width="60%" align="center" bgcolor="#ffffcc" cellpadding="15"> <caption> Tabla con "cellpadding" de 15 píxeles </caption> <tr> <td width="33%" height="70">xxxx</td> <td width="34%" align="center">xxxx</td> <td width="33%" align="right">xxxx</td> </tr> <tr> <td height="70" valign="top">xxxx</td> <td align="center">xxxx</td> <td align="right" valign="bottom">xxxx</td> </tr> </table> </body> </html>
    • Imágenes. La etiqueta para introducir una imagen en nuestra página es <img src="nombre.gif"> (src de source en inglés fuente u origen de la imagen) y siendo nombre el nombre que tiene la imagen y .gif su formato. La etiqueta funcionará bien siempre y cuando la imagen esté en la misma carpeta en la que se encuentra la página web desde la que la llamamos. Es habitual (y recomendable) colocar todas las imágenes en otra carpeta interna, en ese caso, habrá que darle la ruta en la cual se encuentra nuestra imagen. Supongamos que la imagen nombre.gif se encuentra en una carpeta denominada imag, pues bien, la etiqueta sería <img src="imag/nombre.gif"> Veamos un ejemplo: En este caso el formato de la imagen es .jpg (junto con el .gif y el .png los formatos de imágenes más habituales en internet). La imagen se denomina riglos2.jpg
    • <html> <head> <title> Imágenes 1 </title> </head> <body> <center> <img src="imag/riglos2.jpg"> </center> </body> </html
    • <html> Atributos de la imagen width <head> y height. <title> Imágenes 2 Es muy importante introducir </title> las medidas de la imagen (las </head> podemos averiguar desde un <body> programa gráfico como <center> PhotoShop) dentro de la <img src="imag/riglos2.jpg" width="150" height="230"> etiqueta <img>. De esta </center> manera cuando el navegador </body> va recorriendo la página </html> reserva el espacio justo para la imagen y, el resto de la página se va cargando sin problemas mientra se acaba de cargar la imagen. En nuestro caso la imagen tiene 150 de ancho y 230 de alto. Escribiríamos:
    • <html> Texto alternativo. Es otro atributo que se coloca por <head> varios motivos, el principal es que <title> aquellas personas que visiten nuestra Imágenes 3 página sin descargarse las imágenes (habitual en los que tienen una mala </title> conexión y no desean eternas </head> descargas) tengan, al menos, una <body> orientación del contenido de la misma. Debe ser una descripción <center> corta del tema de la imagen. Se <img src="imag/riglos2.jpg" introduce con la cadena width="150" height="230" alt="descripción de la imagen" y, al ser un atributo, se coloca como los alt="Mallos de Riglos (Huesca)"> dos anteriores, dentro de la etiqueta </center> <img>. </body> Cuando el visitante (si navega con el </html> Internet Explorer) se acerque con el cursor a la imagen, aparecerá un rectángulo con el texto alternativo: Nota: El hecho de que aparezca el texto alternativo al acercarnos con el cursor a la imagen, es una desviación del Explorer. Existe otro atributo para que esto se produzca independientemente del navegador que empleemos. Es el atributo title.
    • <html> <head> <title> Imagen como fondo de página </title> </head> <body background="imag/claro1.gif"> <center> <h2> Esta página tiene una imagen de fondo. </h2> </center> Colocar una imagen como fondo de la página. </body> Simplemente tenemos que colocar dentro de la </html> etiqueta <body> el atributo background con el nombre y/o dirección de la imagen que queremos colocar. Supongamos que quiero colocar una imagen denominada claro1.gif que está dentro de la carpeta imag. El código será el siguiente: