You are on page 1of 86

FICHA No.

1
NOMBRE: Inicio y Fin de un Documento HTML
SINTAXIS:

<HTML>
</HTML>
FUNCIN: Es la Etiqueta con la que debe Comenzar y Finalizar Todo
Documento de Html.
1
ATRIBUTOS: NINGUNO

2
FICHA No. 2
NOMBRE: Encabezado o Cabecera de un Documento HTML
SINTAXIS:

<HEAD>
</HEAD>
FUNCIN: Indican el Inicio y Fin de la Cabecera de un Documento Html.

3
ATRIBUTOS: NINGUNO

4
FICHA No. 3
NOMBRE: Ttulo de la Pgina o Documento HTML
SINTAXIS:

<TITLE>
</TITLE>
FUNCIN: Entre las dos Etiquetas queda el Ttulo de la Pgina Web,
que es el que aparece en la Barra de Ttulos del Navegador

5
ATRIBUTOS: NINGUNO

6
FICHA No. 4
NOMBRE: Cuerpo de la Pgina Web
SINTAXIS:

<BODY>
</BODY>
FUNCIN: Marcan el Inicio y Fin del Cuerpo de la Pgina Web.

7
ATRIBUTOS: NINGUNO

8
FICHA No. 5
NOMBRE: Salto de Lnea
SINTAXIS:

<BR>
FUNCIN: Es la Etiqueta con la que indicamos que deseamos hacer un
salto de Lnea.
9
ATRIBUTOS: NINGUNO

10
FICHA No. 6
NOMBRE: Espacio en Blanco
SINTAXIS:

&nbsp;
FUNCIN: Es la Etiqueta con la que Insertamos Espacios en Blanco
Entre Palabras.
(siempre debe escribirse en minsculas) .
11
ATRIBUTOS: NINGUNO

12
FICHA No. 7
NOMBRE: Cambio de Prrafo
SINTAXIS:

<P>
</P>
FUNCIN: Es la Etiqueta con la que debe Comenzar y Finalizar un
Prrafo.
13
ATRIBUTO: ALIGN (alineacin)

Para realizar la alineacin de un prrafo podemos utilizar el atributo


ALIGN, de la siguiente manera:

<P ALIGN=alineacin>
Donde la alineacin puede tomar alguno de los siguientes valores:

CENTER Todas las Lneas Centradas

LEFT Todas las Lneas Alineadas a la Izquierda

RIGHT Todas las Lneas Alineadas a la Derecha


14
FICHA No. 8
NOMBRE: Centrado de un Texto Corto o Ttulo
SINTAXIS:

<CENTER>
</CENTER>
FUNCIN: Se emplea para Centrar un Texto Corto o Ttulo.

15
ATRIBUTOS: NINGUNO

16
FICHA No. 9
NOMBRE: Sangra de un Prrafo
SINTAXIS:

<BLOCKQUOTE>
</BLOCKQUOTE>

FUNCIN: Se utilizan para Colocar una Sangra a un Prrafo

17
ATRIBUTOS: NINGUNO

18
FICHA No. 10
NOMBRE: Texto en Negrita o Bold
SINTAXIS:

<B>
</B>
FUNCIN. Se utiliza para Resaltar un Texto en Negrita

19
ATRIBUTOS: NINGUNO

20
FICHA No. 11
NOMBRE: Texto en Cursiva o Itlica
SINTAXIS:

<I>
</I>
FUNCIN: Se utiliza para Resaltar un Texto en Letra Cursiva o Itlica.
21
ATRIBUTOS: NINGUNO

22
FICHA No. 12
NOMBRE: Texto Subrayado
SINTAXIS:

<U>
</U>
FUNCIN: Se utiliza para Resaltar un Texto Subrayndolo.

23
ATRIBUTOS: NINGUNO

24
FICHA No. 13
NOMBRE: Superndices
SINTAXIS:

<SUP>
</SUP>
FUNCIN: Se utiliza para colocar nmeros o letras, como exponentes,
en frmulas matemticas o qumicas.
25
ATRIBUTOS: NINGUNO

26
FICHA No. 14
NOMBRE: Subndices
SINTAXIS:

