You are on page 1of 54

ING.

FABIAN GARCIA CARRILLO

TEMA:

HTML

TAG:
TAGS:

Es un rtulo, con algo escrito en l. Un tag HTML trabaja como una llave, que muestra u oculta cosas que se vern o no en la pgina. Los tags estn siempre encerrados entre los signos "menor que " (<) y "mayor que" (>).
Los Tags tanto en maysculas como en minsculas. Es recomendable escribirlos en maysculas, para poder ubicarlas rpidamente dentro del Cdigo. Pero puedes hacerlo de la manera que ms te guste. Los tags siempre van de a pares.

CREACION DE UNA PAGINA HTML:


PASO1:

Toda pagina tiene un inicio y un fin, para indicarlo se utilizan los siguientes tag: <html> y </html>.
Ejemplo; <html> </html>

Asi se indica donde inicio el arhivo y donde termina. Estos tag solo aparecen una sola ves en la pagina.

CREACION DE UNA PAGINA HTML:


PASO2:

Cada archivo debera tener un encabezado, el cual se especificara por los siguientes tag <head> y </head>. El contenido del encabezado sera el titulo de la pagina, para establecerlos se utilizaran los siguientes tab <title> y </title>.
Ejemplo: <html> <head> <title> Mi primer pagina web </title> </head> </html>

CREACION DE UNA PAGINA HTML: PASO3:


Despues del encabezado deberemos especificar el inicio del cuerpo del documento, para realizarlo se utilizaran los siguiente tag <body> y </body>. Lo que se encuentre entre estos dos tag sera la informacion que se visualizara en nuestra pagina html.

Ejemplo:
<HTML> <HEAD> <TITLE>Mi primera pgina</TITLE> </HEAD> <BODY> Mi primera pgina </BODY> </HTML>

APARIENCIA DE UNA PAGINA HTML:


TAG
<B></B> <u></u> <h1></h1> <h2></h2> <h3></h3>

FUNCION
Aplica negrita al texto Subralla el texto Encabezados Encabezados Encabezados

<h4></h4>
<h5></h5> <h6></h6> <br>

Encabezados
Encabezados Encabezados Salto de linea

APARIENCIA DE UNA PAGINA HTML:


TAG <p></p> <BLOCKQUOTE > <font color=color></font> FUNCION Parrafo Margenes Color de letra

<font size=tamao></font>
<font face=tipo de letra></font>

Tamao de letra
Tipo de letra

ETIQUETAS Y ATRIBUTOS:

ATRIBUTO background <bgsound src=>

FUNCION INSETA UN IMAGEN COMO FONTE DE NUESTRA PAGINA WEB INSERTA UN SONIDO A LA PAGINA WEB

SINTAXIS <body background=imagen"> <bgsound src=SONIDO" >

BORDERCOLOR LIGHT y BORDERCOLOR DARK <a href></a>

Colorean el borde de una tabla

BORDERCOLORLIGHT=colo"
BORDERCOLORDARK=colo"

Crea un enalce hacia otra pagina web

<a href=pagina"> objeto</a>

SEPARADORES DE BLOQUES DE TEXTO:


Para definir y separar bloques de texto se emplean una serie de marcas que definen prrafos, texto preformateado o bloques con significado especial como direcciones o citas. Marcas de bloques:

Prrafos. <P> Saltos de lnea. <BR> Bloques tabulados. <BLOCKQUOTE> Lnea horizontal. <HR> Divisiones. <DIV> Texto preformateado. <PRE> Direcciones. <ADDRESS> Centrado de bloques. <CENTER>

P:
<P> se utiliza para separar prrafos. Dado que para el HTML todo el texto es continuo, necesitamos algn mecanismo para indicar el principio y el fin de un prrafo. Las marcas inicial y final son <P> y </P>.
EJEMPLO CODIGO <P> Este texto est contenido dentro del primer prrafo, as que lo denominaremos: parrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1. </P> <P> Este otro texto est contenido dentro del prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2. </P> RESULTADO Este texto est contenido dentro del primer prrafo, as que lo denominaremos: parrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1. Este otro texto est contenido dentro del prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2.

BR:
El elemento <BR> es vaco por lo que slo tiene marca inicial. Indica un salto de lnea.

EJEMPLO CODIGO Texto 1, texto 1, texto 1. <BR> Texto 2, texto 2, texto 2, texto 2, texto 2. RESULTADO Texto 1, texto 1, texto 1. Texto 2, texto 2, texto 2, texto 2, texto 2.

