Sie sind auf Seite 1von 6

27/5/2015

HTMLRESUMEN

ESQUEMARESUMENHTML(HyperTextMarkupLanguage=LenguajeparahacerhipertextoopginasWeb)
Una pgina web es el medio ms moderno y actual como fuente de informacin. Actualmente aparte de informar tambin es interactiva.
Una web tiene varias funciones, pero su objetivo fundamental es informar.

WEB EN HTML Se puede escribir todo en bloc de notas o word pad, y a la hora de guardarlo ponerle la extensin HTML, y nos saldr una pgina
Web.

* WEB BSICA
a) Escribir en el procesador de texto (por ejemplo currculum vitae), aadir imgenes, tabla para ordenar contenidos (bordes = 0).
b) Aadir hiperenlaces a otros documentos o direcciones.
c) Guardar como index.Htm (la 1 pgina o ndice del contenido), y las dems pginas de la Web => "nombre".html

Explicaciones ms detallados:
(www.berna.miarroba.com => 4 ESO => Web Bsica // Buscar en emule: VIDEO-COMO HACER UNA WEB CON OPENOFFICE by
Berna)

*WEB MODERNAS
a) EN PHP: Es un tipo de Web moderna y modificable en algunas partes en la misma Web. Este tipo de Web, podis buscarla en direcciones a
tal fin (Un tipo de Web en php, ya estructurada es PHP Nuke ).
b) Utilizando programas FrontPages, Flash, Dreamweaver: Son programas especficos para hacer Webs (aunque Flash, adems permite hacer
animaciones, pelculas y Web animadas e interactivas). Estos programas facilitan la elaboracin de las Webs, aaden detalles estticos y otros muy
tiles.

1.- CMO ES LA ESTRUCTURA BSICA DE UNA PGINA WEB?


a) El lenguaje usa etiquetas: Se escriben entre ngulos: < >, y el <inicio> se diferencia del </final> en /.
Ejemplo: <HTML>..........</HTML> => (una pgina Web en blanco)
b) Las partes bsicas son:

<html> (Etiqueta que indica que es un documento HTML)

<head>(Etiqueta de apertura de la cabecera = sale en el borde de arriba del


navegador)
Aqu va la informacin sobre el ttulo de la pgina, el autor, palabras clave, etc.
CABECERA DEL
DOCUMENTO
DOCUMENTO
HTML

CUERPO O CONTENIDO
DEL DOCUMENTO

http://www.tecnoclase.es/HTML%20RESUMEN.htm

Y esta informacin no se ve en el navegador, salvo el ttulo de la pgina.


<title> Ttulo de la pgina </title>

</head>(Etiqueta de cierre de la cabecera)

<body>(Etiqueta de apertura del cuerpo)

Aqu va el contenido de la pgina que ser lo que se vea en pantalla:

texto, imgenes, tablas, formularios, etc.


</body>(Etiqueta de cierre del cuerpo)
1/6

27/5/2015

HTMLRESUMEN

</html>(Etiqueta de cierre del documento)

2.- COMO MODIFICAR EL TEXTO?


a) Dar tamao a las letras. Se utiliza las etiquetas <H1> texto </H1> mayor tamao.....hasta.....<H6> texto </H6> menor tamao.
b) Dar efectos al texto (negrita, subrayado, cursiva). Se utiliza las etiquetas <B> texto en negrita </B> y <U> texto subrayado </U> y
<I> texto en cursiva </I> (Las letras significan: B= Black U = Under I = Italic)
c) Justificar el texto (izquierda, centro, derecha)
<DIV ALIGN= CENTER RIGHT JUSTIFY> texto a situar </DIV> <CENTER> y </CENTER> (Indica la situacin del texto)
d) Salto de lnea o cambiar de rengln
<BR> un salto de lnea </BR> y <P> dos saltos de lnea </P> (Indica donde empieza y termina una frase)
e) Poner listas y listas anidadas (una dentro de otras)
<UL> especifica que es una lista </UL> y <LI> cada elemento de la lista </LI> (Indica que es una lista y los elementos que hay)

* Cmo dar color al texto solamente? (por defecto es


negro)

* Cmo poner un color de fondo en la pgina? (por defecto es


blanco)

La etiqueta <FONT> con sus atributos SIZE, FACE y COLOR permiten


