Fichas de html 2014

1

FICHA No. 1

NOMBRE: Inicio y Fin de un Documento HTML

SINTAXIS:

<HTML> </HTML>

FUNCIÓN: Es la Etiqueta con la que debe Comenzar y Finalizar Todo Documento de Html.

2

ATRIBUTOS: NINGUNO

3

FICHA No. 2

NOMBRE: Encabezado o Cabecera de un Documento HTML

SINTAXIS:

<HEAD> </HEAD>

FUNCIÓN: Indican el Inicio y Fin de la Cabecera de un Documento Html.

4

ATRIBUTOS: NINGUNO

5

FICHA No. 3

NOMBRE: Título de la Página o Documento HTML

SINTAXIS:

<TITLE> </TITLE>

FUNCIÓN: Entre las dos Etiquetas queda el Título de la Página Web, que es el que aparece en la Barra de Títulos del Navegador

6

ATRIBUTOS: NINGUNO

7

FICHA No. 4

NOMBRE: Cuerpo de la Página Web

SINTAXIS:

<BODY> </BODY>

FUNCIÓN: Marcan el Inicio y Fin del Cuerpo de la Página Web.

8

ATRIBUTOS: NINGUNO

9

FICHA No. 5

NOMBRE: “Salto” de Línea

SINTAXIS:

<BR>FUNCIÓN: Es la Etiqueta con la que indicamos que deseamos hacer un “salto” de Línea.

10

ATRIBUTOS: NINGUNO

11

FICHA No. 6

NOMBRE: Espacio en Blanco

SINTAXIS:

FUNCIÓN: Es la Etiqueta con la que Insertamos Espacios en Blanco Entre Palabras. (siempre debe escribirse en minúsculas) .

12

ATRIBUTOS: NINGUNO

13

FICHA No. 7

NOMBRE: Cambio de Párrafo

SINTAXIS:

<P> </P>

FUNCIÓN: Es la Etiqueta con la que debe Comenzar y Finalizar un Párrafo.

14

ATRIBUTO: ALIGN (alineación)

Para realizar la alineación de un párrafo podemos utilizar el atributo ALIGN, de la siguiente manera:

<P ALIGN=“alineación”>Donde la “alineación” puede tomar alguno de los siguientes valores:

CENTER Todas las Líneas Centradas

LEFT Todas las Líneas Alineadas a la Izquierda

RIGHT Todas las Líneas Alineadas a la Derecha

15

FICHA No. 8

NOMBRE: Centrado de un Texto Corto o Título

SINTAXIS:

<CENTER> </CENTER>

FUNCIÓN: Se emplea para Centrar un Texto Corto o Título.

16

ATRIBUTOS: NINGUNO

17

FICHA No. 9

NOMBRE: Sangría de un Párrafo

SINTAXIS:

<BLOCKQUOTE> </BLOCKQUOTE>

FUNCIÓN: Se utilizan para Colocar una Sangría a un Párrafo

18

ATRIBUTOS: NINGUNO

19

FICHA No. 10

NOMBRE: Texto en Negrita o Bold

SINTAXIS:

<B> </B>

FUNCIÓN. Se utiliza para Resaltar un Texto en Negrita

20

ATRIBUTOS: NINGUNO

21

FICHA No. 11

NOMBRE: Texto en Cursiva o Itálica

SINTAXIS:

<I> </I>

FUNCIÓN: Se utiliza para Resaltar un Texto en Letra Cursiva o Itálica.

22

ATRIBUTOS: NINGUNO

23

FICHA No. 12

NOMBRE: Texto Subrayado

SINTAXIS:

<U> </U>

FUNCIÓN: Se utiliza para Resaltar un Texto Subrayándolo.

24

ATRIBUTOS: NINGUNO

25

FICHA No. 13

NOMBRE: Superíndices

SINTAXIS:

<SUP> </SUP>

FUNCIÓN: Se utiliza para colocar números o letras, como exponentes, en fórmulas matemáticas o químicas.

26

ATRIBUTOS: NINGUNO

27

FICHA No. 14

NOMBRE: Subíndices

SINTAXIS:

