[Manual] Iniciación a los lenguajes Web. Segunda parte: HTML.

7 12 2007

Esta es la segunda parte del manual sobre creación de páginas web, en concreto la parte relativa al HTML que en la anterior vez, dejé un poco en el aire, dando, simplemente, una breve introducción al mismo. Esta vez os traigo un pupurri de prácticamente todas las etiquetas que se pueden encontrar actualmente en este lenguaje. Sí, es cierto, hay más, pero como se trata de un breve manual de referencia, no he visto necesario incluir más, de todas formas, si por alguna razón, alguien cree que debería contener más etiquetas, o que he obviado alguna importante, no dude en decirlo que subsanaré el error en cuanto lo reciba.

El lenguaje HTML:

<body></body> además de ser la etiqueta que contiene todo aquello que se va a mostrar en la página, tiene muchos atributos interesantes: “bgcolor” que da color al fondo de la página, este color se expresa en formato hexadecimal, utilizando 6 dígitos en grupos de dos, es decir que dos dígitos representan la cantidad de un color, tal que así: #FFOOCC (FF representan la cantidad de rojo que tiene ese color, OO representa la cantidad de verde, y CC representa la cantidad de azul), estos números pueden variar en dígitos hexadecimales, del F al cero, y su combinación da cualquier color posible; “text” es otro atributo de <body> y se utiliza para dar color al texto, utilizando el mismo método que para el color del fondo; “link” “vlink” y “alink” son atributos que controlan los colores de los links, el primero sirve para los links sobre los que no se ha actuado, el segundo da color a los enlaces ya visitados, y el tercero da color a los enlaces justo cuando son pulsados, en todos la forma de poner los colores es idéntica a la del atributo “bgcolor”; también se puede utilizar una imagen como fondo del documento, en este caso se utiliza el atributo “background” utilizando una ruta relativa o absoluta para indicar la localización del archivo de imagen. (ej: <body bgcolor=“#FCC3AD” text=“#000000” link=“#99DDEE” vlink=“#019A6B” alink=“#478FDC” background=“imagen.gif”> )

<p></p> Son las etiquetas que encierran los párrafos (una apertura y un cierre por párrafo). Además, al escribir la etiqueta de cierre, hace un salto de línea.

<br /> Etiqueta que inserta un salto de línea. Como si fuera un intro en un documento cualquiera.

<h1></h1>, <h2></h2> (hasta h6) son etiquetas de encabezado o cabecera. Según el número que acompañe a la h la letra será más grande (h1) o más pequeña (h6).

<center></center> encierra aquellos elementos que se quieren centrar, desde una palabra, hasta una anidación de etiquetas.

<hr /> introduce una línea horizontal que divide los textos (ej.: cabecera y texto), puede ser de diferentes longitudes y grosores, con “width” modificamos la anchura y con “size” su espesor, además, se puede utilizar “align” para alinearla. El atributo “noshade” hace que sea una sólida no embutida sobre el fondo.

<strong> </strong>, <em> </em>, <u> </u> son etiquetas de formato de texto, “strong” pone en negrita aquello que contiene, “em” lo pone en cursiva y “u” lo subraya.

<ul> </ul> estas etiquetas crean listas desordenadas en su interior. <ol> </ol> crea listas ordenadas en su interior. Ambas etiquetas necesitan anidar la etiqueta <li></li> para que contenga los elementos de la lista. Se pueden anidar tantos elementos de lista como se necesite.

<dl> </dl> crea listas de definición, apropiadas para glosarios y términos de definición. Anidan las etiquetas <dt> </dt> que contiene el elemento a definir y <dd> </dd> que contiene la definición del elemento.

<!– –> un comentario se sitúa entre los guiones (y separado por espacio de ellos) así se pueden incluir notas que no aparecerán en el documento mostrado. Son muy usados para poner de encabezado a las partes de la página a modo de guía para quien necesite modificarla.

<a href=“”>…..</a> sirve para crear un enlace mostrando como palabra usable lo que contengan las “a” href=“” indica la ruta (relativa o absoluta) del archivo al que el enlace hace referencia. Para acudir a una parte de cierta página se crean las llamadas marcas, en las que en el href=”#” (donde el asterisco indica que no se trata de un enlace normal si no que sirve para acceder a una marca fijada), se incluiría el nombre de la marca a la cual queremos saltar. Para crear la marca se utiliza el atributo de “a” name=. (ej.: <a name=“inicio” href=“#fin”> enlace </a>). Para crear un enlace que permita enviar un correo electrónico se utilizará una llamada especial: <a href=“mailto:correo@e.mail”>enlace</a>

