26
Que es HTML HTML, siglas de Hyper Text Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene sólo texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado. Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido diversas características, con el fin de hacerlo más eficiente y facilitar el desarrollo de páginas web compatibles con distintos navegadores y plataformas (PC de escritorio, portátiles, teléfonos inteligentes, tabletas, etc.). Sin embargo, para interpretar correctamente una nueva versión de HTML, los desarrolladores de navegadores web deben incorporar estos cambios y el usuario debe ser capaz de usar la nueva versión del navegador con los cambios incorporados. Normalmente los cambios son aplicados mediante parches de

Consulta de html

Embed Size (px)

Citation preview

Page 1: Consulta de html

Que es HTML

HTML, siglas de Hyper Text Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una

página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías

ligadas a la web, sobre todo en lo referente a su escritura e interpretación.

El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene sólo texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.

Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido diversas características, con el fin de hacerlo más eficiente y facilitar el desarrollo de páginas web compatibles con distintos navegadores y plataformas (PC de escritorio, portátiles, teléfonos inteligentes, tabletas, etc.). Sin embargo, para interpretar correctamente una nueva versión de HTML, los desarrolladores de navegadores web deben incorporar estos cambios y el usuario debe ser capaz de usar la nueva versión del navegador con los cambios incorporados. Normalmente los cambios son aplicados mediante parches de actualización automática (Firefox, Chrome) u ofreciendo una nueva versión del navegador con todos los cambios incorporados, en un sitio web de descarga oficial (Internet Explorer). Un navegador no actualizado no será capaz de interpretar correctamente una página web escrita en una versión de HTML superior a la que pueda interpretar, lo que obliga muchas veces a los desarrolladores a aplicar técnicas y cambios que permitan corregir problemas de visualización e incluso de interpretación de código HTML. Así mismo, las páginas escritas en una versión anterior de HTML deberían ser actualizadas o reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores aún mantienen la capacidad de interpretar páginas web de versiones HTML anteriores. Por estas razones, aún existen diferencias entre distintos navegadores y versiones al interpretar una misma página web.

Page 2: Consulta de html

Características del lenguaje HTML

Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:

El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.

El Web tenía que ser hipertexto y debía ser fácil navegar por él. Tenía que ser compatible con todo tipo de ordenadores (PCs,

Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).

Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de páginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas".

Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

Que se necesita para crear una página en HTML

Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 3. Otra forma de diseñar un archivo .HTML, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mínimo que es la posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje. A continuación les mostraremos las etiquetas más comunes que deben aprenderse para hacer una página Web. 

Estructura de los documentos de HTML Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo. 

Page 3: Consulta de html

La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento <TITLE>. En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc. Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden:

Ejemplo: <HTML> <HEAD> <TITLE> Título de mi página de Internet </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera página </CENTER> </H1> <HR> 

Esta es mi primera página, aunque todavía es muy sencilla. Como el lenguaje HTML no es difícil, pronto estaremos en condiciones de hacer cosas mas interesantes. 

<P> Aquí va un segundo párrafo. </BODY> </HTML>

Para escribir títulos se usa la etiqueta <Hx></Hx> en donde x es un número. Ejemplo: <h1>Titulo principal</h1> <h2>Titulo secundario</h2> <h3>Titulo terciario</h3> <h4>Titulo cuarto nivel</h4> <h5>Titulo quinto</h5> <h6>Titulo sexto</h6> 

Quedaría mas o menos así: Titulo principal Titulo secundario Titulo terciario Titulo cuarto nivel Titulo quinto Titulo sexto 

5. Alineación de párrafo 

Page 4: Consulta de html

Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy útil debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma línea. Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes: 

<p align="left"> Párrafo... </p> Alinea a la izquierda. <p align="center"> Párrafo... </p> Realiza un centrado. <p align="right"> Párrafo... </p> Alinea a la derecha. Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando <BR>. Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro que es <HR> 

