GUIA BASICA

GUIA BASICA DE HTML

¿Qué es HTML? 

HTML son las iniciales de Hiper Text Markup Language.

Es un conjunto o serie de

etiquetas

incluidas en archivos de texto que definen la estructura de un

documento WWW y sus vínculos con otros documentos.

Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para determinar

como desplegar la página Web. 

ETIQUETAS DE FORMATO

Negrita: <B>Texto en negrita</B>
Cursiva:<I>Texto en cursiva</I>
Subrayado: <U>Texto subrayado</U>
Preformateado: <PRE>Texto que conserva todos sus espacios y tabuladores</PRE>

ETIQUETAS DE ALINEACIÓN

HTML no da muchas opciones para alinear el texto. Por default el texto se alinea a la izquierda de la página. Pero tú puedes usar la etiqueta <CENTER>para especificar que ese texto deberá ir centrado como en el ejemplo siguiente:
<CENTER>Aquí va el texto</CENTER>

Para otras opciones de alineación, se usan las etiquetas de propiedades de estilo, las cuales te dan cuatro opciones para alinear el texto:

<H1 STYLE=”text-align: right”>Texto alienado a la derecha</H1>
<H1 STYLE=”text-align: left”>Texto alienado a la izquierda</H1>
<H1 STYLE=”text-align: center”>Texto centrado</H1>
<H1 STYLE=”text-align: justify”>Texto justificado</H1>

ETIQUETAS PARA CAMBIAR LA FUENTE

HTML tiene dos etiquetas que te permite controlar las características de las fuentes: <FONT> y <BASEFONT>.

La etiqueta <FONT> controla los cambios para un bloque de texto individual por lo que al terminar la selección se debe cerrar con el <I>TAG</I> </FONT>

La etiqueta <BASEFONT> aplica el cambio a todo el documento y no existe etiqueta de cierre.

Los atributos más importantes para cambiar las fuentes son:

• FACE: Indica el tipo de letra, a continuación encontrarás las más comunes: Arial,Times New Roman, Verdana

Ejemplo: <FONT FACE=Arial>Aquí va el texto</FONT>

• SIZE: Indica el tamaño en una escala del 1 al 7, donde 7 es la letra más grande y 1 la más pequeña. El tamaño más utilizado es 3

Ejemplo: <FONT SIZE=5>Aquí va el texto</FONT>

• COLOR: Indica el color del texto. El lenguaje estándar de HTML maneja 14 colores que puedes usar porque ya están predefinidos tanto por su nombre en inglés como por un número de referencia.

HTML entiende ambas opciones, sin embargo es mucho más sencillo que te los aprendas por sus nombres.

Ejemplo: <FONT COLOR=GREEN>Aquí va el texto en color verde</FONT>

 

7. ETIQUETAS PARA PÁRRAFOS

Nuevo párrafo (dos espacios): <P>
Línea horizontal: <HR>
Salto de línea (un espacio): <BR>

8. ETIQUETAS PARA GENERAR LISTAS
Las listas sirven para desplegar la información que debe ser enumerada o tabulada de una manera organizada.

Lista numerada: Numera los párrafos u objetos que se encuentran dentro de la siguiente estructura:

<OL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</OL>

Lista con viñetas: Inserta un punto negro a los párrafos u objetos que se encuentran dentro de la siguiente estructura:

<UL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</UL>

9. ETIQUETAS PARA VÍNCULOS A OTRAS DIRECCIONES INTERNAS O EXTERNAS

Permiten al usuario navegar con facilidad a través de la red, creando vínculos que lleven hacia una misma parte del website o hacia otros sitios web.

Las etiquetas HTML que se encargan de generar los vínculos son <A> y </A>.

A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se realiza de la siguiente manera:
<A HREF="URL">Texto del vínculo</A>

El URL será la dirección completa de la página a la que se desea crear el vínculo. Ejemplo: http ://www.escuela-de-negocios.com

Vínculos de correo electrónico
La estructura es la siguiente:
<A HREF=mailto :"dirección de correo electrónico" Texto del vínculo </A>

Ejemplo:
<A HREF=mailto :"contacto@emprendedores-de-negocios.com" Sugerencias y comentarios</A>

10. ETIQUETA PARA AGREGAR IMAGENES

Para colocar una imagen en una página basta con llamarla desde el documento HTML.

Lo primero es diseñar la imagen en cualquier programa y guardarla con terminación GIF o JPEG que son los formatos aceptados por el  lenguaje HTML.

La etiqueta es la siguiente:
<IMG SRC= "Nombre del archivo" >

Donde "Nombre del archivo" es el nombre del archivo de gráfico que desea desplegar.

11.  ETIQUETA PARA GENERAR TABLAS

En general las tablas pueden ser sin borde o con borde las que lleven borde deberán indicar el tamaño del mismo.

La etiqueta para crearlas es:

<TABLE BORDER="Número entre 0 y 7">
<CAPTION ALIGN=TOP ó BOTTOM>;Aquí va el texto del título</CAPTION>
<TR>
<TD>Primera fila, primera columna</TD>
<TD>Primera fila, segunda columna</TD>
<TD>Primera fila, tercera columna</TD>
..........
</TR>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
..........
</TR>
etc...
</TABLE>

El número que se designa en la etiqueta determina el ancho del borde de la tabla. Este número puede estar entre 0 y 7.

La etiqueta: <CAPTION ALIGN=TOP ó BOTTOM> Aquí va el texto del título</CAPTION>. Da la posibilidad de colocarle un título a la tabla, bien sea en la parte superior (TOP) o en la parte inferior (BOTTOM).

Los colores se forman a partir de tres básicos, que son el rojo, verde y azul. La intensidad de cada componente se expresa como un número hexadecimal del 00 al FF (del 0 al 255 en base diez)
Los números hexadecimales, se forman utilizando 16 dígitos (en lugar de los diez de la numeración decimal habitual o dos en la binaria). Estos dígitos son: 0 1 2 3 4 5 6 7 8 9 A B C D E F
Así:, por ejemplo, el color rojo se representa como #FF0000, porque tiene el toda la intensidad de rojo y nada de verde y azul. Los colores basicos son:
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
Otros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo
Para hacer un color más oscuro, reduce la intensidad del componente, dejando los otros dos iguales. Así, el rojo (#FF0000) se hace más oscuro así: #CC0000, #990000, #660000, #330000 etc
Para hacer que un color más pastel, simplemente variar los otros dos colores dejando igual el principal. Así, el rojo (#FF0000) se hace más claro asi: #FF3333, #FF6666, #FF9999, #FFCCCC etc
Ejemplo 1: <FONT SIZE=+2 COLOR=#FF00FF>Esto esta en color fucsia</FONT>
Ejemplo 2: Este color es #C1E1F8