manual básico de html de masterhacks

www.masterhacks.net Página 1

HTML BÁSICO

Libro elaborado por “Master” para la comunidad de Masterhacks.

www.masterhacks.net

www.tienda-mh.com

www.radiomh.com

[email protected]

http://www.facebook.com/Mase3rhacks

www.youtube.com/masterhacksnet

http://www.masterhacks.net/

http://www.tienda-mh.com/

http://www.radiomh.com/

mailto:[email protected]

http://www.facebook.com/Mase3rhacks

http://www.youtube.com/masterhacksnet


INTRODUCCIÓN Este libro está diseñado para enseñar el lenguaje HTML básico, por lo que no veremos el tema de CSS, que se usa actualmente en HTML 5, pero lo que se verá en este documento, es lo que se usa para desarrollar cualquier página de internet. Al finalizar este libro se pretende que el lector pueda diseñar y desarrollar páginas web de calidad, aunque no profesionales, pensando en que este libro está pensado para las personas que no pretenden dedicarse al diseño web. Se usarán ejemplos de códigos de páginas web y algunos programas de diseño como Dream Viewer para crear los documentos web y programas como Filezilla para subir los documentos al servidor o hosting que se desee, por lo que también se verá de forma muy rápida algo sobre internet y almacenamiento web.


ÍNDICE

Definición de HTML ------------------------------------------------------------ 1 Sintaxis y etiquetas básicas de HTML -------------------------------------- 5 Atributos -------------------------------------------------------------------------- 7 Atributos de la etiqueta Body ------------------------------------------------ 7 Etiqueta de párrafo ------------------------------------------------------------- 10 Etiqueta de salto de línea ----------------------------------------------------- 13 Comentarios ---------------------------------------------------------------------- 15 Etiqueta Font --------------------------------------------------------------------- 16 Etiqueta Strong ------------------------------------------------------------------- 19 Etiqueta de estilo de texto itálica -------------------------------------------- 20 Etiqueta de estilo de texto tachado ----------------------------------------- 21 Etiqueta para enlaces o links -------------------------------------------------- 23 Enlace a correo electrónico ---------------------------------------------------- 26 Enlaces para descargas --------------------------------------------------------- 28 Tablas ------------------------------------------------------------------------------- 29 Uso de tablas como menús ---------------------------------------------------- 41 Uso de tablas como divisiones de página ---------------------------------- 42 Etiqueta de imágenes ----------------------------------------------------------- 45 Links en imágenes --------------------------------------------------------------- 51 Inserción de videos de otras webs ------------------------------------------ 53 Etiquetas meta ------------------------------------------------------------------- 56 Listas ordenadas y desordenadas ------------------------------------------- 58 Etiqueta de marquesina ------------------------------------------------------- 65


DEFINICIÓN DE HTML

HTML son las siglas de HyperText Markup Language, o en español, Lenguaje

de marcado de hipertexto. Es el lenguaje más utilizado para la elaboración de

páginas web.

Se usa con etiquetas, rodeadas con los signos; “<” y “>” donde va cada

etiqueta.

HTML también utiliza atributos dentro de las etiquetas, que son los

elementos dentro de la etiqueta, algo parecido a las funciones dentro de una

librería del lenguaje C. Estos atributos van separados por espacio y se puede

determinar al atributo como “nombre-valor” donde nombre es el nombre

que se le da al atributo y valor es la acción o el tipo de valor que se desea

usar en ese atributo, el valor va separado del nombre con un signo igual “=”,

esto se va a ver con mayor profundidad en los siguientes capítulos.

HTML es un lenguaje que no necesita un programa o compilador especial

para ser escrito o desarrollado, basta con cualquier editor de texto como el

bloc de notas de Windows para poder crear una página de internet.

Al crear una página con bloc de notas, se guarda en formato .html, y para

poder visualizarla, normalmente se ejecuta con el explorador de Windows o

con cualquier otro navegador de internet que el usuario tenga como

predeterminado. Este documento que se haya creado, puede ser visto en

cualquier navegador, incluso sin necesidad de conexión a internet (en caso

de que no contenga objetos que requieran una conexión a internet).

Esto en caso de que la página esté solo desarrollada en HTML, pero si tiene

aunque sea una línea de código en PHP, entonces si se requiere algún

servidor como Apache para poder visualizar la página.


SINTAXIS Y ETIQUETAS BÁSICAS DE HTML

Como se ha dicho, HTML es un lenguaje para crear páginas web, el cual se desarrolla por medio de etiquetas (tags) las cuales van entre signos de mayor qué y menor que, (<, >). La estructura de HTML es muy sencilla, normalmente se empieza con la etiqueta que indica el lenguaje que se está usando, la etiqueta html; <html>. Se debe tomar en cuenta que cada etiqueta debe tener un fin, como en el lenguaje C, que cada instrucción termina con el carácter punto y coma “;” en html las etiquetas terminan con una diagonal antes del nombre de la etiqueta; </etiqueta>, por lo que si se usa la etiqueta <html> por ejemplo, la sintaxis sería: <html> </html> Dentro de esa etiqueta; <html> Aquí </html> es donde va el contenido de la página (las etiquetas que conforman la estructura de la página). Para esto, se podría decir que la segunda etiqueta que se debe usar para formar una página web es la etiqueta de cabecera; <head> en donde comúnmente van datos referentes al autor y datos internos de la página como el título, metadatos, scripts de estilo, etc. La estructura queda de la siguiente forma: <html> <head> Contenido</head> </html>


