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>
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
<. Los símbolos afectados por esta limitación, y la forma de escribirlos, se
detallan a continuación:
* < (Menor que): <
* >(Mayor que): >
* & (símbolo de and, o ampersand): &
* " (comillas dobles): "
Es decir, que para escribir <"hola"> en nuestro texto HTML original debemos
poner <"hola">.
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:
* á: á
* é: é
* í: í
* ó: ó
* ú: ú
* Á: Á
* É: É
* Í: Í
* Ó: Ó
* Ú: Ú
* ü: ü
* Ü: Ü
* ñ: ñ
* Ñ: Ñ
* ¿: ¿
* ¡: ¡
* ?: ?
* !: !
* @: @
Por lo tanto la palabra página la podríamos escribir como :
página
página
Otro ejemplo: ¿En qué año estamos?
Sería: ¿En qué año estamos?
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