INTRODUCCION A HTML HTML es el acrónimo de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje que se utiliza para crear las páginas web. Este lenguaje indica a los navegadores cómo deben mostrar el contenido de una página web. El lenguaje html contiene dos partes: •
el contenido, que es el texto que se verá en la pantalla de un ordenador,
•
y las etiquetas y atributos que estructuran el texto de la página web en encabezados, párrafos, listas, enlaces, etc. y normalmente no se muestra en pantalla. Las etiquetas, que son un conjunto de caracteres que rodean partes del documento, están formadas por el símbolo ESTRUCTURA DE UNA PAGINA WEB
<HTML> <HEAD> <TITLE>Título de la página</TITLE> </HEAD> <BODY> ... </BODY> </HTML>
<ENCABEZADOS>
Se utilizan para escribir textos importantes, se identifican con una letra H seguida por un número, se escriben desde el 1 hasta el 6, esto representa la importancia del texto que será escrito, debe cerrarse al final. <H1> TEXTO </H1>
<P>
Se utilizan para escribir párrafos que llevan más de una línea, se abre y deberá cerrarse al final. <P> TEXTO </P> <FONT>
Se utilizan para aplicar tipos de letra, color y tamaño a los textos ingresados, debe cerrarse al final, su formato de uso es el siguiente: <FONT FACE = “TIPO DE LETRA” COLOR = “COLOR” SIZE = # > TEXTO </FONT> Ejemplo: <FONT FACE = “ARIAL BLACK” COLOR = “RED” SIZE = 4 >Texto donde se aplica el formato </FONT> <HR > Permite diseñar una línea en la página, NO SE CIERRA, sus forma de uso es la siguiente: <HR> Linea completa <HR WIDTH = %> Linea con un tamaño según el porcentaje <HR COLOR = “RED”> Linea completa en color rojo
FORMATOS ESPECIALES <B> Negrita </B> <I> Cursiva </I> <U> Subrayar </U> <CENTER> Centrar </CENTER> <BODY BGCOLOR = RED>
SEGUNDA PARTE <MARQUEE > Permite hacer que el texto se mueva, debe cerrarse al final los formatos que podemos utilizar con marquee son: -
Direction = Up,Down
-
Behavior = Alternate
Ejemplo:
<marquee behavior=Alternate>Manolo Vielman</marquee>
<BR > Permite dejar una línea de por medio, no se cierra <IMG SRC > Nos permite agregar a nuestras páginas, imágenes que permitirán darle más vida, no se cierra. Ejemplo: <img src = “Pepe.jpg”> Propiedades para IMG Width: Permite cambiar el ancho de las imágenes Heigth: Permite cambiar el alto de las imágenes. Ejemplo: <img src = “C:\Fotos\Pepe.jpg” width = 50 heigth = 50>
<DIV > Nos permite mover los objetos a la posición que nosotros le especifiquemos, debe cerrarse al final </DIV> su formato de uso es el siguiente DIV
Nombre de la instrucción
ID
Especifica un nombre para el objeto que será posicionado, generalmente será L1 u otro nombre para identificar.
STYLE
Especifica el estilo en que será posicionado el objeto
POSITION:ABSOLUTE
Especifica una posición absoluta para el posicionamiento
LEFT:#
Especifica las posiciones que abra desde la izquierda hasta la derecha, el ancho de la página es de 1000 generalmente.
TOP:#
Especifica las posiciones que abra desde la parte superior de la página, hacia la parte inferior.
EJEMPLO:
<DIV ID=”L1” STYLE=”POSITION:ABSOLUTE;LEFT:300;TOP:200;”> <IMG SRC = “C:\FOTOS\AUTO.JPG”> </DIV> LISTAS ORDENADAS Y DESORDENADAS Permiten ordenar el texto ya sea con numeración (<OL> ordenadas) o con viñetas (<UL> desordenadas), se utiliza la etiqueta <LI> para indicar los ítems que llevara la lista. Ambos tipos deben cerrarse al final. EJEMPLO ORDENADAS
DESORDENADAS
<OL> <LI> <LI> <LI> <LI> </OL>
<UL> <LI> <LI> <LI> <LI> </UL>
ATRIBUTOS DE LAS LISTAS Para definir un atributo a nuestras listas ordenadas o desordenadas emplearemos las siguientes etiquetas: Para ordenadas
Para desordenadas
Type = “a”
Type = “Circle”
Type = “A”
Type = “Disk”
Type = “i”
Type = “Square”
Type = “I”
EJEMPLO: <OL TYPE = “A”>
<UL TYPE = “SQUARE>
LAS TABLAS Esta etiqueta permite diseñar en nuestra página una tabla la cual esta compuesta de filas y columnas y celdas. Las etiquetas a usar son: <Table> <TR> <TD>
---------- > Así se inicia una tabla, debe cerrase al finalizar la tabla </TABLE> ---------- > Así se define una fila, debe cerrarse al finalizar la fila </TR> ---------- > Así se define las casillas (celdas) que componen las filas, debe cerrase </TD>
ATRIBUTOS Align: Background: BGColor: Border: Bordercolor: height: width: ColSpan: RowSpan:
Alinea horizontalmente la tabla con respecto a su entorno. Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen. Da color de fondo a la tabla. Define el número de pixels del borde principal. Define el color del borde. Define la altura de la tabla en pixels o porcentaje. Define la anchura de la tabla en pixels o porcentaje. Define cuantas celdas (columnas) ocupara la información introducida Define cuantas celdas (filas) ocupara la información introducida
Estructura de una tabla
<TABLE BORDER = 1> <TR> <TD> <TD> <TD> </TR> <TR> <TD> <TD> <TD> </TR> <TR> <TD> <TD> <TD> </TR> </TABLE>
</TD> </TD> </TD>
</TD> </TD> </TD>
</TD> </TD> </TD>
HIPERVINCULOS También llamados Links, Enlaces, Vinculos, son aquellos que al presionar clic sobre ellos, nos llevan a un destino, pueden haber 2 tipos de estos: INTERNOS Y EXTERNOS INTERNOS: Son aquellos que hacen el vínculo dentro de la misma página web, están compuestos de 2 partes que son: Hipervinculo:
<A HREF = “#ANCLA”>
Ancla:
<A NAME = “ANCLA”>
EXTERNOS: Son aquellos que hacen el vínculo hacia una página web externa o independiente, está compuesto de:
Hipervinculo:
<A HREF =”nombrepagína.html”>