Introduccion A HTML

Introduccin a HTML
El lenguaje HTML se basa en el uso de etiquetas tambin llamadas marcas, directivas o comandos (tags). Estas etiquetas son fragmentos de texto delimitados por los smbolos menor que (<) y mayor que (>). Bsicamente esta etiquetas indican al navegador, la forma de representar los elementos (texto, grficos, etc.) que contiene el documento. Existe normalmente una etiqueta de inicio <> y una etiqueta de final </>. Aunque hay algunos comandos que solo disponen de la de inicio . Las etiquetas mal escritas o desconocidas para un navegador son simplemente ignoradas. Sin embargo, los errores de sintaxis, pueden provocar errores de visualizacin del documento.
ETIQUETAS GENERALES
ETIQUETA INICIAL ETIQUETA FINAL DESCRIPCIN
<head> <title> <!-<body>
</head> </title> -- > </body>
Definiciones de la cabecera del documento Titulo de la pagina web Comentarios Cuerpo de la pagina, a partir de aqu se ir introduciendo todo el cdigo que queremos que aparezca en nuestra pagina Se utiliza para separar prrafos


 
<hr>
Para hacer cambio de lnea

Para crear una lnea
Ejemplos
<HTML> <HEAD> <TITLE>Ttulo</TITLE> </HEAD>
<BODY> <!- - Inicia cuerpo del cdigo --> (...)
</BODY>
</HTML>
ETIQUETAS A UTILIZAR EN BODY

Dentro del comando Body, podemos hacer una mezcla de comandos de tal manera que podamos darle ms formato a esta etiqueta. Algunas etiquetas son las siguientes
ETIQUETA DESCRIPCIN EJEMPLO
Bgcolor Text link vlink Alink
Indica el color de fondo del documento Para especificar el color general del texto Para especificar el color de texto de los enlaces Para indicar el color de texto de los enlaces ya visitados Para poner el color en que se pondr el texto al momento de ser activado Carga una imagen que ser el fondo del documento.
Bgcolor = blue Bgcolor=#0000FF Text= white Text=#FFFFFF Link=blue Link=#0000FF Vlink=fuchsia Alink=red Alink=#FF0000
background
Background=imagen.jpg Background=ruta completa + nombre de la imagen + extensin El color se puede manejar, ya sea utilizando la palabra del color (en idioma ingls) o utilizando su valore en hexadecimal.
ETIQUETAS
Podemos encontrar distintas etiquetas que nos ayudarn a dar formato a nuestros textos, desde su tamao, forma o la funcin que tienen en el documento html.
<hn>
</hn> *n puede variar de 1 a 6
Las cabeceras se emplean para dividir los documentos en secciones ms concretamente, para marcar los ttulos de las secciones. * Pone el texto en negritas Pone el texto subrayado Pone el texto en cursiva Pone el texto en un tamao menor y los caracteres toman la forma de mquina de escribir. Texto intermitente Pone el texto al tamao ms grande de fuente Para el manejo de parrafos
 <tt>
 </tt>
<blink> <big> 
</blink> </big>
Ejemplo
Cdigo Fuente Resultado
Este texto es un nico prrafo, independientemente del nmero de lneas en que est escrito.
Este texto son tres prrafos, independientemente del nmero de lneas en que est escrito
Ejemplo 1
Ejemplo 2
Ejemplo
Cdigo Fuente Resultado
 Esto es un texto alineado a la izquierda Esto es un texto alineado al centro Esto es un texto alineado a la derecha
Ejemplo 3
Ejemplo 4 Ejemplo 5
ETIQUETAS
 <code> <strike>
 </code> </strike>
Pone el texto al menor tamao de fuente. Pone el texto como superndice Pone el texto como subndice Se utiliza para representar una etiqueta HTML, o cdigo del programa. Texto tachado
<center>

</center>
Centra el texto en la pantalla.

Permite controlar casi totalmente el estilo de un bloque de texto.
ETIQUETAS UTILIZADAS EN FONT

ETIQUETA DESCRIPCIN EJEMPLO
Size Color Face Size=+n
Indicamos el tamao del texto, el valor por default es el 3 Indicamos el color del texto Indicamos el tipo de letra Aumenta el tamao sobre el default, segn se le indique
Size = 13 Color=red Face=Arial size+=+3 (aumenta 3 veces sobre el default)
Ejemplo
.
Cdigo Fuente Mostrando tipo Arial Mostrando tipo Times New Roman Mostrando tipo Courier 
Resultado
Ejemplo 6
Ejemplo 7 Ejemplo 8
Ejemplo
.
Cdigo Fuente Mostrando texto en Rojo Mostrando texto en Azul Mostrando texto en Amarillo
Resultado
Ejemplo 9
 Mostrando texto en Verde

 Mostrando texto en Blanco