BLOCKQUOTE:
El elemento <BLOCKQUOTE> tabulados, por la izquierda sirve para representar prrafos

EJEMPLO CODIGO RESULTADO Texto 1, texto 1, texto 1. Texto 1, texto 1, texto 1. <BLOCKQUOTE> Texto 2, texto 2, texto Texto 2, texto 2, texto 2. 2. </BLOCKQUOTE>

HR:
<HR> es un elemento vaco por lo que solo tiene marca inicial. Se emplea para separar bloques de texto representando una lnea horizontal. Se puede cambiar la apariencia de dicha lnea mediante los siguientes atributos: NOSHADE: Elimina el efecto de sombra de la lnea. WIDTH: Permite definir la longitud de la lnea. SIZE: Permite definir el grosor de la lnea.
EJEMPLO CODIGO <HR NOSHADE> <HR WIDTH=250 SIZE=3> <HR WIDTH=250 SIZE=6> <HR NOSHADE WIDTH=400 SIZE=4> RESULTADO

DIV:
Este elemento se comporta de forma muy parecida al salto de lnea, <BR>, y a su vez admite los mismos atributos que <P>: ALIGN (LEFT, RIGHT, CENTER); o sea, permite definir un bloque con los atributos de <P>, pero dejando tan solo un salto de lnea entre un bloque y otro.

EJEMPLO
CODIGO <DIV ALIGN=LEFT> Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda. </DIV> <DIV ALIGN=RIGHT> Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha. </DIV> <DIV ALIGN=CENTER> Texto centrado, texto centrado, texto centrado, texto centrado, texto centrado, texto centrado. </DIV>

PRE:
El texto insertado entre las marcas <PRE> y </PRE> ser visualizado por el browser, respetando el formateo tal como haya sido entrado en el fichero fuente HTML, o sea, respetando los espacios y los saltos de carro.

EJEMPLO CODIGO <PRE> Esto es un texto preformateado, por tanto se respetan los espacios y los saltos de carro, como podrn observar. </PRE> RESULTADO Esto es un texto preformateado, por tanto se respetan los espacios y los saltos de carro, como podrn observar.

ADDRESS:
El elemento <ADDRESS> se emplea para indicar que un texto representa una direccin o una firma mostrndolo, generalmente, en letra cursiva. Es muy utilizado para indicar toda la informacin respecto al autor del documento (direccin, telfono, e-mail,...). Puede insertarse en cualquier lugar del documento; lo habitual en WWW es incluir esta zona de direccin al final del documento.
EJEMPLO CODIGO <ADDRESS> Tekin Tontu <BR> 77A Wellington Rd <BR> Auburn 2144, NSW <BR> Australia <BR> e-mail tekin@cis.com <BR> </ADDRESS> RESULTADO Tekin Tontu 77A Wellington Rd Auburn 2144, NSW Australia e-mail tekin@cis.com

CENTER:
El elemento <CENTER> no es del HTML 2, sino del Netscape. Centra los elementos situados entre sus marcas de apertura y cierre. Dichos elementos podrn ser: bloques de texto, tablas, enlaces, imgenes, formularios, ...

EJEMPLO
CODIGO <CENTER> FABIAN GARCIA CARRILLO </CENTER> RESULTADO FABIAN GARCIA CARRILLO

Hn:
El elemento <Hn> se utiliza fundamentalmente para escribir encabezamientos. Asigna un tamao a los caracteres, dependiendo del valor n, el cual vara de 1 a 6. Los ms grandes tienen valor 1 y los ms pequeos valor 6. El texto entre estas marcas se trata en negrita
EJEMPLO CODIGO RESULTADO

<H1>Cabecera H1</H1>
<H2>Cabecera H1</H2> <H3>Cabecera H1</H3> <H4>Cabecera H1</H4> <H5>Cabecera H1</H5> <H6>Cabecera H1</H6>

Cabecera H1
Cabecera H2
Cabecera H3
Cabecera H4
Cabecera H5
Cabecera H6

FONT:

El elemento <FONT> permite definir el tamao, color y tipo de letra de un conjunto de caracteres mediante los siguientes atributos: El atributo SIZE: Regula el tamao de los caracteres (1 7). El atributo COLOR: Especifica el color de los caracteres. El atributo FACE: Permite definir el tipo de letra

EJEMPLO TAMAO COLOR

