Etiquetas HTML Documento html Abre y cierra un
Etiquetas HTML
Documento html Abre y cierra un documento HTML 2
Encabezado de la página Aquí se coloca titulo e información para buscadores entre otras cosas. Está información no es visible. 3
Titulo Inserta el título de la página web. 4
Cuerpo Dentro de esta etiqueta va toda la parte visible de la página web. Atributos de la etiqueta Body � <body bgcolor=? > Configura el color de fondo de la página. � <body text=? > Configura el color por defecto del texto. � <body background="URL o ruta de archivo"></body> Coloca la imagen como fondo de la página 5
Párrafo Inserta un nuevo párrafo �Atributos �<p align=“”> Alinea el párrafo hacia la izquierda(left), derecha(right) o al centro(center) 6
Salto de línea (break) Inserta un interlineado suave. Crea otra línea 7
Negritas Inserta texto en negritas: Texto en Negritas 8
Subrayado Inserta texto subrayado 9
Cursivas Inserta Texto en cursivas 10
Sangría Inserta texto identado ( con espaciado) del lado izquierdo y derecho. 11
Espacio Inserta un espacio en blanco 12
Superíndice Inserta texto como un superíndice, es útil para crear fórmulas matemáticas 13
Subíndice Inserta texto como un subíndice, es útil para crear fórmulas químicas 14
Linea horizontal �<hr size=? > Tamaño de una linea horizontal �<hr width=? > Ancho de linea horizontal, ya sea porcentaje o valor absoluto. �<hr color=“”> establece el color de la línea �<hr align=“”> �Alinea a la izquierda, derecha o centrado 15
Formato de texto �Modifica el estilo de la letra Atributos �<font face=? ></font> Coloca el tipo de letra( arial, verdana, courier, etc. ) �<font size=? ></font> Coloca tamaño de letra, de 1 a 7 �<font color=? ></font> Configura el color (blue, green, etc. ) 16
Listas no ordenadas Inserta una lista sin orden Atributo: 1 type= a A i I Números arábigos Letras minúsculas Letras mayúsculas Números romanos en mayúscula 17
Listas ordenadas Inserta una lista ordenada Atributo type: circle o Viñeta circular type= square § Viñeta cuadrada disc • Viñeta redonda 18
Listas de definición La etiqueta <dl> “Definiton list” contiene un listado de definiciones : �en la etiqueta <dt> “Definition term” se coloca el termino �en la etiqueta <dd> “Definition description” se coloca la definición 19
Encabezado Genera un encabezado en el documento. El símbolo # representa el número del encabezado que va de 1 a 7. 20
Hipervínculo �Crea un hipervínculo a un documento Atributos �<a href="URL"></a> Hipervínculo �<a href="mailto: EMAIL"></a> Hipervínculo para envío de correo �<a name="name"></a> Ancla en el mismo documento �<a href="#name"></a> Liga hacia algún lugar dentro del mismo sitio 21
Elementos Gráficos Incorpora una imagen atributos �<img src="name"> �Establece la ruta de la imagen <img src="name" align=? > Alinea la imagen: izquierda, derecha y centro �<img src="name" border=? > Determina el contorno de la imagen. Un valor 0 no tendrá contorno 22
Imagen (continuación) �<img src="name" width=? > Determina el tamaño de la imagen (ancho) en pixeles �<img src="name" height=? > Determina el tamaño de la imagen (alto) en pixeles 23
Imagen de fondo Para establecer como fondo una imagen se añade el atributo background donde url es la direccion y el nombre del archivo de la imagen. 24
Sonidos Agrega un fondo musical a la página. Atributos: loop=“” Valor numérico de veces que se repite el archivo loop= infinite repite el archivo indefinidamente 25
Videos Añade un video a la página Web, los formatos de video más comunes son: . avi, mpg y el wmv. Atributos loop=“” Valor numérico de veces que se repite el archivo loop= infinite Repite el archivo indefinidamente Height y width Definen las dimensiones del video 26
Videos (continuacion) start=fileopen Indica que el video comenzará a visualizarse al cargar la página web start=mouseover Indica que el video se visualiza cuando el usuario coloca el puntero del mouse sobre el video. 27
Color de hipervínculos El color de los hipervínculos puede ser modificado usando los atributos alink, link y vlink de la etiqueta body. alink=“” define el color de los hipervínculos activos link=“” define el color de los hipervínculos no visitados vlink=“” define el color de los hipervínculos ya visitados 28
Tablas �<tr></tr> Crea una tabla Crea filas en una tabla �<td></td> Crea celda en una fila �<th></th> Encabezado de tabla, texto normal, negrita y centrado 29
Atributos de Tablas �<table border=#> Coloca contorno en las celdas de la tabla �<table cellspacing=#> Espacio entre las celdas de una tabla �<table cellpadding=#> Espacio entre el contorno de una celda y su contenido �<table width=# or %> Ancho de la tabla, en pixeles o porcentaje del ancho de la página 30
Atributos de tablas (cont) �<tr align=? > or <td align=? > Alineación para las celdas, izquierda derecha, centro �<tr valign=? > or <td valign=? > Alineación vertical de las celdas, arriba, abajo, en medio �<td colspan=#> Expansión de una celda, en número de columnas �<td rowspan=#> Expansión de una celda, en número de celdas 31
Marcos (frames) � <frameset></frameset> Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otros framesets � <frameset rows="value, value"> Número de lineas en un frameset, usando pixeles o porcentaje de ancho � <frameset cols="value, value"> Número de columnas en un frameset, usando pixeles o porcentaje de ancho � <frame> Frame singular dentro de un framset � <noframes></noframes> Texto que aparecerá en navegadores que no soportan frames 32
Atributos de Frames � � � <frame src="URL"> Especifica que página html se muestra <frame name="name"> Nombra al frame para que sea identificado por otros frames y accesado <frame marginwidth=#> Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1 <frame marginheight=#> Margen superior e inferior de un grame, igual o mayor a 1 <frame scrolling=VALUE> Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto <frame noresize> No permite al usuario modificar el tamaño de un frame 33
- Slides: 33