Ejemplo
.
Cdigo Fuente Tamao 7 Tamao 5 Tamao 3 Tamao 1
Resultado
Ejemplo10
Ejemplo
.
Ejemplo
.
GRAFICOS
Podemos incluir grficos en nuestro documento HTML, para darle ms presentacin a nuestra pgina, algunas etiquetas utilizadas son las siguientes.
<img src=imagen.gif >
Indica la imagen que ser incertada. Es necesario incluir su extensin. En caso de que la imagen no se encuentre en la misma ruta donde se esta realizando la pagina web, deber darse toda la ruta donde se encuentra dicha imagen.
Al igual podemos incluir texto a nuestras imgenes y darles un formato de presentacin, a continuacin unos ejemplos.
Ejemplos
Ejemplos
Ejemplos
Ejemplos
Ejemplos
TABLAS
Originalmente, la funcin de las tablas era presentar la informacin de forma ordenada. Sin embargo, pueden ser utilizadas para distribuir los distintos elementos de nuestra pgina (grficos, texto...) pudiendo, incluso, generar mrgenes con el fin de dar una presencia ms elegante a nuestro documento
<table> <tr> <td> border Width
</table> </tr> </td>
Para indicar que a continuacin empieza o termina una tablas Cuando vamos a generar la primera fila Indicamos los elementos que tiene la fila, es decir, las columnas existentes. Indicamos que la tabla tendr un borde de grueso especifico Que tendr un ancho definido, puede ser por tabla, por fila o por columna
Ejemplo
<TABLE>
<TR>  <TD>Pelcula</TD> <TD>Director</TD> <TD>Ao</TD> <TD>Pas</TD> </TR> <TR>  <TD>2001</TD> <TD>Stanley Kubrik</TD> <TD>1968</TD> <TD>USA</TD> </TR> <TR>  <TD>Ciudadano Kane</TD> <TD>Orson Welles</TD> <TD>1939</TD> <TD>USA</TD> </TR> <TR>  <TD>El cochecito</TD> <TD>Marco Ferreri</TD> <TD>1960</TD> <TD>Espaa</TD> </TR>
</TABLE>
Ejemplo
<TABLE border=2>
</TABLE>
Ejemplo
<TABLE border=2 width=80%>
</TABLE>
Ejemplo
<TABLE BORDER="2" WIDTH="80%"> <TR> <TD>Pelcula</TD> <TD COLSPAN="2">Director y ao</TD> <TD>Pas</TD> </TR> <TR> <TD>2001</TD> <TD>Stanley Kubrik</TD> <TD>1968</TD> <TD>USA</TD> </TR> <TR> <TD>Ciudadano Kane</TD> <TD>Orson Welles</TD> <TD>1939</TD> <TD>USA</TD> </TR> <TR> <TD>El cochecito</TD> <TD>Marco Ferreri</TD> <TD>1960</TD> <TD>Espaa</TD> </TR> </TABLE>
Ejemplo
<TABLE BORDER="2" WIDTH="80%" BGCOLOR="ffffcc"> <TR> <TD>Fondo de la tabla</TD> <TD BGCOLOR="ffffff">Fondo de la celda</TD> <TD ROWSPAN="4" BACKGROUND="nubes.jpg"> Fondo de la celda</TD> </TR> <TR> <TD>Fondo de la tabla</TD> <TD BGCOLOR="00ffff">Fondo de la celda</TD> </TR> <TR BGCOLOR="ccccff"> <TD>Fondo de la fila</TD> <TD BGCOLOR="0000ff">Fondo de la celda</TD> </TR> <TR BGCOLOR="ff0000"> <TD>Fondo de la fila</TD> <TD BGCOLOR="000000">Fondo de la celda</TD> </TR> </TABLE>

Introduccion A HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduccion A HTML

Uploaded by

Copyright:

Available Formats

Introduccin a HTML

<head> <title> <!-<body>

</head> </title> -- > </body>

Para hacer cambio de lnea

ETIQUETAS A UTILIZAR EN BODY

Bgcolor Text link vlink Alink

</hn> *n puede variar de 1 a 6

<b> <u> <i> <tt>

</b> </u> </i> </tt>

<blink> <big> <p>

<small> <sup> <sub> <code> <strike>

</small> </sup> </sub> </code> </strike>

Centra el texto en la pantalla.

ETIQUETAS UTILIZADAS EN FONT

Size Color Face Size=+n

Size = 13 Color=red Face=Arial size+=+3 (aumenta 3 veces sobre el default)

<p> <font color=green> Mostrando texto en Verde</font>

<img src=imagen.gif >

<table> <tr> <td> border Width

</table> </tr> </td>

You might also like