Comúnmente, la primer etiqueta que se coloca dentro de la etiqueta <head> es la etiqueta de título <title>, de esta manera, podemos decir que el código de nuestra página quedaría así: <html> <head> <title>Mi pagina web</title> </head> </html> Después de la etiqueta <head> sigue la etiqueta del cuerpo de la página; <body> que es en la que se va a colocar todo el contenido de la página web visible para el visitante. La estructura quedaría de la siguiente manera: <html> <head> <title>Mi pagina web</title> </head> <body> Contenido de la página </body> </html> La mayor parte del contenido de la página va dentro de la etiqueta <body>. Hasta aquí, se podría decir que ya está construido el esqueleto de la página web, pero todavía falta el contenido que se le vaya a poner a la página web.


ATRIBUTOS Las etiquetas de HTML tienen atributos que son los elementos que acompañan a cada etiqueta para dar un formato a lo que se quiere hacer, su sintaxis es; etiqueta=”valor” donde la valor es el atributo de la etiqueta, el cual va entre comillas y separado de la etiqueta por un signo de igual qué. Cada etiqueta tiene varios atributos, algunos son esenciales para el funcionamiento de la etiqueta, y otros son sólo como adorno. No veremos todos los atributos de todas las etiquetas, ya que no es necesario, pero sí los más importantes. ATRIBUTOS DE LA ETIQUETA BODY La etiqueta del cuerpo de la página (<body>) tiene algunos atributos, los más usados son bgcolor, background, link, alink, vlink, entre otros. El atributo bgcolor, es usado para dar un color de fondo a la página web, los colores se pueden poner en inglés, o en código hexadecimal, la sintaxis es; <body bgcolor=”color”>. Nuestra página quedaría así: <html> <head> <title>Mi pagina web</title> </head> <body bgcolor=”#000000”> Contenido de la página </body> </html> Aquí se usó un código hexadecimal (#000000) que equivale al color negro.


Y en el navegador, se vería de la siguiente manera:

Aquí ya se dio el primer paso para el formato de nuestra página web. ATRIBUTO BACKGROUND En la etiqueta <body> también existe el atributo “background” que nos sirve para poner una imagen como fondo en la página web. La sintaxis es; <body background=”rutadeimagen”>


Si por ejemplo tenemos una imagen llamada fondo.jpg, nuestro código quedaría de la siguiente manera: <html> <head> <title>Mi pagina web</title> </head> <body background="fondo.jpg"> Contenido de la página </body> </html> Y al abrirla en el navegador se vería lo siguiente:

Si la imagen estuviera en otra carpeta, por ejemplo, una llamada imágenes, el código sería este: <body background=”imágenes/fondo.jpg”>


ATRIBUTOS LINK, ALINK Y VLINK Por default los links que se ponen una página web, salen de color azul y al darles clic cambian a color morado, si esto no nos gusta, tenemos la opción de cambiar los colores. El atributo link es el color del link o enlace que no se ha visitado nunca. El atributo alink es el color que sale justo al dar clic sobre el enlace. El atributo vlink es el color del link que ya se ha visitado. Aplicando estos tres atributos para un color rojo a las tres opciones del link, nuestro código queda: <html> <head> <title>Mi pagina web</title> </head> <body background="fondo.jpg" link="red" alink="red" vlink="red"> Contenido de la página </body> </html> Aquí no se mostrará ejemplo gráfico ya que no se ha visto la etiqueta de enlaces o links, pero se mostrará en los siguientes capítulos. ETIQUETA DE PÁRRAFO <P> Para escribir una línea de texto o un párrafo, normalmente se usa la etiqueta <p>, la sintaxis es: <p>El texto que se va a escribir</p>


Como ejemplo de esto, nuestro código queda así: <html> <head> <title>Mi pagina web</title> </head> <body bgcolor=”#FFFFFF” " link="red" alink="red" vlink="red"> <p>Este es un ejemplo del desarrollo de una pagina web en HTML</p> </body> </html> Y visualizado en el navegador:


La etiqueta <p> también tiene atributos, uno de ellos es “align” que sirve para determinar la alineación del texto en la página. Con este atributo podemos especificar de qué lado queremos el texto, ya sea izquierdo, que por default se acomoda de ese lado, centrado, justificado o del lado derecho. La sintaxis es: <p align=”left”> para texto alineado a la izquierda <p align=”center”> para texto centrado <p align=”justify”> para texto justificado <p align=”right”> para texto alineado a la derecha. Así si queremos que el texto en nuestra página quede centrado, el código queda así: <html> <head> <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center">Este es un ejemplo del desarrollo de una pagina web en HTML</p> </body> </html> En este código ya agregamos el atributo “center” a la etiqueta <p> haciendo que el texto quede centrado.


Y en el navegador se ve así:

