Html
Definicion: Siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web.
Es usado para describir la estructura y el contenido en forma de texto,
así como para complementar el texto con objetos tales como imágenes.
HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
Tablas.-
Como realizar una tabla Simple
Una tabla HTML puede ser considerada, de manera simple, como un grupo
de filas donde cada una de ellas contiene un grupo de celdas (y no
alrevés). Las tablas, como toda estructura en los documentos HTML, son
definidas usando elementos. Entonces, una tabla simple puede ser
insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo:
Código
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
El título de una tabla
El título de una tabla, definido mediante el elemento HTML caption,
debería describir breve y precisamente el contenido y la naturaleza de
la tabla y es habitualmente representado en algún lugar cercano a la
tabla (su posición puede ser establecida usando hojas de estilo).
Recuerda que el elemento HTML caption solo está permitido si va justo después del tag de apertura de la tabla.
Código
<table>
<caption>Título de la tabla</caption>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>
<caption>Título de la tabla</caption>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>
Códigos de color en HTML
Los colores en HTML son construidos utilizando una combinación de tres colores básicos: rojo, verde y azul. Cada uno de estos colores puede tomar una valor desde 0 a 255 y son representados en notación hexadecimal (00 a FF). Dicho esto, un color está compuesto por seis caracteres donde los dos primeros representan al color rojo, los dos segundos al verde y los dos terceros al azul. Por ejemplo, el color rojo está formado en HTML con "FF" para el rojo (los dos primeros caracteres) y "00" para el resto: "FF0000".Al mezclar estos valores se mezclarán los colores resultantes, de modo que puedes crear un amarillo al mezclar el rojo y el verde (por ejemplo, "FFFF00"), violeta al mezclar rojo y azul (por ejemplo, "FF00FF") ó cyan al mezclar verde y azul (por ejemplo, "00FFFF"). Esto funciona exactamente como la paleta de un pintor.
El tono del color puede también ser cambiado incrementando (por ejemplo, violeta claro "FF66FF") ó disminuyendo (por ejemplo, violaeta oscuro "AA00AA") los tres valores proporcionalmente.
Nota: por la naturaleza de esta página, las personas ciegas pueden encontrar al siguiente mapa de clores escasamente útil.
Mapa de colores
Este mapa de colores muestra un amplio juego de colores HTML que pueden ser usados en documentos HTML. El propósito de este gráfico es simplemente mostrar algunos color disponibles. La funcionalidad extra se encuentra únicamente a disposición en los navegadores que soporta JavaScript, y permite a los usuarios previsualizar una selección de colores en un documento de ejemplo.Imagen en html
El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos:- src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.
- Align= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.
- Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.
- WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.
- HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.
- BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.
<HTML>
<HEAD>
<TITLE>Ejemplo 12</TITLE>
</HEAD>
<BODY>
<H1>Imágenes</H1>
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé" ALIGN="RIGHT">
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Un bebé" ALIGN="LEFT">
Un texto cualquiera.
</BODY>
</HTML>
Cómo crear un hipervínculo en HTML
Esta es la formula:
<a + (espacio) + href= + ” (Abrimos comillas) + (la dirección URL que queremos) + ” (Cerramos comillas) + > + (Texto a mostrar) + </a>
LISTO. YA ESTÁ.
Quedaría así:
<a href=”http://juliorestrepo.wordpress.com”>El Blog de Julio Restrepo</a>
FORMATOS DE TEXTO Y LINEAS
Negrita
Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras.
La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo:
Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras.
La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo:
Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong> Este palabra la vamos a poner en negrita y esta otra también |
Cursiva
Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>).
También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de una u otra. Aquí os dejo un ejemplo:
Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em> Este palabra la vamos a poner en cursiva y esta otra también |
Subrayado
Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase importante:
<u>Así subrayaríamos una frase importante</u> Así subrayaríamos una frase importante |
Texto con espaciado simple o TT
TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>.
<tt>Esta frase la vamos a escribir de forma espaciada </tt> Esta frase la vamos a escribir de forma espaciada |
Palabras más grandes o más pequeñas
Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados(los explicaremos más adelante). Pues esta variación de tamaño la conseguiremos gracias a las etiquetas <big> y <small>.
Sus propios nombres en inglés nos indican cuáles serán sus funciones: <big> agrandará el texto y <small> lo disminuirá.
Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Pero estas etiquetas también la podemos combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos.
Un ejemplo sería el siguiente:
Esta palabra se va a escribir
<small>pequeñita</small>, esta se va a escribir
<big>más grande</big> y ésta <big><big>más
grande aún</big></big>. Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún. |
Superíndices y subíndices
Mediante el Html también podemos escribir fórmulas matemáticas. Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será tu etiqueta para un superíndice.
Así nos queda un ejemplo como el siguiente:
Gracias a estas etiquetas podemos escribir
cualquier formula matemática como esta: H <sub>2</sub> O o
números elevados a potencias 7<sup>3</sup>. Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H 2 O o números elevados a potencias 73. |
Texto tachado
Existen tres etiquetas diferentes que nos servirán para conseguir que nuestro texto se quede tacahado. Hablamos de las etiquetas <strike>, <s> y <del>. Ambas nos ofrecen el mismo resultado. Aquí tienes la muestra:
Si la palabra no me gusta la puedo tachar <strike>así</strike>, <s>así</s> o <del>así</del>. ¡Lo mismo me da!
Si la palabra no me gusta la puedo tachar
Saltos de línea
Ya os hemos comentado anteriormente que en html los saltos de línea escritos en código no son tal una vez el navegador interpreta el código. Vamos a explicaros esto con un claro ejemplo:
Ya os hemos comentado anteriormente que en html los saltos de línea escritos en código no son tal una vez el navegador interpreta el código. Vamos a explicaros esto con un claro ejemplo:
Puedes escribir un texto como este y el navegador no lo interpretará así |
Y se verá así:
Puedes escribir un texto como este y el navegador no lo interpretará así |
Existen dos etiquetas para indicar que queremos hacer un salto de línea normal. Son las etiquetas <br> y <br/> ambas son interpretadas igual por el navegador. Esta etiqueta no hace falta abrirla y cerrarla, sólo con escribirla el navegador ya la interpreta.
Así pues el texto anterior deberíamos escribirlo de la siguiente forma:
Puedes escribir un texto como este <br/> y el navegador no lo interpretará así |
Párrafos
Para indicarle al navegador que queremos poner ese texto en un párrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>.
Así el texto quedará dentro de un párrafo, separado por un espacio en blanco por encima y uno por abajo.
El texto del párrafo lo puedes alinear utilizando la etiqueta align utilizando los parámetros “center” (para alinearlo al centro), “right” (para alinearlo a la derecha), “left” (para alinearlo a la izquierda) y “justify” (para justificar el texto).
Un ejemplo de esta etiqueta con sus respectivos parámetros es el siguiente:
<p align="center">Este texto se alineará al centro</p> <p align="right">Este texto se alineará a la derecha</p> <p align="left">Este texto se alineará a la izquierda</p> |
que se verá así:
Este texto se alineará al centro
Este texto se alineará a la derecha
Este texto se alineará a la izquierda
Marquee.
La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>".
El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo
es configurable gracias a los siguientes atributos:
align: Este atributo nos indicará si el texto dentro
de la etiqueta se alineará en la zona alta del marquee ("top"),
en el medio ("middle") o en la parte baja ("bottom").
bgcolor: Con este atributo definiremos el color de fondo que
le queremos dar a la marquesina donde está el texto en movimiento.
height y width: El primero marca la altura que tendrá
la marquesina y el segundo la anchura de la misma.
scrollamount: Este atributo define la cantidad de píxeles
que queremos que se desplace el texto en cada movimiento. Por ejemplo: <marquee
scrollamount="3"> </marquee> significará que el
texto que vaya dentro de esa etiqueta se moverá a razón de tres
píxeles por movimiento.
scrolldelay: Éste nos define la velocidad del texto
que está dentro de la marquesina. A menor numeración, mayor velocidad.
Es decir, un texto irá más rápido si el scrolldelay es
5, que si el scrolldelay es 20.
loop: Este atributo nos determina si el movimiento se repetirá
o no. Si queremos que el movimiento sólo se repita unas veces determinadas
debemos indicárselo con un número, que será el número
de veces que se repita. Si queremos que se repita sólo 10 veces, su loop
será el siguiente: <marquee loop="10"> </marquee>
Si queremos que se repita debemos usar "infinite" o "-1".
Si no especificamos nada, se repetirá constantemente.
direction: Sirve para definir la dirección del movimiento:
"left" para la izquierda, "right" para la derecha, "top"
para arriba y "down" para abajo.
behavior: Gracias a este atributo podemos dar nuevos efectos
a la marquesina. Si no especificamos este atributo, el texto se moverá
de forma circular en el sentido que le hayamos marcado. Con behavior="scroll"
conseguiremos el mismo efecto: el texto se moverá circularmente.
Con behavior="slide" haremos que el texto se detenga al llegar
al final de la marquesina. Y con el behavior="alternate" el texto
irá y volverá de un lado a otro de la marquesina.
Nosotros hemos querido mostrarte un ejemplo de marquee. Aquí lo puedes
ver:
Estás viendo el ejemplo que hemos hecho nosotros.
Y el código de nuestro marquee es el siguiente:
<marquee bgcolor="#FFFFFF" width="50%"
scrolldelay="100" scrollamount="5" direction="left"
loop="infinite">Estás viendo el ejemplo que hemos hecho
nosotros. </marquee> |
Separadores en html: La etiqueta <hr>
Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.
La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size.
Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja. A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y la segunda dos. La diferencia es abismal
<hr size="20" />
<hr size="2" />
Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.
La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size.
Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja. A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y la segunda dos. La diferencia es abismal
<hr size="20" />
<hr size="2" />
Maquetación por tablas paso a paso
Las tablas en realidad están pensadas para presentar información
tabulada, es decir, usando filas y columnas. Sin embargo, este uso lo
podemos extender a toda la página web y crear una macrotabla que englobe
todos los contenidos que se van a mostrar en la página entera. Como las
tablas tienen filas y columnas, nos servirán para crear varias áreas
donde se mostrarán los contenidos maquetados como si fuera una revista o
un portal.
En este artículo vamos a crear un ejemplo medianamente sencillo de maquetación usando tablas. Lo podemos ver a continuación para hacernos una idea del objetivo buscado.
Como hemos visto, esta página está compuesta por una cabecera y un
cuerpo de página. Para crear la cabecera y el cuerpo utilizaremos tablas
independientes. Esto lo hacemos porque con dos tablas separadas para
simplificar el ejemplo, es decir, por comodidad y porque se hace más
fácil de diseñar. No obstante, como la distribución de columnas y filas
en la cabecera y cuerpo en este ejemplo es distinta, necesitamos
utilizar tablas independientes. Pero la razón más importante de poner
cabecera y cuerpo en tablas distintas es que en algunos navegadores,
cuando hay diseño con tablas, hasta que no se carga el código de la
tabla entera no se muestra nada. Si tuviéramos toda la página metida en
la misma tabla, el usuario no vería nada hasta que no se terminase de
cargar toda la página en su navegador. Si separamos las tablas de
cabecera y cuerpo conseguimos que la cabecera de la página se cargue y
se muestre rápidamente y luego, aunque tarde bastante en cargarse el
resto de la página con todo el cuerpo, por lo menos el usuario ve la
cabecera y puede saber que la página está por cargar del todo.
En este caso la cabecera es bastante típica, con el logotipo, un banner y
una barra de navegación horizontal. El código puede ser como el
siguiente.
<table width="778" cellspacing="1" cellpadding="3" border="0" bgcolor="#000000" align="center">
<tr>
<td width=180 align=center bgcolor="#ffffff"><img src="logo.gif" width="154" height="72" alt="Todo Clásico" border="0"></td>
<td bgcolor="#ffffff" align=center><img src="banner.gif" width="468" height="60" border="0"></td>
</tr>
<tr>
<td colspan=2 bgcolor="#ffffff" background="fondohorizontal.gif">
<font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda</font>
</td>
</tr>
</table>
<tr>
<td width=180 align=center bgcolor="#ffffff"><img src="logo.gif" width="154" height="72" alt="Todo Clásico" border="0"></td>
<td bgcolor="#ffffff" align=center><img src="banner.gif" width="468" height="60" border="0"></td>
</tr>
<tr>
<td colspan=2 bgcolor="#ffffff" background="fondohorizontal.gif">
<font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda</font>
</td>
</tr>
</table>
Si nos fijamos, la cabecera tenía un contorno negro. Esto lo conseguimos
de manera similar a como explicamos en un taller anterior de HTML: Recuadro elegante y sencillo con HTML.
Simplemente ponemos un color de fondo negro a la tabla, luego hacemos
que las casillas estén separadas (cellspacing) de un píxel y definimos
en blanco el color de todas las casillas. Así, la separación entre
casillas aparecerá en negro y las casillas en blanco. En este caso hemos
definido un margen entre el borde de la casilla y el contenido
(cellpadding) de tres pixels, para que el contenido de las casillas no
se pegue con el borde.
La barra de navegación horizontal ocupa todo el ancho de la cabecera,
por eso tiene un colspan=2. Le hemos puesto un fondo degradado para
mejorar el diseño un poco.
Otra cosa destacable es el ancho de la tabla, que lo hemos hecho de 778
píxeles. Podríamos haber hecho un diseño que ocupase todo el ancho de la
página, pero he creado un diseño no fluido con ancho fijo. Este tipo de
diseños, en mi opinión, son más sencillos de que queden bien. El tamaño
de 778 píxeles es porque es lo máximo que se puede poner que quepa en
definiciones de pantalla de 800 x 600. Podemos conocer más sobre diseños
fluidos en el artículo Páginas fluidas. También tenemos otro artículo donde podemos saber más sobre definiciones de pantalla.
Por su parte, el cuerpo tiene una distribución de tres columnas. El
código de la tabla que englobaría todo el cuerpo es el siguiente:
<table width="778" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width=150 valign="top">
<!--NAVEGADOR LATERAL IZQUIERDO-->
</td>
<td width=10></td>
<td width=484 valign="top">
<!--CUERPO PRINCIPAL-->
</td>
<td width=10></td>
<td width=124 align=center valign="top">
<!--LATERAL DERECHO-->
</td>
</tr>
</table>
<tr>
<td width=150 valign="top">
<!--NAVEGADOR LATERAL IZQUIERDO-->
</td>
<td width=10></td>
<td width=484 valign="top">
<!--CUERPO PRINCIPAL-->
</td>
<td width=10></td>
<td width=124 align=center valign="top">
<!--LATERAL DERECHO-->
</td>
</tr>
</table>