<FONT SIZE=1>1</FONT> <FONT SIZE=2>2</FONT> <FONT SIZE=3>3</FONT> <FONT SIZE=4>4</FONT> <FONT SIZE=5>5</FONT> <FONT SIZE=6>6</FONT> <FONT SIZE=7>7</FONT> <FONT SIZE=6>6</FONT> <FONT SIZE=5>5</FONT> <FONT SIZE=4>4</FONT> <FONT SIZE=3>3</FONT> <FONT SIZE=2>2</FONT> <FONT SIZE=1>1</FONT>

<FONT COLOR=#800000>C</FONT> <FONT COLOR=#000080>O</FONT> <FONT COLOR=#000080>L</FONT> <FONT COLOR=#008000>O</FONT> <FONT COLOR=#00FFFF>R</FONT> <FONT COLOR=#FF0000>E</FONT> <FONT COLOR=#C0C0C0>S</FONT> . <FONT COLOR=#800080>D</FONT> <FONT COLOR=#008080>E</FONT> . <FONT COLOR=#0000FF>L</FONT> <FONT COLOR=#808080>E</FONT> <FONT COLOR=#FF00FF>T</FONT> <FONT COLOR=#00FF00>R</FONT> <FONT COLOR=#808000>A</FONT> <FONT COLOR=#FFFF00>S </FONT>

ESTILOS DE CARACTERES:

Los siguientes elementos llenos permitirn definir distintos estilos para el grupo de caracteres que se defina entre sus marcas de inicio y cierre.

EJEMPLO ESTILO COLOR <b>

NEGRITA Cursiva Subrayado Tachado ASuperndice BSubndice Parpadeo


Mquina de escribir (Teletipo) Texto grande Texto pequeo

<i> <u> <strike> <sup> <sub> <blink>


<tt> <big> <small>

HYPERENLACES:
El siguiente elemento es uno de los ms importantes del HTML, ya que es el que realmente permite "navegar" por uno o varios documentos, que pueden residir en cualquier parte, dando, sin embargo, la impresin de que se trata de un solo documento. Esto se consigue definiendo enlaces hipertextuales del Web mediante el elemento <A> y sus atributos: NAME, HREF y TARGET. El lector podr por tanto explorar el documento picando con el ratn sobre las zonas activas definidas, denominadas hipertexto. Estas zonas activas pueden corresponder a un grupo de caracteres, una imagen. En cualquier caso el principio es el mismo: asociar a la zona activa la direccin URL del documento que sustituir al visualizado cuando se pulse con el ratn sobre esa zona.

HYPERENLACES:

Un puntero puede colocarse en cualquier lugar del texto. Puede ser un elemento de una lista, o texto normal; puede estar enriquecido con atributos de estilo fsico, lgico o de prrafo. Sin embargo, no es necesario darle un atributo para hacerlo reconocible como tal: los enlaces activables se destacan automticamente (color y subrayado), siempre y cuando el usuario no realice una parametrizacin especial del browser.

HYPERENLACES:
Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino ser introducido bajo forma de atributo, el cual lleva por nombre href. La sintaxis general de un enlace es por tanto de la forma: <a href="destino">contenido</a>

HYPERENLACES:
En funcin del destino los enlaces son clsicamente agrupados del siguiente modo: Enlaces internos: los que se dirigen a otras partes dentro de la misma pgina. Enlaces locales: los que se dirigen a otras pginas del mismo sitio web. Enlaces remotos: los dirigidos hacia pginas de otros sitios web. Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una direccin. Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.

ENLACES INTENOS:
Son los enlaces que apuntan a un lugar diferente dentro de la misma pgina. Este tipo de enlaces son esencialmente utilizados en pginas donde el acceso a los contenidos puede verse dificultado debido al gran tamao de la misma. Mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder rpidamente al principio o final de la pgina o bien a diferentes prrafos o secciones. EJEMPLO:

Lo primero ser colocar nuestro enlace origen. De la siguiente manera:


<a href="#abajo">Ir abajo</a>

ENLACES INTENOS:

En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombre abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma pgina. En este caso, la etiqueta que escribiremos ser sta: <a name="abajo"></a>

ENLACES LOCALES:
Son los enlaces que se dirigen a otras partes dentro de la misma pgina. EJEMPLO: <a href="pagina2.html">Enlace</a>

ENLACES REMOTOS:

Son los enlaces que se dirigen hacia pginas que se encuentran fuera de nuestro sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio. EJEMPLO:
<a href="http://www.GOOGLE.COM"> Enlace </a>