ETIQUETA <BR> En un documento web, también se requiere que en algunos textos, como por ejemplo listas, se continúe con el texto en el renglón de abajo. Para esto existe la etiqueta <br> que nos proporciona un salto de línea en cualquier texto. La sintaxis es: <br> Comúnmente se escribe <br /> porque no es necesaria la etiqueta de cierre, de hecho, en esta etiqueta no existe la etiqueta de cierre, por lo que para indicar que se termina la etiqueta, se coloca la diagonal dentro del mismo parámetro.


Aplicando la etiqueta a nuestra página, nos queda el siguiente código: <html> <head> <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center">Este es un ejemplo del desarrollo de una pagina web en <br />HTML</p> </body> </html> Y gráficamente nos queda:

Nótese que la etiqueta <br> se encuentra dentro de la etiqueta <p> por lo que no se pierde la alineación centrada del texto. Pero si <br> estuviera después de <p>, cualquier texto que se escriba en <br> tendrá la alineación normal. COMENTARIOS Al igual que en otros lenguajes de programación, en HTML se usan comentarios en el código, esto puede servir para saber qué hace alguna etiqueta o saber los datos del autor o simplemente cualquier anotación que el desarrollador quiera hacer en el código. Los comentarios no se verán en la página web y las etiquetas que pudieran estar dentro de los comentarios no tendrán valor. La sintaxis para un comentario es:  Esto puede ir en cualquier parte del código. Como ejemplo, pondremos un comentario en el encabezado de nuestro código: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center">Este es un ejemplo del desarrollo de una pagina web en <br />HTML</p> </body> </html> Y como ya se dijo, lo que esté dentro de  no se verá en el navegador.


ETIQUETA FONT La etiqueta <Font> es esencial en HTML, ya que nos permite crear un estilo de fuente para cada texto que queramos. La etiqueta <Font> va después de las etiquetas que nos sirvan para poner un texto como <p>, <span>, <li>, etc. La sintaxis es; <Font atributo=”valor”>Texto</Font> Font tiene tres atributos principales que nos sirven para el tamaño de la letra “size”, color de la letra “color” y tipo de letra “face”. Para el atributo “size” se usan números como 1, 2, 3… Algunas personas usan el signo más (+) o usan números de 10 en adelante, también es correcto. La sintaxis es; <Font size=”3”>Texto</Font> Para el color hay dos opciones; usar los nombres de los colores en inglés o usar código hexadecimal, es recomendable usar códigos hexadecimales para una mayor variedad de colores, Dreamviewer incluye la herramienta de selector de color con códigos hexadecimales.


TABLA DE COLORES HEXADECIMALES

Sintaxis para el atributo “color”: <Font color=”#000000”>Texto</Font> Para el atributo “face” se deben usar los nombres de las fuentes o tipo de letra, por ejemplo, verdana, tahoma, calibri, etc. La sintaxis es: <Font face=”calibri”>Texto</Font> Aplicando los tres atributos a nuestro código, queda así: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri">Este es un ejemplo del desarrollo de una pagina web en <br />HTML</font></p> </body> </html> Y en el navegador se visualizará:

ETIQUETA STRONG Cuando una persona escribe textos en páginas web, siempre surge la necesidad de colocar alguna frase o palabra en letras negritas, para esto existe la etiqueta <strong> que es muy similar a la etiqueta <b> pero es más frecuente el uso de <strong>. La sintaxis es; <strong>Texto en negritas</strong> Esta etiqueta va antes del texto, y después de las etiquetas que se pongan, por ejemplo una etiqueta de párrafo y una de texto, para mejorar el ejemplo, la sintaxis sería; <p><font size=”3”><strong>Mi texto</strong></font></p> Aplicando esta etiqueta a nuestro código, queda de la siguiente manera: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</strong></font></p> </body> </html>

ETIQUETA DE ESTILO DE TEXTO PARA DAR UN EFECTO DE LETRAS ITÁLICAS Si se requiere escribir un texto de forma itálica o cursiva, se usa la etiqueta <i> que al igual que la etiqueta <strong> se escribe antes del texto. La sintaxis es; <i>Texto en cursiva</i> Si se requiere poner también una etiqueta <strong> aquí no importa el órden de estas dos etiquetas, siempre y cuando vayan antes del texto, por ejemplo; <p><font color=”red”><strong><i>Un título</i></strong></font></p> Aplicando esta etiqueta a nuestro código, nos queda de la siguiente manera; <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> </body> </html>


Y gráficamente se visualiza así:

ETIQUETA DE ESTILO DE TEXTO TACHADO Al escribir páginas web también se pueden poner téxtos tachados, para esto se usa la etiqueta <s> y se usa de la misma forma que la etiqueta <i>. La sintaxis es; <s>Texto</s>

Aplicando esta etiqueta a nuestro código, en otro párrafo de texto, nos queda de la siguiente manera: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><font size="4" color="#000000" face="calibri"><s>Texto tachado</s></font></p> </body> </html> Y en el navegador se ve de la siguiente forma:


ENLACES Los vínculos, también conocidos como enlaces o links, sirven para dirigir al usuario a determinado documento web, para abrir imágenes, para realizar descargas, para enviar correos electrónicos, etc. La etiqueta que se usa en HTML para esto es <a> y el atributo que siempre se usa en esta etiqueta es “href” que es donde se indicará la ruta del link. La sintaxis es; <a href=”documento”>Texto del link</a> Por ejemplo, si se requiere que el link abra la página de Google, el código queda; <a href=”http://www.google.com”>Google</a> Algo muy importante que se debe tener en cuenta con los links, es distinguir entre una página web externa o un documento dentro de la misma página web. Nos damos cuenta de esto simplemente con el prefijo http:// que nos indica que se trata de una página web externa. Por ejemplo, si estamos dentro de una página y queremos abrir la sección de descargas, el código del link debe ser; <a href=”descargas.html”>Descargas</a> De esta forma, se abre el documento descargas en la misma página web, también hay que tener muy en cuenta escribir bien la extensión del archivo. Un error común, hablando de este mismo ejemplo, sería agregar el prefijo http://, de la manera: <a href=”http://descargas.html”>Descargas</a> Esto sería un gran error, ya que al dar clic ahí, nos abrirá la página www.descargas.html en lugar de la sección dentro de la misma página.

Ahora, hablando de páginas web externas, se debe poner el prefijo http:// como ya se mencionó antes, pero si por ejemplo, al querer poner un link a Google el desarrollador deja el código así; <a href=”google.com”>Google</a> Se convertiría en otro error fatal, ya que al dar clic sobre ese vínculo, el navegador nos abrirá la sección google.com en lugar de la página de Google, entonces, si por ejemplo estamos en la página de masterhacks.net, al dar clic en ese link, tratará de abrirse la página www.masterhacks.net/google.com. Vamos a agregar un link a Google en nuestro código, para ver cómo se vería en el navegador: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> </body> </html> Como se puede apreciar, la etiqueta quedó dentro de una etiqueta de párrafo, con el fin de ajustarse a la línea que se desea y a la alineación del texto.


En el navegador, el link se visualiza de la siguiente manera:

Como se sabe, el link se ve de color rojo porque en la etiqueta <body> ya se predeterminó un estilo de color para los links. Otro atributo de la etiqueta <a> es “target” que nos servirá para determinar cómo se abrirá el destino vinculado, ya sea en la misma página, o en una nueva ventana. Un valor importante para el atributo “target” es _blank, que nos servirá para hacer que el documento del link se abra en una ventana nueva. La sintaxis es; <a href=”documento” target=”_blank”>Texto del link</a>


Esto es útil cuando el link es para una página externa y no queramos que el usuario salga de nuestra página para visitar la otra. Otro valor es _self, que nos servirá para determinar que el documento del link se abra dentro de la misma página, la sintaxis es; <a href=”documento” target=”_self”>Texto del link</a> Esto es útil para los links del menú, categorías, etc. Cuando queremos que el contenido de los links se abran en la misma ventana por ser contenido de la misma página. El uso de este valor no es alto, ya que el agregarlo o no, da el mismo efecto, ya que al crear el link sin el atributo target, hace que se abra dentro de la misma página por default. ENLACES A DIRECCIONES DE CORREO ELECTRÓNICO Los navegadores nuevos, reconocen el atributo “mailto” que hace que al dar clic en el enlace, el navegador abra el programa de correo electrónico del usuario, por ejemplo, Microsoft Outlook, y coloque automáticamente la dirección del correo del enlace en el campo to: y esto haga más rápido el envío de un correo a determinada persona. La sintaxis es: <a href=”mailto:[email protected]”>Contacto</a> Lo agregaremos a nuestro código como una opción de contacto, en una esquina.

El código queda de la siguiente manera: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <p><a href="mailto:[email protected]">Contacto</a> </body> </html> En el navegador se ve así:


Y al dar clic sobre la palabra contacto, se abrirá el programa que el usuario use para correo electrónico. ENLACES PARA DESCARGAS También es posible crear links para descargas de archivos, de la misma forma que se hace con los documentos web, por ejemplo, si queremos descargar un una carpeta rar, llamada imágenes.rar, podemos crear un link de descarga directa, el código queda: <a href=”imágenes.rar”>Descargar</a> Esto en el caso de que el archivo se encuentre dentro de la carpeta raíz, pero si se encuentra en alguna carpeta, por ejemplo descargas, hay que agregar la ruta completa; <a href=”descargas/imágenes.rar”>Descargar</a> Y al dar clic sobre ese link, se debe iniciar la descarga. Pero esto no es algo oficial en todos los navegadores, ya que algunos, en lugar de comenzar la descarga, tratan de abrir la página imágenes.rar y esto causa un error. Los navegadores recientes, tratan de abrir el archivo a descargar, dentro del navegador, esto pasa cuando el archivo es un pdf, doc, o algo parecido, con el fin de evitar descargas indeseadas y saturar el disco duro, ya el usuario tiene la decisión de guardar o no el archivo.

TABLAS Dentro del HTML, las tablas son algo muy importante en el desarrollo de páginas web, pueden tener varios usos, en usuarios que apenas inician en el diseño web, pueden usarlas para menús o divisiones de página, esto lo veremos en este libro. La etiqueta de las tablas es <table>, esta etiqueta tiene muchos atributos, de los cuales explicaremos los más importantes. Las tablas tienen dos componentes principales, filas y celdas, cuyas etiquetas son <td> y <tr> respectivamente. La sintaxis usando estas tres etiquetas es; <table> <tr><td>Texto</td></tr> </table> Insertando esto en nuestro código, queda así: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table> <tr><td>Texto</td></tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html> Y en el navegador se puede ver de la siguiente manera:


