Download - MANUAL BASICO EN HTML
![Page 1: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/1.jpg)
GUIA PARA EL ESTUDIANTE
MANUAL BASICO
![Page 2: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/2.jpg)
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?
![Page 3: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/3.jpg)
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
![Page 4: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/4.jpg)
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
![Page 5: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/5.jpg)
CODIFICACIÒN:<HTML> <HEAD> <TITLE> EJERCICIO N1 </TITLE> </HEAD> <BODY> <BR> YADIRA HARO </BODY></HTML>
EJEMPLO BÀSICO
![Page 6: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/6.jpg)
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
![Page 7: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/7.jpg)
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
![Page 8: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/8.jpg)
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.
![Page 9: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/9.jpg)
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
![Page 10: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/10.jpg)
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
![Page 11: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/11.jpg)
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
![Page 12: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/12.jpg)
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
![Page 13: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/13.jpg)
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
![Page 14: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/14.jpg)
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
![Page 15: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/15.jpg)
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
![Page 16: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/16.jpg)
<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
![Page 17: MANUAL BASICO EN HTML](https://reader035.vdocumento.com/reader035/viewer/2022081504/558a672dd8b42a4e4a8b478a/html5/thumbnails/17.jpg)
FIN DE LAS PRESENTACIONE
S
GRACIAS