MANUAL DE HTTTTMLLLL
Anuncio
Para confeccionar una página web lo único que se necesita es un editor de texto. Existen editores especializados en crear ficheros HTML Podemos utilizar Notepad, WordPad o el que queramos. Es preferible utilizar Notepad o un editor especializado para generar ficheros de Html que en editor más avanzado que puede incluir códigos no deseados. Seguramente tienes uno de estos programas en tu ordenador. Si no sabes donde esta pulsa en la esquina inferior izquierda "Inicio" y "Buscar" Escribimos el nombre del fichero que estoy buscando en este caso Notepad y pulsamos "Buscar Ahora" Y pulsamos dos veces sobre sobre el fichero de Notepad Existen editores gratuitos en Internet. Por ejemplo en la página de Internet http://www.softonic.com/ En la sección de programación tienes editores gratuitos para descargar. Pasos para crear la página web: 1. Abrir el programa editor de texto. 2. Escribir los códigos o "tags". Escribimos los comandos como escribimos en un procesador de textos. Y guardamos el fichero que creamos como fichero de texto.A lo largo de este curso veremos los diferentes códigos. Una vez abierto el programa editor de texto voy escribiendo los códigos o "tags" Las instrucciones, códigos o "tags" de html van entre dos signos < y >. Las instrucciones es indiferente si se escriben en mayúsculas o minúsculas. Tenemos que poner un código de inicio y uno de cierre. Ejemplo: Poner texto en negrilla La instrucción para que un texto se ponga en negrilla es <b>Soy magnífico</b> La instrucción de cierre tiene que llevar el signo / Por lo tanto: A) Ponemos el código de inicio para poner el texto en negrilla <b> B) A continuación el texto que queremos que aparezca en negrilla y C) Al final el código de cierre </b> 3. Guardar el fichero. Es recomendable que cree un directorio en el disco duro de su ordenador para guardar ordenadas los ficheros que iremos generando. a. Para guardar el fichero tenemos que ponerle un nombre y como extensión htm. html o shtml. Es decir nombre, punto y htm. Por ejemplo miprimerapagina.htm b. Es preferible no poner acentos, "ñ" ni simbolos extraños para evitar problemas de compatibilidad c. No ponerle espacios en blanco al nombre del fichero. d. Y guardar como documento de TEXTO. Formato de texto ASCII. Volveremos a ver esta cuestión. Una vez guardado el fichero podemos ver como queda utilizando el mismo programa con el que ve esta página. El resultado cuando veamos con el navegador el documento será Soy magnífico Puede ver como quedaría el fichero pulsando el enlace miprimerapagina. Para volver pulse Atrás en su navegador miprimerapagina.htm Si utiliza una versión avanzada de Internet Explorer, puede ver los códigos de la página. Una vez que este en miprimerapagina pulse en la Barra superior: Pulsamos Archivo Y pulsamos Modificar con Microsoft Front Page. Esperamos unos segundos. Y pulsamos sobre la pestaña HTML que se encuentra en la parte inferior derecha. LECCION 3ª Vamos a realizar nuestra primera página utilizando los códigos html que denominaremos "La Primera" y en la que aparezca escrito "soy un fenómeno" Tenemos que crear un fichero en el que podremos las instrucciones y lo guardamos como fichero con terminación .htm A) Todas las páginas html comienzan con el código de inicio <html> y terminan con el código </html> Así que ponemos <html> </html> B) Las páginas html se dividen en un encabezado y un cuerpo. Para el encabezamiento tenemos que poner los "tags" <head> </head> Tenemos que ponerlo dentro de las instrucciones inicial y final de página (paso A) por lo tanto nos queda <html> <head> </head> </html> LECCION 4ª C) Igualmente insertamos las instrucciones para el cuerpo de la página <body> y </body> Con lo que nos queda <html> <head> </head> <body> </body> </html> Podemos dejar líneas en blanco para comprender con más claridad la estructura del programa que estamos escribiendo. las líneas en blanco serán ignoradas cuando se ejecute el fichero html LECCION 5ª D) Le ponemos título a la página con la instrucción <title> </title> que tenemos que poner dentro del encabezado (entre head y head) <html> <head> <title>Mi primera Pagina</title> </head> <body> </body> </html> E) Vamos a poner el texto en negrilla "Soy un fenómeno". La instrucción para negrilla es <b> y <b/>. Y el texto hay que colocarlo dentro del cuerpo (entre body y body) de la página. Por tanto nos queda <html> <head> <title>Mi primera Pagina</title> </head> <body> Soy el mejor </body> </html> LECCION 6ª Guardamos el fichero para lo cual es aconsejable ser ordenado y crear un subdirectorio en el disco duro de nuestro ordenador para ir almacenando los ficheros. Es importante: A) Ponerle al fichero la terminación html B) Guardarlo como documento de TEXTO (para que no se incluyan otros códigos) C) Para evitar problemas es interesante que en el nombre del fichero, NO DEJAR ESPACIOS y NI PONER SIGNOS NO COMUNES como acentos, "ñ", o símbolos de distintos idiomas. LECCION 7ª DAR FORMATO A LAS LETRAS Cambiar los atributos de las letras utilizamos el comando <font> </font> (fuente o tipo de letra). El color o el tamaño son atributos del elemento tipo de letra. Podemos dar distintos atributos a las letras. A) TAMAÑO DEL TEXTO * Si queremos poner las letras de distinto tamaño empleamos el atributo SIZE="". * Dentro de las comillas pondremos "+" para aumentar el tamaño y "-" para disminuirlo EJEMPLO 1 <FONT SIZE="+1">este texto se ve con mayor tamaño</FONT> El resultado: este texto se ve con mayor tamaño EJEMPLO 2 Si queremos aun mayor tamaño ponemos un número mayor. Voy a probar con 4 <FONT SIZE="+4">este texto se ve muy grande</FONT> este texto se ve muy grande EJEMPLO 3 Para disminuir el tamaño ponemos -1 <FONT SIZE="-1">al poner -1 disminuye el tamaño</FONT> Al poner -1 disminuye el tamaño Podemos poner el texto en negrilla, en cursiva o subrayado PONER EL TEXTO EN NEGRILLA Para poner el texto en negrilla utilizamos el tag "b" (de bold) Soy el <b>mejor</b> de la clase Soy el mejor de la clase PONER EL TEXTO EN CURSIVA Para ponerlo en cursiva utilizamos "i" (de italian) Poner un <i>texto en cursiva</i> Poner un texto en cursiva PONER EL TEXTO SUBRAYADO Para subrayado Ahora toca el <u>subrayado</u> de parte de la frase Ahora toca el subrayado de parte de la frase LECCION 8ª PONER COLORES La instrucción para poner color a las letras es <FONT COLOR="entre estas comillas va el nombre o el número del color">aquí el texto al que queremos dar color</FONT> EJEMPLO 1 Para poner el texto en rojo <FONT COLOR="RED">este texto se pone rojo</font> El resultado si lo ponemos dentro de los códigos del fichero html será este texto se pone rojo EJEMPLO 2 Para poner el texto en azul <FONT COLOR="BLUE">este texto se pone en azul</font> este texto se pone en azul LECCION 9ª LAS PARTES DE LAS INSTRUCCIONES Por tanto vemos que las instrucciones de HTML tienen varias partes. Las instrucciones de html se componen de tres partes fundamentales: A) El elemento al que se refiere la instrucción. Es la palabra que va después del signo <. Por ejemplo <font es un elemento. En este caso el elemento es el tipo de letra. La instrucción por tanto se refiere al tipo de letra. B) El atributo. El tamaño o el color son atributos posibles del tipo de letra. C) El valor que toma el atributo. Por ejemplo rojo o verde. Por ejemplo, queremos: A) Al elemento tipo de letra B) Darle el atributo color C) Con el valor rojo. Elemento Atributo Valor <FONT COLOR= "RED"> El tag de cierre </FONT> Valor "+1"> </FONT> Otro ejemplo, letra tamaño grande Elemento <FONT Atributo SIZE= LECCION 10ª ALINEAR EL TEXTO Para alinear el texto utilizamos el atributo align align=left para alinear a la izquierda align=right para alinear a la derecha align=center para centrar el texto EJEMPLO ALINEAR A LA IZQUIERDA <p align="left">alineamos el texto a la derecha</p> alineamos el texto a la izquierda EJEMPLO "ALINEAR A LA DERECHA" <p align="right">alineamos el texto a la derecha</p> alineamos el texto a la derecha EJEMPLO DE CENTRAR <p align="center">centramos el texto</p> centramos el texto LECCION 11ª LINEAS HORIZONTALES El elemento para crear una línea horizontal es HR. Este "tag" no necesita un "tag" de cierre Y a este elemento podemos darle distintos atributos width para definir el largo de la línea con un cierto número de pixel o un porcentaje del documento> size para asignar el ancho de la linea noshade para el fondo de la línea EJEMPLO Línea de 100 pixels <HR WIDTH=100> Línea de 200 pixels <HR WIDTH=200 Línea de un 50% del ancho del documento <HR WIDTH=50%> Línea del 100% del ancho del documento <HR WIDTH=100%> Línea con 10 de ancho <HR SIZE=10> Podemos combinar varios atributos. Por ejemplo línea de un 50% de largo y 10 pixel de ancho <HR WIDTH=50% SIZE=10> LECCION 12ª LOS PARRAFOS Y EL CAMBIO DE LINEA Para mantener el texto formando un párrafo o bloque de texto utilizamos el "tag" <p>aqui va el texto</p> <p>Si utilizamos la instrucción de párrafo nos aseguramos que el texto se mantenga junto y controlamos cuando queremos que exista una línea de espacio en blanco</p> Si utilizamos la instrucción de párrafo nos aseguramos que el texto se mantenga junto y controlamos cuando queremos que exista una línea de espacio en blanco PASAR A LA SIGUIENTE LINEA Cuando queremos pasar el texto a otra línea podemos utilizar el "tag" <br> que no tiene tag de cierre. Si queremos separar el siguiente texto en varias líneas. la casa el perro el niño las vacaciones Pondremos: la casa<br> el perro<br> el niño<br> las vacaciones<br> Y en el documento HTML mostrara en el navegador: la casa el perro el niño las vacaciones LECCION 13ª PONER TITULARES Los titulares o encabezamiento de los textos son otra forma de modificar el tamaño del texto. La orden para encabezamiento es "H1" para un titular muy grande, "H2" para uno grande, H3, H4, H5 y para letra pequeña H6 <H1>Encabezamiento muy grande</H1> Encabezamiento muy grande <H2>Encabezamiento grande</H2> Encabezamiento grande <H3>Encabezamiento menos grande</H3> Encabezamiento menos grande <H6>Encabezamiento muy pequeño</H6> Encabezamiento muy pequeño LECCION 14ª LAS UTILES TABLAS Las páginas web necesitan tener los elementos que colocamos ordenados y que se mantengan ordenados en los distintos navegadores. Para definir el orden o la estructura de una página web se utilizan tablas con bordes ocultos. La mayoría de las páginas importantes se estructuran utilizando tablas ocultas. Vamos a realizar una tabla con los bordes visibles A) Las tablas comienzan con <table> y terminan con </table> B) Definimos el borde de la tabla. Las tablas que se utilizan para ordenar los elementos sulen tener bordes invisibles para los navegadores y empleamos border="0". Si queremos un borde visible asignamos otro número al atributo borde. Nosotros en el primer ejemplo vamos a utilizar un borde visible border="1" C) Definimos el tamaño de la tabla. Podemos definirlo como porcentaje del ancho de la página utilizando width WIDTH="100%" nos genera una tabla que ocupa todo el ancho de la página que estamos creando. WIDTH="50%" genera una tabla con la mitad del ancho del documento que creamos. Podemos igualmente definir el tamaño de la tabla en número de pixel WITH="100" ahora al no poner el % serán 100 pixel de larga la tabla y no el 100% del documento D) Tenemos que definir las filas que lleva la tabla <TR> </TR> E) Y definimos las columnas utilizando <TD> </TD> Estas instrucciones de columna las pondremos dentro de las de fila. EJEMPLO Vamos a construir una tabla con el borde visible de tamaño el 100 por 100 del ancho del documento con dos filas y tres columnas. Por tanto utilizamos al principio el "tag" <table> y al final </table>. Definimos el borde border="1" y el ancho witdh="100%" Definimos la primera fila con <tr> y </tr> y dentro las tres columnas <td> </td> <tr> <td></td><td></td><td></td> </tr> Y hacemos lo mismo con la segunda fila y sus tres columnas <tr> <td></td><td></td><td></td> </tr> Las instrucciones para construir la tabla nos queda. Recuerda que da igual que las instrucciones se escriban en mayúsculas o minúsculas. Los espacios en blanco no afectan al resultado por tanto es lo mismo poner <tr> <td></td><td></td><td></td> </tr> en una columna como lo ponemos a continuación. <table border="1" witdh="100%"> <TR> <td></td> <td></td> <td></td> </TR> <TR> <td></td> <td></td> <td></td> </TR> </Table> Y el resultado. LECCION 15ª TAMAÑO DE LAS COLUMNAS Y MARGENES DE LAS CELDAS DE LAS TABLAS FIJAR EL TAMAÑO DE LAS COLUMNAS El mismo atributo utilizado para definir el tamaño de la tabla se utiliza para definir o fijar el tamaño de las columnas. Definimos el tamaño de la columna con WIDTH Por ejemplo, queremos que en una tabla de dos columnas, la primera columna ocupe el 20 por ciento de la tabla y la segunda el 80 por ciento. Pondremos Width=20% en las celdas de la primera columna y Width=80% en las celdas de la segunda columna. EL MARGEN DE LAS CELDAS Podemos asignar márgenes a las celdas, de forma que lo que pongamos dentro no quede pegado a los bordes de la celda. Para el margen de las celdas utilizamos el atributo cellpadding="aqui ponemos el número" EJEMPLO Realizaremos una tabla de 2 por 3 A) Una tabla con dos filas y tres columnas, con borde de la tabla 1 y el ancho de la tabla un 75% del ancho de la página. B) Las celdas con un margen de 15 píxeles y el tamaño de las celdas un 10% del tamaño de la tabla la primera columna, un 20% del tamaño de la tabla la segunda columna y un 70% del tamaño de la tabla la tercera columna. C) Pondremos dentro de las celdas las letras a,b,c,d,e,f Quedaría <table border="1" cellpadding="15" cellspacing="0" width="75%"> <tr> <td width="10%">a</td> <td width="20%">b</td> <td width="70%">c</td> </tr> <tr> <td width="10%">d</td> <td width="20%">e</td> <td width="70%">f</td> </tr> </table> Y el resultado A b c D e f LECCION 16ª EL COLOR DE LAS TABLAS Para ponerle color a una celda utilizamos el atributo bgcolor="aqui ponemos el nombre o número del color" EJEMPLO Vamos a realizar una tabla de dos filas y dos columnas, con borde de tamaño "1" y de largo el 50% del ancho de página. Y le ponemos a una celda fondo rojo con el atributo bgcolor="red" y a otra fondo azul <table border="1" cellpadding="0" cellspacing="0" width="50%"> <tr> <td width="50%" bgcolor="red"></td> <td width="50%" bgcolor="blue"></td> </tr> <tr> <td width="50%"></td> <td width="50%"></td> </tr> </table> El resultado que veremos: COLOR DEL FONDO DE LA TABLA Para darle color a toda la tabla es suficiente con poner el atributo bgcolor"" dentro de la instrucción de tabla. Para poner fondo amarillo bgcolor="yellow" <table border="1" cellpadding="0" cellspacing="0" width="50%" bgcolor="yellow"> EJEMPLO Una tabla de tres filas y dos columnas con un largo del 75%. Y fondo amarillo <table border="1" cellpadding="0" cellspacing="0" width="75%" bgcolor="yellow"> <tr> <td width="50%"> </td> <td width="50%"> </td> </tr> <tr> <td width="50%"> </td> <td width="50%"> </td> </tr> <tr> <td width="50%"> </td> <td width="50%"> </td> </tr> </table> LECCION 17ª PONER ENLACES Lo más característico de Internet es ser un medio que no es lineal sino hipertexto es decir que utiliza enlaces para movernos entre distintos niveles o páginas. La instrucción para un enlace es de la forma <A HREF="aqui ponemos la dirección a la que queremos que apunte el enlace">el texto que queremos que se vea en el documento</A> EJEMPLO Queremos enlazar con la página 100mejores.com y que el texto que se vea sea "La mejor selección de enlaces" <A HREF="http://www.100mejores.com/">La mejor selección de enlaces"</A> La mejor selección de enlaces Recordar que los enlaces externos a otras páginas deben llevar la dirección completa de la página. LECCION 18ª INSERTAR IMAGENES Para insertar imágenes utilizamos <img src="aquí ponemos la dirección de la imagen"> Este tag no tiene tag de cierre. En Internet tenemos numerosas páginas que proporcionan imágenes gratis. Por ejemplo http://www.gifmania.com/ Nos vamos a gifmania para obtener una imagen de una ejecutiva Seleccionamos mujeres y ejecutivas. Nos situamos sobre la imagen y pulsamos el botón DERECHO Lo guardamos con el nombre de fichero ejecutiva y guardar como tipo de fichero GIF. Podemos guardarlo con varios tipos de ficheros, elegimos los gif por ocupar poco espacio y dar pocos problemas de compatibilidad. Si lo guardamos en el MISMO directorio que el fichero HTML que estamos creando la instrucción para insertar la imagen de la ejecutiva nos queda: <img src="ejecutiva.gif"> Es MUY IMPORTANTE tener cuidado con las direcciones de la imágenes. Si las imágenes están en un directorio y el fichero html que estamos creando en otro directorio, la dirección de la imagen debe indicar la localización de la imagen en el otro directorio. Cuando hemos puesto imágenes en un fichero HTML y al enviarlo al servidor de Internet no aparecen suele ser por dos motivos: A) Hemos enviado el fichero HTML a Internet pero no los ficheros con las imágenes. B) Al enviarlo al servidor la dirección donde el programa busca la imagen es distinta de donde realmente esta la imagen. Para comprobar si donde esta la imagen coincide con la dirección que tiene la página nos colocamos sobre la imagen (o sobre donde debería estar) y pulsando el botón DERECHO en el menú que aparece pulsamos propiedades. Lo recomendable es MANTENER LA MISMA ESTRUCTURA DE DIRECTORIOS en el disco duro de nuestro ordenador y en el servidor de Internet. Al mover los ficheros en el disco duro y posteriormente enviarlo al servidor puede que la dirección de la imagen no coincida con la localización de la imagen. LECCION 19ª INSERTAR IMAGENES ANIMADAS Para insertar imágenes animadas se hace todo igual que para insertar imágenes. Simplemente elegimos una imagen animada para enlazar. Por ejemplo en la misma página de http://www.gifmania.com/ Seleccionamos una imagen animada La guardamos con el nombre ejecutivaanimada La instrucción para insertar la imagen queda: <img src="ejecutivaanimada.gif"> Y el resultado LECCION 20ª ATRIBUTOS RELACIONADOS CON INSERTAR IMAGENES Para una correcta visualización en los distintos navegadores es aconsejable definir el largo y alto de la imagen que se inserta LARGO Y ALTO Para definir el largo y el alto de una imagen utilizamos los atributos WIDTH y HEIGHT Por ejemplo la imagen ejecutivaanimada tiene unas dimensiones de 167 pixels de largo por 109 pixels de alto. Podemos comprobarlo situándonos sobre la imagen y pulsando el botón DERECHO del ratón seleccionar "Propiedades" La instrucción quedaría <img src="ejecutivaanimada.gif" WIDTH="167" HEIGHT="109"> EL BORDE DE LAS IMAGENES Podemos ponerle borde a la imagen empelando el atributo border y asignándole un valor por ejemplo 2. Si no queremos borde podemos poner border=0 <img border="2" src="ejecutivaanimada.gif" WIDTH="167" HEIGHT="109" > Es posible y recomendable poner un texto para cuando no aparezca la imagen por algún motivo. TEXTO ALTERNATIVO A LA IMAGEN Para poner un texto alternativo se utiliza el "tag" ALT Vamos a poner la imagen anterior con un borde mayor y en un recuadro más largo y menos alto y con el texto alternativo "secretaria animada" <img border="5" src="ejecutivaanimada.gif" WIDTH="250" HEIGHT="90" ALT="secretaria animada"> LECCION 21ª PONER UN BOTON O PONER UN ENLACE EN UNA IMAGEN Si queremos poner un botón o una imagen que al pulsarla el usuario se encamine a otra página, utilizamos la orden para poner enlaces combinada con la orden para insertar imágenes. <a href="dirección del enlace a otra página"> <img src="aquí ponemos la localización de la imagen"></a> Vamos a poner la imagen de la secretaria y que al pulsarla lleve al usuario al portal de secretarias http://www.secretariaplus.com La instrucción nos quedaría: <a href="http://www.secretariaplus.com"> <img src="ejecutivaanimada.gif"> </a> Y se vera al acceder con el navegador a la página. De forma que al pulsar sobre la imagen nos dirigimos a la página enlazada. Vale, de acuerdo, pulsa la imagen pero recuerda darle en tu navegador al "pa tra" "atras" o "Back" y seguir el curso. ; Esto nos permite poner botones y flechas que al pulsarlas nos encaminan a otras páginas de nuestra web o externas. OTRO EJEMPLO Insertamos una imagen que al pulsarla nos sitúa en la portada de aulafacil <a href="http://www.aulafacil.com"><img border="0" src="HOMEWHT.gif" width="90" height="70"></a> LECCION 22ª ATRIBUTOS DE LA PAGINA O ATRIBUTOS DE "BODY" Hemos visto que los ficheros HTML se dividen en una cabecera y un cuerpo o body. Los ficheros incorporan las instrucciones <html> <head> </head> <body> </body> </html> Al "tag" body podemos añadirle una serie de atributos de color para asignar un color diferente: A) Al fondo del documento con BGCOLOR B) Colocar una imagen de fondo BACKGROUND C) LINK para cambiar el color de los enlaces D) VLINK para cambiar el color de los enlaces ya visitados por el usuario E) Podemos cambiar el color del texto con el atributo TEXT EJEMPLO Asignaremos un fondo de color amarillo al documento <html> <head> </head> <body bgcolor=yellow> </body> </html> Nos quedará el fondo de la página en amarillo. LECCION 23ª AÑADIR COMENTARIOS Una buena idea cuando se programa es ir añadiendo comentarios para aclarar lo que estamos haciendo. Esto es especialmente importante cuando después de un tiempo volvemos a revisar un programa o cuando otro programador tiene que revisar o utilizar el programa. Los comentarios no aparecen cuando el usuario ve el fichero con un navegador y no tiene efectos en el programa. Para añadir comentarios utilizamos <!--aqui ponemos los comentarios sobre el programa--> Lo mismo podemos hacer utilizando los "tags" <comment>aqui ponemos el texto del comentarios</comment> OTRO OOOOOOO OOOOO OOOO OOOOOOOOOOOOOOOOOO OOOOOOOOOOOOOO OOOOO Anatomía de una Página Web Una página Web consiste de un archivo HTML mas los archivos de imágen usados en la página. El archivo HTML (un archivo de texto común) contiene todo el texto a desplegar, y también actúa como el pegamento para sostener el texto e imágenes juntas en los lugares correctos, y los despliega en el estilo correcto. Escribir un archivo HTML significa componer el texto que quieres desplegar, entonces insertar las etiquetas que quieras en los lugares correctos. Las etiquetas comienzan con un caracter < y terminan con un caracter >, y le dicen al navegador que haga algo especial como mostrar texto en itálicas o negritas, o en una fuente más grande, o mostrar una imágen, o hacer una liga a otra página Web. Aunque el HTML tiene muchas etiquetas que puedes usar, no necesitas saberlas todas para usar HTML -- puedes arreglártelas con unas cuantas. Algo excelente sobre el aprendizaje del HTML es que puedes ver cómo otros lo han hecho revisando su código fuente. Puedes ver el código fuente de cualquier página que estés visitando. Pruébalo ahora. En Netscape, usa el menú "Ver/Fuente del Documento" (View/Document Source). Otros navegadores gráficos tienen un menú similar, tal vez bajo "File" o "Edit". En Lynx, la diagonal invertida alterna entre ver o no ver el código fuente. Revisa muchos códigos fuente, ve el código de cualquier página que te haga preguntarte cómo hicieron algo. Todos los que usan HTML han aprendido leyendo el código de otras personas. Internet es una gran comunidad de mutuo aprendizaje. No necesitas un "Editor HTML" para escribir HTML. Algunas personas les gusta usarlos y está bien, pero muchos profesionales y novatos prefieren usar un simple editor de texto e insertar las etiquetas por sí mismos como lo estamos haciendo nosotros. Como cada quien prefiera. Anatomía de una Etiqueta de HTML Las etiquetas tienen una estructura simple. Comienzan con un caracter <, y terminan con un caracter >. Entre los caracteres <> está el nombre de la etiqueta, y quizá algunos atributos dependiendo de la etiqueta. La mayoría de los atributos toman un valor también. Algunos atributos son requeridos, algunos son opcionales. La forma general de una etiqueta es <nombre_de_la_etiqueta atributo1="valor1" atributo2="valor2" ... > Los nombres de etiqueta y de atributos no son de caso sensitivo, pero algunos atributos y valores sí lo son. El nombre de la etiqueta debe ir primero, pero el orden de los atributos no importa. De esta manera, puedes escribir esta etiqueta como: <NOMBRE_DE_LA_ETIQUETA ATRIBUTO2="valor2" ATRIBUTO1="valor1" ... > Diferente gente escribe en formas diferentes; házlo como te guste más. Existen muchas etiquetas diferentes para hacer muchas cosas diferentes. Por ejemplo, usa la etiqueta <img> para mostrar una imágen en tu página Web: <img src="blueribbon.gif"> se ve como Esto significa "muestra la imágen blueribbon.gif en este lugar de la página." Nota que el atributo src proporciona el URL del archivo de imágen, ya sea un URL relativo o absoluto. El ejemplo anterior usando un URL absoluto sería: <img src="http://www.jmarshall.com/easy/html/spanish/blueribbon.gif"> Etiquetas Contenedoras Algunas etiquetas, como <img>, se bastan a sí mismas; no afectan a otras cosas al rededor. Otras etiquetas tienen una etiqueta de inicio y una de final, y afectan a todo lo que se encuentre entre los dos (aún a otras etiquetas). Estas son llamadas contenedoras, porque contienen cosas entre las etiquetas de inicio y final. Por ejemplo, para hacer texto en negrita, necesitas marcar en dónde comienzan las negritas y en dónde regresa al texto normal. Haz ésto con <b> y </b>, como: Este es texto normal. <b>Este es texto en negrita.</b> Normal otra vez. Se ve como: Este es texto normal. Este es texto en negrita. Normal otra vez. Todo contenedor termina con </nombre_de_la_etiqueta>, cualquiera que el nombre sea. En el ejemlo anterior, la etiqueta (negrita) <b> termina con </b>. A diferencia de los inicios, las etiquetas finales no tienen atributos . Aquí está la parte interesante: La etiqueta que hace del Web lo que es, un superconjunto de páginas ligadas, es la etiqueta <a>. La etiqueta <a> es un contenedor que define una liga hacia otra página y es fácil de usar. Como ejemplo, aquí es cómo harías una liga a la página principal de Netscape: Ir a <a href="http://home.netscape.com/">la página principal de Netscape</a>. Que se ve como: Ir a la página principal de Netscape. Nota que existe una etiqueta de inicio (<a href="http://home.netscape.com">) y una de final (</a>), y todo lo que esté entre ellas ("la página principal de Netscape") se visualiza como una liga en la que el usuario puede hacer click-- típicamente en azul y subrayada en Netscape. Nota que el atributo href tiene el valor "http://home.netscape.com", que es el URL (dirección de una página Web) a donde ir cuando el usuario haga click en la liga. Para más información y ayuda con los URL en HTTP, dirígete a una de estas páginas. Así es como se debe usar la etiqueta <a> para poner ligas a una página Web. Simple, ¿no? Más Sobre Ligas Ligas con Imágenes Puedes poner una <img> entre <a> y </a>, de tal manera que el usuario puede hacer click en la imágen para seguir la liga. Por ejemplo, observa el listón azul al principio de la página-- es la liga a otra página (una que todo el mundo debería visitar al menos una vez). Ligas de Correo Electrónico Para poner una liga de correo electrónico, dale a href el valor "mailto:dirección-decorreo". Por ejemplo, Dile <a href="mailto:[email protected]">al Presidente</a> lo que piensas. se ve como Dile al Presidente lo que piensas. (El Presidente de E.U., por supuesto.) Ligando a la mitad de una página Para ligar hacia otra parte de la misma página, o a la mitad de otra, primero crea un nombre de ancla en el punto que quieres ligar. Haz ésto con la etiqueta <a> y el atributo name como <a name="nombre_de_ancla"></a> Nota el uso diferente de la etiqueta <a>; de hecho, <a> fue originalmente una contracción de "ancla". Como el ancla solamente marca un punto en la página, no necesitas poner nada entre <a> y </a>. Una vez que el ancla existe en el lugar de destino, lígalo con la etiqueta <a href>, agregando "#nombre_de_ancla" (el fragmento URL) al URL de destino, como Lee sobre <a href="http://www.jmarshall.com/easy/html/spanish/#lists">listas HTML</a>. que se ve como Lee sobre listas HTML. Para apuntar a otra parte en la misma página, omite completamente el resto del URL. Por ejemplo, <a href="#toc">De Regreso a la Tabla de Contenido</a> se ve como. Anatomía de un archivo HTML Ahora que entiendes lo que son las etiquetas y las contenedoras, aquí está cómo hacer un archivo HTML correctamente: identifica tu archivo como un archivo HTML encerrándolo todo entre las contenedoras <html>--, en otras palabras, coloca una etiqueta <html> de inicio al principio de tu archivo y una etiqueta </html> de finalización al final. Técnicamente, la etiqueta <html> puede contener sólo dos cosas: una contenedora <head>, y una contenedora <body>. Dentro de la etiqueta <body> es donde se pone toda la página. Todo el texto, imágenes, hiperligas y demás cosas desplegadas son contenidas entre la etiqueta <body> y la </body>. La sección opcional <head>, colocada antes de la sección <body>, te permite almacenar cierta información sobre el documento en sí. Aún cuando la sección <head> exista, puede contener solamente la contenedora <title>, la cual dice qué es lo que hay que desplegar en el título de la ventana del navegador, sobre la barra de menús (si tienes un navegador gráfico). Por ejemplo, esta página tiene el título de "El HTML Hecho Realmente Fácil". Así, un simple archivo HTML "hola, mundo", con título, sería <html> <head> <title>Hola, mundo</title> </head> <body> Hola, mundo. </body> </html> Si no quieres un título, omite las líneas que comienzan con <head>, <title>, y </head>. Si esto te confunde, no te preocupes. Solamente pon el texto <html><body> al principio de tu archivo y </body></html> al final, y mágicamente se convertirá en un verdadero archivo HTML. Unas Cuantos Etiquetas Útiles Más Pruéba las siguientes: <i> </i> Hace el texto en itálicas italic. <tt> </tt> Hace el texto en teletipo (ancho fijo). <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> Muestra diferentes estilos de encabezados (header), en orden descendente de importancia (tamaño). Por ejemplo, el "El HTML Hecho Realmente Fácil" al inicio de la página usa <h1>, y el "Unas Cuantas Etiquetas Útiles Más" de arriba usa <h2>. <hr> Pone una línea horizontal en la página, como arriba del título "Unas Cuantas Etiquetas Útiles Más", arriba. <center> </center> Centra texto e imágenes entre los márgenes izquierdo y derecho. <blockquote> </blockquote> Sangra el texto a partir de los dos márgenes. Usado para la mayoría de los ejemplos en este documento. <pre> </pre> Denota texto "preformateado" en código fuente: lo despliega como fuente de ancho fijo y conserva espacios y saltos de línea (en gran medida como una máquina de escribir). Es una manera rápida de hacer márgenes y tabulaciones. Conveniente para entrecomillar una sección del código fuente, de tal manera que es usado para muchos ejemplos en este documento. Listas Numeradas o con Viñetas El HTML proporciona una manera simple de mostrar listas numerads ("listas ordenadas") o con viñetas ("listas desordenadas"). Usa la contenedora <ol> y <ul> para hacer listas ordenadas o desordenadas, respectivamente. Dentro de la contenedora, usa la etiqueta <li> para dentoar el comienzo de un elemento de la lista. Por ejemplo, el código de HTML Esta es una lista ordenada: <ol> <li>Primer elemento <li>Segundo elemento <li>Tercer elemento </ol> Esta es una lista desordenada: <ul> <li>Primer elemento <li>Segundo elemento <li>Tercer elemento </ul> que se verán así Esta es una lista ordenada: 1. Primer elemento 2. Segundo elemento 3. Tercer elemento Esta es una lista desordenada: Primer elemento Segundo elemento Tercer elemento Dentro de los elementos de lista, puedes poner lo que quieras-- ligas, imágenes, tablas (más sobre ellas después), o incluso otras listas. Las listas anidadas son en realidad bastante comunes, útiles para resúmenes o menús en cascada. Menos comunes pero tambien útiles, son las "listas de definición", las cuales contienen un conjunto alternado de términos y definiciones. Encierra toda la lista en la contenedora <dl>, y usa <dt> y <dd> para marcar el inicio de los términos y definiciones, respectivamente. Por ejemplo, Aquí está una lista de definición: <dl> <dt>Término 1 <dd>Definición del Término1 <dt>Término 2 <dd>Definición del Término2 </dl> que se verá así: Aquí está una lista de definición: Término 1 Definición del Término1 Término 2 Definición del Término2 Asegúrate de terminar tus listas con </ol>, </ul>, y </dl>, o el resto de tu página se verá como parte del último elemento de la lista. Comentarios Puedes poner comentarios en tu archivo HTML que no se verán en la página Web. Esto te permite explicar por qué tu código HTML es de cierto modo, a cualquiera que vea tu código fuente. Esto podría ser alguien más, o (seguramente) puedes ser tú mismo en el futuro. Comienza el comentario con "<!--" y termínalo con "-->", como <!-- Este es un comentario, y no se desplegará al usuario --> <!-- ejemplos de comentarios insertados por JSM el 23-9-96, para clarificar --> No pongas información privada en comentarios, ya que cualquiera, revisando el código fuente, puede verla. Tampoco pongas etiquetas de HTML dentro de los comentarios, ya que el navegador pensará que el comentario termina con el primer caracter ">". Tablas Las tablas en HTML te permiten mostrar un arreglo de celdas de datos, como en la sección Unas Cuantas Etiquetas Útiles Más, arriba. También te permiten alinear texto a la derecha, o hacer columnas de texto como con tabuladores. No son difíciles de usar, una vez que sabes con claridad lo que quieres desplegar en cda celda. La "definición estándard" de las tablas HTML ha cambiado unas cuantas veces, pero es bastante estable ahora; esta sección te mostrará cómo hacer tablas que hacen que casi cualquier navegador desplegue correctamente. 1. 2. 3. 4. Las tablas se definen con la contenedora <table>. La etiqueta <table> contiene renglones de celdas, definidas con la contenedora <tr>. Cada etiqueta <tr> contiene celdas de datos, definidas con la contenedora <td>. Cada celda de datos contiene lo que quieras poner-- ligas, imágenes, listas, incluso otras tablas. Los renglones se definen de arriba hacia abajo, y las celdas de izquierda a derecha. Si quieres que se muestren líneas entre las celdas de la tabla, usa el atributo border en la etiqueta <table>. (¿Recuerdas cómo funcionan los atributos en las etiquetas HTML? Usarás unos cuantos atributos en esta sección.) Por ejemplo, el código HTML <table border> <tr> <td>noroeste</td> <td>noreste</td> </tr> <tr> <td>suroeste</td> <td>sureste</td> </tr> </table> se verá como: noroeste noreste suroeste sureste La mayoría de los navegadores no requieren las etiquetas de terminación </tr> o </td>; asumen que una celda o renglón termina cuando la otra comienza. De tal manera, puedes ver tablas escritas sin las etiquetas de finalización (aunque la etiqueta final </table> sí es requerido). Nota: Como este documento es de octubre de 1996, esto puede causar problemas con las tablas anidadas debido a algún error del navegador. Celdas que Ocupan Columnas o Renglones Múltiples Algunas veces querrás que una celda ocupe más de una columna o más de un renglón. En este caso usa los atributos colspan y rowspan del tag <td>. Entonces solamente omite definir las celdas que la celda más grande ocuparía. Por ejemplo, <table border> <tr> <td rowspan=2>oeste</td> <td>noreste</td> </tr> <tr> <!-- No definas "suroeste" porque "oeste" la va a ocupar --> <td>sureste</td> </tr> </table> se verá como: noreste oeste sureste Alineando el Contenido de la Celda dentro de la misma Celda Usualmente todo el contenido de una celda se alínea a la izquierda y centrada verticalmente por defecto. Para fijar la posición horizontal y vertical con la etiqueta <td>, usa los atributos align y valign respectivamente: align puede ser left, right, o center. valign puede ser top, middle, bottom, o baseline (alineada a la base del texto). Por ejemplo, este recibo sin líneas de una tienda, alínea los precios con respecto al márgen derecho: <table> <tr> <td>detergente para ropa</td> <td align=right>$4.99</td> </tr> <tr> <td>comida para gato</td> <td align=right>$128.00</td> </tr> </table> Se verá como: detergente para ropa comida para gato $4.99 $128.00 Puedes usar también los atributos align y valign en la etiqueta <tr>, para afectar todas las celdas en ese renglón. Otras Cosas Útiles sobre Tablas Normalmente el navegador se las arregla para darle el tamaño apropiado a la tabla, y para las celdas dentro de la tabla, basándose en el tamaño del navegador y el contenido de la celda. Si deseas sugerir un ancho específico para la tabla o las celdas, usa el atributo width en las etiquetas <table> y <td>. Puedes usar un porcentaje del navegador o la tabla, como <td width="20%"> (usualmente preferido), o un valor absoluto en pixels como <td width=138> (útil para hacer que una imágen quepa exactamente en el ancho de una celda). Si quieres más detalles, Netscape tiene información al respecto en etiquetas relacionadas con tablas y sus atributos, y una buena colección de tablas de ejemplo. Estos documentos son ligeramente obsoletos comparados con los últimos estándares de HTML, pero están lo suficientemente actualizados para la mayoría de las tablas en el Web hoy día. Formas Probablemente has visto formas para llenar en el Web, usadas por los motores de búsqueda, guías en línea, y demás. Escribes tus datos, envías la forma presionando un botón de envío y los datos son enviados a un script CGI en un servidor Web por ahí. Las formas, como todo lo demás en HTML se definen con un pequeño conjunto de etiquetas. Estas etiquetas simplemente definen los elementos de la forma, como campos de entrda o botones. La parte difícil es escribir el código CGI para manejar la forma de entrada; ese es un tema de otro tutorial. Las formas compienzan con la etiqueta <form> y terminan con la etiqueta </form>. En la forma, puedes poner además el código HTML que quieras, pero puedes usar también estas etiquetas para definir campos de entrada: <input> define un campo de entrada de texto, casillas de verificación, botones de selección, o botones simples. <select> define menús desplegables y cajas de selección. <textarea> define un campo de entrada de texto multilínea. La etiqueta <form> tiene: un atributo action, que es el URL del script CGI a quien enviar los datos de la forma, y un atributo method, que es el método HTTP usado para enviar los datos de la forma (cualquiera de get o post funcionarán-- coordinando esto con tu script CGI). Así, una etiqueta <form> típica es: <form action="http://www.myhost.com/mypath/myscript.cgi" method=post> Todos los campos de entrada en una forma tienen un nombre, definido por el atributo name de la etiqueta <input>, <select>, o <textarea>. Todos los campos de entrada también tienen un valor, que el usuario asigna escribiendo en él o haciendo click en él. Todo el conjunto de los datos de la forma es representada como un conjunto de estos pares de nombre-valor cuando se envía al script CGI. Los campos de texto vacíos se envían como pares de nombre-valor con un valor de una cadena vacía, pero las casillas de verificación y botones de selección que no se usan no se envían en absoluto. Para probar tu forma, puedes llamar a scripts simples en NCSA que te dicen qué pares de nombre-valor fueron enviados. Para hacer esto, fija el atributo action a lo siguiente: Para get envíos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/query Para post envíos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query La Etiqueta <input> Usa la etiqueta <input> para crear la mayoría de los campos de una forma, así como para enviar y reestablecer botones. Tiene una gran conjunto de atributos dependiendo del tipo de atributo, el cual puede ser cualquiera de: text-- un campo normal de entrada (defecto) password-- idéntico a text, pero la entrada del usuario no se despliega checkbox-- una casilla de verificación (para simples valores sí/no) radio-- un botón de selección (para escojer una de varias opciones) submit-- un botón que envía los datos de la forma, cuando la entrada de datos del usuario está lista reset-- un botón que reestablece todos los campos de una forma a sus valores iniciales image-- como submit, pero muestra una imágen como botón hidden-- te permite definir pares extra de nombre-valor que se envían al script CGI pero no se despliegan los campos text y password tienen los siguientes atributos opcionales: value fija el valor por defecto del campo size fija la longitud desplegada del campo maxlength fija la cantidad máxima de datos que pueden ser escritos los campos checkbox y radio tienen los siguientes atributos opcionales: value es el valor del campo cuando se verifica; el valor por defecto es "sí" checked (no necesita valor) significa que está verificado por defecto los campos submit y reset usan lel atributo opcional value como la etiqueta en el botón. El campo image requiere un atributo src con el URL de la imágen a usar, y soporta la mayoría de los atributos de la etiqueta <img>. Para crear un conjunto de botones de selección, dáles a todos el mismo nombre pero diferentes valores. Solamente el valor seleccionado será enviado al servidor cuando la forma se envíe. Usualmente, tendrás texto antes o después de los campos text, password, checkbox, y radio, para etiquetarlos para el usuario. Ninguna etiqueta se muestra automáticamente. Los campos submit y image de hecho pueden tener un atributo nombre, para enviar información sobre cómo la forma fue enviada. Si tienes múltiples botones de envío, tu script CGI puede distinguirlos por nombres o valores diferentes (solamente el botón de envío que presionas es el que se envía como par nombre-valor). Si un campo image tiene un atributo name de (digámoslo) "foo", entonces la localización x-y del click del mouse en el botón es enviada como dos campos enteros con nombres de "foo.x" y "foo.y". Esto permite un mapa de imágen con un botón image. Ejemplos de campos <input>, en el mismo orden que se enlistan arriba son: Estado: <input type=text name="state" value="CA" size=2 maxlength=2> Password: <input type=password name="password"> <input type=checkbox name="masinfo" value="si" checked>Envíame más información. Selecciona <br><input <br><input <br><input <input <input <input <input tu sexo abajo: type=radio name="gender" value="F">Femenino type=radio name="gender" value="M">Masculino type=radio name="gender" value="O">Otro type=submit value=" OK, envíalo "> type=reset value=" Whoops-- borra eso "> type=image src="/images/gobutton.gif" width=60 height=30> type=hidden name="totalsofar" value="1290.65"> La etiqueta <select> Usa la etiqueta contenedora <select> para crear menús desplegables y listas desplazables. Entre <select> y </select> puedes tener solamente etiquetas <option> y su texto, el cual define items en la lista. La etiqueta <select> tiene un atributo name como todos los campos de entrada. Otros atributos opcionales: size es la altura desplegada de la lista. Si es 1 (u omitida), la lista es un menú desplegable; en otro caso, es una lista desplazable. multiple (sin valor) deja que el usuario seleccione items múltiples de la lista (usualmente con ctrl-click o shift-click). Cada item seleccionado deberá ser enviado como un para nombre-valor al script CGI. Una etiqueta <option> puede tener un atributo value, el cual es lo que se envía al script CGI si ese item es seleccionado. Si no existe el atributo value, el valor enviado es el texto que sigue a la etiqueta <option>. Para hacer que un item se seleccione por defecto, usa el atributo selected en la etiqueta <option>. Un ejemplo de una lista desplegable <select> es: Escoge tu color favorito: <select name="favecolor"> <option>verde <option>aguamarina <option selected>esmeralda <option>turquesa <option>agua <option value="verde2">verde <option value="verde3">verde </select> La Etiqueta <textarea> Usa la etiqueta contenedora <textarea> para crear cajas de texto multilínea desplazables. Todo lo que esté entre las etiquetas <textarea> y </textarea> será el contenido inicial de la caja de entrada, así que colócalas una junto a la otra si no quieres contenido inicial. La etiqueta <textarea> tiene un atributo name, como cualquier otro campo de entrada. Usa los atributos rows y cols para fijar el ancho y alto del área de texto. Nota que el área de texto se desplaza cuanto sea necesario, de tal manera que solamente estás asignando el tamaño al cual debe desplegarse, no el tamaño de los datos Un ejemplo del camo de entrada <textarea>es: <textarea name="stuff" rows=10 cols=60>Pon cosas aquí</textarea> Otras Cosas de Formas Intenta hacer unas cuantas formas para ver cómo se ven. No necesitas un script CGI para verlas en tu navegador. NCSA tiene unos cuantos ejemplos cerca del final de esta página de formas (una o dos pantallas arriba del final). La página en sí es vieja pero aún sirve; ellos dicen que es solamente para su navegador (Mosaic para X-Windows), pero la información sirve para cualquier navegador y formas. Color Puedes asignar el color de muchas cosas en HTML ajustando los atributos de color de ciertas etiquetas: En la etiqueta <body>, los atributos bgcolor, text, link, vlink, y alink definen los colores para el fondo, texto, ligas no visitadas, ligas visitadas y ligas activas de la página. Para cambiar el color del texto de una parte de una página, usa la etiqueta contenedora <font> con el atributo color. Para tablas, algunos navegadores soportan el atributo bgcolor (color de fondo) en las etiquetas <table>, <tr>, <th>, y <td>. Los valores de los atributos de color toman una de las siguientes formas: "#RRGGBB", donde RR, GG, y BB son los componentes rojo, verde, y azul del color en hexadecimal de 00 a FF. ¿Confundido? Entonces checa el siguiente método: Uno de los 16 "nombres de color más extendidos y entendidos": aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow) Por ejemplo, la etiqueta <body> usada en este documento es <body bgcolor=olive link="#0000FF" vlink="#007090" alink="#00A0FF"> excepto que el color de fondo no es oliva en realidad. No confíes en el color para cosas importantes, algunos navegadores no pueden desplegarlo. Además de los 16 nombres estándar de color de arriba, Netscape soporta muchos otros nombres de colores, de firebrick a mediumspringgreen. Aquí está una lista de los nombres de color de Nestcape, parte del excelente HTML Primer de Sam Kington. Por supuesto, solamente se despliegan correctamente con navegadores Netscape-- usa #RRGGBB los códigos de color para captar el máximo de navegadores. Marcos Los marcos no son parte del HTML estándar. Son una extensión al HTML que creó Netscape. No funcionan en todos los navegadores, así que limita la cantidad de usuarios al usarlos. Describiré la introducción general aquí, pero Netscape tiene una página con todos los detalles. Básicamente, creas un archivo HTML normal para cada marco, además de un archivo HTML especial (el "documento de marcos") para contenerlos a todos. Este documento de marcos tiene la etiqueta contenedora <frameset> en lugar de la etiqueta <body>. La etiqueta <frameset> divide la ventana principal del navegador en múltiples renglones y columnas. Tiene cualquiera de los atributos rows or cols, el cual es una lista de tamaños separados por comas, ya sea en pixeles o en porcentajes del ancho total de la ventana. Por ejemplo, <frameset cols="10%,80%,10%"> divide la ventana en tres columnas: márgenes angostos a izquierda y derecha y una página central ancha. (Ve la página de Netscape para más detalles.) Entre <frameset> y </frameset> puede haber: etiquetas <frame>, cuyos atributos src contienen los URL que deben mostrarse en esas columnas o renglones; otras etiquetas <frameset> para dividir después las columnas o renglones en más renglones o columnas; or etiquetas <noframes> y </noframes> para definir una página para navegadores que no soportan marcos (siempre es sabio usarlas). Los marcos pueden convertirse parte del HTML estándar algún día, una vez su complejidad se deseche. Para las cosas oficiales en marcos y el estándar de HTML ve la sección "Next Steps" en esta página en W3C. Caracteres Especiales Como "<" and ">" ¿Cómo puedes desplegar los caracteres "<" y ">"? Si solamente los escribes en tu archivo HTML, el navegador pensará que estás comenzando o finalizando una etiqueta. tienes que incluir caracteres de escape (así se llaman), tecleando secuencias de caracteres en su lugar. Cuando se despliega tu página, el navegador traduce las secuencias a los caracteres que necesitas. Todas las secuencias de caracteres especiales comienzan con "&" (ampersand) y terminan con ";" (punto y coma), y entre ellos está el nombre del caracter especial. Por ejemplo, "&gt;" significa el símbolo de mayor-que, "&lt;" significa el símbolo de menor-que, "&quot;" significa comillas dobles, y "&amp;" significa el amperand mismo. Por ejemplo, la línea Para desplegar el caracter &lt; usa la secuencia &amp;lt;. se verá como Para desplegar el caracter < usa la secuencia &lt;. Usa este método para poner caracteres no tecleables en tus páginas; por ejemplo, "&copy;" muestra el símbolo de copyright ©. Aquí está una lista de caracteres especiales , con letras acentuadas primero, seguidas de símbolos no alfabéticos. Al contrario de los nombres de etiquetas, estos nombres de caracteres son de caso sensitivo, así que "&GT;" no despliega el símbolo de mayor-que. Necesitas escapar cada "<" o ">", pero no todos los ampersand, etc. Estos códigos sólo están ahí cuando los necesites, por ejemplo, cuando tu página no se despliegue correctamente sin ellos (y debas verificar visualmente cada página que hagas). Una Nota Importante sobre HTML Una página Web puede ser desplegada en una gran variedad de dispositivos -- navegadores gráficos, navegadores de sólo texto, dispositivos de texto-a-voz o braille, u otros dispositivos aún no inventados. Aún los navegadores gráficos varían mucho, desde que el usuario puede cambiar el tamaño a la ventana como desee, o ajustar sus propios colores y tipos de letra. De acuerdo con esto, el HTML le da mucha libertad al navegador para decidir cómo desplegar la página y sorprendentemente poco control del HTML al autor. Técnicamente el HTML es una manera de describir qué tipo de datos estás desplegando, y no explícitamente cómo deben desplegarse. Por ejemplo, la etiqueta <h1> dice "Esta es una sección de encabezado principal"; no dice en realidad "Muestra esto en un tamaño grande de letra, negrita y centrada". El navegador decide cómo debe desplegarlo. De hecho, el navegador toma la decisión final de cómo desplegar todo; todas las etiquetas HTML son solamente sugerencias. Toma tiempo acostumbrarse a esta falta de control, pero es la naturaleza del Web. Recuerda, no existe una manera de saber el tamaño y la capacidad de los navegadores que desplegarán tu página. Solamente trata de escribir HTML de tal manera que tus páginas no se ajusten a una forma en particular (lo cual variará mucho de usuario a usuario). De otra manera, las tablas y diseños que se ven geniales en tu pantalla pueden verse horribles en la de otro (siempre vale la pena checarlo). Si es posible, no confíes en el navegador cuando muestra imágenes -- usa el atributo alt de la etiqueta <img> para definir un texto alternativo para mostrar para los navegadores que no puedan mostrar la imágen. Si escribes HTML flexible, cualquier buen navegador desplegará tu página aceptablemente. En estos días, el HTML tiene etiquetas que dicen explícitamente cómo desplegar algo, en vez de describir solamente qué tipo de dato es. Como ejemplo están las etiquetas comúnmente usadas <b> and <i>. Etas son en realidad una ligera desviación de la filosofía original de HTML debido a su explicitud. Los puristas a veces usan las etiquetas <strong> y <em>, para texto fuerte y enfatizado, en lugar de <b> y <i>. Puedes usar las que quieras. Tips para Hacer Mejores Páginas Web 1. Obtén retroalimentación de tus usuarios con tu dirección de email y escucha sus comentarios. Esto te llevará a más mejoras que cualquier otra cosa. Por ejemplo, Envía tus comentarios a <a href="mailto:[email protected]">me</a>. 2. Revisa tu página en varios navegadores, o por lo menos en diferentes tamaños de ventana. 3. Pide a tus amigos que naveguen en tu página y te la comenten. 4. No confíes en cosas que no funcionan en todos los navegadores como el color. Usalos si quieres, pero asegúrate que tu página puede verse en navegadores que no los soporten. 5. Si haces un site de varias páginas relacionadas, permite la navegación intuitiva entre ellas. 6. Cuando uses la etiqueta <img>, incluye los atributos alt, width, y height. El atributo alt define texto a mostrar para usuarios no gráficos, y los atributos width y height dan el tamaño de la imágen en pixeles. Esto permite que un navegador despliegue el resto de la página sin esperar a que la imágen se cargue, haciendo la vida mucho mejor para el usuario. Por ejemplo, <img src="bluebar.gif" alt="blue bar" width=500 height=5> 7. Escribe código fuente fácil de leer. Tendrás que editarlo alguna vez y otra gente podría hacerlo también. El código fuente desordenado es difícil de trabajar e incrementa los errores. Facilita las cosas para todos escribiendo código fuente claro. 8. Lee las opiniones de los estilos de otras personas en las muchas guías en este directorio de Yahoo. Al final, no tengasmiedo de tus propias opiniones y crea tu propio estilo. Haz lo que se vea bien. Haz lo que se ajuste a cualquier otro criterio que tengas (fácil de usar, informativo, divertido, atractivo, etc.). Final (y algunas ligas) OK, ya sabes bastante de HTML para hacer páginas Web. Ve y haz una o dos páginas. Ve y enseña a alguien más a hacerlo. El HTML tiene otras etiquetas con las que puedes jugar, pero no tienes que. De hecho, las únicas etiquetas usadas en la elaboración de esta página ya han sido descritas aquí. Aqui está una buena aunque un poco técnica lista de todas las etiquetas HTML que es parte de del Manual de Referencia HTML de Sandia-- ignora las partes específicas de Sandia. Aquí está un resumen de las características del HTML 3.2 realmente bueno (y oficial) en el World Wide Web Consortium ("W3C"), el cual es la organización central de investigación que define los estándares usados en el Web. OTRRROOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO Cómo incluir imágenes y resaltes: Punto 22.- Para incluir una imagen (que es un archivo) en una página se usan los siguientes comandos de apertura y cierre: < IMG SRC="nombre.ext" > siendo las extensiones del archivo de imagen, más corrientes: .GIF o .JPG,... Nota: En el ejemplo anterior, se supone que el archivo de la imagen está en el mismo directorio o carpeta que el archivo de la página-web. Siempre habrá que tener en cuenta que para que en una páginaweb se pueda ver en Internet dicha imagen, tendrá que estar también subido el correspondiente archivo de imagen al servidor de Internet. Y que se sitúe en el mismo directorio o carpeta de donde tenemos ubicado el archivo de la página-web. La imagen se ha centrado en esta ocasión con los comando externos de centrado de información: < CENTER > < IMG SRC="payaso.gif" > < /CENTER > Pero también se puede situar la imagen con un atributo interno a la orden IMG SRC que es alineamiento: ALIGN Pongamos un ejemplo de situar el archivo de imagen en la zona derecha: < IMG SRC="payaso.jpg" ALIGN=RIGHT > Nota 1: Recordad que si se desea enviar archivos de imágenes para situarlos en un servidor de Internet habrá que hacerlo como ficheros binarios. Nota 2: Para poner una imagen en la zona izquierda se usaría la orden: < IMG SRC="payaso.jpg" ALIGN=LEFT > Punto 23.- Los archivos gráficos de formato .GIF pueden tener hasta un máximo de 256 colores. Este formato permite hacer imágenes con fondos transparentes y permite generar pequeñas animaciones GIF, pero no permite una comprensión significativa del tamaño del archivo. Punto 24.- Los archivos gráficos de formato .JPG pueden tener hasta un máximo de 16 millones de colores. El usuario puede aplicar un nivel de compresión del tamaño del archivo, pero a mayor compresión mayor pérdida de calidad. Este formato no permite hacer imágenes con fondos transparentes ni pequeñas animaciones en el propio archivo, a cambio son los más indicados en caso de tener que mostrar una imagen con un color más real. Existen otros formatos de imágenes o gráficos. Punto 25.- Para poner una barra horizontal de separación (como las que estás viendo entre cada apartado de este Minicurso), activar sólo una vez el comando < HR > Punto 26.- Para poner un texto parpadeando o intermitente (esta opción sólo funciona con el navegador Mozilla Firefox ®) se activa con el comando < BLINK > y se desactiva con < /BLINK > Por ejemplo: < BLINK > HOLA, sólo parpadea con Mozilla Firefox < /BLINK > HOLA, sólo parpadea con Mozilla Firefox Punto 27.- Para incluir un texto en movimiento (conocido como "marquesina") como los que aparecen en todas estas páginas se pone el texto deseado anteponiendo y postponiendo los comandos: Por ejemplo: < MARQUEE > Aprende a incluir textos en movimiento < /MARQUEE > Punto 28.- Si se quiere incluir un contador a fin de ir comprobando qué número de visitas tienen nuestras páginas-web, hay que contactar con un servidor que tenga servicio de contadores para poder contratarlo. Habrá que dar: un nombre de contador, una clave y la dirección de Internet de nuestra página-web que identifique el contador. Esto permitirá recibir la información del número de visitas y estadísticas que tiene nuestra página-web. Generalizando se puede decir que más o menos la orden que habrá que incluir en nuestra página-web es una similar a ésta: < IMG SRC = "http://www.servidor.com/contador/contador.cgi?df=Usuario"> Nota: Puedes conseguir tu contador gratuito en estas direcciones: NedStat España: estadísticas y contador http://es.nedstat.net SuperStats: estadísticas y contador http://v2.superstats.com Contadores: http://www.servicont.com Punto 29.- Para incluir sonido o una pequeña canción en una páginaweb hay que incluir la siguiente orden: < EMBED SRC = "cancion.wav" > si queremos que al acceder a la página-web aparezca de forma inmediata la ventana de reproducción de sonidos y se reproduzca el sonido o la canción. Nota: No se debe olvidar que el archivo de sonido debe ser subido al servidor de Internet siempre junto al archivo de la página-web, al igual que los archivos de imágenes que se incluyan. En el ejemplo se supone que el archivo de sonido está en el mismo directorio o carpeta que el archivo de la página-web. Los posibles formatos de archivos de sonido son variopintos, pero muchos de ellos necesitan pequeños programas que unidos al programa navegador nos permitan escuchar dicho archivo de sonido especial. Si deseamos que todo el mundo escuche el sonido existen dos formatos que lo permiten (siempre claro que el ordenador disponga de tarjeta de sonido): .MID y .WAV El formato .MID o Midi es para sonido de melodías, tiene la ventaja de ocupar muy poco espacio de archivo. El formato .WAV permite un sonido de mayor fidelidad incluyendo voces y música (por ejemplo, una canción), pero en cambio ocupa mucho espacio de archivo. El sonido se puede reproducir de dos formas: De forma automática cuando el usuario acceda a la página; o sólo cuando el usuario pulse sobre un "enlace" que se ponga a propósito. Para ello usaremos el atributo autostart: < EMBED SRC = "cancion.wav" autostart=false > Aparecerá una ventana de reproductor de sonidos y no se reproducirá el sonido al acceder a la página, hasta que el usuario pulse el icono de poner en marcha (Play) [ > ]. < EMBED SRC = "cancion.wav" autostart=true > así conseguimos que al acceder a la página-web se active de forma automática la canción. Abajo se muestra el icono para que el usuario reproduzca el ejemplo antes mostrado, sólo cuando desee oír el sonido de la melodia en formato .WAV y autostart=false Cliquea en la imagen para oír la Melodia: Punto 30.- La inclusión en las páginas-web de vídeos es un elemento muy atractivo que debe tenerse en cuenta. Actualmente es bastante fácil la inserción de estos recursos, dado que existen potentes servidores que nos permiten emitir los archivos de vídeo añadiendo una serie de comandos que simplemente se copian en nuestra página-web. Os recuerdo que como dijimos en la Lección 4 es imprescindible el uso de tablas sin borde para la maquetación adecuada de las páginas-web que contengan imágenes, vídeos y otros recursos. Veamos una serie de ejemplos de los códigos que se deben incluir de un par de servidores de vídeo. Por tanto, si quisiéramos incluir en nuestra página-web un vídeo nuestro, antes deberíamos de crearnos un usuario en uno de estos servidores, después subir el archivo de vídeo y por último copiar la serie de códigos que nos lo indica dicho servidor, necesarios para insertar en nuestra página-web. Leyendo adecuadamente los códigos podemos manipularlos y disminuir el tamaño de la ventana del vídeo o cambiar otras características. En estos ejemplos se ha cambiado el tamaño del vídeo a mostrar en ambos casos: <object width="350" height="280"><param name="movie" value="http://www.youtube.com/v/Gps9CLuPrsE&hl=es_ES&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Gps9CLuPrsE&hl=es_ES&fs=1&rel=0" type="application/xshockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="350" height="280"></embed></object> <object width="350" height="264"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=1474641&amp;server=vimeo.com&amp;sho w_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=1474641&amp;server=vimeo.com&amp;show_t itle=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="350" height="264"></embed> Cómo hacer enlaces en una página-web: Punto 14.- Una de las formas de hacer que desde una páginaweb podamos acceder a otra página-web es la de usar una zona de texto que llamaremos "enlace" (en inglés link). Gracias a este "enlace", si cliqueamos ("pinchamos" con el cursor del ratón, o "hacer click ") sobre dicho texto podremos acceder a ver la información de la página-web a la cual se enlaza. En este primer ejemplo, se supone que ambas páginas-web, es decir ambos archivos, están situados en el mismo directorio o carpeta. Para ello, usaremos los siguientes comandos de apertura y cierre del "texto de enlace": < A HREF="nombre.htm" > texto de enlace < /A > Siendo nombre.htm el nombre del archivo que contiene la página-web que deseamos se enlace al cliquear sobre el texto. Pongamos un ejemplo: < A HREF="salto1.htm" > Cliquea aquí < /A > cuyo resultado es que si cliqueamos en la texto: Cliquea aquí saltaremos a la página-web denominada "salto1.htm" Punto 15.- Si se quiere hacer un enlace con una página-web concreta (por ejemplo pagina34.html) en una dirección de Internet que está en un servidor exterior, lo haremos poniendo los siguientes comandos de apertura y cierre del texto de enlace de una forma similar a esta: < A HREF="http://www.servidor.com/pagina34.html" > texto de enlace < /A > Nota: Normalmente no es necesario poner el nombre del archivo de la página-web principal de los sitios-web de una dirección de Internet ("index.html" o "index.htm", etc), dado que se encarga el propio servidor del sitio-web de redirigirnos a la página-web principal. Por tanto bastaría con poner: < A HREF="http://www.servidor.com/" > texto de enlace < /A > En el siguiente ejemplo hemos sustituido el patrón de ejemplo "www.servidor.com" por la dirección de un servidor de Internet auténtico, por ejemplo, el del Ministerio de Educación Español, que en esta época, es "www.educacion.es" Pongamos el ejemplo concreto: < A HREF="http://www.mec.es/" > Contacta con el Ministerio de Educación de España < /A > cuyo resultado es: Contacta con el Ministerio de Educación de España Punto 16.- Si lo que se quiere es que el usuario que navegue pueda enviar un mensaje de correo-e a alguien (en inglés e-mail) a una dirección concreta de correo electrónico, por ejemplo, al que ha diseñado la página se usarán los siguientes comandos de apertura y cierre del texto de enlace: < A HREF=MAILTO:[email protected] > texto de enlace < /A >. Nota: Siendo "[email protected]" la dirección de correo-e a la que se quiere enlazar los mensajes. Si se estuviera conectado a Internet y se cliqueara (pinchara, hacer "click") en el texto de enlace siguiente se arrancaría el programa de correo electrónico del navegador que se está usando para enviar un mensaje. En el siguiente ejemplo hemos sustituido el patrón de ejemplo "[email protected]" por una dirección de buzón de correo electrónico auténtica, por ejemplo la del autor de este minicurso: "[email protected]" Pongamos el ejemplo concreto: < A HREF=MAILTO:[email protected] > Escribe un mensaje al autor del curso < /A > cuyo resultado es: Escribe un mensaje al autor del curso Punto 17.- En vez de usar un texto para enlazar páginas, también podemos usar una imagen o un icono (ver Lección 5) como la que abajo se muestra para conseguir que si el usuario lo desea pueda acceder a otra página-web concreta de información. Para ello se usan los mismos comandos de apertura y cierre, tan sólo que deben envolver al comando de inserción de imágenes (contenido que se explica en la Lección 5). Repitamos el ejemplo del Punto 14, pero con un icono: < A HREF = "salto1.htm" > < IMG SRC = "icono.gif" > < /A > Recordamos dos cosas: que el archivo gráfico que contiene el icono debe estar en la misma carpeta (o en una subcarpeta) de donde está el archivo de la página-web; y también, no debemos olvidar subir a nuestro sitio-web dicho archivo gráfico para que pueda verse, en Internet, incluido en nuestra página-web. Punto 18.- Si lo que deseamos es mostrar la información en una una nueva ventana del navegador, cuando el usuario cliquee en el enlace, deberemos añadir el siguiente atributo al comando: < A HREF = "salto1.htm" target="a" > texto de enlace < /A > Pongamos un ejemplo: < A HREF="salto1.htm" target="a" > Cliquea aquí < /A > cuyo resultado es que si cliqueamos en la texto: Cliquea aquí saltaremos en una nueva ventana a la página-web denominada "salto1.htm" El nombre del destino del atributo target suele tener unos valores normalizados específicos, si lo que deseamos es que el navegador realice ciertas acciones concretas. Aunque si sólo queremos que se abra un ventana nueva bastaría con poner por ejemplo, una letra o algunos símbolos: en nuestro ejemplo anterior se puso "a". También existe el valor normalizado que equivale a que se abra una nueva ventana, y es: "_blank" Si deseamos que se obligue a que la página-web del enlace se abra en la ventana actual, se pone el valor "_top". En nuestros ejemplos básicos, no es necesario poner nada si lo que deseamos es que todas las páginas-web de los enlaces se muestren en una misma ventana del navegador. Estos valores son muy útiles cuando se trabaja con marcos (frames) dentro de una misma página-web. Existen más valores normalizados, pero estos temas pertenecen a un curso más avanzado.