Como se pueden dar cuenta, no aparece la tabla, debido a que por default, las tablas aparecen sin borde. Si se requiere que la tabla sea visible, se usa el atributo “border” seguido de los valores numéricos 1, 2, 3, etc. En nuestro código queda de la siguiente manera:

<html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table border="1"> <tr><td>Texto</td></tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html> Y ahora si se puede ver la tabla en el navegador:

Las tablas también se pueden alinear igual que el texto, a la derecha, centradas o a la izquierda, esto con el atributo “align” y los valores left, center o right. Si queremos que esta tabla quede en el centro, nuestro código cambia nuevamente al siguiente: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table align="center" border="1"> <tr><td>Texto</td></tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html> Vista en el navegador:

Y si se requiere ajustar el tamaño de la tabla, usamos los atributos “width” para el ancho y “height” para el largo, si queremos que nuestra tabla sea una celda rectangular de 200X70, nuestro código queda: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table align="center" border="1" width="200" height="70"> <tr><td>Texto</td></tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html> Y si queremos que el color del borde sea diferente, usamos el atributo “bordercolor”, de la siguiente manera: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table align="center" border="1" width="200" height="70" bordercolor="#0000FF"> <tr><td>Texto</td></tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html>


Y de forma visual tenemos:

En la imagen se puede apreciar que el texto está alineado en el centro de la celda, esto es una opción por default en las tablas, siempre se empieza a escribir del centro, pero si queremos empezar desde arriba o abajo, utilizamos el atributo “valign” dentro de la etiqueta de la celda, en este caso, <td> con los valores top, middle o bottom, para nuestro código usaremos top, de la siguiente manera:

<html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table align="center" border="1" width="200" height="70" bordercolor="#0000FF"> <tr><td valign="top">Texto</td></tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html> Y en el navegador queda así:

Como se puede ver, el texto ya queda arriba de la celda, pero otro problema que podríamos tener es que siempre queda alineado a la izquierda, en este caso, dentro de la misma etiqueta <td> usamos el atributo “align” con los valores left, center, justify o right. En nuestro código usaremos center; <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table align="center" border="1" width="200" height="70" bordercolor="#0000FF"> <tr><td valign="top" align="center">Texto</td></tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html> Las etiquetas de las tablas no nos permiten modificar el color, tamaño y tipo de letra, por lo que si queremos editar esto, tendríamos que meter una etiqueta font, con los atributos que vimos anteriormente, lo aplicaremos a nuestro código:

<html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table align="center" border="1" width="200" height="70" bordercolor="#0000FF"> <tr><td valign="top" align="center"><font size="3" color="#0000FF" face="verdana">Texto</font></td></tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html> Otro atributo importante para las tablas es “bgcolor” que nos servirá para cambiar de color el fondo de toda la tabla, si lo usamos dentro de <table> o de cada celda, si lo usamos dentro de <td>, asimismo, en cada fila, dentro de <td>. En nuestro caso, lo vamos a aplicar a la celda, en <td>, el código queda de la siguiente manera:

<html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table align="center" border="1" width="200" height="70" bordercolor="#0000FF"> <tr><td bgcolor="#00FFFF" valign="top" align="center"><font size="3" color="#0000FF" face="verdana">Texto</font></td></tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html> Y en el navegador ya se puede ver de la siguiente manera:

De la misma manera, podemos agregar una imagen como fondo de la celda o tabla, con el atributo “background”, la sintaxis es: <table background=”images/imagen.jpg”><tr><td>contenido</tr></td></table> Suponiendo que la imagen esté en la carpeta imágenes. Ahora, vamos a aplicar lo que se ha visto hasta ahorita, en una tabla que contenga cuatro celdas, con distintos componentes, como se aprecia en el código siguiente: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <p align="center"><font size="4" color="6633FF" face="calibri"><strong><i>Este es un ejemplo del desarrollo de una pagina web en <br />HTML</i></strong></font></p> <p align="center"><a href="http://www.google.com">Google</a></p> <table width="304" bordercolor="#00FF00" height="157" border="3" align="center"> <tr valign="top"> <td bgcolor="#000000" align="center"><font size="4" color="#FFFFFF" face="calibri">Texto 1</font></td> <td bgcolor="#660099"><font size="4" face="calibri"><a href="http://www.google.com" target="_blank">Google</a></font></td> </tr> <tr valign="top"> <td bgcolor="#CCCCCC">Texto 2</td> <td bgcolor="#FFFF00"><font size="4" color="#000000" face="calibri">Texto 3</font></td> </tr> </table> <p><a href="mailto:[email protected]">Contacto</a> </body> </html>


Y viéndolo en el navegador, queda de la siguiente manera:

USO DE TABLAS COMO MENÚS Si no te interesa saber nada de CSS, tu opción para crear menús sencillos puede ser con tablas. Vamos a limpiar nuestro código, para empezar con el cuerpo de la página, con un menú horizontal de 4 categorías; <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> </body> </html> Visto desde el navegador queda:


De esta forma es como se pueden usar las tablas como menús. USO DE TABLAS COMO DIVISIONES DE PÁGINA Lo más apropiado y profesional para dividir un documento web es usar la etiqueta <div> pero ésta tiene que ir acompañada del atributo “id” que llama a un estilo que se encuentre dentro de la hoja de estilos css, pero como en este caso no entraremos al tema de CSS, usaremos las tablas para dividir la página en secciones. Podemos crear una tabla con dos celdas, para alejar el contenido un poco del lado izquierdo, para ver el ejemplo más claro, lo pondremos en el código:

<html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> <p></p> <table width="792" height="280" border="1"> <tr> <td width="62"> </td> <td width="720">Contenido de la página </td> </tr> </table> </body> </html> De forma gráfica tenemos:


Como se puede ver, alejamos el contenido un poco del borde izquierdo del navegador. Ahora, para dar un mejor efecto, podemos quitar el borde de la tabla, para que se vea así:


Así podemos crear varias tablas para usarlas como divisiones, e incluso insertar tablas dentro de las tablas, si se da el caso. ETIQUETA DE IMÁGENES Para insertar imágenes en nuestra página web, usamos la etiqueta <img> con sus respectivos atributos, el que se usa siempre es “src” ya que con este atributo elegimos la imagen que queremos usar. La sintaxis es: <img src=”imagen.jpg” /> Nótese que esta etiqueta no requiere la etiqueta de cierre </img> ya que es innecesaria para la etiqueta de imágenes, basta con dejar un espacio después del último atributo, colocar la diagonal y cerrar la etiqueta. Al igual que con la etiqueta <a> se debe cuidar la extensión del archivo, esta etiqueta soporta todas las extensiones de imagen como jpg, jpeg, png, gif, etc. Y se debe poner correctamente el directorio donde se encuentre la imagen. Si la imagen está en una página web externa, se debe poner la ruta completa de la página web, incluyendo el http://. Agregando como ejemplo, la imagen fondo que tengo en mi carpeta raíz a nuestro código, quedaría así:

<html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> <p></p> <table width="792" height="280" border="0"> <tr> <td width="62"> </td> <td width="720" valign="top"><img src="fondo.jpg" /></td> </tr> </table> </body> </html> Y visto en el navegador, queda de la siguiente manera:

Como se puede apreciar, la imagen queda en su tamaño original, en este caso, la imagen es muy grande. Podemos modificar el tamaño con los atributos vistos antes, “width” y “height”, aplicándolos a nuestro código, quedaría así: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table>


<p></p> <table width="792" height="280" border="0"> <tr> <td width="62"> </td> <td width="720" valign="top"><img src="fondo.jpg" width="425" height="184" /></td> </tr> </table> </body> </html> Le podemos poner los valores que queramos, dependiendo de nuestras necesidades. Gráficamente se puede observar:

Otro atributo que podemos usar es “border” para dar un borde a la imagen, se utiliza con números también. Sintaxis: <img src=”imagen.jpg” border=”2” /> Aplicando esto a nuestro código, nos queda: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> <p></p> <table width="792" height="280" border="0"> <tr> <td width="62"> </td> <td width="720" valign="top" align="center"><img src="fondo.jpg" width="425" height="184" border="3" /></td> </tr> </table> </body> </html>

Y si queremos que al poner el cursor sobre la imagen nos salga una pequeña descripción o el nombre de la imagen, utilizamos el atributo “title” como lo indica su sintaxis: <img src=”imagen.jpg” title=”titulo de la imagen” /> En nuestro código, puede quedar así: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> <p></p> <table width="792" height="280" border="0"> <tr> <td width="62"> </td> <td width="720" valign="top" align="center"><img src="fondo.jpg" width="425" height="184" border="3" title="Circuito impreso" /></td> </tr> </table> </body> </html>


Y visualmente se verá:

Ese letrerito saldrá en cualquier parte donde coloquemos el cursor. LINKS EN LAS IMÁGENES En las imágenes también se pueden insertar links, para que al dar clic en la imagen, ésta nos mande al documento o página web que se requiera. Esto es más usado con los banners en las páginas web. Para poner un link en una imagen, se debe poner primero la etiqueta <a> seguida de la etiqueta <img> así: <a href=”http://www.google.com”><img src=”banner.jpg” /></a>

Aplicándolo a nuestro código, quedaría: <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#FFFFFF" link="red" alink="red" vlink="red"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> <p></p> <table width="792" height="280" border="0"> <tr> <td width="62"> </td> <td width="720" valign="top" align="center"><a href="http://www.google.com"><img src="fondo.jpg" width="425" height="184" border="3" title="Circuito impreso" /></a></td> </tr> </table> </body> </html> Entonces, al dar clic sobre la imagen, nos mandará a Google.