<SUB> </SUB>

FUNCIÓN: Se utiliza para colocar letras o números como subíndices, en fórmulas matemáticas o químicas.

28

ATRIBUTOS: NINGUNO

29

FICHA No. 15

NOMBRE: Tamaño de Letra

SINTAXIS:

<FONT SIZE=“x”> </FONT>

FUNCIÓN: Nos Permite Presentar los Textos en Diferentes Tamaños de Letra

30

Donde: x es el Número que Indica el tamaño de la letra, el cual está comprendido entre 1 y 7, donde 1 es el menor tamaño y 7 el mayor

ATRIBUTOS: SIZE=“x”

EJEMPLO CON ATRIBUTOS:

<FONT SIZE=3> texto </FONT>

31

FICHA No. 16

NOMBRE: Color de Letra

SINTAXIS:

<FONT COLOR=“x”> </FONT>

FUNCIÓN: Nos Permite Presentar los Textos en Diferentes Colores de Letra

32

Donde: “color” es el Nombre del Color de la letra que deseamos aplicar, el cual debe escribirse en INGLÉS o con un CÓDIGO

ATRIBUTOS: COLOR=“color”


<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

33

COLOR NOMBRE EN INGLÉS

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

ROSA PINK

34

FICHA No. 17

SINTAXIS:

NOMBRE: Nombre de Letra

<FONT FACE=“nombre”> </FONT>

FUNCIÓN: Nos Permite Presentar los Textos en Diferentes Tipos o Nombres de Letra

35

Donde: “nombre” es el Nombre del Tipo de la letra que deseamos aplicar, el cual debe escribirse en INGLÉS

ATRIBUTOS: FACE=“nombre”


<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>

36

FICHA No. 18

NOMBRE: Títulos o Encabezados

SINTAXIS:

<H#> </H#>

FUNCIÓN: Nos Permite Colocar Títulos o Encabezados en Párrafos de Texto.

37

Donde: # puede ser un Número cualquiera entre 1 y 6, siendo 1 el Título el de mayor tamaño y 6 el de menor, auque lo mas común es utilizar títulos entre 1 y 3

ATRIBUTOS: #

EJEMPLOS CON ATRIBUTOS:

<H1> texto </H1>

<H2> texto </H2>

<H3> texto </H3>

38

ListasEn el lenguaje HTML es posible mostrar el texto en forma de lista o numeración.Existen tres tipos de listas que podemos utilizar:

• No ordenadas: en las cuales se mostrará un símbolo para indicar a los diferentes elementos de la lista

• Ordenadas: en las que se utilizará un número para indicar el orden de los elementos de la lista

• De definición: que están compuestas por términos o expresiones y su definición.

39

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>FUNCIÓN: En este tipo de listas, se utiliza como marcador un símbolo que puede ser una circunferencia (circle), un circulo (disc) o un cuadro (square) para indicar sus elementos.

40

ATRIBUTOS: circle, disc o square los cuales deben escribirse siempre en minúsculasEJEMPLOS:

<UL TYPE=disc>


</UL>

<UL TYPE=square>

<LI>Elemento 1 de la lista

</UL>

<UL TYPE=circle>


</UL>

41

FICHA No. 20

NOMBRE: Listas ORDENADAS

SINTAXIS:

<OL TYPE=“tipo”>


</OL>FUNCIÓN: En este tipo de listas, se utiliza un número o un elemento de orden que pueden ser letras minúsculas o mayúsculas o bién números latinos para etiquetar los elementos de la lista.

42

ATRIBUTOS: “tipo” es el símbolo de numeración de nuestra lista ordenada y toma alguno de los siguientes valores:

1 La numeración se presenta con Números Arábigos

a Numeración con letras minúsculas

A Numeración con letras mayúsculas

i Numeración con números romanos en minúsculas

I Numeración con números romanos en mayúsculas

EJEMPLOS:

<OL TYPE=1>


</OL>

<OL TYPE=A>

<LI>Elemento 1 de la lista

</OL>

43

FICHA No. 21

NOMBRE: Listas de DEFINICIÓN

SINTAXIS:

<DL>

<DT>Término a Definir