<img src=“” /> etiqueta que sirve para introducir imágenes en la página, el atributo “src” funciona igual que el “href” de la etiqueta “a”, sirve para introducir la ruta (relativa o absoluta) de la imagen que se quiere introducir. Un atributo muy importante de esta etiqueta es el “alt” que mostrará un texto alternativo en aquellos casos que la imagen no pueda ser mostrada. Otros atributos importantes son width=“” (indica el ancho de la imagen) y height=“” (indica el alto de la imagen), se usan principalmente para dos cosas, la fundamental es indicar al navegador el tamaño que va a ocupar la imagen para que reserve un espacio durante la carga de la página mientras la muestra, esto sirve para reducir el tiempo de espera del usuario, al poder el navegador ir cargando otros elementos menos pesados de la misma; la segunda forma de usarlo es para escalar la imagen dándole al navegador tamaños diferentes a los propios de la imagen, haciendo que sea el navegador quien la redimensione. También se puede alinear utilizando el atributo “align” con alguna de sus opciones: right, left, bottom, top y middle. Los dos primeros atributos colocan la imagen en relación con el texto, mientras que las tres restantes, colocan un texto al lado de la imagen en la localización indicada; Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se emplea el atributo “clear” de la etiqueta <br />, con las opciones: left (para buscar el primer margen libre, a la izquierda), rigth (busca el primer margen libre a la derecha), all (busca el primer margen libre a ambos lados).

<font> </font> es la etiqueta encargada de formatear las fuentes utilizadas, dándole un tamaño a la letra con el atributo “size”, diciendo que tipo de fuente utilizar con el atributo “face” o también dándole un determinado color en formato hexadecimal con el atributo “color”. Una etiqueta que cambia el texto para todo el documento es <basefont> pero ni el explorador firefox ni el ópera son capaces de entenderlo.

<table></table> esta es la etiqueta que engloba a todas las demás que se usaran para crear tablas. El atributo “border” dota de un borde a la tabla, por defecto pone un grosor de una unidad, pero se puede hacer más grueso mediante el símbolo igual seguido del número que quiera dársele al grosor.

La etiqueta <table> anida otras etiquetas que son las que crearán la tabla y le darán formato, las principales son <tr><tr /> (que indican el número de filas existentes) y <td></td> que crearán las celdas dentro de las filas. <tr> anida a <td>.

Se puede hacer que la tabla tenga un titular utilizando <caption></caption>. También se pueden crear celdas de cabecera, a modo de título de la columna, utilizando <th></th> en vez de <td>. Aunque se pueden utilizar en cualquier lugar de la tabla, lo normal es que se use como se indica.

HTML es un lenguaje de anidamiento, y como tal, dentro de las celdas se pueden utilizar diferentes etiquetas, por ejemplo, <img />, <a href>… tantas como se necesiten.

Se puede alinear el contenido de dentro de las celdas, mediante el atributo “align” y sus opciones (center, righ y left). En sentido vertical el alineamiento por defecto es centrado, se puede cambiar con el atributo “valign” y sus opciones: top y bottom.

Las tablas, normalmente, tienen dimensiones automáticas, adecuadas al contenido y al número de celdas y filas, pero se puede hacer que tenga otras dimensiones con los atributos width y height (valores tanto en porcentaje como en número de píxeles).

Se puede hacer que una celda ocupe varias columnas usando el atributo de <tr> “colspan” (añadiendo el igual y el número de columnas que se quiera ocupar), y también que ocupen varias celdas en la misma columna, para eso se usa “rowspan”.

Se puede aplicar un color de fondo de la misma forma que se usa para darle color al fondo de la página, es decir con el atributo “bgcolor”, seguido del código del color, esta vez en vez de aplicarlo a la etiqueta <body> se usa en las etiquetas <table> para darle un color a toda la tabla, o a <td> o <th> para que se diferencie esa celda del resto (es posible hacer que <table> tenga un color y <td> tenga otro). Además se puede utilizar el atributo “background” (de la misma forma que en <body>) en <table>, y también en <td> y <th>.

Si en la etiqueta <table> aplicamos los atributos “cellspading” y/o el atributo “cellpadding”, con el primero obtenemos una separación entre las celdas (por defecto 2 píxeles), con el segundo se obtiene una separación entre el borde y el contenido dentro de las celdas (por defecto es de un píxel).