INSERTAR VIDEOS DE OTRAS PÁGINAS WEB Muchas veces es necesario insertar videos de otras páginas web, en especial de Youtube, por el motivo de que la mayoría de las veces el hosting en el que esté alojada nuestra página web no tenga el espacio suficiente para guardar videos. Entonces, necesitaremos uso de las etiquetas <objetct>, <embed> Y algunas veces <iframe> cuando se trata de frames, dependiendo de la página que nos proporcione el código. En este caso, trabajaremos con Youtube, quien usa la etiqueta <iframe>. Primero, para obtener el código de cualquier video, estando en youtube, abajo del video que estemos viendo, damos clic en compartir y luego en insertar. Entonces nos saldrá el código html para insertarlo en nuestra web. Podemos configurar algunas opciones que nos muestra ahí. Una vez con el código, lo ponemos donde queramos. Vamos a copiar un código y ponerlo en nuestra página de ejemplo, con unos arreglos para hacerla un poco más estética. <html> <head>  <title>Mi pagina web</title> </head> <body bgcolor="#000000" link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> <p></p>


<table width="792" height="280" border="0"> <tr> <td width="62"> </td> <td width="720" valign="top" align="center"><p><font size="3" color="#FFFF00" face="calibri">VIDEO 1</font></p> <p><iframe width="420" height="315" src="http://www.youtube.com/embed/oEOGiuUgRmo?rel=0" frameborder="0" allowfullscreen></iframe></p></td> </tr> </table> <table width="791" height="64" border="0"> <tr> <td width="62"> </td> <td width="719" align="center"><a href="http://www.google.com"><img src="http://www.efectosocial.net/wp-content/uploads/2012/04/google.jpg" width="425" height="184" border="3" title="Ir a google" /></a> </table> </body> </html> Como se pueden dar cuenta, modificamos el color de fondo, de los links, agregamos una nueva tabla donde hay una imagen con un enlace a google y agregamos el video. Gráficamente se visualiza así:


Y así se pueden hacer miles de combinaciones para lograr un buen diseño con los conocimientos básico del HTML, solo es necesario tener imaginación y paciencia para trabajar.


ETIQUETAS META Las etiquetas meta son parte esencial de la página cuando se quiere que tengan buen posicionamiento en internet, ya que son utilizadas por buscadores. La etiqueta es <meta> y se usa dentro de la etiqueta <head>. Se usan dos atributos principales, “name” para el nombre de la información y “content” para el contenido de la información. Sintaxis: <meta name=”valor” content=”contenido” /> Esta etiqueta tampoco requiere la etiqueta de cierre </meta>, igual que la etiqueta <img> sólo se pone una diagonal después del último atributo. En el atributo “name” pueden ir los valores author, para poner información sobre el autor de la página. Classification, para poner información sobre la clasificación de la página. Description, para poner una descripción sobre la página. Generator, para poner el nombre o información del programa en que fue creada la web, por ejemplo, Dreamweaver. Keywords, para poner las palabras clave de la página web, quizás sea el valor más importante de esta etiqueta. Los valores más usados son author, classification, description y keywords. Al aplicar ésta etiqueta en nuestro código, puede quedar así:

<html> <head>  <meta name="description" content="Pagina de ejemplo del libro de html de masterhacks" /> <meta name="author" content="Masterhacks" /> <meta name="keywords" content="pagina, ejemplo, libro, manual, html, masterhacks, aprender, tutorial" /> <title>Mi pagina web</title> </head> <body bgcolor="#000000" link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> <p></p> <table width="792" height="280" border="0"> <tr> <td width="62"> </td> <td width="720" valign="top" align="center"><p><font size="3" color="#FFFF00" face="calibri">VIDEO 1</font></p> <p><iframe width="420" height="315" src="http://www.youtube.com/embed/oEOGiuUgRmo?rel=0" frameborder="0" allowfullscreen></iframe></p></td> </tr> </table> <table width="791" height="64" border="0"> <tr> <td width="62"> </td>


<td width="719" align="center"><a href="http://www.google.com"><img src="http://www.efectosocial.net/wp-content/uploads/2012/04/google.jpg" width="425" height="184" border="3" title="Ir a google" /></a> </table> </body> </html> Si se dan cuenta, en la etiqueta donde están las palabras clave, siempre van separadas por comas. Y tienen que ir las palabras referentes a la temática de la página web. LISTAS Muchas veces tenemos la necesidad de usar listas en una página web, ya sea para enumerar cosas, o para hacer menús verticales con o sin hoja de estilos. Hay dos tipos de listas, ordenadas y no ordenadas. Las listas no ordenadas van dentro de la etiqueta <ul> y a su vez, dentro de esta etiqueta va la etiqueta <li> que es donde pondremos el contenido de la lista, se podría decir que por cada etiqueta <li> se pone un elemento, de manera que si tenemos 3 elementos de la lista, se tienen que poner tres etiquetas <li>. Sintaxis: <ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul>

La etiqueta <li> tiene el atributo “type” que nos sirve para poner un símbolo al principio de cada elemento, podemos escoger entre tres valores, circle, square y disc. Un ejemplo en nuestro código usando el valor square es: <html> <head>  <meta name="description" content="Pagina de ejemplo del libro de html de masterhacks" /> <meta name="author" content="Masterhacks" /> <meta name="keywords" content="pagina, ejemplo, libro, manual, html, masterhacks, aprender, tutorial" /> <title>Mi pagina web</title> </head> <body bgcolor="#000000" link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF"> <table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> <table bgcolor="#FFFFFF" width="714" height="47" border="0"> <tr> <td><p><ul> <li type="square"><font size="3" color="#000000">Elemento 1</font></li> <li type="square"><font size="3" color="#000000">Elemento 2</font></li> </ul></p></td> </tr> </table>