<SUB>
</SUB>
FUNCIN: Se utiliza para colocar letras o nmeros como subndices,
en frmulas matemticas o qumicas.

27
ATRIBUTOS: NINGUNO

28
FICHA No. 15
NOMBRE: Tamao de Letra
SINTAXIS:

<FONT SIZE=x>
</FONT>
FUNCIN: Nos Permite Presentar los Textos en Diferentes Tamaos de
Letra

29
ATRIBUTOS: SIZE=x

Donde: x es el Nmero que Indica el tamao


de la letra, el cual est comprendido entre 1 y
7, donde 1 es el menor tamao y 7 el mayor

EJEMPLO CON ATRIBUTOS:

<FONT SIZE=3> texto </FONT>

30
FICHA No. 16
NOMBRE: Color de Letra
SINTAXIS:

<FONT COLOR=x>

</FONT>
FUNCIN: Nos Permite Presentar los Textos en Diferentes Colores de
Letra
31
ATRIBUTOS: COLOR=color

Donde: color es el Nombre del Color de la letra que deseamos


aplicar, el cual debe escribirse en INGLS o con un CDIGO

EJEMPLO CON ATRIBUTOS:

<FONT COLOR=YELLOW> texto</FONT>


<FONT COLOR=#FFFF00> texto</FONT>
En la Siguiente Ficha se Muestra una Tabla con el Nombre de los
Colores que se Pueden Usar
32
COLOR NOMBRE EN INGLS
BLANCO NIEVE SNOW
BLANCO WHITE
NEGRO BLACK
GRIS OSCURO DARKGRAY
GRIS GRAY
GRIS CLARO LIGHTGRAY
AZUL MARINO NAVYBLUE
AZUL BLUE
TURQUESA TURQUOISE
CYAN CYAN
VERDE CLARO LIGHTGREEN
VERDE GREEN
AMARILLO YELLOW
ORO GOLD
BEIGE BEIGE
NARANJA ORANGE
ROJO RED
33
ROSA PINK
FICHA No. 17
NOMBRE: Nombre de Letra
SINTAXIS:

<FONT FACE=nombre>
</FONT>
FUNCIN: Nos Permite Presentar los Textos en Diferentes Tipos o
Nombres de Letra

34
ATRIBUTOS: FACE=nombre

Donde: nombre es el Nombre del Tipo de la letra que deseamos


aplicar, el cual debe escribirse en INGLS

EJEMPLO CON ATRIBUTOS:

<FONT FACE=TIMES NEW ROMAN> texto</FONT>


<FONT FACE=ARIAL NARROW> texto </FONT>
<FONT FACE=TAHOMA> texto </FONT>
<FONT FACE=CENTURY> texto </FONT>
<FONT FACE=COURIER NEW> texto </FONT>
35
FICHA No. 18
NOMBRE: Ttulos o Encabezados
SINTAXIS:

<H#>
</H#>
FUNCIN: Nos Permite Colocar Ttulos o Encabezados en Prrafos de
Texto.

36
ATRIBUTOS: #

Donde: # puede ser un Nmero cualquiera entre 1 y 6, siendo 1 el


Ttulo el de mayor tamao y 6 el de menor, auque lo mas comn
es utilizar ttulos entre 1 y 3

EJEMPLOS CON ATRIBUTOS:

<H1> texto </H1>


<H2> texto </H2>
<H3> texto </H3>
37
Listas
En el lenguaje HTML es posible mostrar el
texto en forma de lista o numeracin.
Existen tres tipos de listas que podemos
utilizar:
No ordenadas: en las cuales se mostrar
un smbolo para indicar a los diferentes
elementos de la lista
Ordenadas: en las que se utilizar un
nmero para indicar el orden de los
elementos de la lista
De definicin: que estn compuestas por
trminos o expresiones y su definicin.
38
FICHA No. 19
NOMBRE: Listas NO Ordenadas
SINTAXIS:

<UL TYPE=disc o circle o square>