Etiquetas para darle formato al texto: Para el tamaño y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee tres atributos: tamaño (Size), Tipo de letra o fuente (face) y color 

Formato: 

<B> y </B> Sirve para colocar un texto en Negrita. <U> y < /U> Sirve para subrayar un texto <STRIKE> y </STRIKE> Sirve para tachar un texto. <STRONG> y </STRONG> Cumple la misma función que <B> <I> y <I> Para colocar un texto en cursiva. <EM>texto con énfasis</EM> texto con énfasis <CITE>citación</CITE> citación <DFN>definición</DFN> definición <KBD>teclado</KBD> teclado <SAMP>ejemplo</SAMP> ejemplo SIZE: Regula el tamaño de los caracteres. Ejemplo:<font> texto... </FONT>. FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc.

Ejemplo: 

<FONT> texto…</FACE> Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML: 1. Mediante la especificación de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul) 2. Mediante la especificación del nombre del color en ingles

Page 5: Consulta de html

Ejemplos: 

<FONT COLOR="WHITE">Blanco</FONT> Blanco#FFFFFF <FONT COLOR="BLACK">Negro</FONT> Negro#000000 <FONT COLOR="RED">Rojo</FONT> Rojo

#FF0000 <FONT COLOR="GREEN">Verde</FONT> Verde#00FF00 <FONT COLOR="BLUE">Azul</FONT> Azul#0000FF <FONT COLOR="YELLOW">Amarillo</FONT> Amarillo

#FFFF00 <FONT COLOR="CYAN">Cyan</FONT> Cyan

#00FFFF <FONT COLOR="MAGENTA">Magenta</FONT> Magenta

#FF00FF 

Por lo tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num"> 

Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta: background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo: 

<body background="/documentos/html/gifs/dragonball.gif"> 

Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pagina. 

Page 6: Consulta de html

Etiquetas META Son usadas para poner meta-información del documento. Esta "directiva" indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos. 

Ejemplo: 

<META NAME = "Pagina de Pablo" content = "Mi pagina personal de Sailor Moon"> Indica al visor el nombre de la página y sus contenidos principales. <META NAME="Author" content="Pablo Ravioli"> 

Indica el nombre de la persona que elabora la pagina WEB <META NAME = "keywords" content = "Información de Sailor Moon"> 

Indica al visor las palabras clave para los buscadores de Internet. Para hacer listas: Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones). 

Las listas pueden ser: Lista desordenada, <UL> (Unordered List). Lista ordenada, <OL> (Ordered List). Ejemplos de diferentes tipos de listas: 

Lista con números romanos: 

<ol> <li type=I>Manzana <li type=I>Zanahoria <li type=I>Lechuga <li type=I>Tomate </ol> Manzana Zanahoria Lechuga Tomate 

Lista numerada: 

<ol> 

Page 7: Consulta de html

<li>Manzana <li>Zanahoria <li>Lechuga <li>Tomate </ol> Manzana Zanahoria Lechuga Tomate 

Lista con puntos: 

<ul> <li> Manzana <li> Zanahoria <li> Lechuga <li>Tomate </ul> Manzana Zanahoria Lechuga Tomate 

Lista con círculos: 

<ul> <li type=circle> Manzana <li type=circle> Zanahoria <li type=circle> Lechuga <li type=circle> Tomate </ul> Manzana Zanahoria Lechuga Tomate 

Lista con cuadrados: 

<ul> 

<li type=square> Manzana <li type=square> Zanahoria <li type=square> Lechuga <li type=square> Tomate 

Page 8: Consulta de html

</ul> Manzana Zanahoria Lechuga Tomate 

6. COMO INSERTAR UNA IMAGEN 

A la hora de crear una página Web podemos introducir gráficos de forma muy sencilla, sólo hay que tener en cuenta que las imágenes deben tener formato Gif o JPEG. La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va acompañada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar. Es decir: <IMG SRC="lugar donde guardo la imagen"> Supongamos que tenemos la imagen dragonball.gif, que está presente en el mismo directorio en donde está la página y que la queremos insertar. La etiqueta apropiada sería: <IMG SRC="dragonball.gif"> 