ENLACES CON DIRECCION DE CORREO:


Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo mensaje de correo electrnico dirigido a una direccin de mail determinada. Estos enlaces son muy habituales en las pginas web y resultan la manera ms rpida de ofrecer al visitante una va para el contacto con el propietario de la pgina. Para colocar un enlace dirigido hacia una direccin de correo colocamos mailto: en el atributo href del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace. EJEMPLO: <a href="mailto:FGC_NEW@HOTMAIL.COM">FGC_NEW@HOTMAIL.COM</ a>

ENLACES CON ARCHIVOS:


Este no es un tipo de enlace propiamente dicho, pero lo sealamos aqu porque son un tipo de enlaces muy habitual para descarga de archivos. El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos, con la nica particularidad de que en vez de estar dirigidos hacia una pgina web est dirigido hacia un archivo de otro tipo. Si queremos enlazar con un archivo mi_fichero.zip que se encuentra en el mismo directorio que la pgina se escribira un enlace as. EJEMPLO: <a href="mi_fichero.zip">Descarga mi_fichero.zip</a>

IMAGENES
Insertar imgenes en un documento permite crear pginas mucho ms atractivas. Existen dos formas de mostrar una imagen en una pgina HTML, la primera es mostrar la imgen en lnea, o sea, la imagen se visualiza automticamente al cargar la pgina; la segunda es mediante la activacin de un enlace de hipertexto que provoque la visualizacin de la imagen. Existen diversos formatos de imagenes . Los formatos GIF y JPEG son interpretados directamente por el visualizador.

IMAGENES
Para que todos los browsers puedan comprender el formato en el que est codificado la imagen, se ha hecho una normalizacin con el estndar GIF (Graphics Interchange Format). Se trata de un formato comprimido pensado para optimizar el tiempo de telecarga que permite el tratamiento de imgenes en colores (256 como mximo) o niveles de gris. Incluir imgenes en una presentacin web es muy sencillo, solo debe de tener en cuenta que las imgenes tienen que tener los formatos GIF, JPEG o PNG. Las imgenes en lnea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompaarse de los siguientes atributos:

IMAGENES
src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar. Align= Permite controlar la alineacin de una imagen con respecto a una lnea de texto adyacente o a otras imgenes en esa lnea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom. Alt= Es la alternativa que se estableci cuando todava existan visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratn por encima.

IMAGENES
WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.
HEIGHT=Al igual que el atributo WIDTH, es opcional recomendable ponerlo, este significa el alto de la imagen. y

BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen. EJEMPLO:

<IMG SRC="images/wmelon.gif">

IMGENES COMO FONDO DE PAGINA


Mediante el elemento <BODY> y el atributo BACKGROUND se permite utilizar una imagen residente en el servidor, o en un fichero local, como fondo de pgina. El valor que deber tomar dicho atributo es la direccin donde se encuentra el fichero que contiene la imagen. La sintaxis ser: <BODY BACKGROUND="direccion_del_fichero_grafico"> Ejemplo: <BODY BACKGROUND="images/blanco51.gif">

FORMULARIO
Un formulario HTML es una seccin de un documento que contiene contenido normal, cdigo, elementos especiales llamados controles (casillas de verificacin (checkboxes), radiobotones (radio buttons), menes, etc.), y rtulos (labels) en esos controles. Los formularios generan en la pantalla cuadros de dilogo con el lector permitiendo as la interaccin con el usuario para consultas de bases de datos, solicitudes de documentacin, ... Como en un formulario en papel, se podrn tener zonas en las que se introducir un texto, casillas de verificacin, listas de seleccin, etc... El usuario rellenar estas zonas en su formulario las cuales se identifican con un nombre simblico. Cuando el formulario se enva al programa que lo va a tratar, ste recibe el identificador de cada zona y el valor introducido.

FORMULARIO
Para la creacin de formularios se utilizarn las siguientes marcas, que permiten generar una interfaz de edicin: La marca FORM que delimita el comienzo y fin de la definicin del formulario. La marca INPUT que permite crear diferentes tipos de entradas: campos de edicin y diversos tipos de botones; La marca SELECT que permite crear listas: mens despegables y listas con barras de desplazamiento; La marca TEXTAREA que genera una zona de edicin de texto libre.

FORM
La marca <FORM> y </FORM> definen un formulario y entre ellas se situarn todas las marcas que generan los diversos elementos que componen un formulario.

Esta marca debe ir acompaada obligatoriamente por dos atributos:


El atributo METHOD est dirigido al programador. Al que puede darse el valor POST o el valor GET que define el modo de transferencia de los datos. El optar por uno u otro obedece a complejas cuestiones de programacin basadas en la mxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta ms longitud es POST, y ser el que utilicemos en casi todos los ejemplos.