controlar el tamao, la fuente y el color de un fragmento de texto.

La etiqueta <BODY> se sustituye por <BODY BGCOLOR=color>. Las letras BG


significan B= Back G= Ground.

Ejemplo (como variar las caractersticas del texto):

Ejemplo (color de fondo en la pgina y algunas particularidades del


texto):

<HTML>

<P>Ejemplo del uso del atributo <B><CODE>SIZE</CODE></B></P>


<P><FONT SIZE=1>1</FONT></P>
<P><FONT SIZE=7>7</FONT></P>

</HEAD>

<TITLE>Ejemplo de color</TITLE>

<BODY>

</HEAD>

<P>Ejemplo del uso del atributo <B><CODE>FACE</CODE></B></P>


<FONT FACE=ARIAL>Esto es texto en ARIAL</FONT><BR>

<P>Esto es texto normal y, por tanto, aparece en color blanco.</P>

<FONT FACE=TIMES>Esto es texto en TIMES</FONT><BR>

<P><A HREF="http://google.es">Esto es un enlace, por tanto, es en color amarillo, al


pulsarlo ser de color fucsia (pero si ha sido visitado, entonces es color lima).</A></P>

<P>Ejemplo del uso del atributo <B><CODE>COLOR</CODE></B></P>

<HTML>

<TITLE>Ejemplo de colo

<HEAD>

<BODY BGCOLOR=BLACK TEXT=WHITE LINK=YELLOW ALINK=FUCHSIA


VLINK=LIME>

<FONT FACE=COURIER>Esto es texto en COURIER</FONT><BR>

Ejemplo:

<HEAD>

<HTML>

<BODY>

* Cmo poner

</BODY>

<TABLE BGCOLOR
HEIGHT=300>

<TR><TD>&nbsp</TD><T

<TR BGCOLOR=DARKBL
</TD><TD>&nbsp</TD><

<TR><TD>&nbsp</TD><T

<TR><TD>&nbsp</TD><T

</HTML>
<B><FONT COLOR=RED>No</FONT> <FONT COLOR=PURPLE>es</FONT>
<FONT COLOR=FUCHSIA>bueno</FONT> <FONT

COLOR=OLIVE>usar</FONT> <FONT COLOR=NAVY>excesivos</FONT> <FONT


COLOR=BLUE>colores</FONT> </B>

</TABLE>

</BODY>

</HTML>

</BODY>
</HTML>

3.- CMO SE ESCRIBEN ALGUNOS ELEMENTOS BSICOS?

a) TABLAS <TABLE>
Para qu sirven en HTML? Es un elemento fundamental si no queremos que se desordene los datos (suele ocurrir segn el navegador)
Como se ponen? Ver ejemplo:

Elementos bsicos de una tabla


http://www.tecnoclase.es/HTML%20RESUMEN.htm

Ejemplo en HTML

Como se quedara
2/6

27/5/2015

HTMLRESUMEN

- Definicin de la tabla. <TABLE>


- Un ttulo: <CAPTION>
- Definicin de fila: <TR>
- Definicin de casilla: <TD>
- En <TABLE> se puede especificar el borde, colores,
etc.
- Para ordenar los datos, pero que no se vea la tabla:
<TABLE BORDER = 0> (Tabla sin bordes o espesor cero)

<TABLE BORDER= 1>

<CAPTION> Ejemplo de tabla sencilla </CAPTION>

<TR>

Ejemplo de tabla sencilla

<TD>fila1-celda1</TD> <TD>fila1-celda2</TD>

fila1-celda1 fila1-celda2

</TR>

fila2-celda1 fila2-celda2

<TR>

<TD>fila2-celda1</TD> <TD>fila2-celda2 </TD>

</TR>

</TABLE>

b) IMGENES <IMG SRC="imagen.jpg">


Caractersticas Las imgenes se presentan en 2 formatos bsicos: JPG (buena resolucin en fotos y poco espacio), GIF (resolucin de 256
colores, ocupa poco para grficos (no fotos), y permite animaciones)
Cmo se ponen? <IMG SRC="imagen.jpg"> Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una
imagen llamada imagen.jpg (o el nombre que tenga).
<IMG SRC="imagen.gif" ALIGN=TOP>
<IMG SRC="imagen.gif" ALIGN=MIDDLE>
<IMG SRC="imagen.gif" ALIGN=BOTTOM>