Y el usuario verá en el browser: 

Para poner la imagen en la izquierda escribir: <IMG ALIGN=LEFT SRC=" dragonball.gif "> A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif"> Y si se quiere poner la imagen en el centro: <P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P> 

Hiperenlaces, Hyperlinks, Anclas o Links Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aquí para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto HTML: <a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a> 

Que se vería de esta forma: Pulse aquí para visitar a la NASA Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir: <a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá la imagen.gif. 

Page 9: Consulta de html

También se puede ir a otro enlace por medio de una imagen. Lo único que se debe hacer es cambiar el texto por una imagen: <a href="http://www.altavista.com"><img src="Logo.jpg"></a> Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del Logo.jpg (que podría ser el logo del Altavista) y se convierta en una "manito", al hacer clic nos envíe al buscador Altavista. Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera: <a href="mailto:pfravioli[arroba]fibertel.com.ar">Mandame un Email</a> Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrirá (por defecto) el Microsoft Outlook Express con la dirección del destinatario ya escrita. 

Caracteres especiales Existe una razón evidente que impide que podamos escribir ciertos símbolos directamente en un texto HTML, como por ejemplo el <: dichos símbolos tienen un significado en HTML, y es necesario diferenciar claramente cuándo poseen ese significado y cuándo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusión, en este caso &lt;. Los símbolos afectados por esta limitación, y la forma de escribirlos, se detallan a continuación: 

* < (Menor que): &lt; * >(Mayor que): &gt; * & (símbolo de and, o ampersand): &amp; * " (comillas dobles): &quot; 

Es decir, que para escribir <"hola"> en nuestro texto HTML original debemos poner &lt;&quot;hola&quot;&gt;. El otro caso especial se da cuando en un texto HTML se quiere escribir una

Page 10: Consulta de html

eñe, por ejemplo. Existe una forma fácil de hacerlo, que consiste en utilizar

Page 11: Consulta de html

códigos como las que antes se presentaron para escribir ciertos símbolos

Page 12: Consulta de html

códigos comienzan siempre con el símbolo &, y terminan con un punto y coma (. Entre medias va un identificador del carácter que queremos que se escriba. Los códigos necesarias en nuestro idioma son: 

* á: &aacute; * é: &eacute; * í: &iacute; * ó: &oacute; * ú: &uacute; * Á: &Aacute; * É: &Eacute; * Í: &Iacute; * Ó: &Oacute; * Ú: &Uacute; * ü: &uuml; * Ü: &Uuml; * ñ: &ntilde; * Ñ: &Ntilde; * ¿: &#191; * ¡: &#161; * ?: &#63; * !: &#33; 

Por lo tanto la palabra página la podríamos escribir como : página p&aacute;gina Otro ejemplo: ¿En qué año estamos? Sería: &#191En qu&eacute; a&ntilde;o estamos&#63; Es por ello que si deseamos que cualquier visor de páginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes códigos para representarlas. Recuerden que las etiquetas se pueden escribir en mayúsculas o en minúsculas, es lo mismo poner <HTML>, <html> o <HtmL>. Una vez que terminamos de escribir todo nuestro documento, lo guardamos poniéndole un nombre, y necesariamente lo debemos guardar con la extensión .HTM o .HTML. Para ir visualizando lo que hemos estado haciendo tendríamos que abrir nuestro browser (Netscape o Internet Explorer), hacemos click en la opción FILE o ARCHIVO, estando allí seleccionamos OPEN o ABRIR, le damos BROWSE o EXAMINAR, seleccionamos el archivo y le damos OPEN. Luego le damos ACEPTAR, e inmediatamente se abrirá nuestra página.

HTML5

Page 13: Consulta de html

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del

lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis

para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una

variante XHTMLconocida como sintaxis XHTML5 que deberá ser servida como

XML.1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.3

Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se

recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de

todo el potencial que provee HTML5.

HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de

los sitios web modernos. Algunos de ellos son técnicamente similares a las

etiquetas <div> y <span>, pero tienen un significado semántico, como por

ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos

proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los

elementos <audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar

elementos 3D en los navegadores más importantes (Firefox, Chrome, Opera, Safari e

Internet Explorer).

Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos

puramente de presentación, como <font> y <center>, cuyos efectos son manejados

por Hojas de estilo en cascada. También hay un renovado énfasis en la importancia del

scripting DOM para el comportamiento de la web 2.0.

El espaciado en HTML 

     En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea) separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y el resto se omiten en la representación del documento. En el documento fuente podremos usar el espaciado que deseemos, y no deberá estar bien formateado, este se conseguirá con las etiquetas HTML.

     Existen unas etiquetas especiales HTML para definir estos elementos de control de texto. A continuación se detallará cada una de ellas.

