Manual html
Upcoming SlideShare
Loading in...5
×
 

Manual html

on

  • 873 views

Manual HTML

Manual HTML

Statistics

Views

Total Views
873
Views on SlideShare
873
Embed Views
0

Actions

Likes
1
Downloads
53
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Manual html Manual html Document Transcript

  • ILO – PERÚEDICIÓN 2010 I.E. «Mercedes Cabello de Carbonera»
  • Empezando con el Lenguaje HTML (HyperText Markup Language)Es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma dehipertexto, que es el formato estándar de las páginas web. Gracias a Internet y a losnavegadores como Internet Explorer, Opera, Firefox, Netscape o Safari, el HTML se haconvertido en uno de los formatos más populares y fáciles de aprender que existen para laelaboración de documentos para web.El código fuente, se escribe en un procesador de texto. Nosotros lo vamos a hacer con el Bloc denotas. Para abrir el Bloc de Notas, le damos a Inicio > Todos los programas > Accesorios > Bloc denotas. Se abrirá una ventana como ésta:A continuación debes saber que las dos etiquetas fundamentales dentro de las cuales tiene que irnuestro código fuente son <html> como etiqueta de apertura y </html> como etiqueta de cierre.Después, todo lo que será visible al visitar la página con el navegador, debe de estar entre lasetiquetas <body> cuerpo, en inglés, como etiqueta de apertura y </body> como etiqueta de cierre.Nota: Las etiquetas también se pueden escribir con letras mayúsculas: <HTML><BODY>...Nosotros vamos a optar por las minúsculas por ser lo que se está imponiendo deacuerdo con las últimas normas.Vamos a escribir algo en nuestra página. Por ejemplo Bienvenid@. Lo escribiremos entre <body> y</body>. Nuestro código quedará así: I.E. «Mercedes Cabello de Carbonera»
  • Ahora tenemos que guardar nuestro documento en alguna parte del ordenador y ¡muy importante!con un nombre y una extensión especial. El nombre va a ser index (ya veremos porqué estenombre más adelante) y su extensión .htmlTambién se podría guardar con la extensión .htm (el resultado es exactamente el mismo).El sitio puede ser cualquier parte del ordenador. Para tenerlo accesible, lo vamos a guardar en elEscritorio: Le damos a Archivo > GuardarNos aparecerá la ventana de selección de directorio:Elegimos la unidad D: luego nuestra carpeta (QUINTO_X), finalmente ingresamos a la carpetaWEB (Creada al inicio del curso) y le ponemos de nombre: index.html I.E. «Mercedes Cabello de Carbonera»
  • Observa que en Tipo no hemos cambiado nada. No es necesario al haber incluído la extensión.html en el nombre del archivo. Si no abre su página web, elija en TIPO: Todos los Archivos.Ya podemos ir al Explorador de Windows y buscamos nuestra carpeta para abrir nuestra página:Haciendo doble click en el archivo INDEX.HTMLNota: A veces es recomendable visualizar nuestra página web en dos navegadores como mínimo:El Internet Explorer y el Mozilla Firefox, para ver posibles errores en el código.Como todavía la mayoría de los usuarios utilizan el Internet Explorer más que ningún otronavegador, vamos a tenerlo como navegador predeterminado (de momento). Si no lo tienes así, lopuedes hacer abriendo el Explorer y en el menú superior eliges Herramientas > Opciones deInternet...Elegimos la pestaña Programas:Y hacemos click en el botón Restablecer configuración Web... I.E. «Mercedes Cabello de Carbonera»
  • Desactiva la opción Restablecer también la página principal y le das al SíAparecerá el mensaje de confirmación que deberás Aceptar:Vamos a ver nuestra página: Hacemos doble clic sobre el icono del archivo INDEX.HTML y listo:La verdad no es una página muy espectacular pero... estamos empezando. I.E. «Mercedes Cabello de Carbonera»
  • Mejorando la página.Centrar el texto.Si queremos que nuestro saludo: Bienvenid@ aparezca en el centro de la página, escribimosdelante del saludo la etiqueta <center> y al final del mismo la etiqueta de cierre </center>El código quedaría así:Guardamos los cambios:Minimizamos y comprobamos los resultados con el Explorer (lo recuperamos desde la barra detareas):Si observamos que nuestro mensaje no aparece centrado le damos al botón o presionamos F5para “Actualizar” los cambios. Puede ocurrir que no haya puesto al día los cambios: I.E. «Mercedes Cabello de Carbonera»
  • Minimizamos y abrimos el Firefox. Lo mismo. Si observamos que no ha puesto los cambios al díale damos al botón “Recargar Página”.Minimizamos.Nota: Es conveniente tener los tres programas abiertos: Los dos navegadores y el Bloc de notas.Si cerramos los programas, podemos recuperar el Bloc de notas a partir del Explorer. Botónderecho del ratón > Ver código fuente. Se abrirá el Bloc de notas. Puedo hacer los cambios que seseñalan en este manual, guardar y minimizar. Abrir cada navegador y Actualizar o Recargar.Otra forma de recuperar el Bloc de notas es abrirlo desde Inicio > Todos los programas >Accesorios > Bloc de notas. Una vez abierto el programa, buscamos nuestro index.html en elescritorio. Archivo > Abrir y buscamos el escritorio. Tienes que observar que en Tipo estáseleccionado Todos los archivos. En caso contrario no verás el index.html I.E. «Mercedes Cabello de Carbonera»
  • Aumentar el tamaño del texto.Nuestro mensaje es algo pequeño. Podemos aumentar su tamaño empleando las etiquetas deencabezados. Las etiquetas van desde el <h1> (h de head, en inglés, cabeza) para la más grande,al <h6> para la más pequeña.Vamos a poner el tamaño mayor:Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada uno de losnavegadoresNo olvidarse de dar al botón Actualizar en el caso de no ver los cambios a la primera. I.E. «Mercedes Cabello de Carbonera»
  • Poner un color de fondo.Si deseamos poner un color de fondo a toda la página, lo tenemos que hacer dentro de la etiqueta<body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se denominaatributo. Los colores deben escribirse mediante el denominado código hexadecimal que consisteen 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul quecontiene ese color, o bien, con la palabra inglesa que corresponde al color.Nosotros vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la etiqueta<body> con su atributo como sigue: <body bgcolor="red"> ( bg de background ).Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados: I.E. «Mercedes Cabello de Carbonera»
  • Cambiar el color del texto.Para cambiar el color del texto empleamos la etiqueta <font> con su atributo color. Vamos acambiar el color negro del texto, al color blanco.Podríamos emplear el nombre en inglés del color, igual que hemos hecho con el fondo. La etiquetaquedaría <font color="white">. Vamos ahora, a colocar el código hexadecimal de este color que esel ffffff. La etiqueta quedaría así: <font color="#ffffff">. La etiqueta se debe cerrar sin su atributo. I.E. «Mercedes Cabello de Carbonera»
  • Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es necesario:Saltos de línea.A partir de este momento ya no vamos a incluir en este manual la imagen de cada uno de losnavegadores abriendo la página.Pero el proceso que se debe seguir para construir las páginas noha cambiado: 1. Modificar/ampliar el código en el bloc de notas. 2. Guardar los cambios. 3. Abrir el Explorer y Actualizar si es necesario. 4. Abrir el Firefox y Recargar si es necesario.Vamos, ahora, a incluir una nueva línea en nuestra página: Por ejemplo vamos a poner: A miprimera página web: I.E. «Mercedes Cabello de Carbonera»
  • Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados:index.html¿Qué ha pasado? Esto no era lo previsto.Lo que ocurre es que el salto de línea que hemos hecho en el código no lo reconocen losnavegadores. Para que el salto de línea se incorpore hay que hacerlo con la etiqueta <br> delinglés break, romper. Esta etiqueta no tiene cierre.El código quedaría así:Veamos ahora el resultado: index.htmlAhora sí que es lo que queríamos.Nota: Puedes comprobar el código que genera la página que visualizas en la ventana emergentepinchando con el botón derecho del ratón y eligiendo Ver código fuente (si lo ves con el InternetExplorer) o Ver código fuente de la página (si lo ves con el Firefox). I.E. «Mercedes Cabello de Carbonera»
  • Párrafos.Cuando queremos introducir una línea en blanco, utilizamos la etiqueta <p> de párrafo. Estaetiqueta admite su correspondiente cierre </p>, aunque no es necesario.Si queremos separar más no es suficiente repetir la etiqueta <p>. Hay que unir las dos etiquetas yrepetir ambas: I.E. «Mercedes Cabello de Carbonera»
  • Existe otra posibilidad: Consiste en combinar la etiqueta de apertura de párrafo con la de cierreescribiendo dentro un caracter invisible: &nbsp; (non breaking space):La cadena &nbsp; también se puede utilizar para añadir un espacio en blanco extra a la separaciónentre dos palabras, repitiéndolo cuantas veces haga falta. Aunque, su definición inicial, era paraañadir un espacio de separación entre dos palabras "que no se pueda romper" caiga, por lasconfiguraciones de pantalla diferenciadas, donde caiga.La cabecera.¿Cómo van las cosas? Espero que, hasta aquí al menos, todo esté yendo bien.Por simplificar un poco no habíamos comentado nada de una parte importante que tienen laspáginas web: Es la cabecera. Como has podido comprobar, no es imprescindible pero sí muyimportante. La cabecera se coloca entre las etiquetas <head> y </head> . Va justo después de laprimera etiqueta <html> y antes del <body>. Constituye la parte no visible del documento: <html> <head> </head> <body> Sólo se ve este texto </body> </html>De momento, lo que más nos interesa poner dentro de la cabecera del documento es el título de lapágina.Observa que en la barra de título, la barra superior aparece: I.E. «Mercedes Cabello de Carbonera»
  • Para arreglar esto, para poner el título al documento, hay que introducir dos nuevas etiquetasdentro de la cabecera. Son las etiquetas <title> de apertura y </title> de cierre. Y, entre ellasponemos la frase que defina nuestro documento: <html> <head> <title> Ejercicio 1 </title> </head> <body> Sólo se ve este texto </body> </html>Comprueba que, en la barra superior del navegador, barra de título, aparece el título queacabamos de poner al documento:Si tienes experiencia en internet, probablemente te hayas encontrado con páginas en las queaparece Documento sin título o Untitled document. Bien, ya sabes el porqué: No pusieron nadaentre <title> y </title>Listas.A menudo hay que hacer listas de objetos, de conceptos, de definiciones...Las listas pueden ser no numeradas (el orden no importa) y numeradas:Listas no numeradas.Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>.Cada objeto que forma la lista va precedido de la etiqueta <li> (list item) sin etiqueta de cierre. <html> <head> <title> Listas no numeradas </title> </head> <body> Mis aficiones: <ul> <li> El cine. <li> La montaña. <li> La música. </ul> </body> </html> I.E. «Mercedes Cabello de Carbonera»
  • Listas numeradas.Comienza el listado con la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>. Cada objetoque forma la lista va precedido, igual que en las anteriores de la etiqueta <li> sin cierre. <html> <head> <title> Listas numeradas </title> </head> <body> Mis preferencias: <ol> <li> Viajar. <li> Salir con mis amigos. <li> Dormir. </ol> </body> </html>Listas anidadas.Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay que tener,simplemente, cuidado en la colocación de las etiquetas de apertura y cierre. <html> <head> <title> Listas anidadas </title> </head> <body> <h3>Animales:<h3> <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> I.E. «Mercedes Cabello de Carbonera»
  • Hemos incorporado la etiqueta de encabezado de tercer orden <h3> para resaltar el concepto quese va a clasificar. (Recuerda que los encabezados van del <h1> el mayor al <h6> el menor).Listas de definiciones.Son apropiadas, como su nombre indica, para establecer listados de términos con sus definiciones.Las etiquetas de apertura y cierre son <dl> y </dl> (definition list). Los conceptos a definir van conla etiqueta <dt> (definition term) y las definiciones con la etiqueta <dd> (definition definition). <html> <head> <title> Listas de definiciones </title> </head> <body> <dl> <dt>Concepto 1 <dd>Definición del Concepto 1 <dt>Concepto 2 <dd>Definición del concepto 2 </dl> </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> <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>Se puede utilizar más de una etiqueta si deseamos un sangrado mayor: <html> <head> <title> Sangrados múltiples </title> </head> I.E. «Mercedes Cabello de Carbonera»
  • <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 subrayado.Para remarcar una cadena de caracteres empleamos las etiquetas <b> y </b> (bold).Para hacer que un texto se muestre en cursiva: <i> e </i> (italic).Para subrayar empleamos <u> y </u> (underlined). <html> <head> <title> Negrita, cursiva y subrayado </title> </head> <body> Los textos siguientes:<p> <b>Éste está en negrita</b><br> <i>Éste está en cursiva</i><br> <u>Éste está subrayado</u> </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> Subíndices y superíndices </title> </head> <body> f<sub>(x)</sub>= X<sup>2</sup> + 5X </body> I.E. «Mercedes Cabello de Carbonera»
  • </html>Línea de separación.Se consigue con la etiqueta <hr> (horizontal rule) sin etiqueta de cierre. <html> <head> <title> Barra de separación </title> </head> <body> Pongamos una separación: <hr> </body> </html>Comentarios.Si queremos introducir texto que sirva de recordatorio de lo que hicimos o dejamos de hacer o paradar explicaciones a otras personas que pueden acceder al código pero que no queremos que sevisualicen en pantalla empleamos la etiqueta (medio etiqueta) <!-- para el comienzo y la etiqueta --> para el final del comentario. <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>Tablas.Empezamos con un tema algo complejo.Una tabla se define entre las etiquetas <table> y </table>A partir de este momento hay que definir las filas de la tabla que se definen con <tr> y </tr> (tablerow). Un par de etiquetas para cada una de las filas. I.E. «Mercedes Cabello de Carbonera»
  • Dentro de cada fila se definen las celdas que forman esa fila con las etiquetas <td> y </td> (tabledata).Vamos a empezar definiendo una tabla de 3 filas y 3 columnas (para nuestro lenguaje serán tresfilas, cada una de ellas con tres celdas): <html> <head> <title> Tablas 1 </title> </head> <body> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>¿Qué ha pasado? No se ve nada. Esto ocurre porque: 1. Dentro de las celdas no hemos puesto nada. 2. La tabla no tiene bordes.Tablas con borde y con casillas vacías.Vamos a arreglar estos dos temas: Por un lado vamos a indicar que queremos una tabla conborde. Esto se hace dentro de la etiqueta <table> con el atributo border. Así: <table border>.Por otro lado, vamos a poner algo dentro de cada celda. Pero, en lugar de poner algo concreto yvisible, vamos a utilizar una cadena de caracteres que ya hemos visto que se utilizaba para añadirun espacio a la separación entre palabras: &nbsp; <html> <head> <title> Tablas 2 </title> </head> <body> <table border> I.E. «Mercedes Cabello de Carbonera»
  • <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html>Otros atributos de la tabla.Podemos hacer que nuestra tabla esté centrada en la página con el atributo align="center". O "left"o "right"Que ocupe una determinada proporción del espacio en horizontal con el atributo width="50%". O"30%" o "70%" o...Que el borde sea mayor que el establecido por defecto (que es 1): border="3". O ...Que tenga un color de fondo con el atributo bgcolor="#6699FF" . O cualquier otro (ver coloreshtml). <html> <head> <title> Tablas 3 </title> </head> <body> <table border="3" align="center" width="50%" bgcolor="#ffcccc"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> I.E. «Mercedes Cabello de Carbonera»
  • <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html>Atributos de las filas y las celdas.De manera similar a los atributos de la tabla, podemos definir todos esos parámetros a las filas o alas celdas.Por ejemplo podemos empezar asignando a las celdas de la primera fila un ancho diferente. Si aeste respecto no hago nada más en las otras celdas, lo que haga afectará a todas las columnas.Puedo definir colores diferenciados. En este caso, el color de la fila o de la celda prevalecerá sobreel definido en el conjunto de la tabla <html> <head> <title> Tablas 4 </title> </head> <body> <table border="3" align="center" width="50%" bgcolor="#ffcccc"> <tr> <td width="10%">&nbsp;</td> <td width="30%">&nbsp;</td> <td width="60%">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td bgcolor="#ff00cc">&nbsp;</td> <td bgcolor="#ffcc00">&nbsp;</td> I.E. «Mercedes Cabello de Carbonera»
  • <td bgcolor="#00cccc">&nbsp;</td> </tr> </table> </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:Para no complicarnos, lo primero que hay que tener claro es el número máximo de columnas yfilas que tiene la tabla: En este caso es 4 columnas y 3 filas. Pues bien, tendremos que establecer4 celdas en cada una de las 3 filas. Luego, agruparemos celdas con las etiquetascorrespondientes.Empezamos con la primera fila. Se extiende ocupando las 4 columnas. La etiqueta que debemosemplear es un atributo para la primera celda de la primera fila (debe "extenderse" sobre las cuatrocolumnas) <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 <tdrowspan="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 latabla, estableceremos el ancho con el atributo width en la tabla (30% por ejemplo) y una proporcióndel 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> I.E. «Mercedes Cabello de Carbonera»
  • 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>Título de la tabla.Disponemos de una etiqueta para poner el título de la tabal. Es <caption> con su correspondientede cierre. Se coloca después de la etiqueta de definición de la tabla y añade un texto por encimade la tabla y centrado con ésta. <html> <head> <title> Tablas 6 </title> </head> <body> <table border align="center" width="30%" bgcolor="#ffcccc"> <caption>Éste es el título de la tabla</caption> <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> I.E. «Mercedes Cabello de Carbonera»
  • Celdas de cabecera.Disponemos de una etiqueta especial para aquellas celdas que son cabecera respecto de lasceldas situadas debajo de ellas. Son las etiquetas <TH> (table header). El texto situado en ellasqueda centrado y en negrita. Lo único que hay que hacer es sustituir la etiqueta normal de celdapor esta otra. <html> <head> <title> Tablas 7 </title> </head> <body> <table border align="center" width="50%" bgcolor="#ffcccc"> <caption>Ejemplo de celdas de cabecera</caption> <tr> <th>Nombre</th> <th>Apellido 1</th> <th>Apellido 2</th> </tr> <tr> <td width="25%">José</td> <td width="25%">Pérez</td> <td width="25%">Pérez</td> </tr> <tr> <td>Luis</td> <td>Román</td> <td>Sánchez</td> </tr> </table> </body> </html>Alineaciones dentro de las celdas. I.E. «Mercedes Cabello de Carbonera»
  • Veamos como se pueden alinear los objetos dentro de las celdas de una tabla: xxx xxx xxx xxx xxx xxxPrimera 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. Bastaescribirlo 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> I.E. «Mercedes Cabello de Carbonera»
  • 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 conel atributo de table cellspacing. Tabla con cellspacing de 15 píxeles: xxxx xxxx xxxx xxxx xxxx xxxx TABLA_1La separación entre el borde la tabla y el contenido de las celdas es de 1 píxel. Se puede modificarcon el atributo cellpadding de la etiqueta table. Tabla con cellpadding de 15 píxeles: xxxx xxxx xxxx xxxx xxxx xxxx TABLA_2En la segunda tabla se ha aumentado la altura de las celdas a 70 píxeles para observar laalineació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> I.E. «Mercedes Cabello de Carbonera»
  • <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> VER TABLA_1 <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> VER TABLA_2Imágenes.La etiqueta para introducir una imagen en nuestra página es <img src="nombre.gif"> (src de sourceen inglés fuente u origen de la imagen) y siendo nombre el nombre que tiene la imagen y .gif suformato.La etiqueta funcionará bien siempre y cuando la imagen esté en la misma carpeta en la que seencuentra la página web desde la que la llamamos. Es habitual (y recomendable) colocar todas lasimágenes en otra carpeta interna, en ese caso, habrá que darle la ruta en la cual se encuentranuestra imagen. Supongamos que la imagen nombre.gif se encuentra en una carpeta denominadaimag, pues bien, la etiqueta sería <img src="imag/nombre.gif">Veamos un ejemplo: I.E. «Mercedes Cabello de Carbonera»
  • En este caso el formato de la imagen es .jpg (junto con el .gif y el .png los formatos de imágenesmá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> </htmlAtributos de la imagen width y height.Es muy importante introducir las medidas de la imagen (las podemos averiguar desde un programagráfico como PhotoShop) dentro de la etiqueta <img>. De esta manera cuando el navegador varecorriendo la página reserva el espacio justo para la imagen y, el resto de la página se vacargando sin problemas mientra se acaba de cargar la imagen. En nuestro caso la imagen tiene150 de ancho y 230 de alto. Escribiríamos: <html> <head> <title> Imágenes 2 </title> </head> <body> <center> <img src="imag/riglos2.jpg" width="150" height="230"> </center> </body> </html> I.E. «Mercedes Cabello de Carbonera»
  • Texto alternativo.Es otro atributo que se coloca por varios motivos, el principal es que aquellas personas que visitennuestra página sin descargarse las imágenes (habitual en los que tienen una mala conexión y nodesean eternas descargas) tengan, al menos, una orientación del contenido de la misma. Debe seruna descripción corta del tema de la imagen. Se introduce con la cadena alt="descripción de laimagen" y, al ser un atributo, se coloca como los dos anteriores, dentro de la etiqueta <img>. <html> <head> <title> Imágenes 3 </title> </head> <body> <center> <img src="imag/riglos2.jpg" width="150" height="230" alt="Mallos de Riglos (Huesca)"> </center> </body> </html>Cuando el visitante (si navega con el 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 unadesviación del Explorer. Existe otro atributo para que esto se produzca independientemente delnavegador que empleemos. Es el atributo title.Y cuando navegue sin bajarse las imágenes se verá así: I.E. «Mercedes Cabello de Carbonera»
  • Colocar una imagen como fondo de la página.Simplemente tenemos que colocar dentro de la etiqueta <body> el atributo background con elnombre y/o dirección de la imagen que queremos colocar. Supongamos que quiero colocar unaimagen denominada claro1.gif que está dentro de la carpeta imag. El código será el siguiente: <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> </body> </html>Vínculos.Es una de las herramientas más interesantes de los documentos html. La sintaxis para establecerun enlace es: <a href="destino">texto</a>Donde destino es el documento con el que se enlaza y texto es la palabra o palabras que, alpulsar, nos llevan a ese destino (también puede ser una imagen).Vínculos a otro documento del mismo sitio.Nuestro sitio estará formado por varios archivos generadores de varios documentos. Losdocumentos tendrán la extensión .html (o .htm). Para establecer el vínculo escribiremossencillamente el nombre del documento en el destino y, entre las etiquetas de apertura y cierre lapalabra o palabras que activarán el vínculo.Como ejemplo vamos a establecer un enlace a la primera página de este sitio (primer documento)cuyo archivo tiene como nombre index.htm <html> <head> <title> Vínculos 1 </title> </head> <body> <center> <a href="index.htm"> Ir al inicio de este curso </a> </center> </body> </html> I.E. «Mercedes Cabello de Carbonera»
  • Vínculos a otro documento externo al sitio.En este caso en destino deberemos escribir toda la dirección URL del sitio.Vamos a establecer un enlace a la página del buscador Google cuya dirección URL eshttp://www.google.com <html> <head> <title> Vínculos 2 </title> </head> <body> <center> <a href="http://www.google.com"> Ir a Google </a> </center> </body> </html>Muchas veces puede resultar interesante escribir la propia dirección URL como activador delvínculo: <html> <head> <title> Vínculos 3 </title> </head> <body> <center> Ir a Google:<br> <a href="http://www.google.com"> http://www.google.com</a> </center> </body> </html>Vínculos a otra parte del mismo documento.A veces cuando el documento es muy extenso conviene establecer formas rápidas para subir obajar a una parte determinada del documento.Para realizar esto, primero hay que establecer un ancla o marca en la/s parte/s del documento alos que queremos acceder de forma rápida.La sintaxis del ancla es <a name="ancla1"></a> poniéndolo en el punto de destino. No hace faltaque haya nada entre la etiqueta de apertura y cierre.En el punto activador escribiremos <a href ="#ancla1"> Ir a la parte tal </a>. I.E. «Mercedes Cabello de Carbonera»
  • Como ejemplo vamos a movernos por las partes anteriores a esta línea del punto en el queestamos.En primer lugar hemos nombrado las anclas con el mismo nombre que tienen los diferentesapartados (cambiando el punto por un guión bajo) a los que vamos a desplazarnos: código Ir al titulo <a href="#1>Ir al apartado 1</a> Ir al subtitulo1 <a href="#1_1>Ir al apartado 1.1</a> Ir al subtitulo2 <a href="#1_2>Ir al apartado 1.2</a> Ir al subtitulo3 <a href="#1_3>Ir al apartado 1.3</a>Vínculos a una parte concreta de otro documento de nuestro sitio.Se pueden combinar este último tipo de enlaces con el vínculo a otro documento de nuestro sitio.La sintaxis sería <a href="paginax.htm#ancla"> Ir al apartado tal de tal página </a> <html> <head> <title> Vínculos 4 </title> </head> <body> <center> <a href="diez.htm#13_2"> Ir al apartado 13.2 de este curso </a> </center> </body> </html>Vínculos de correo electrónico.Vamos a ver los enlaces a una dirección de correo electrónico. Cuando el navegante pinche sobreel activador del vínculo, se abrirá el programa de correo con la dirección del destinatario ya escritaen el mensaje.La sintaxis es <a href="mailto: edgar_ilo@educailo.com"> Mándame un mensaje </a> <html> <head> <title> Vínculos 5 </title> </head> <body> <center> <a href="mailto:edgar_ilo@educailo.com"> Dime lo que piensas de este curso I.E. «Mercedes Cabello de Carbonera»
  • </a> </center> </body> </html>Imagen como vínculo a otro documento.En lugar de texto podemos utilizar una imagen como vínculo.En primer lugar deberemos escribir la etiqueta de apertura del vínculo y luego la etiqueta deinclusión de la imagen cerrando, posteriormente, la etiqueta del vínculo.Para este tipo de vínculos se suelen emplear pequeñas imágenes, aunque, a veces, también seutilizan imágenes de gran formato (sobre todo en los portales de los sitios). <html> <head> <title> Vínculos 6 </title> </head> <body> <center> Visita la página de TERRA:<P> <a href="http://www.terra.com.pe"> <img src="imag/logo_terra.gif"> </a> </center> </body> </html>Para eliminar este borde tan antiestético que se coloca alrededor de la imagen tenemos el atributoborder="0" <html> <head> <title> Vínculos 7 </title> </head> <body> <center> Visita la página de TERRA:<p> <a href="http://www.terra.es"> <img src="imag/logo_terra.gif" border="0"> </a> </center> </body> </html> I.E. «Mercedes Cabello de Carbonera»
  • Marcos.La estructura de los marcos o frames es un poco compleja.Empezamos definiendo una estructura de marcos: Consiste en una división de la pantalla en variaszonas de tal forma que, en una de las partes, puede haber un menú de vínculos, por ejemplo, quepermanecerá constante y, en la otra, parte principal o main frame, se cargarán las páginaspinchadas desde el frame de vínculos.Puede haber más partes, por ejemplo, una parte superior con el título del sitio que permaneceráconstante según vayamos navegando.Vamos a empezar definiendo una estructura de dos frames: Una columna izquierda, más estrecha,y una columna derecha, más ancha, como frame principal o main frame.Para empezar hay que saber que, de entrada, tenemos que generar tres documentos (tresarchivos .html): • El primero, el más extraño, que definirá la estructura de los marcos. • El segundo, que se cargará en el marco izquierdo. • El tercero que se cargará en el marco derecho.Por otro lado, tenemos que decidir, cuánto espacio vamos a asignar a cada marco: Decidimos queel marco izquierdo ocupará el 15% del espacio y el marco derecho, el resto (o el 85%).Veamos la sintaxis del primer archivo, la estructura de los marcos: <html> <head> <title> Estructura de marcos </title> </head> <frameset cols="15%,*"> <frame src="indice.html"> <frame src="saludo.html" name="principal"> </frameset> </html>Esto lo guardamos con el nombre index.html porque va a ser lo que se abra al principio.Vamos a comentar un poco la sintaxis empleada: • Lo primero que observamos es que, en vez de la etiqueta <body> hemos empleado la etiqueta <frameset> en inglés algo así como estructura de marcos. • El atributo cols está definiendo las columnas y el espacio reservado a cada una. Si, en vez de columnas hubiéramos querido establecer dos filas, hubiéramos empleado el atributo rows. I.E. «Mercedes Cabello de Carbonera»
  • • A continuación decimos que la primera columna va a ocupar el 15% del espacio. Y, la segunda, el resto. Esto indica el asterisco *. Hubiéramos podido, perfectamente, escribir el tanto por ciento que queda, es decir, el 85%: <frameset cols="15% , 85%>. • A continuación viene la etiqueta <frame> (del primer frame, el de la izquierda) con el atributo src para indicar qué archivo se va a cargar en ese espacio. En nuestro caso, el archivo se llama indice.html . • Después viene la etiqueta del segundo marco. En él se cargará el archivo que he llamado saludo.html . • En este marco principal hay otro atributo que es el nombre que le vamos a dar. Esto es necesario porque, en este espacio, se van a cargar otros documentos cuando pulsemos los enlaces y hay que ponerle un nombre para decírselo a los enlaces. El nombre que yo le he puesto es principal.Si abrimos, en estos momentos nuestro index.html nos va a salir: resultadoEsto ocurre porque no hemos creado los dos archivos que se tienen que cargar en cada uno de losdos marcos. Pero ya vemos que el espacio sí que se ha diferenciado.Creo el archivo indice.html que se cargará en el marco de la izquierda: <html> <head> <title> Marco de la izquierda </title> </head> <body bgcolor="#dfdfdf"> Esto se cargará en la izquierda </body> </html>Y lo guardo como indice.htmlCreo el archivo saludo.html que se cargará en el marco de la derecha: <html> <head> <title> Marco de la derecha </title> </head> <body bgcolor="#ff9999"> <center> <h1> Bienvenido a mi página web </h1> </center> </body> </html>Lo guardamos con el nombre saludo.html I.E. «Mercedes Cabello de Carbonera»
  • Abrimos el archivo index.html:Nos queda por crear un cuarto documento, un cuarto archivo .html para que sirva de ejemplo en lasintaxis a emplear para que los enlaces se carguen en el frame principal.Para ello, primero tendremos que crear el documento. Sea algo así: <html> <head> <title> Documento a cargar en marco principal </title> </head> <body bgcolor="#ffcccc"> <center> <h2> Has pulsado el enlace correctamente </h2> </center> </body> </html>Lo guardamos con el nombre enlace.htmlPor otro lado, tendremos que modificar el documento indice para poner el vínculo: <html> <head> <title> Marco de la izquierda con enlace </title> </head> <body bgcolor="#dfdfdf"> <a href="enlace.html" target="principal"> enlace </body> </html>Lo guardamos con el mismo nombre que tenía: indice.html I.E. «Mercedes Cabello de Carbonera»
  • Formularios.El formulario es una interesante herramienta de toda página web. Permite recabar informaciónordenada de los visitantes, y almacenar esa información de alguna manera.Nosotros vamos a trabajar un formulario cuyos datos sean enviados a una dirección de correoelectrónico normal y como datos no encriptados.La otra forma, más compleja, es ser enviado a nuestro servidor a través de un programadeterminado que deberá estar instalado en ese servidor, para almacenar la información yprocesarla. Como esto no está al alcance del usuario corriente, vamos a centrarnos en el primertipo de formularios.Los formularios están dentro de las etiquetas <form> y </form>. Los atributos de la etiqueta deapertura del formulario indicarán la forma de enviar la información: • action="mailto:direcciondecorreo". El formulario será enviado a la dirección de correo: edgar_ilo@educailo.com (mi correo) • method="post". Los datos se enviarán inmediatamente por correo electrónico. • enctype="text/plain". Las respuestas se enviarán sin codificación.17.1.- Campo de texto de una línea. <html> <head> <title> Formulario 1 </title> </head> <body> <form action="mailto:edgar_ilo@educailo.com" method="post" enctype="text/plain"> <table align="center"> <tr> <td width="50%" align="right"> Escribe tu nombre: </td> <td width="50%" alignn="left"> <input type="text" name="Nombre" size="10" maxlength="15"> </td> </tr> I.E. «Mercedes Cabello de Carbonera»
  • </table> </form> </body> </html>Guardamos el formulario con el nombre form1.htmlHemos colocado, dentro del formulario, una tabla con dos columnas para mejorar la presentaciónde los datos: En la columna izquierda, y alineado a la derecha, colocamos el texto de lo que sepide (en este caso el nombre) y, en la columna de la izquierda y, alineado a la derecha, el campode texto: • input type (entrada de tipo) texto. • name es lo que aparecerá en el mensaje de correo delante de lo que introduzca el ususario. • size nos indica el tamaño de la caja de texto de una línea. En este caso 10 caracteres. • maxlenght indica la cantidad máxima de caracteres que puede introducir el usuario.De poco sirve el formulario si no tenemos la opción de enviarlo. Así que vamos a proceder a laintroducción del código necesario. Normalmente, además del botón de enviar se suele poner otropara borrar los datos introducidos. <html> <head> <title> Formulario 2 </title> </head> <body> <form action="mailto:edgar_ilo@educailo.com" method="post" enctype="text/plain"> <table align="center"> <tr> <td width="50%" align="right"> Escribe tu nombre: </td> <td width="50%" alignn="left"> <input type="text" name="Nombre" size="10" maxlength="15"> </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> I.E. «Mercedes Cabello de Carbonera»
  • </body> </html>Guardamos el archivo con el nombre form2.htmlHemos introducido otra fila en la tabla con: • input type submit (enviar). • value será lo que aparezca escrito en el botón. • input type reset en inglés borrar. • value será lo que aparezca escrito en el botón.Cuando, una vez escrito el dato, el usuario pulse el botón de enviar, aparecerá un mensajeindicando que se abrirá el programa de CORREO ELECTRÓNICO:Hay que aceptar para que el formulario sea enviado a mi correo electrónico.Supongamos que un tal Federico ha rellenado el formulario. En la bandeja de entrada de mi correoaparecerá este mensaje:Observa como coincide el Nombre con lo que diseñamos en el formulario en el campo name17.2.- Campo de texto de varias líneas.Se consigue con la etiqueta <textarea> y su correspondiente de cierre.Repetimos el formulario anterior eliminando la opción <text> para simplificar la lectura del código.Pero, evidentemente, se podrían juntar todas las opciones en un único formulario. <html> <head> <title> Formulario 3 </title> </head> <body> <form action="mailto:edgar_ilo@educailo.com" method="post" enctype="text/plain"> <table align="center"> <tr> <td width="50%" align="right"> Escribe tus comentarios: I.E. «Mercedes Cabello de Carbonera»
  • </td> <td width="50%" alignn="left"> <textarea name="Comentarios" cols="30" rows="5"> </textarea> </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body> </html>Guardamos el formulario con el nombre de form3.htmlObserva las diferencias entre la etiqueta de introducción de texto en una línea y la que acabamosde colocar: • En este caso, la etiqueta tiene apertura y cierre. • El atributo cols indica el ancho del cuadro de texto en número de caracteres. • El atributo rows indica el número de filas del cuadro de texto. Si el ususario quiere escribir más de 5 líneas, el formulario se lo permite.He hecho una prueba con mi correo. Éste es el mensaje recibido: I.E. «Mercedes Cabello de Carbonera»
  • Menú de opción.Permite elegir entre varias opciones, una única.Se introduce de forma similar al cuadro de texto de una línea <input> pero, ahora el type es radio elname es el nombre que le damos a ese grupo de opción, el value lo que aparecerá en el mensajede correo delante de la opción elegida. Hay que repetir la etiqueta tantas veces como opciones deelegir haya.Si queremos introducir una segunda posibilidad de elección deberemos repetir el proceso perocambiando el name del grupo de opciones: <html> <head> <title> Formulario 4 </title> </head> <body> <form action="mailto:edgar_ilo@educailo.com" method="post" enctype="text/plain"> <table border align="center"> <tr> <td width="50%" align="right"> Elige el grupo de edad en el que te encuentras: </td> <td width="50%" alignn="left"> <input type="radio" name="Edad" value="Menor de 18"> Tengo menos de 18 años.<br> <input type="radio" name="Edad" value="De 18 a 50"> Tengo entre 19 y 50 años.<br> <input type="radio" name="Edad" value="Más de 51"> Tengo más de 51 años. </td> </tr> <tr> <td width="50%" align="right"> Valora este curso de HTML: </td> <td width="50%" alignn="left"> <input type="radio" name="Valoracion" value="Muy bueno"> Me parece muy bueno.<BR> <input type="radio" name="Valoracion" value="Regular"> Bueno... No está del todo mal.<BR> <input type="radio" name="Valoracion" value="Malo"> Me parece horroroso </td> </tr> <tr> <td width="50%" align="right"> I.E. «Mercedes Cabello de Carbonera»
  • <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body> </html>Observa como las opciones de cada grupo son excluyentes: Sólo podemos elegir una.Esta es una imagen del resultado del envío de una respuesta:Menú de opción múltiple. Casillas de verificación.Es parecido al anterior cambiando el atributo radio por checkbox. Los demás atributos sonsimilares. <html> <head> <title> Formulario 5 </title> </head> <body> <form action="mailto:edgar_ilo@educailo.com" method="post" enctype="text/plain"> <table border align="center"> <tr> <td width="50%" align="right"> Elige tus aficiones: </td> <td width="50%" alignn="left"> <input type="checkbox" name="Gustos" value="Leer"> Me gusta leer.<BR> I.E. «Mercedes Cabello de Carbonera»
  • <input type="checkbox" name="Gustos" value="Cine"> Ir al cine.<BR> <input type="checkbox" name="Gustos" value="Gimnasio"> Machacarme en el gimnasio.<BR> <input type="checkbox" name="Gustos" value="Botellón"> Hacer botellón con los amigos.<BR> <input type="checkbox" name="Gustos" value="Caminar"> Salir al campo a caminar. </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body> </html>Este es el resultado de un envío:Menú desplegable.Las opciones de elección se despliegan en un menú para que el visitante elija una. <html> <head> <title> Formulario 6 I.E. «Mercedes Cabello de Carbonera»
  • </title> </head> <body> <form action="mailto:edgar_ilo@educailo.com" method="post" enctype="text/plain"> <table border align="center"> <tr> <td width="50%" align="right"> Elige tu mejor día de la semana: </td> <td width="50%" alignn="left"> <select name="Mejor_dia"> <option value=""></option> <option value="Lunes">Lunes</option> <option value="Martes">Martes</option> <option value="Miércoles">Miércoles</option> <option value="Jueves">Jueves</option> <option value="Viernes">Viernes</option> <option value="Sábado">Sábado</option> <option value="Domingo">Domingo</option> </select> </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body> </html>Esta la imagen de una respuesta: I.E. «Mercedes Cabello de Carbonera»
  • Campo de contraseña.Para hacer que un determinado campo de texto no sea visible para las personas que esténalrededor del usuario (tipo contraseña), empleamos la misma sintaxis que en el campo de texto deuna línea sustituyendo type="text" por type="password" <html> <head> <title> Formulario 7 </title> </head> <body> <form action="mailto:edgar_ilo@educailo.com" method="post" enctype="text/plain"> <table align="center"> <tr> <td width="50%" align="right"> Escribe tu contraseña: </td> <td width="50%" alignn="left"> <input type="password" name="Contraseña" size="8" maxlength="8"> </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body> </html>Observa que, aunque al escribir la contraseña aparecen los típicos asteriscos, en el mensaje decorreo aparece el texto tecleado:Publicación del sitio.Ya tenemos nuestra página creada y, salvo modificaciones y posteriores actualizaciones, dispuesta I.E. «Mercedes Cabello de Carbonera»
  • para ser publicada. ¿Cómo proceder?Lo primero es encontrar un servidor que acepte alojar nuestra página.Hay servidores de pago y servidores gratuitos a costa de la pesadísima publicidad.De estos últimos, uno de ellos es Geocities. Primero hay que abrirse una cuenta con Yahoo y,después, darse de alta para activar el sitio web.Una vez que tenemos el espacio reservado hay que conocer las características del mismo que elpropio servidor nos tiene que proporcionar: Por ejemplo ¿cómo se debe llamar nuestra primerapágina? Normalmente index.htm ¿Hay que alojar nuestra primera página dentro de alguna carpetaespecial dentro de nuestro espacio web? Normalmente no; pero hay algunos servidores como elCNICE del Ministerio de Educación español que obliga a publicar el sitio dentro de una carpeta quedebe llamarse public_html. ¿Cuál es el nombre del servidor? ¿y el del usuario? ¿y la contraseña?Todos estos datos deben ser proporcionados por el servidor así que no hay que preocuparsedemasiado. TRABAJO PRÁCTICO • Elegir un Servidor que pueda alojar nuestras páginas Web y publicarla. • Enviar al Prof. la dirección de su página Web. I.E. «Mercedes Cabello de Carbonera»