docetiquetas html - Creaciones y Desarrollo Web
download 
Demanda Transcripción
etiquetas html - Creaciones y Desarrollo Web
ETIQUETAS HTML El código HTML lo podemos escribir en el Block de Notas o en Workpad al terminar de digitarlo lo guardamos y cambiamos la extensión a HTML. Y cuando queramos hacer cambios simplemente presionamos el click derecho sobre el archivo seleccionamos la opción de abrir con y escogemos el programa con el que lo escribimos ya sea Block de Notas o el Workpad o el deseado. Hay que tener presente que toda etiqueta HTML empieza con el signo menor que “<” y termina con el signo mayor que “>”. Etiquetas Principales para un documento HTML <html> indica el inicio del documento HTML <head> indica el encabezado del documento HTML </head> indica el final del encabezado del documento <body> inicio del cuerpo del documento HTML Aquí va el contenido a mostrar al usuario final </body> Indica el final del cuerpo </html> Indica el final del Documento HTML Ver Ejemplo en línea Descargar Ejemplo 1 Etiquetas Principales que van dentro de las etiquetas <head> y </head> Dentro de las etiquetas que marcan nuestro encabezado encontramos algunas etiquetas como: <title> </title> Esta muestra el titulo de nuestro documento o ventana <style></style> Para definir estilos como colores, tamaños, fondos, entre otros atributos de presentación que podamos definir y dar mejor apariencia a nuestros documentos Si quieres aprender más de stylos visita nuestros Tutoriales de hojas cascadas o CSS. <javascript></javascript> Para indicar funciones y programación en javascript También dentro de estas etiquetas podemos meter la etiqueta <Meta> que es para la información para los buscadores así como también la etiqueta <link> que sirve para ligar hojas de estilo (css) a nuestro documento. Ejemplo: <html> <head> <title> Mi primer HTML</title> </head> <body> Aquí va el contenido a mostrar al usuario final </body> </html> Ver Ejemplo Descargar Ejemplo Etiquetas Principales que van dentro de las etiquetas <body> y </body> Dentro de estas etiquetas como aquí va todo lo mostrar al usuario final encontramos gran cantidad de etiquetas. ETIQUETA <b></b> <u></u> <h1><h1> <center></center> <p></p> <br> <img /> EXPLICACION Todo lo que este dentro de estas etiquetas se mostrara como texto en negrita. Ejemplo: <b>Texto en Negrita</b> Todo lo que este dentro de estas etiquetas se mostrara como texto subrayado. Ejemplo: <u>Texto Subrayado</u> Crea encabezados Ejemplos: <h1>Encabezado 1<h1> <h2>Encabezado 2<h2> <h3>Encabezado 3<h3> <h4>Encabezado 4<h4> Todo lo que este dentro de estas etiquetas se mostrara como texto centrado. Ejemplo: <center>Texto Centrado</center> Inicio y final de un párrafo Ejemplo: <p>Párrafo 1</p> <p>Párrafo 2</p> Salto de línea Para insertar imágenes Ejemplo: <img src=”imágenes/img1.jpg” alt=”Mi primer imagen” /> ATRIBUTOS Height=”n” indica el ancho Width=”n” indica el alto Alt=”d” cuando se coloca encima el cursor el texto a mostrar Border=”n” si desea que la imagen tenga un borde Src=”d” indica la ruta donde se encuentra la imagen a mostrar. D=descripción N=valor numerico De todos estos atributos solo el src es obligado los demas son para formato <ol><li></li></ol> <ul><li></li></ul> <a></a> Listas ordenadas por números o letras Ejemplo: <ol> <li type=”a”>Elemento 1 </li> <li type=”a”>Elemento 2 </li> <li type=”a”>Elemento 3 </li> </ol> Listas desordenadas Ejemplo: <ul> <li type=”circle”>Elemento 1 </li> <li type=” circle”>Elemento 2 </li> <li type=” circle”>Elemento 3 </li> </ul> Este permite hacer enlaces a diferentes documentos Ejemplos: <a href=”pagina2.html”>Ir a página 2</a> <a href=”pagina2.doc”>Enlace a documento de work</a> href=”mailto:dircorreo”>Abre el Outlook para enviar correo</a> <table></table> Crea tablas <tr></tr> <td></td> Crea una fila Crea una columna Type=”t” indica el tipo de lista si es en letras o en numeros Entre los tipos “t” tenemos: a= minúsculas A= mayúsculas 1= números I=romanos Type=”t” indica el tipo de lista Entre los tipos “t” tenemos: circle disc square href=”d” indica la ruta al hacer el enlace Border=”n” Numerico, indica si lleva borde y que ancho, no es obligatorio Caption=”d” Texto, indica el titulo de la tabla, no es obligatorio Widht=”N”, ancho Heigth=”N” alto Background=”” Color de fondos, numero hexadecimal que indica el color Colspan=”N” cantidad de columnas a ocupar Rowspan=”N” cantidad de filas a ocupar Aling=”” si es centrado,justificado, alineado a la derecha o alineado a la izquierda (cener,justify,rigth,left) Valing=”” top,center indica si la colunma es muy alta de que forma se acomodaran los valores arriba,abajo, centrado Ejemplo completo de la tabla: <table> <tr> <td>Celda 1:1</td> <td>Celda 1:2</td> <td>Celda 1:3</td> </tr> <tr> <td>Celda 2:1</td> <td>Celda 2:2</td> <td>Celda 2:3</td> </tr> <tr> <td colspan=”2” aling=”center”>Celda combinada y centrada2:1</td> <td>Celda 2:3</td> </tr> </table> Ver Ejemplo Descargar Ejemplo