<P> Cambio de párrafo : 

Page 14: Consulta de html

     Definirá un párrafo, se usará al comienzo o al final de un párrafo de texto e introducirá un espaciado de separación (normalmente dos líneas) con el próximo texto que se exprese. Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo servirá para separar texto.

     El efecto se conseguirá introduciendo la etiqueta <P> en el punto en el que deseemos que se produzca el espaciado. La etiqueta de fin de párrafo </P> es opcional no siendo necesario incluirla.

     Existen elementos HTML que ya introducen separaciones de líneas, tanto antes como despues, por tanto en estos casos no es necesario, pero sí posible, introducir el elemento de nuevo párrafo. No es necesario utilizar esta etiqueta ni antes ni después de cabeceras <Hn>, después de <HR> (reglas horizontales), <ADDRESS>, <BLOCKQUOTE>, <PRE>. Tampoco es necesario dentro de listas tras los elementos <LI>, <DT> ni<DD>, que se utilizan para separar los distintos elementos de una lista.

<BR> Salto de línea : 

     Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasará a la línea siguiente, sin dejar una línea de separación. En este caso será un cambio de línea y no de parrafo. Igualmente no es necesario usarlo tras los elementos que llevan implícitos un salto de línea, ni tampoco es necesaria la etiqueta de fin <BR>.

<CENTER> Centrado de texto e imágenes : 

     Se utilizará para centrar líneas de texto, imágenes o cualquier otro elemento HTML (tablas, listas, etc ...). Todo lo que se encuentre entre las etiquetas de inicio y fin aparecerá centrado en el navegador.

3.5. Espacios en blanco y nuevas líneasEl aspecto más sorprendente del lenguaje HTML cuando se desarrollan los

primeros documentos es el tratamiento especial de los "espacios en blanco" del

texto. HTML considera espacio en blanco a los espacios en blanco, los

tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).

El siguiente ejemplo ilustra este comportamiento:

<html>

<head><title>Ejemplo de etiqueta p</title></head>

Page 15: Consulta de html

<body>

<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>

 

<p>Este segundo párrafo sí que contiene saltos

de

línea

y otro tipo de espaciado.</p>

</body>

</html>

Listas ordenadas

Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. La sintaxis correcta para elaborar listas ordenadas es:

<OL></LI> Primera voz del menú</LI> Segunda voz del menú</LI> Tercera voz del menú</OL>

LISTAS NO ORDENADAS

Las listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul

indica unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un

nuevo punto, lo tendremos que hacer dentro de las etiquetas <li> y </li>.

Si no le indicamos nada a la etiqueta <li>, la viñeta o marca que indica que se trata de un

elemento de una lista se generará de forma automática. Pero si queremos definir nosotros

mismo el símbolo del punto o marca a emplear, debemos indicarlo específicamente. En el

pasado se usaba el atributo “type”, hoy en día no recomendado (deprecated). Con este

atributo se podía hacer que la lista estuviera definida por puntos negros (li type="disc"), por

puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square").

La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a

continuación:

Page 16: Consulta de html

<ul style="list-style-type:disc">

<ul style="list-style-type:circle">

<ul style="list-style-type:square">

5.3.- Poner un color de fondo.

Si deseamos poner un color de fondo a toda la página, lo tenemos que hacer dentro de la etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se denomina atributo. Los colores deben escribirse mediante el denominado código hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.

Nosotros vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la etiqueta <body> con su atributo como sigue: <body bgcolor="red"> ( bg debackground ).

 

Para poner una imagen de fondo con HTML es necesario agregar el atributo background al tag <body> y hacer referencia a una imagen.

<html><body background="fondo.jpg">

<h3>Ejemplo de imagen de fondo</h3>

Page 17: Consulta de html

<p>Se pueden utilizar archivos en formato jpg, gif o png. No es recomendable usar otro formato.</p>

<p>Si la imagen es más pequeña que la página, se repetirá en mozaico.>

</body></html>

URL del artículo: http://www.ejemplode.com/17-html/532-ejemplo_de_como_poner_imagen_de_fondo_en_html.htmlLeer completo: Cómo poner imagen de fondo en HTML

Nombredel color

ColorHexadecima

lColor RGB Color

IndianRed #CD5C5C 205,92,92

LightCoral #F08080 240,128,128

Salmon #FA8072 250,128,114

DarkSalmon #E9967A 233,150,122

LightSalmon #FFA07A 255,160,122

Crimson #DC143C 220,20,60

Red #FF0000 255,0,0

FireBrick #B22222 178,34,34

DarkRed #8B0000 139,0,0

Pink #FFC0CB 255,192,203

LightPink #FFB6C1 255,182,193

HotPink #FF69B4 255,105,180

DeepPink #FF1493 255,20,147

MediumVioletRed #C71585 199,21,133

PaleVioletRed #DB7093 219,112,147

LightSalmon #FFA07A 255,160,122

Coral #FF7F50 255,127,80

Tomato #FF6347 255,99,71

OrangeRed #FF4500 255,69,0

DarkOrange #FF8C00 255,140,0

Page 18: Consulta de html

Orange #FFA500 255,165,0

Gold #FFD700 255,215,0

Yellow #FFFF00 255,255,0

LightYellow #FFFFE0 255,255,224

LemonChiffon #FFFACD 255,250,205

LightGoldenrodYellow

#FAFAD2 250,250,210

PapayaWhip #FFEFD5 255,239,213

Moccasin #FFE4B5 255,228,181

PeachPuff #FFDAB9 255,218,185

PaleGoldenrod #EEE8AA 238,232,170

Khaki #F0E68C 240,230,140

DarkKhaki #BDB76B 189,183,107

Lavender #E6E6FA 230,230,250

Thistle #D8BFD8 216,191,216

Plum #DDA0DD 221,160,221

Violet #EE82EE 238,130,238

Orchid #DA70D6 218,112,214

Fuchsia #FF00FF 255,0,255

Magenta #FF00FF 255,0,255

MediumOrchid #BA55D3 186,85,211

MediumPurple #9370DB 147,112,219

BlueViolet #8A2BE2 138,43,226

DarkViolet #9400D3 148,0,211

DarkOrchid #9932CC 153,50,204

DarkMagenta #8B008B 139,0,139

Purple #800080 128,0,128

Indigo #4B0082 75,0,130

SlateBlue #6A5ACD 106,90,205

DarkSlateBlue #483D8B 72,61,139

GreenYellow #ADFF2F 173,255,47

Chartreuse #7FFF00 127,255,0

LawnGreen #7CFC00 124,252,0

Lime #00FF00 0,255,0

LimeGreen #32CD32 50,205,50

PaleGreen #98FB98 152,251,152

LightGreen #90EE90 144,238,144

Page 19: Consulta de html

MediumSpringGreen #00FA9A 0,250,154

