MANUAL BASICO EN HTML
-
Upload
princesyadi27 -
Category
Documents
-
view
2.228 -
download
2
Transcript of MANUAL BASICO EN HTML
GUIA PARA EL ESTUDIANTE
MANUAL BASICO
HTML Son las iniciales de Hiper Text Markup Language. Es un conjunto o serie de etiquetas incluidas en archivos de texto que definen la estructura de un documento WWW y sus vínculos con otros documentos.Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para determinar como desplegar la página web.
¿QUÉ ES HTML?
Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes .El código HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<>).
EL LENGUAJE DE MARCADO DE HTML
Una página web esta compuesta de 2 partes: el encabezamiento y el cuerpo de la página, existen tres etiquetas fundamentales, en el archivo HTML de manera obligatoria que son:
<html> </html> Indica al navegador que el documento texto que esta leyendo es un documento se abre al inicio del archivo y se cierra al final del mismo.
<head> </head> Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de <html>.
<title> </title> Titulo de la ventana.
<body> </body> Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se abre luego de cerrar el encabezamiento con </head> y se extiende hasta el
final de la página, cerrándose antes de </HTML>.
ESTRUCTURA DE UNA PÁGINA WEB
CODIFICACIÒN:<HTML> <HEAD> <TITLE> EJERCICIO N1 </TITLE> </HEAD> <BODY> <BR> YADIRA HARO </BODY></HTML>
EJEMPLO BÀSICO
TABLA DIRECTIVA DE HTMLDIRECTIV
ASTIPOS FUNCION
<BR> ABIERTA SALTO DE LINEA
<CENTER> CERRADA CENTRADO
<P> CERRADAELABORA PARRAFOS
<B> CERRADA NEGRITA
<STRONG> CERRADA NEGRITA
<I> CERRADA CURSIVA
<U> CERRADA SUBRAYADO
TABLA DIRECTIVA DE HTMLDIRECTIVAS TIPOS FUNCION
<S> CERRADA TACHADO
<H1,H6> CERRADA TAMAÑO DE LETRA
<MARQUEE> CERRADA MOVIMIENTO
<HR> ABIERTA LINEAS RECTAS HORIZONTALES
<OL> CERRADA CREA LISTAS NUMERADAS
<UL> CERRADA LISTAS CON VIÑETAS
<LI> ABIERTA CREAR UNA LISTA
DIRECTIVAS
TIPOS FUNCION
<TABLE> CERRADA
DEFINE UNA TABLA
<a> CERRADA
ELABORA PARRAFOS
<TR> ABIERTA FILA DE UNA TABLA
<TD> CERRADA
CELDA DE UNA TABLA
<STYLE> CERRADA
PARA COLOCAR EL ESTILO INTERNO DE LA PÁGINA.
BORDER-STYLE
ABIERTA
ESTABLECE EL ESTILO DEL BORDE DE UN ELEMENTO.
ESTA DEBE SER ESPECIFICADA PARA QUE EL BORDE SEA VISIBLE.
ETIQUETA BODY
FUNCION
BGCOLOR Define el color de fondo de la página
BORDERCOLOR
Define el color del borde
TEXT Define el color del texto de la página
BACKGROUND Define el archivo gráfico que será desplegado como fondo
BGSOUND Define el archivo de audio que se tocará en la página.
EMBED Define el archivo de video que se visualizara en la página
ETIQUETA BODY
FUNCION
IMG Requiere del atributo src, que indica la ruta en la que se encuentra la imagen.
SRC Indica dónde está el fichero a reproducir.
LOOP Permite hacer repeticiones.
HEIGHT Define la altura de la tabla en pixels o porcentajes.
WIDTH Define la anchura de la tabla en pixels o porcentajes .
P ALING Alinea horizontalmente la tabla con respecto a su entorno
ESTRUCTURA BASICA PARA REALIZAR VIÑETAS Tipos de viñetas:Start= circle : punto negroType= Square: cuadrado negro Type= Disc: círculo vacío <ul><li><li></ul> MODIFICADORES<ol type = I> Números romanos en mayúsculas<ol type = i> Números romanos en minúsculas<ol type = A> Letras mayúsculas<ol type = a> Letras minúsculas
http://www.flashvortex.com Flashvortex es una elemento muy decorativo donde podremos encontrar menús en flash, banners, botones y texto animado que podremos agregar al blog o pagina web, y que además, nos permite personalizar los elementos con animación flash. Còdigo<scriptsrc="http://h1.flashvortex.com/display.php?id=2_1304693351_44505_305_18719_405_39_8_1_45"type="text/javascript"></script>
BANNERS PARA PAGINAS WEB
Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.Cada fila de la tabla se indica mediante las <tr>.....</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.
CREACION DE TABLAS
CÒDIGO:<table border= 4><tr><td>Celda 1</td><td>Celda 2</td><td>Celda 3</td></tr><tr><td>Celda 4</td><td>Celda 5</td><td>Celda 6</td></tr></table>
EJEMPLO BASICO
Los atributos COLSPAN y ROWSPAN nos permiten crear celdas que se extiendan varias columnas o varias filas.
EXPANSION DE CELDAS Y COLUMNAS CON ROWSPAN Y
COLSPAN
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
<tr>
<td rowspan="2" valign="middle" align="left">Este texto está alineado al centro verticalmente y a la izquierda horizontalmente</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
CODIFICACIÒN
FIN DE LAS PRESENTACIONE
S
GRACIAS