Texto alineado arriba


Texto alineado en medio
Texto alineado abajo

c) HIPERENLACES <A HREF="direccin"> texto que aparecer </A>


Qu son? Son los elementos que ms caracteriza a una WEB, aparte de su carcter multimedia, la posibilidad de unir los distintos documentos
repartidos por todo el mundo por medio de enlaces hipertexto.
Cmo se ponen? Hay 4 tipos:

TIPOS DE ENLACES

A una Web externa

A un correo o email

A una pgina de la Web

EJEMPLOS

Una pgina Web de ejemplo

<HTML>
<HEAD>
<A HREF="http://www.berna.miarroba.com"> Web Tecno </A>
<TITLE> Una pagina Web </TITLE>
</HEAD>
<BODY>
<A HREF= mailto: berna55@telepolis.com> e-mail de Bernardo </A> <CENTER>
<H1> Mis paginas favoritas </H1>

</CENTER>
<HR>
<A HREF= mailto: berna55@telepolis.com> <IMG SRC="imagen.jpg"> </A>
Estas son mis paginas favoritas:
<P>
<A HREF="nombre.html"> nombre pagina o indicativo </A>

<A HREF="#MARCA"> texto indicativo </A>

Dentro de la misma pgina

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente


etiqueta:
<A NAME="MARCA"> </A>

<A HREF="http://berna.miarroba.com"> Web Tecnologa </A>


<BR> <A HREF="http://www.tecnotic.com"> Recursos Tecnologa
</A>
<BR> <A HREF="http://www.aulatic.com"> Recursos TIC </A>
</P>
</BODY>
</HTML>

d) MARCOS O VENTANAS Qu son y para qu sirven?


Es un recurso muy interesante y se emplea cuando queremos visualizar en la misma pantalla varias ventanas.Utilizan un cdigo llamado
"Frames".
Para definir las diferentes subventanas o frames se utilizan las etiquetas:
<FRAMESET> </FRAMESET> y <FRAME>.

http://www.tecnoclase.es/HTML%20RESUMEN.htm

Ejemplo:
<HTML>

3/6

27/5/2015
La directiva <FRAMESET>indica como se va a dividir la ventana principal. Pueden
incluirse varias directivas<FRAMESET> anidadas con el objeto de subdividir una
subdivisin. Losparmetros de <FRAMESET> son rows y cols en funcin de si la
divisin de lapantalla se realiza por filas (rows) o columnas (cols). Los parmetros
rows y cols se acompaan de un grupo de nmeros que indican en puntos o en
porcentaje el tamao de cada una de las subventanas. En caso de utilizar rows los
tamaos de las subventanas se entienden indicados de arriba a abajo, es decir, el
primer valor ser el asignado a la ventana superior, el segundo a la ventana
inmediatamente inferior, etc. En el caso de cols los tamaos se aplican de izquierda
a derecha.
Ejemplos
<FRAMESET rows = "25%,50%,25%">
Crea tres subventanas horizontales, la primera ocupar un 20% de la ventana
principal, la segunda un 50% y la tercera un 25%.
<FRAMESET cols = "120,*,100">
Crea 3 subventanas verticales, la primera y la tercera tendrn un "ancho" fijo de
120y 100 puntos respectivamente. La segunda ocupar el resto de la ventana
principal.
<FRAMESET cols = "15%,*">
<FRAMESET rows = 20%,*">

HTMLRESUMEN
<HEAD>
<TITLE>Pagina con Frames</TITLE>
</HEAD>
<FRAMESET cols = "15%,*">
<!Dos subventanas verticales, la izquierda ocupa un 15% de pantalla, la derecha el resto. -->
<FRAMESET rows = "35%,*">
<!Dos subventanas horizontales dentro de la subventana izquierda. -->
<FRAME name = "hsi" src = "catalogo.htm" scrolling = "auto">
<!-- La subventana horizontal superior recibe el nombre "hsi" y se ve el documento catalogo.htm
-->
<FRAME name = "menu" src = "menu.htm" scrolling = "auto">
<!-- Y la subventana horizontal inferior izquierda con nombre "menu" y se ve el documento
menu.htm -->
</FRAMESET>
<!Cierre de la definicin de las subventanas horizontales de la ventana de la izquierda -->
<FRAME name = "indice" src = "indice_principal.htm" scrolling = "auto">

