SlideShare una empresa de Scribd logo
1 de 19
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.
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.
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
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
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.
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>
<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
</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.
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
eñe, por ejemplo. Existe una forma fácil de hacerlo, que consiste en utilizar
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;
* @: &#64;
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
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 :
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íneas
El 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>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaci
ado.</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:
<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>
<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.html
Leer completo: Cómo poner imagen de fondo en HTML
Nombre
del color
Color
Hexadecimal
Color 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
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
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
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
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

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Bootstrap
BootstrapBootstrap
Bootstrap
 
HTML
HTMLHTML
HTML
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
HTML X CSS
HTML X CSSHTML X CSS
HTML X CSS
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginners
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Html
HtmlHtml
Html
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 
Introduction to Web development
Introduction to Web developmentIntroduction to Web development
Introduction to Web development
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Html frames
Html framesHtml frames
Html frames
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Html ppt
Html pptHtml ppt
Html ppt
 
Ch9 .Best Practices for Class-Based Views
Ch9 .Best Practices  for  Class-Based ViewsCh9 .Best Practices  for  Class-Based Views
Ch9 .Best Practices for Class-Based Views
 
CSS3 2D/3D transform
CSS3 2D/3D transformCSS3 2D/3D transform
CSS3 2D/3D transform
 

Destacado

Destacado (12)

Reglamento aprendiz sena
Reglamento aprendiz senaReglamento aprendiz sena
Reglamento aprendiz sena
 
Reglamento para aprendices sena
Reglamento para aprendices senaReglamento para aprendices sena
Reglamento para aprendices sena
 
UML : Teoria y practica SOUVENIR
UML  : Teoria y practica SOUVENIRUML  : Teoria y practica SOUVENIR
UML : Teoria y practica SOUVENIR
 
Trabajo de ensayo
Trabajo de ensayoTrabajo de ensayo
Trabajo de ensayo
 
EVIDENCIA
EVIDENCIA EVIDENCIA
EVIDENCIA
 
Aprendiendo uml en 24 horas
Aprendiendo uml en 24 horas Aprendiendo uml en 24 horas
Aprendiendo uml en 24 horas
 
guia de actividad de apropiación del conocimiento
 guia de actividad de apropiación del conocimiento guia de actividad de apropiación del conocimiento
guia de actividad de apropiación del conocimiento
 
Actividad uml
Actividad uml Actividad uml
Actividad uml
 
Uml casos de usos
Uml casos de usos Uml casos de usos
Uml casos de usos
 
Técnicas para identificar requisitos funcionales y no funcionales
Técnicas para identificar requisitos funcionales y no funcionales Técnicas para identificar requisitos funcionales y no funcionales
Técnicas para identificar requisitos funcionales y no funcionales
 
Capítulo 6 gestión de cambios
Capítulo 6 gestión  de cambiosCapítulo 6 gestión  de cambios
Capítulo 6 gestión de cambios
 
Metodología gestión de requerimientos
Metodología gestión de requerimientos Metodología gestión de requerimientos
Metodología gestión de requerimientos
 

Similar a Consulta de html (20)

Diseño web guias 1-3
Diseño web guias 1-3Diseño web guias 1-3
Diseño web guias 1-3
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Guia no 1 cómo crear mi propia web
Guia no 1 cómo crear mi propia webGuia no 1 cómo crear mi propia web
Guia no 1 cómo crear mi propia web
 
Que son etiquetas de html daniela veliz
Que son etiquetas de html daniela velizQue son etiquetas de html daniela veliz
Que son etiquetas de html daniela veliz
 
Html
HtmlHtml
Html
 
Guia 1 introduccion al html inesani 2016
Guia 1 introduccion al html inesani 2016Guia 1 introduccion al html inesani 2016
Guia 1 introduccion al html inesani 2016
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Html5
Html5Html5
Html5
 
Access
AccessAccess
Access
 
Access
AccessAccess
Access
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 
4 Html
4 Html4 Html
4 Html
 
Html tarea
Html tareaHtml tarea
Html tarea
 
Como crear paginas en html
Como crear paginas en htmlComo crear paginas en html
Como crear paginas en html
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Que es html
Que es htmlQue es html
Que es html
 

Consulta de html

  • 1. 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.
  • 2. 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.
  • 3. 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
  • 4. 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
  • 5. 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.
  • 6. 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>
  • 7. <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
  • 8. </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.
  • 9. 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 eñe, por ejemplo. Existe una forma fácil de hacerlo, que consiste en utilizar
  • 10.
  • 11. 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; * @: &#64; 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.
  • 12. HTML5 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 :
  • 13. 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íneas El 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>
  • 14. <body> <p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaci ado.</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: <ul style="list-style-type:disc">
  • 15. <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> <p>Se pueden utilizar archivos en formato jpg, gif o png. No es recomendable usar otro formato.</p>
  • 16. <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.html Leer completo: Cómo poner imagen de fondo en HTML Nombre del color Color Hexadecimal Color 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 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
  • 17. 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 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
  • 18. 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 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
  • 19. 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 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