FORM

El atributo ACTION define la accin a ejecutar cuando se pulse el botn de sumisin, indicando el URL del programa encargado de tratar los datos adquiridos desde el formulario.
SINTAXIS: <FORM METHOD=tipo_de_metodo ACTION=URL> EJEMPLO: <FORM METHOD="post" ACTION=" cgi_bin/inscripcion">

INPUT
La marca <INPUT> servir para definir campos para entrar un texto y botones que permiten escoger opciones. Permite varios atributos:: El atributo SIZE: define la longitud de la ventana de texto. El atributo MAXLENGTH: define la mxima longitud de la cadena que se puede escribir dentro de la ventana. El atributo NAME: define el nombre que permitir identificar el origen de los datos. Este nombre debe ser nico. El atributo VALUE: puede ser definido para un campo de: Texto: permite definir el contenido del campo. Botn SUBMIT: indica el texto a escribir en el botn. Botn RADIO, Botn CHECKBOX: valor que se le asocia al botn cuando ste est pulsado.

INPUT
El atributo TYPE asociado a la marca INPUT permite la seleccin del elemento de entrada. Puede tomar los siguientes valores: TEXT: es la opcin seleccionada por defecto. Define una zona de entrada de texto simple (CAJA DE TEXTO). El texto definido en VALUE aparecer en dicha zona, para poder ser completado o modificado por el usuario. EJEMPLO: <form> <input type="text" name=nombre>

</form>

INPUT
SUBMIT: desencadena el envo del formulario; el texto definido en VALUE se escribir en el botn.
EJEMPLO: <form> <input type="submit" value="Salida"> </form>
Salida

INPUT

RESET: permite borrar los datos ya entrados. EJEMPLO: <form> <input type="reset" value="Borrar">

</form>
Borrar

INPUT
PASSWORD: permite entrar una palabra clave de forma confidencial. EJEMPLO: <form> <input type="password" name= "pwd"> </form>

INPUT
CHEKBOX: crea un bloque de botones que permiten una seleccin mltiple de opciones. EJEMPLO: <form> <input type="checkbox" name="micro" value="mac">Macintosh <input type="checkbox" name="micro" value="pc">PC </form>
Macintosh Pc

INPUT
RADIO: crea un bloque de botones que permiten una seleccin exclusiva entre varias opciones. EJEMPLO: <form> <input type="radio" name="media" value="cd" checked>CD-ROM <input type="radio" name="media" value="dk">Disquete </form>
CD-ROM Disquete

INPUT

HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla. EJEMPLO: <input type="hidden" name=nombre_de_variable>

SELECT
La marca <SELECT> permite generar listas de seleccin simple o de seleccin variable. Se programa con una lista en la que los items se especifican mediante la marca <OPTION>.
La presentacin de la lista depende del atributo SIZE; si su valor es inferior a 2 o est ausente, la lista se interpreta como un menu desplegable. En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. El valor dado entonces al atributo SIZE da entonces el nmero de lneas visibles en la ventana. La opcin de selecin multiple se deriva de la presencia del atributo MULTIPLE.

SELECT
Menu desplegables:

Ejemplo:
<form> <select NAME="sede"> <option>Entrada indirecta <option>Entrada lateral <option SELECTED>Entrada directa </select>

</form>

SELECT
Ventana con barra de desplazamiento <form> <select name="lista" size=3> <option> Pista 1 <option> Pista 2 <option> Pista 3 <option> Pista 4 <option> Pista 5 <option> Pista 6 </select>

</form>

TEXTAREA
La marca <TEXTAREA> permite crear una ventana con barras de desplazamiento horizontales y verticales en la que se podr escribir texto. El valor dado a los atributos ROWS (lneas) y COLS (columnas) delimita el tamao de esta ventana. Es posible predefinir un texto (entre las marcas <TEXTAREA> y </TEXTAREA>) que el usuario podr reemplazar o completar con su propio texto. Ejemplo: <form> <textarea name="comment" rows=5 cols=40> Introduzca aqu sus comentarios </textarea> </form>

Nombre: F.Nac: Apellidos: Calle y nmero: Cdigo Postal: Provincia: Estado Civil: SEXO: Hombre Alemn Mujer Ingles Ciudad: Telfono: DNI:

Idiomas:
Espaol Comentarios personales: Pulse aqu:
Enviar datos Borrar los datos

You might also like