<table width="792" height="280" border="0"> <tr> <td width="62"> </td> <td width="720" valign="top" align="center"><p><font size="3" color="#FFFF00" face="calibri">VIDEO 1</font></p> <p><iframe width="420" height="315" src="http://www.youtube.com/embed/oEOGiuUgRmo?rel=0" frameborder="0" allowfullscreen></iframe></p></td> </tr> </table> <table width="791" height="64" border="0"> <tr> <td width="62"> </td> <td width="719" align="center"><a href="http://www.google.com"><img src="http://www.efectosocial.net/wp-content/uploads/2012/04/google.jpg" width="425" height="184" border="3" title="Ir a google" /></a> </table> </body> </html> Que gráficamente se ve así:


Y así sale una especie de cuadrado cuando se usa el valor square, para los otros dos valores cambia el símbolo, y si no se quiere usar ninguno, simplemente no se usa el atributo style.

LISTAS ORDENADAS Las listas ordenadas son las que en lugar del símbolo al inicio de cada elemento, se usan números para tener un control numérico de los elementos. Para esto, se usa la etiqueta <ol> y al igual que <ul> se utiliza <li> para cada elemento de la lista. Sintaxis: <ol> <li>Elemento 1</li> <li>Elemento 2</li> </ol> De esta forma, en el navegador se verá una lista parecida a esta: 1.- Elemento 1 2.- Elemento 2 Ya que por default empieza a poner los valores numéricos desde el 1. Pero si queremos que por ejemplo empiece en el 10, usamos el atributo “value”. Aplicando este atributo a nuestro código, queda de la siguiente manera: <html> <head>  <meta name="description" content="Pagina de ejemplo del libro de html de masterhacks" /> <meta name="author" content="Masterhacks" /> <meta name="keywords" content="pagina, ejemplo, libro, manual, html, masterhacks, aprender, tutorial" /> <title>Mi pagina web</title> </head> <body bgcolor="#000000" link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF">


<table bgcolor="#0000FF" bordercolor="#FFFF00" width="715" height="50" border="2"> <tr> <td align="center"><a href="#">INICIO</a></td> <td align="center"><a href="#">ACERCA DE</a></td> <td align="center"><a href="#">AYUDA</a></td> <td align="center"><a href="#">CONTACTO</a></td> </tr> </table> <table bgcolor="#FFFFFF" width="714" height="47" border="0"> <tr> <td><p><ol> <li value="10"><font size="3" color="#000000">Elemento 1</font></li> <li><font size="3" color="#000000">Elemento 2</font></li> </ol></p></td> </tr> </table> <table width="792" height="280" border="0"> <tr> <td width="62"> </td> <td width="720" valign="top" align="center"><p><font size="3" color="#FFFF00" face="calibri">VIDEO 1</font></p> <p><iframe width="420" height="315" src="http://www.youtube.com/embed/oEOGiuUgRmo?rel=0" frameborder="0" allowfullscreen></iframe></p></td> </tr> </table> <table width="791" height="64" border="0"> <tr> <td width="62"> </td> <td width="719" align="center"><a href="http://www.google.com"><img src="http://www.efectosocial.net/wp-content/uploads/2012/04/google.jpg" width="425" height="184" border="3" title="Ir a google" /></a> </table>


</body> </html> Y en el navegador se puede apreciar:

Se debe notar que el atributo “value” solo va en el primer elemento, los demás siguen la numeración automáticamente.


ETIQUETA DE MARQUESINA La etiqueta <marquee> nos sirve para dar un efecto de movimiento al texto, al escribir; <marquee>Texto</marquee> El texto saldrá del lado derecho de la página web y atravesará todo el ancho de la página hasta meterse por el lado izquierdo y hacerlo nuevamente. Por default, la etiqueta ocupa todo el ancho de la página, pero se le puede modificar esto con los atributos “width” y “height”. Con el atributo “direction” podemos hacer que el texto se desplace hacia la derecha o izquierda, con right o left. También se puede cambiar la velocidad en que se mueve el texto, con el atributo “scrollamount” se le dan valores numéricos, por ejemplo, si ponemos un 50, es muy rápido y será muy difícil leer el texto. Sintaxis: <marquee scrollamount=”20”>Texto moviéndose</marquee> Esta etiqueta también se puede poner en tablas, imágenes, o cualquier otro contenido de la página, para hacer que tenga movimiento y dar un aspecto divertido. Con esto concluimos este manual para personas que se inician en este lenguaje. No incluimos las demás etiquetas y atributos del HTML porque este manual está diseñado para aprender las bases del HTML para empezar bien con una versión nueva del lenguaje, como es HTML5 y aprender también sobre CSS. Espera nuestros manuales de CSS, PHP, MySQL, Jquery, etc.


www.masterhacks.net www.tienda-mh.com [email protected] Manual terminado el 19 de Mayo del 2012 Todos los derechos reservados © 2012 Masterhacks.

http://www.masterhacks.net/

http://www.tienda-mh.com/

manual básico de html de masterhacks

Documents