Para crear un formulario se utiliza una etiqueta que contendrá al resto de propiedades del formulario, <form></form>, para dotar de acciones completas al formulario se usan los atributos: “action” (normalmente usado con la propiedad mailto:dirección_de_email para que los datos sean enviados vía email), “method” con las opciones post o guet (normalmente post, que indica que los datos sean enviados inmediatamente tras pulsar el botón de enviar), y “enctype” (tipo de encriptación), que para entender los datos que se envían, se utilizará la opción text/plain.

Para crear un cuadro de texto, donde el usuario insertará algo que le pedimos se utiliza: <input type=“text” name=“lo que sea” /> así se crea un cuadro de texto, en el que el usuario pondrá lo que se le pida y al enviar el “name” nos servirá para identificar a qué pertenecen los datos. Se puede poner atributos de máximo de tamaño del cuadro “size” y/o de máximo de caracteres introducibles “maxlength”. Un tipo especial de cuadro de texto es el de contraseña, en este caso, en vez de poner type=“text” se utilizará type=“password”, así se oculta el texto introducido.

Si lo que se quiere es incluir un gran campo de texto, donde se puedan dejar, por ejemplo, comentarios, lo que se hace es utilizar la etiqueta <textarea></textarea> con un atributo “name”, para lo mismo que en el caso anterior, un atributo “rows” que indicará el número de filas que tendrá el área de texto, y otro “cols” que indicará el número de columnas.

Una opción típica de cualquier formulario, es la de elegir entre varias opciones que se nos muestran, por medio de menús desplegables, esto se consigue mediante la etiqueta <select></select> en cuyo interior se encuentran las opciones a elegir, entre las etiquetas <option></option>, <select>, llevará el atributo “name” para el mismo motivo que anteriormente. Se puede introducir un atributo en <select> que haga que se muestre más de una opción en un principio, esto es, que en vez de mostrar una como hace por defecto y haya que desplegar el menú, muestre varias, para, por ejemplo, no tener que desplegar el menú.

Una forma práctica de crear opciones, en con las cajas de confirmación (checkbox), esta vez se creará mediante un <input> con atributo type=”checkbox” y un “name”, así se crea una caja que el usuario puede seleccionar o no. Para hacer que aparezca seleccionado de manera predefinida se utilizará el atributo checked=“checked”. Otra forma de opciones es mediante los botones de radio, estos son botones que se aúnan en una sola categoría mediante el atributo “name” para hacer que sólo pueda ser elegida una opción entre los de esa categoría. Para crearlos sólo hace falta poner <input type=“radio” name=“común” value=“único” /> en el que el value indica el valor único de cada botón. También se puede introducir el atributo “checked” ya comentado, para hacer que se seleccione una opción preferencialmente.

Para que el formulario pueda ser enviado a la dirección de destino incluida al principio del mismo, se necesita que se mande hacer, para ello se utiliza el botón de enviar o submit y se crea <input type=“submit” value=“Enviar” /> El type submit, crea por defecto un botón con la propiedad de enviar el formulario a la dirección de correo, el value indica qué es lo que se verá como texto en el botón. Otro botón muy valioso es el de reset o borrado, que permite borrar del formulario todos aquellos datos que ha introducido el usuario, se crea <input type=“reset” value=“Borrar” /> se da el mismo caso que en el botón de enviar, pero este lo borra todo.

Anuncios




[Manual] Iniciación a los lenguajes Web.

23 11 2007

Esta será una pequeña guía para aquellos que o bien quieran modificar el código de una página web, de un blog, o bien quieran crear de cero alguno de los dos, pero antes de empezar explicaré, de modo breve, qué tipo de lenguajes nos podemos encontrar a la hora de hacerlo.

HTML: el que trataremos hoy. Su significado es Hyper Text Markup Language (Lenguaje de Marcas de Hipertexto), sirve para estructurar textos y darles forma de hipertexto, que es el formato de la web. Además es el más fácil de aprender, por eso empezaremos por él.

CSS: lo trataremos más adelante. Su significado es Cascading Style Sheets, que en la traducción al castellano pasó a llamarse hojas de estilo en cascada. Sirve para dar forma, y estructurar al lenguaje HTML, dotando a este de más funcionalidades para así crear páginas más vistosas. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Java Script: es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas, es un lenguaje que se incrusta dentro del código HTML, creado para dar dinamismo a la rigidez del HTML. Además se trata de un lenguaje interpretado (no necesita de un traductor, el programa lo lee y ejecuta un navegador, sirviendo así, para todos los sistemas operativos).