<DD> Definición del Término

</DL>FUNCIÓN: En este tipo de listas, se incluyen dos elementos: por un lado, la definición, que aparece al lado izquierdo, y por otro, el término que aparece tabulado a la derecha.

44

ATRIBUTOS: Ninguno

45

FICHA No. 22

NOMBRE: Listas de MENÚ

SINTAXIS:

<MENU>

<LI>Elemento 1 del menú

</MENU>FUNCIÓN: Este tipo de listas, tiene el mismo propósito que la lista no ordenada, pero el resultado final es una lista más compacta.

46

ATRIBUTOS: Ninguno

EJEMPLOS:

<MENU>

<LI> Elemento 1 del menú



</MENU>

47

FICHA No. 23

NOMBRE: LÍNEAS DE SEPARACIÓN

SINTAXIS:

<HR>

FUNCIÓN: Se utiliza para colocar una Línea Horizontal como Separador de Bloques de Texto.

48

ATRIBUTO: WIDTH=#

Donde # indica el ancho de la Línea, en pixeles o porcentaje %

ATRIBUTO: SIZE=#

Donde # indica el grosor de la Línea, en pixeles

ATRIBUTO: COLOR=“color”

Donde “color” es el nombre del color que deseamos aplicar a la línea

ATRIBUTO: ALIGN=CENTER o LEFT o RIGHT

Donde Align=center o left o right indica la posición de la línea en la Pantalla.

49

FICHA No. 24

NOMBRE: INSERCIÓN DE IMÁGENES

SINTAXIS:

<IMG SRC=URL>

FUNCIÓN: Se utiliza para Insertar una Imagen dentro de una Página Web. Donde URL es la Dirección y Nombre del Archivo que Contiene la Imagen

50

a

ATRIBUTO: ALT=“descripción 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=“posición” ; donde posición puede ser:

MIDDLE en la parte media del párrafo

BOTTOM en la parte Inferior del párrafo

TOP en la parte superior del párrafo

LEFT en la parte izquierda del párrafo

RIGHT en la parte derecha del párrafo