<!-- La subventana vertical derecha con el nombre "indice" y muestro el documento


En este caso "anidamos" dos directivas. La primera divide la ventana principal en dos
indice_principal .htm -->
subventanas verticales, la primera ocupa un 15% de la ventana principal y la segunda
el resto. La segunda directiva vuelve a subdividir la primera subventana creada
</FRAMESET>
anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupar
<!Cierre de la definicin de las subventanas verticales -->
un 20% de la subventana, y la inferior el resto.

</HTML>

e) FORMULARIO Qu es y para que se utiliza?


Los formularios permiten dentro de una Web solicitar informacin al visitante y, despus guardarla y procesarla. Utilizan un cdigo llamado
"Form".
Ejemplo:

<FORM action = "mailto: berna55@telepolis.com" method = post


enctype="text/plain">
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Profesion: <INPUT type = curso name = clave size = 8 >
<P>
Informacion a recibir:<br>
<INPUT type = checkbox name = archivo value = "Html" > Manual de Html
La declaracin del formulario se pone entre las directivas <FORM></FORM>. En el
<INPUT type = checkbox name = archivo value ="Editor" > Manual Gimp
interior dela declaracin se indican los elementos (variables) de entrada.
<INPUT type = checkbox name = archivo value ="Ejemplo" > Manual Qcad
La directiva <FORM> tiene los parmetros action , method y [enctype].
<P>
Tu Edad :
Uso:
<INPUT type = radio name = edad value = "-20" > Menos de 20 aos
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 aos
<FORM ACTION=url
<INPUT type = radio name = edad value = "+40" > Mas de 40 aos
<P>
METHOD=mtodo de envo
<INPUT type = hidden name = lugar value = "pagina personal" >
Como encontraste mi pgina :
ENCTYPE=mtodo de codificacin de la informacin>
<SELECT name = donde >
<OPTION>De casualidad
Campos de entrada, seleccin y reas de texto
<OPTION>Por el buscador Google
<OPTION>Por el buscador Yahoo
</FORM>
<OPTION>Me la comentaron
</SELECT>
action = "programa" (Indica el programa que va a "tratar" a las variables que se enven).
<P>
Tus Comentarios:
method = POST / GET (indica el mtodo segn el que se transferirn las variables)
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40></TEXTAREA>
Enctype = (Indica el modo de cifrado de la informacin. (por defecto:
<P>
application/xwww-form-urlencoded)
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >

En el formulario podremos solicitar diferentes datos (campos), cada uno de los cuales
quedar asociado a una variable. Una vez se hayan introducido los valores en los campos,
el contenido de estos ser enviado a la direccin (URL) donde tengamos el programa que
pueda procesar las variables.

http://www.tecnoclase.es/HTML%20RESUMEN.htm

4/6

27/5/2015

HTMLRESUMEN
</FORM>

Nota: Esta opcin slo funciona adecuadamente con el navegador Netscape. Con el Explorer este envo dara como resultado un correo en blanco. Para que esta opcin funcione de
manera independiente del navegador que se est utilizando se ha de emplear un programa externo que realice este proceso (por ejemplo outlook)

Otro ejemplo, PERO SE ENVA A UNA DIRECCIN QUE TIENE UN PROGRAMA PARA PROCESAR EL FORMULARIO:
<FORM ACTION="http://www.ejemplo.com/cgi-bin/formmail" METHOD=Post>
< INPUT TYPE="hidden" NAME="recipient" value="su direccin email va aqu!">
< INPUT TYPE="hidden" NAME="subject" value="ASUNTO que ud. recibir">
< INPUT TYPE="hidden" NAME="redirect" value=" URL a donde va a regresar">
Ingrese su Nombre:
< INPUT TYPE="text" NAME="nombre" size="30" maxlength="40">
Ingrese su E-mail:
< INPUT TYPE="text" NAME="email" size="30" maxlength="40">
< INPUT TYPE="submit" VALUE="ENVIAR">
< INPUT TYPE="reset" VALUE="BORRAR">
</FORM>
Lo anterior se vera de esta forma:

Nombre:
Email:

Enviar

Borrar

f) MULTIMEDIA (SONIDO Y VIDEOS)