PHP: es un lenguaje de programación usado normalmente para la creación de páginas web dinámicas. PHP “PHP Hypertext Pre-processor” (inicialmente PHP Tools, o, Personal Home Page Tools), y, al igual que el anterior, se trata de un lenguaje interpretado.

De todos los lenguajes hablaremos en su momento, pero hoy vamos a empezar por el primero del que hemos hablado.

HTML

Existen muchas versiones del HTML, la más nueva es la 5.0, pero no he encontrado referencias sobre esta versión. Por lo que hablaremos de una variante del HTML, creado a partir del lenguaje XML, llamada XHTML.

El XHTML nace a partir de la necesidad de crear un lenguaje estricto para la visualización del contenido web, debido a que cada vez más dispositivos podían acceder a la web de diferentes formas, estas carencias son por ejemplo, el hecho de que varias etiquetas (luego hablaremos de ellas), no tienen cierre, o que aún teniéndolo si no se indica, el navegador lo interpreta de tal forma que sí lo tienen, y aunque esto, en un principio, pueda parecer mejor para desarrollarlo, al final lo que pasa es que se tienen páginas inconsistentes, en las que todo el trabajo de colocar las etiquetas correctamente recae en el navegador, que encima, no siempre lo hacen e interpretan correctamente todos.

Por eso nace esta variante, para que las páginas web puedan ser vistas desde todos los navegadores, sin ningún tipo de problema, y con escasas diferencias entre sí. Además el XHTML añade una característica heredada del XML , la obligación de escribir todas las etiquetas con letra minúscula.

Para crear una página web no se necesita ningún programa especial (aunque son de gran ayuda), ni software caro y complejo. Simplemente se necesita un editor de texto (no, el Word, el kWord, el AbiWord y similares, no son editores, son procesadores de texto), tipo bloc de notas, o el Edit de MS-Dos, en otros Sistemas Operativos, nos podemos encontrar con Emacs, Vi, Kate o jEdit (este último es multiplataforma). Existe software especializado para crear páginas web, que nos ayudarán con las etiquetas, y colorearan el código para que sea más legible, además muchos nos resaltarán los errores y comprobaran el soporte con diferentes navegadores y versiones de estos, el mejor, para mi gusto, es el DreamWeaver de Adobe.

Una página web consiste en un código especial que dice al navegador que lo interpreta, cómo ha de mostrar la información al usuario. HTML se considera un lenguaje de marcas, y esto es porque el código del mismo va entre los símbolos <>. Como ejemplo podemos poner la etiqueta que nos indicará donde acaba y donde empieza una página web: <html> Esta nos indica donde empieza la página web;</html> esta nos indica dónde termina una página web.

Un aspecto importante, es que las etiquetas de HTML se cierran de la manera mostrada, es decir con la barra inclinada hacia la derecha (la que está encima del 7). Así una etiqueta sin estaba barra indica donde comienza y una etiqueta con la barra indica donde termina el ámbito de influencia de esa etiqueta. La del ejemplo anterior empezará en el principio del documento y terminará en el final del mismo.

Veamos ahora un esquema básico de una página web:

<html>

<head>
</head>

<body>
</body>

</html>

Podemos ver cómo dentro de la etiqueta que ya habíamos visto hay otras dos diferentes, ambas con su apertura y su cierre, esto se llama anidamiento de etiquetas, propiedad muy importante en este lenguaje

Esas dos etiquetas nuevas que se ven en el esquema son muy importantes, pues marcan dos apartados muy diferentes en la estructura de una página web:

Head: esta parte del documento no se muestra en la página, en esta parte se introducen todos los valores y descripciones que tengan que ver con la página, se introduce, por ejemplo, el título de la misma, este título se muestra, no en el documento, si no que se muestra en la parte superior izquierda del navegador. Además se añaden descripciones, también llamados metadatos, sobre la página que se está visualizando, sirve sobre todo, para que los buscadores puedan categorizar esa página. Además, es el sitio del documento, donde más conveniente es introducir el código CSS y el Java Script.

Body: esta parte contiene todo el texto y todas las etiquetas que hacen referencia al mismo, todas las etiquetas que sirven para dar estructura se incluyen aquí, además de todo el texto que se quiere mostrar. Es, pues, la parte más importante del documento.

Más adelante, veremos las etiquetas que forman el lenguaje.