SpringGreen #00FF7F 0,255,127

MediumSeaGreen #3CB371 60,179,113

SeaGreen #2E8B57 46,139,87

ForestGreen #228B22 34,139,34

Green #008000 0,128,0

DarkGreen #006400 0,100,00

YellowGreen #9ACD32 154,205,50

OliveDrab #6B8E23 107,142,35

Olive #808000 128,128,0

DarkOliveGreen #556B2F

MediumAquamarine #66CDAA 102,205,170

DarkSeaGreen #8FBC8F 143,188,143

LightSeaGreen #20B2AA 32,178,170

DarkCyan #008B8B 0,139,139

Teal #008080 0,128,128

Aqua #00FFFF 0,255,255

Cyan #00FFFF 0,255,255

LightCyan #E0FFFF 224,255,255

PaleTurquoise #AFEEEE 175,238,238

Aquamarine #7FFFD4 127,255,212

Turquoise #40E0D0 64,224,208

MediumTurquoise #48D1CC 72,209,204

DarkTurquoise #00CED1 0,206,209

CadetBlue #5F9EA0 95,158,160

SteelBlue #4682B4 70,130,180

LightSteelBlue #B0C4DE 176,196,222

PowderBlue #B0E0E6 176,224,230

LightBlue #ADD8E6 173,216,230

SkyBlue #87CEEB 135,206,235

LightSkyBlue #87CEFA 135,206,250

DeepSkyBlue #00BFFF 0,191,255

DodgerBlue #1E90FF 30,144,255

CornflowerBlue #6495ED 100,149,237

MediumSlateBlue #7B68EE 123,104,238

RoyalBlue #4169E1 65,105,225

Blue #0000FF 0,0,255

Page 20: Consulta de html

MediumBlue #0000CD 0,0,205

DarkBlue #00008B 0,0,139

Navy #000080 0,0,128

MidnightBlue #191970 25,25,112

Cornsilk #FFF8DC 255,248,220

BlanchedAlmond #FFEBCD 255,235,205

Bisque #FFE4C4 255,228,196

NavajoWhite #FFDEAD 255,222,173

Wheat #F5DEB3 245,222,179

BurlyWood #DEB887 222,184,135

Tan #D2B48C 210,180,140

RosyBrown #BC8F8F 188,143,143

SandyBrown #F4A460 244,164,96

Goldenrod #DAA520 218,165,32

DarkGoldenrod #B8860B 184,134,11

Peru #CD853F 205,133,63

Chocolate #D2691E 210,105,30

SaddleBrown #8B4513 139,69,19

Sienna #A0522D 160,82,45

Brown #A52A2A 165,42,42

Maroon #800000 128,0,0

White #FFFFFF 255,255,255

Snow #FFFAFA 255,250,250

Honeydew #F0FFF0 240,255,240

MintCream #F5FFFA 245,255,250

Azure #F0FFFF 240,255,255

AliceBlue #F0F8FF 240,248,255

GhostWhite #F8F8FF 248,248,255

WhiteSmoke #F5F5F5 245,245,245

Seashell #FFF5EE 255,245,238

Beige #F5F5DC 245,245,220

OldLace #FDF5E6 253,245,230

FloralWhite #FFFAF0 255,250,240

Ivory #FFFFF0 255,255,240

AntiqueWhite #FAEBD7 250,235,215

Linen #FAF0E6 250,240,230

LavenderBlush #FFF0F5 255,240,245

Page 21: Consulta de html

MistyRose #FFE4E1 255,228,225

Gainsboro #DCDCDC 220,220,220

LightGrey #D3D3D3 211,211,211

Silver #C0C0C0 192,192,192

DarkGray #A9A9A9 169,169,169

Gray #808080 128,128,128

DimGray #696969 105,105,105

LightSlateGray #778899 119,136,153

SlateGray #708090 112,128,144

DarkSlateGray #2F4F4F 47,79,79

Black #000000 0,0,0