Qu son ? Son elementos que enriquecen una pgina, hacindola interactiva.
Cmo se ponen? Mediante hiperenlaces a un texto o imagen, y al realizar alguna accin sobre stos, sale un sonido (mid o wav) o video (mpg o
avi).

4.- RECOPILACIN BSICA DEL LENGUAJE HTML


* <HTML> y </HTML> (Indica que es una pgina Web)
* <HEAD> y </HEAD> (Indica que es el encabezamiento de la pgina)
* <TITLE> y </TITLE> (Indica el ttulo de la pgina)
* <BODY> y </BODY> (Indica el cuerpo del texto de la pgina)
* <BODY BGCOLOR="#000000" TEXT="#FFFF00"> (Indica color de fondo de la pgina y el del texto)
* <H1>Tamao ms grande de letra </H1> y <H6> Tamao ms pequeo de letra </H6> (Indica el tamao del texto)
* <B> texto en negrita </B> y <U> texto subrayado </U> y <I> texto en cursiva </I> (Indica el efecto del texto: B= Black U = Under I =
Italic)
* <DIV ALIGN= CENTER RIGHT JUSTIFY> texto a situar </DIV> <CENTER> y </CENTER> (Indica la situacin del texto)
* <UL> especifica que es una lista </UL> y <LI> cada elemento de la lista </LI> (Indica que es una lista y los elementos que hay)
* <BR> un salto de lnea </BR> y <P> dos saltos de lnea </P> (Indica donde empieza y termina una frase)
* <TABLE> y </TABLE> (Indica que hay una tabla) (Otros parmetros a utilizar: <TR>...<TD>...</TD>...</TR> TR= Fila TD= Celda)
* <IMG SRC="imagen.gif"> (Indica que hay una imagen)
* <A HREF="index.html"> pgina principal de la Web </A> (Indica un enlace a la pgina principal)
* <A HREF="http://www.berna.miarroba.com"> Web de Tecnologa </A> (Indica un enlace a una Web)
http://www.tecnoclase.es/HTML%20RESUMEN.htm

5/6

27/5/2015

HTMLRESUMEN

* <A HREF= mailto: berna55@telepolis.com> e-mail de Bernardo o <IMG SCR="una imagen.jpg"> </A> (Indica un enlace a un correo)
* <FRAMESET> </FRAMESET> (Indica que hay dos o ms ventanas en la pantalla => Marcos)
* <FORM> y </FORM> (Indica que hay un formulario)

(Todo esto es importante saberlo para quitar o modificar partes de un documento aadir elementos como Script, como por ejemplo
Javascript)

5.- ANLISIS DE UNA PGINA WEB EN HTML

<HTML>
<HEAD>
<TITLE>MIRAAQUIESELTITULODELENCABEZADO:PAGINABSICAWEBENHTML</TITLE>
</HEAD>
<BODYBGCOLOR="#000000"TEXT="#FFFF00">
<H1><B>ESTOSERAELCONTENIDOENNEGRITAYCONELMAYORTAMAODELETRA</B></H1>
<P><H6><U><I><CENTER>YESTOSERIAELCONTENIDOSUBRAYADO,CURSIVACONELMENORTAMAODELETRA,YCENTRADO</CENTER></I></U></H6></P>
<TABLEBORDER=2>
<CAPTION>TITULODELATABLA:LOQUEQUIERAPONEROQUITASELCAPTION</CAPTION>
<TR>
<TD><H2><B>MISWEB</H2></B></TD><TD><H2><B>MISCORREOS</H2></B></TD><TD><H2><B>OTROS</H2></B></TD>
</TR>
<TR>
<TD><AHREF="http://www.berna.esp.st">WebTecnologa</A></TD><TD><AHREF=mailto:berna55@telepolis.com>EmailTelepolis</A></TD><TD>yapondre
algo</TD>
</TR>
</TABLE>
<P>AQUIVOYAINSERTARUNAIMAGENQUEDEBERIATENERENLAMISMACARPETAQUEESTEDOCUMENTO</P>
<IMGSRC="imagen.JPG">
</BODY>
</HTML>

http://www.tecnoclase.es/HTML%20RESUMEN.htm

6/6