ATRIBUTOS HSPACE=pixeles VSPACE=pixeles (distancia entre el texto y la imagen

ATRIBUTO BORDER=“tamaño” donde tamaño, es el ancho del borde

51

FICHA No. 25

NOMBRE: COLOR DE FONDO DE UNA PAGINA

SINTAXIS:

BGCOLOR=“color”

FUNCIÓN: Se utiliza para cambiar el color del fondo de la pagina Web

52

ATRIBUTO: NINGUNO

CARACTERÍSTICAS: Es un parámetro y como Tal Siempre Se Coloca Dentro de una Etiqueta, para este caso de Parámetro va Dentro de la Etiqueta BODY

Ejemplos:

<BODY BGCOLOR=RED>

<BODY BGCOLOR=#FFFF00>

53

FICHA No. 26

NOMBRE: IMAGEN DE FONDO DE UNA PAGINA

SINTAXIS:

BACKGROUND=“nombre de la imagen”

FUNCIÓN: Se utiliza para colocar una imagen como fondo de una pagina Web

54

ATRIBUTO: NINGUNO

CARACTERÍSTICAS: Es un Parámetro y como Tal Siempre Se Coloca Dentro de una Etiqueta, para este Caso de Parámetro va Dentro de la Etiqueta BODY

Ejemplos:

<BODY BACKGROUND=“Padouk.jpg”>

<BODY BACKGROUND=“Cadenas.jpg”>

55

FICHA No. 27

NOMBRE: FONDOS SONOROS

SINTAXIS:

<BGSOUND SRC=URL LOOP=“tiempo”>

FUNCIÓN: Se utiliza para colocar un fondo sonoro en una pagina Web

56

ATRIBUTO: NINGUNO

CARACTERÍSTICAS:

URL indica el nombre y ubicación del archivo

Tiempo indica el número de veces que deseamos se repita el sonido y los valores que puede tomar son:

LOOP=número

LOOP=INFINITE

Ejemplo:

<BGSOUND SRC=“Melodia_de_caja_de_música.mid LOOP=INFINITE>

57

FICHA No. 28

NOMBRE: ANIMACIONES

SINTAXIS:

<IMG SRC=URL>

FUNCIÓN: Se utiliza para colocar imágenes con animación

58

ATRIBUTO: NINGUNO

CARACTERÍSTICAS:


Deben utilizarse archivos con extensión .GIF

Ejemplos:

<IMG SRC=“Café.gif”>

<IMG SRC=“Ballena.gif”>

59

FICHA No. 29

NOMBRE: VIDEOS O PELICULAS

SINTAXIS:

<IMG DYNSRC=URL>

FUNCIÓN: Se utiliza para colocar videos o películas en una página Web

60

ATRIBUTO: LOOP=“número”, número 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 automáticamente

START=MOUSEOVER, indica que el video comienza cuando pase sobre él el mouse.

CARACTERÍSTICAS:


Deben utilizarse archivos con extensión .AVI .MPG y .WMV

Ejemplo:

<IMG DYNSRC=“Perro_malo.wmv” WIDTH=180 HEIGHT=180>

61

FICHA No. 30

NOMBRE: HIPERVÍNCULOS EXTERNOS

SINTAXIS:

<A HREF=URL>”descripción del documento

FUNCIÓN: Se utiliza para colocar hipervínculos a otras páginas Web

62

ATRIBUTO: NINGUNO.

CARACTERÍSTICAS:

URL indica el nombre y trayectoria de la página a vincular

“descripción del documento”, es por lo general un texto descriptivo de la página 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

63

FICHA No. 31

NOMBRE: HIPERVÍNCULOS INTERNOS

SINTAXIS:

<A NAME=“nombre o referencia”>

<A HREF=“#nombre o referencia”> ”descripción del documento”

FUNCIÓN: Se utiliza para colocar hipervínculos internos dentro de una página Web

64

CARACTERÍSTICAS:

Primero debe crearse un “Marcador de acceso” dentro de la página 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 página, se crea un hipervínculo que haga referencia al “Marcador de acceso”, utilizando:

<A REF=“#nombre o referencia”> “descripción 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>

65

FICHA No. 32

NOMBRE: HIPERVÍNCULOS EN UNA IMÁGEN

SINTAXIS:

<A NAME=“nombre o referencia”>

<A HREF=“#nombre o referencia”> ”descripción del documento”

</A>FUNCIÓN: Se utiliza para colocar hipervínculos dentro de una Imagen

66

CARACTERÍSTICAS:

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>

67

FICHA No. 33

NOMBRE: HIPERVÍNCULOS A UN CORREO ELECTRONICO

SINTAXIS:

<A HREF=MAILTO:”e-mail”>

“nombre”

</A>

FUNCIÓN: Se utiliza para colocar hipervínculos a un correo electronico dentro de una pagina Web

68

CARACTERÍSTICAS:

Esto se logra utilizando la siguiente estructura:

<A HREF=MAILTO:”e-mail”>”nombre” </A>

Donde “e-mail” es la direción de correo electronico al que deseamos enviar un correo, y “nombre” es la descripción del destinatario del correo.

Ejemplo:

<A HREF=MAILTO:[email protected]>Editorial Exodo

69

FICHA No. 34

NOMBRE: COLOR DE HIPERVÍNCULOS

SINTAXIS:

ALINK=“color”

LINK=“color”

VLINK=“color”

FUNCIÓN: Se utiliza para cambiar el color de los hipervínculos visitados dentro de una pagina Web

70

CARACTERÍSTICAS:

Esto se logra utilizando los siguientes parámetros DENTRO DE LA ETIQUETA <BODY>

ALINK=“color” define el color de los hipervínculos Activos.

LINK=“color” define el color de los hipervínculos NO Visitados.

VLINK=“color” define el color de los hipervínculos Ya Visitados

Donde “e-mail” es la direción de correo electronico al que deseamos enviar un correo, y “nombre” es la descripción del destinatario del correo.

Ejemplo:

<A HREF=MAILTO:[email protected]>Editorial Exodo

71

FICHA No. 35

NOMBRE: TABLAS

SINTAXIS:

<TABLE>

</TABLE>FUNCIÓN: Se utilizan para Definir una Tabla, todo lo que escribamos dentro de estás etiquetas, pertenecerá a la Tabla

72

CARACTERÍSTICAS: al igual que las tablas de Word, en HTML, también están formadas por renglones y columnas, y a la intersección de estás, también se le llama celda.

ATRIBUTOS:

BORDER=“n”

Se utiliza para colocar líneas de contorno alrededor de las celdas., donde “n” es el grosor del borde de la Tabla, en Píxeles.

HEIGHT=“n” WIDTH=“n”

Se utilizan para modificar las dimensiones de una Tabla y las Celdas; donde “n” es el número en Píxeles o %

73

FICHA No. 36

NOMBRE: FILAS

SINTAXIS:

<TR>

</TR>FUNCIÓN: Se utilizan para Delimitar las Filas

74

CARACTERÍSTICAS: Las filas están compuestas por celdas

75

FICHA No. 37

NOMBRE: CELDAS

SINTAXIS:

<TD>

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

76

CARACTERÍSTICAS: Todo lo que escribamos entre estás 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>

77

FICHA (S) No. 38

NOMBRE: ENCABEZADOS EN COLUMNAS

SINTAXIS:

<TH>

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

78

CARACTERÍSTICAS: Todo lo que escribamos entre estás etiquetas es lo que se va mostrar más resaltado y centrado con respecto a la Celda.

SINTAXIS:

<TH>…</TH>EJEMPLO:

<TABLE>

<TR>

<TH>Encabezado 1 </TH>

</TR>

</TABLE>

79

FICHA No. 39

NOMBRE: TíTULOS EN UNA TABLA

SINTAXIS:

<CAPTION>

</CAPTION>FUNCIÓN: Se utilizan para Colocar Títulos o pequeños Textos en la parte Superior de una Tabla.

80

CARACTERÍSTICAS: Todo lo que escribamos entre estás etiquetas es lo que se va mostrar más resaltado y centrado con respecto a la Celda.

SINTAXIS:

<CAPTION>”Título o Texto”</CAPTION>EJEMPLO:

<TABLE>

<CAPTION>

Este es un Título para mi Tabla

</CAPTION>

</TABLE>

81

FICHA No. 40

NOMBRE: ALINEACIÓN DE TABLAS

SINTAXIS:

<TABLE ALIGN=“alineación”>

</TABLE>

FUNCIÓN: Se utilizan para Alinear una Tabla dentro de una Página Web.

82

CARACTERÍSTICAS: es muy importante manipular la posición de una tabla dentro de la ventana del Navegador de Internet

SINTAXIS:

<TABLE ALIGN=“alineación”>Donde “alineación” 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.

83

FICHA No. 41

NOMBRE: ALINEACIÓN HORIZONTAL DEL CONTENIDO DE CELDASSINTAXIS:

<TD ALIGN=“alineación”>

o

<TH ALIGN=“alineación”>

</TD>FUNCIÓN: Se utilizan para Alinear el Contenido de una Celda en una Tabla.

84

CARACTERÍSTICAS: Podemos alinear el contenido de las celdas en forma Horizontal, colocando el atributo ALIGN dentro de las Etiquetas <TD> o <TH>

SINTAXIS:

<TD ALIGN=“alineación”>

O

<TH ALIGN=“alineación”>

Donde “alineación” 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.

85

FICHA No. 42

NOMBRE: ALINEACIÓN VERTICA DEL CONTENIDO DE CELDASSINTAXIS:

<TD VALIGN=“alineación”>

o

<TH VALIGN=“alineación”>

</TD>FUNCIÓN: Se utilizan para Alinear el Contenido de una Celda en una Tabla.

86

CARACTERÍSTICAS: Podemos alinear el contenido de las celdas en forma VERTICAL, colocando el atributo VALIGN dentro de las Etiquetas <TD> o <TH>

SINTAXIS:

<TD VALIGN=“alineación”>

O

<TH VALIGN=“alineación”>

Donde “alineación” 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.

Fichas de html 2014

Education

Transcript of Fichas de html 2014