<LI> Elemento 1 de la lista
<LI> Elemento 2 de la lista
</UL>
FUNCIN: En este tipo de listas, se utiliza como marcador un smbolo
que puede ser una circunferencia (circle), un circulo (disc) o un cuadro
(square) para indicar sus elementos.
39
ATRIBUTOS: circle, disc o square los cuales deben escribirse
siempre en minsculas
EJEMPLOS:
<UL TYPE=disc>
<LI> Elemento 1 de la lista
</UL>

<UL TYPE=square>
<LI>Elemento 1 de la lista
</UL>

<UL TYPE=circle>
<LI> Elemento 1 de la lista
</UL> 40
FICHA No. 20
NOMBRE: Listas ORDENADAS
SINTAXIS:

<OL TYPE=tipo>
<LI> Elemento 1 de la lista
</OL>
FUNCIN: En este tipo de listas, se utiliza un nmero o un elemento de
orden que pueden ser letras minsculas o maysculas o bin nmeros
latinos para etiquetar los elementos de la lista.
41
ATRIBUTOS: tipo es el smbolo de numeracin de nuestra lista
ordenada y toma alguno de los siguientes valores:
1 La numeracin se presenta con Nmeros Arbigos
a Numeracin con letras minsculas
A Numeracin con letras maysculas
i Numeracin con nmeros romanos en minsculas
I Numeracin con nmeros romanos en maysculas
EJEMPLOS:
<OL TYPE=1>
<LI> Elemento 1 de la lista
</OL>
<OL TYPE=A>
<LI>Elemento 1 de la lista
</OL> 42
FICHA No. 21
NOMBRE: Listas de DEFINICIN
SINTAXIS:

<DL>
<DT>Trmino a Definir
<DD> Definicin del Trmino
</DL>
FUNCIN: En este tipo de listas, se incluyen dos elementos: por un
lado, la definicin, que aparece al lado izquierdo, y por otro, el trmino
que aparece tabulado a la derecha.
43
ATRIBUTOS: Ninguno

44
FICHA No. 22
NOMBRE: Listas de MEN
SINTAXIS:

<MENU>
<LI>Elemento 1 del men
</MENU>
FUNCIN: Este tipo de listas, tiene el mismo propsito que la lista no
ordenada, pero el resultado final es una lista ms compacta.

45
ATRIBUTOS: Ninguno
EJEMPLOS:

<MENU>
<LI> Elemento 1 del men
<LI> Elemento 2 del men
<LI> Elemento 3 del men
</MENU>

46
FICHA No. 23
NOMBRE: LNEAS DE SEPARACIN
SINTAXIS:

<HR>
FUNCIN: Se utiliza para colocar una Lnea Horizontal como Separador
de Bloques de Texto.

47
ATRIBUTO: WIDTH=#
Donde # indica el ancho de la Lnea, en pixeles o porcentaje %
ATRIBUTO: SIZE=#

Donde # indica el grosor de la Lnea, en pixeles


ATRIBUTO: COLOR=color
Donde color es el nombre del color que deseamos aplicar a la
lnea
ATRIBUTO: ALIGN=CENTER o LEFT o RIGHT
Donde Align=center o left o right indica la posicin de la lnea en
la Pantalla.

48
FICHA No. 24
NOMBRE: INSERCIN DE IMGENES
SINTAXIS:

<IMG SRC=URL>
FUNCIN: Se utiliza para Insertar una Imagen dentro de una Pgina
Web. Donde URL es la Direccin y Nombre del Archivo que Contiene la
Imagen
49
ATRIBUTO: ALT=descripcin de la imagen
Ejemplo: <IMG SRC=Invierno.jpg ALT=Paisaje invernal>
ATRIBUTOS: WIDTH=pixeles o % HEIGHT=pixeles o % (ancho y alto)
Ejemplo 1: <IMG SRC=Invierno.jpg WIDTH=100 HEIGHT=100>
Ejemplo 2: <IMG SRC=Invierno.jpg WIDTH=20% HEIGHT=20%>
ATRIBUTO: ALIGN=posicin ; donde posicin puede ser:
MIDDLE en la parte media del prrafo
a
BOTTOM en la parte Inferior del prrafo
TOP en la parte superior del prrafo
LEFT en la parte izquierda del prrafo
RIGHT en la parte derecha del prrafo
ATRIBUTOS HSPACE=pixeles VSPACE=pixeles (distancia entre el
texto y la imagen
ATRIBUTO BORDER=tamao donde tamao, es el ancho del borde50
FICHA No. 25
NOMBRE: COLOR DE FONDO DE UNA PAGINA
SINTAXIS:

BGCOLOR=color
FUNCIN: Se utiliza para cambiar el color del fondo de la pagina Web

51
ATRIBUTO: NINGUNO
CARACTERSTICAS: Es un parmetro y como Tal Siempre Se
Coloca Dentro de una Etiqueta, para este caso de Parmetro va
Dentro de la Etiqueta BODY
Ejemplos:

<BODY BGCOLOR=RED>
<BODY BGCOLOR=#FFFF00>

52
FICHA No. 26
NOMBRE: IMAGEN DE FONDO DE UNA PAGINA

SINTAXIS:

BACKGROUND=nombre de la imagen

FUNCIN: Se utiliza para colocar una imagen como fondo de una


pagina Web

53
ATRIBUTO: NINGUNO
CARACTERSTICAS: Es un Parmetro y como Tal Siempre Se
Coloca Dentro de una Etiqueta, para este Caso de Parmetro va
Dentro de la Etiqueta BODY

Ejemplos:

<BODY BACKGROUND=Padouk.jpg>
<BODY BACKGROUND=Cadenas.jpg>

54
FICHA No. 27
NOMBRE: FONDOS SONOROS

SINTAXIS:

<BGSOUND SRC=URL LOOP=tiempo>

FUNCIN: Se utiliza para colocar un fondo sonoro en una pagina Web

55
ATRIBUTO: NINGUNO
CARACTERSTICAS:
URL indica el nombre y ubicacin del archivo
Tiempo indica el nmero de veces que deseamos se repita el
sonido y los valores que puede tomar son:
LOOP=nmero
LOOP=INFINITE

Ejemplo:
<BGSOUND SRC=Melodia_de_caja_de_msica.mid LOOP=INFINITE>

56
FICHA No. 28
NOMBRE: ANIMACIONES

SINTAXIS:

<IMG SRC=URL>
FUNCIN: Se utiliza para colocar imgenes con animacin

57
ATRIBUTO: NINGUNO
CARACTERSTICAS:
URL indica el nombre y ubicacin del archivo
Deben utilizarse archivos con extensin .GIF
Ejemplos:

<IMG SRC=Caf.gif>
<IMG SRC=Ballena.gif>
58
FICHA No. 29
NOMBRE: VIDEOS O PELICULAS

SINTAXIS:

<IMG DYNSRC=URL>

FUNCIN: Se utiliza para colocar videos o pelculas en una pgina Web

59
ATRIBUTO: LOOP=nmero, nmero de veces a repetir el video
LOOP=INFINITE, se reproduce ininterrumpidamente
WIDHT=pixeles HEIGHT=pixeles (ancho y alto del video)
START=FILEOPEN, indica que el video comienza automticamente
START=MOUSEOVER, indica que el video comienza cuando pase
sobre l el mouse.

CARACTERSTICAS:
URL indica el nombre y ubicacin del archivo
Deben utilizarse archivos con extensin .AVI .MPG y .WMV
Ejemplo:
<IMG DYNSRC=Perro_malo.wmv WIDTH=180 HEIGHT=180>

60
FICHA No. 30
NOMBRE: HIPERVNCULOS EXTERNOS

SINTAXIS:

<A HREF=URL>descripcin
del documento

FUNCIN: Se utiliza para colocar hipervnculos a otras pginas Web

61
ATRIBUTO: NINGUNO.

CARACTERSTICAS:
URL indica el nombre y trayectoria de la pgina a vincular
descripcin del documento, es por lo general un texto
descriptivo de la pgina a visitar
Ejemplos:

<A HREF=http://www.cinemex.com.mx>Cinemex
<A HREF=http://www.mixup.com.mx>Mixup
<A HREF=http://www.google.com.mx>Google

62
FICHA No. 31
NOMBRE: HIPERVNCULOS INTERNOS

SINTAXIS:

<A NAME=nombre o referencia>


<A HREF=#nombre o referencia>
descripcin del documento
FUNCIN: Se utiliza para colocar hipervnculos internos dentro de una
pgina Web

63
CARACTERSTICAS:
Primero debe crearse un Marcador de acceso dentro de la
pgina Web con la etiqueta

<A NAME=nombre o referencia>


Donde nombre o referencia ser una cadena de caracteres que
utilizaremos como identificador del Marcador de acceso
Posteriormente, en otro lugar de la pgina, se crea un hipervnculo
que haga referencia al Marcador de acceso, utilizando:

<A REF=#nombre o referencia> descripcin


del documento
Donde #nombre o referencia es el mismo identificador del
Marcador de acceso
Ejemplos: <A HREF=#PERRO>Todo sobre el perro
<A NAME=PERRO> 64
FICHA No. 32
NOMBRE: HIPERVNCULOS EN UNA IMGEN

SINTAXIS:

<A NAME=nombre o referencia>


<A HREF=#nombre o referencia>
descripcin del documento
</A>
FUNCIN: Se utiliza para colocar hipervnculos dentro de una Imagen

65
CARACTERSTICAS:
Esto se logra anidando entre las etiquetas <A> </A> la
referencia del Marcador de acceso y el URL de la imagen

Ejemplo:
<A>
<A HREF=#Cohete>
<IMG SRC=Cohete.jpg ALIGN=MIDDLE>Un paseo al espacio
</A>
<A NAME=Cohete>

66
FICHA No. 33
NOMBRE: HIPERVNCULOS A UN CORREO ELECTRONICO

SINTAXIS:

<A HREF=MAILTO:e-mail>
nombre
</A>
FUNCIN: Se utiliza para colocar hipervnculos a un correo electronico
dentro de una pagina Web

67
CARACTERSTICAS:
Esto se logra utilizando la siguiente estructura:
<A HREF=MAILTO:e-mail>nombre </A>
Donde e-mail es la direcin de correo electronico al que
deseamos enviar un correo, y nombre es la descripcin del
destinatario del correo.
Ejemplo:

<A HREF=MAILTO:grupoexodo@prodigy.net.mx>Editorial Exodo

68
FICHA No. 34
NOMBRE: COLOR DE HIPERVNCULOS

SINTAXIS:

ALINK=color
LINK=color
VLINK=color
FUNCIN: Se utiliza para cambiar el color de los hipervnculos
visitados dentro de una pagina Web

69
CARACTERSTICAS:
Esto se logra utilizando los siguientes parmetros DENTRO DE LA
ETIQUETA <BODY>
ALINK=color define el color de los hipervnculos Activos.
LINK=color define el color de los hipervnculos NO Visitados.
VLINK=color define el color de los hipervnculos Ya Visitados
Donde e-mail es la direcin de correo electronico al que
deseamos enviar un correo, y nombre es la descripcin del
destinatario del correo.
Ejemplo:

<A HREF=MAILTO:grupoexodo@prodigy.net.mx>Editorial Exodo

70
FICHA No. 35
NOMBRE: TABLAS

SINTAXIS:

<TABLE>
</TABLE>
FUNCIN: Se utilizan para Definir una Tabla, todo lo que escribamos
dentro de ests etiquetas, pertenecer a la Tabla

71
CARACTERSTICAS: al igual que las tablas de Word, en HTML,
tambin estn formadas por renglones y columnas, y a la
interseccin de ests, tambin se le llama celda.
ATRIBUTOS:
BORDER=n
Se utiliza para colocar lneas de contorno alrededor de las celdas.,
donde n es el grosor del borde de la Tabla, en Pxeles.
HEIGHT=n WIDTH=n
Se utilizan para modificar las dimensiones de una Tabla y las
Celdas; donde n es el nmero en Pxeles o %

72
FICHA No. 36
NOMBRE: FILAS

SINTAXIS:

<TR>
</TR>
FUNCIN: Se utilizan para Delimitar las Filas

73
CARACTERSTICAS: Las filas estn compuestas por celdas

74
FICHA No. 37
NOMBRE: CELDAS

SINTAXIS:

<TD>
</TD>
FUNCIN: Se utilizan para Delimitar el Principio y el Fin de cada Celda.

75
CARACTERSTICAS: Todo lo que escribamos entre ests etiquetas
es lo que se va mostrar dentro de la Celda
SINTAXIS:

<TD>Celda 1 Fila 1 </TD>


EJEMPLO DE UNA TABLA:

<TABLE>
<TR>
<TD>Celda 1 Fila 1 </TD>
</TR>
</TABLE>
76
FICHA (S) No. 38
NOMBRE: ENCABEZADOS EN COLUMNAS

SINTAXIS:

<TH>
</TH>
FUNCIN: Se utilizan para Colocar Encabezados en la Primera Fila de
una Tabla.

77
CARACTERSTICAS: Todo lo que escribamos entre ests etiquetas
es lo que se va mostrar ms resaltado y centrado con respecto a
la Celda.
SINTAXIS:

<TH></TH>
EJEMPLO:

<TABLE>
<TR>
<TH>Encabezado 1 </TH>
</TR>
</TABLE> 78
FICHA No. 39
NOMBRE: TTULOS EN UNA TABLA

SINTAXIS:

<CAPTION>
</CAPTION>
FUNCIN: Se utilizan para Colocar Ttulos o pequeos Textos en la
parte Superior de una Tabla.

79
CARACTERSTICAS: Todo lo que escribamos entre ests
etiquetas es lo que se va mostrar ms resaltado y centrado con
respecto a la Celda.
SINTAXIS:

<CAPTION>Ttulo o Texto</CAPTION>
EJEMPLO:

<TABLE>
<CAPTION>
Este es un Ttulo para mi Tabla
</CAPTION>
</TABLE>
80
FICHA No. 40
NOMBRE: ALINEACIN DE TABLAS

SINTAXIS:

<TABLE ALIGN=alineacin>
</TABLE>
FUNCIN: Se utilizan para Alinear una Tabla dentro de una Pgina Web.

81
CARACTERSTICAS: es muy importante manipular la posicin de
una tabla dentro de la ventana del Navegador de Internet
SINTAXIS:

<TABLE ALIGN=alineacin>
Donde alineacin puede ser:
RIGHT donde la Tabla a parece a la Derecha de la Ventana
CENTER donde la Tabla aparece al Centro de la Ventana
LEFT donde la tabla aparece a la Izquierda de la Ventana.

82
FICHA No. 41
NOMBRE: ALINEACIN HORIZONTAL DEL CONTENIDO DE
CELDAS
SINTAXIS:
<TD ALIGN=alineacin>
o
<TH ALIGN=alineacin>
</TD>
FUNCIN: Se utilizan para Alinear el Contenido de una Celda en una
Tabla.
83
CARACTERSTICAS: Podemos alinear el contenido de las celdas
en forma Horizontal, colocando el atributo ALIGN dentro de las
Etiquetas <TD> o <TH>
SINTAXIS:

<TD ALIGN=alineacin>
O
<TH ALIGN=alineacin>
Donde alineacin puede ser:
RIGHT donde el contenido de la Celda aparece a la Derecha.
CENTER donde el contenido de la Celda aparece al Centro.
LEFT donde el contenido de la Celda aparece a la Izquierda
JUSTIFY donde el contenido de la Celda aparece Alineado en
ambas direcciones.
84
FICHA No. 42
NOMBRE: ALINEACIN VERTICA DEL CONTENIDO DE
CELDAS
SINTAXIS:
<TD VALIGN=alineacin>
o
<TH VALIGN=alineacin>
</TD>
FUNCIN: Se utilizan para Alinear el Contenido de una Celda en una
Tabla.
85
CARACTERSTICAS: Podemos alinear el contenido de las celdas
en forma VERTICAL, colocando el atributo VALIGN dentro de las
Etiquetas <TD> o <TH>
SINTAXIS:

<TD VALIGN=alineacin>
O
<TH VALIGN=alineacin>
Donde alineacin puede ser:
TOP donde el contenido de la Celda aparece Arriba.
MIDDLE donde el contenido de la Celda aparece al Centro.
BOTTOM donde el contenido de la Celda aparece Abajo
JUSTIFY donde el contenido de la Celda aparece Alineado en
ambas direcciones. 86

You might also like