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>



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

MANUAL BASICO EN HTML

Documents

Transcript of MANUAL BASICO EN HTML