Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Al llevar a la prctica una serie de prcticas sencillas que son la base para
creacin de pginas web.
INTRODUCCIN
<i>Texto</i>
Concepto de HTML
Qu es HTML?
Recomendaciones:
Ejemplo:
<imgsrc="dibujo.gif">
< img src="Dibujo.Gif">
Los archivos que contienen documentos HTML suelen tener la extensin .html o
.htm. por lo que al guardar un documento se debe anotar la extensin .html.
Ejemplo:
pagina1.html
En este manual se han fijado los siguientes criterios a la hora de escribir la
sintaxis de las etiquetas de HTML:
Recuerda que:
Cerradas o abiertas.
Las etiquetas cerradas son aquellas que tienen una palabra clave que indica el
principio de la etiqueta y otra que indica el final. Entre la etiqueta inicial y la
final se pueden encontrar otras etiquetas.
Las etiquetas abiertas constan de una sola palabra clave. Para diferenciar las
etiquetas del resto del texto del documento se encierran entre los smbolos < y
>. Las etiquetas cerradas incluyen el carcter / antes de la palabra clave para
indicar el final de la misma. Una etiqueta puede contener "parmetros".
Ejemplos:
Etiqueta cerrada
Etiqueta abierta
<hr>
Sesin 2:
Instrucciones: Lee de forma individual el tema Estructura bsica de un
documento de pgina web escrito en HTML.
Ejemplo :
Ejemplos :
<meta name="Pagina de Jose" content="Mi pagina personal, Musica y
Peliculas">
Esta informacin es til para los buscadores, la primera lnea ofrece a los
buscadores una descripcin sobre la pgina. En cambio la segunda lnea indica
las palabras clave de la pgina.
Ejemplo :
Esta etiqueta tiene una serie de parmetros opcionales que nos permiten
indicar la "apariencia" global del documento:
background="nombre del archivo grfico"
bgcolor="cdigo de color"
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el
parmetro background.
text="cdigo de color"
Indica un color para el texto que incluyamos en nuestro documento. Por
defecto es negro.
link="cdigo de color"
Indica el color de los textos que dan acceso a un Hiperenlace. Por defecto es
azul.
vlink="cdigo de color"
Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos
visitado con nuestro navegador. Por defecto es prpura.
Ejemplos:
#000000 - Negro
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
#FFFFFF - Blanco
El primer par de cifras indican la proporcin de color Rojo, el segundo par de
cifras la proporcin de color Verde y las dos ltimas la proporcin de color Azul.
Cada par de cifras hexadecimales nos permiten un rango de 0 a 255.
Combinando las proporciones de cada color primario obtendremos diferentes
colores.
CABECERAS
Ejemplo:
<h1>Texto de Prueba</h1>
Prctica 1:
<html>
<head>
<title>curso diseo CABECERAS</title>
</head>
<body>
<H1>CABECERA 1</H1>
<H2>CABECERA 2</H2>
<H3>CABECERA 3</H3>
<H4>CABECERA 4</H4>
<H5>CABECERA 5</H5>
<H6>CABECERA 6</H6>
</body>
</html>
Se vera como:
http://sitiocop24.galeon.com/
Texto de prueba
Para indicar atributos del texto (negrilla, subrayado, etc.) tenemos varias
etiquetas. Algunas de ellas no son reconocidas por determinados navegadores
de Internet, es por ello que segn el navegador que este sea utilizado se ver
el resultado correctamente o no.
Subraya
<u></u> <u> Texto de prueba </u>
do
Por otro lado la etiqueta <font></font> nos permite variar el tamao, el color,
y el tipo de letra de un texto determinado. Utiliza para ello los parmetros size ,
bgcolor y face .
size="valor"
color="cdigo de color"
Ejemplo
Prctica 2
<html>
<head>
<title>diseo Web aspecto</title>
</head>
<body>
<p> <b>ESTO ESTA EN NEGRITA </B></p>
<P> <I>ESTO ESTA EN CURSIVA </I></p>
<P> <U>ESTO ESTA SUBRAYADO </U></p>
<P> <BIG>ESTO ESTA GRANDE </BIG></p>
<P> <SMALL>ESTO ESTA PEQUEO </SMALL></p>
<P>AQUI UTILIZAMOS SUPER <SUP> INDICE </SUP></p>
<P>AQUI UTILIZAMOS SUB <SUB> INDICE </SUB></p>
</body>
</html>
Prctica 3
<html>
<head>
<title>diseo Web COLORES</title>
</head>
<body>
<P><FONT FACE= "VERDANA" COLOR= "BLUE" SIZE=1> ESTO
ESTA EN VERDANA AZUL Y TAMAO DE 1 </FONT></P>
<P><FONT FACE= "ARIAL" SIZE=3> ESTO ESTA EN ARIAL
</FONT></P>
<P><FONT SIZE=+3> ESTO ESTA TRES VECES MS GRANDE
QUE LA LNEA ANTERIOR </FONT></P>
</body>
</html>
Practica 4
<html>
<head>
<title>diseo Web COLORES</title>
</head>
<body BGCOLOR= #8E6B23>
<FONT COLOR= BLACK> ESTO ESTA EN NEGRO</FONT COLOR=
BLACK>
<FONT COLOR= "#FFFF00">ESTO ESTA EN AMARILLO</FONT
COLOR= "#FFFF00">
<FONT COLOR= "#9F5F9F">ESTO ESTA EN VIOLETA </FONT
COLOR= "#9F5F9F">
<FONT COLOR= BRONZE>ESTO ESTA EN BRONCE</FONT
COLOR= BRONZE>
<FONT COLOR= CORAL> ESTO ESTA EN CORAL</FONT COLOR=
CORAL>
</body BGCOLOR>
</html>
Practica 5
<html>
<head>
<title>diseo Web COLORES</title>
</head>
<body>
<HR WIDTH=80%>
<HR>
<HR WIDTH=600 SIZE=3 ALIGN=RIGHT COLOR="BLUE">
</body>
</html>
Existen otras etiquetas que realizan las mismas operaciones que las antes
vistas en los atributos del texto.
Ejemplo
Ejemplo :
Los comentarios no sern mostrados por el navegador y son tiles para realizar
anotaciones en el documento HTML que nos indiquen lo que estamos haciendo
en una determinada parte del documento.
Listas
start="num"
Resultad
Ejemplo
o
<ol>
Plantel
<li> Plantel
No. 1
No.1 </li>
<li> Plantel No. Plantel
8 </li> No. 8
<li> Plantel 3
</li> Plantel 3
<li> Plantel
Plantel
19</li>
19
</ol>
<ol type="A">
Cobaq
<li> Cobaq 19
19
<li>
<li> Cobaq 8 Cobaq 8
<li>
<li> Cobaq 15 Cobaq
<li> 15
<li> Cobaq 9
Cpobaq
<li>
9
</ol>
Las listas sin numerar representan los elementos de la lista con una marca que
antecede a cada uno de ellos.
Se utiliza la etiqueta <ul></ul> para delimitar la lista, y <li> para indicar cada
uno de los elementos.
Prctica 6
<html>
<head>
<title>LISTAS</title>
</head>
<body>
<OL TYPE= I>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
<P>
<OL TYPE= 1 START=2>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
<OL TYPE= a>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
</body>
</html>
Las listas de definicin muestran los elementos tipo Diccionario, o sea, trmino
y definicin. Se utiliza para ellas la etiqueta <dl></dl> . El elemento marcado
como trmino se antecede de la etiqueta <dt> , el marcado como definicin se
antecede de la etiqueta <dd> .
Ejemplo Resultado
<dl> URL
<dt> URL</dt>
<dd> Abreviatura de Uniform Resource Abreviatura de Uniform
Locator </dd> Resource Locator
<dt> LAN </dt>
<dd> Abreviatura de Local Area LAN
Networth </dd> Abreviatura de Local Area Networth
<dt>WAN </dt>
<dd> Abreviatura de Red de rea IRC
amplia </dd>
</dl> Abreviatura de Red de rea amplia
Existen otros dos tipos de listas menos comunes. Las listas de Men o
Directorio se comportan igual que las listas sin numerar.
El resultado es una lista sin numerar mas "compacta" es decir, con menos
espacio interlineal entre los elementos.
IMAGENES
Para incluir una imagen en nuestra pgina Web utilizaremos la etiqueta <img>.
Cualquier otro tipo de archivo grfico o de imagen (BMP, PCX, CDR, etc.) no
ser mostrado por el navegador, a no ser que disponga de un programa
externo que permita su visualizacin.
top alinea el texto con la parte superior de la imagen middle con la parte
central, y bottom con la parte inferior.
Enlaces o Hipervinculos
El texto o imagen que se encuentre dentro de los lmites de esta etiqueta ser
sensible, esto quiere decir que si pulsamos con el ratn sobre l, se realzar la
funcin de hiperenlace indicada por la etiqueta <a></a> .
Ejemplo
Se vera como
Ejemplo:
<a name="seccion1"
></a>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La
seccin se llamar seccion1.
<a href="#seccion1">Primera
Parte</a>
Ejemplo:
<a href="news://news.actualidad.es/">Noticias de
actualidad </a>
Ejemplo:
Tablas
cellspacing="num" Indica el espacio en puntos que separa las celdas que estn
dentro de la tabla.
Para definir las celdas que componen la tabla se utilizan las etiquetas <td> y
<th> . <td> indica una celda normal, y <th> indica una celda de "cabecera",
es decir, el contenido ser resaltado en negrita y en un tamao ligeramente
superior al normal. Los parmetros opcionales de ambas etiquetas son:
Las etiquetas <td> y <th> son cerradas segn el estandar de HTML, es decir
que un elemento de tabla <td> deberia cerrarse con un </td> , sin embargo
los navegadores asumen que un elemento de la tabla, queda automticamente
"cerrado" cuando se "abre" el siguiente.
Prctica 7
<html>
<head>
<title>tablas</title>
</head>
<body>
<table border= 2 cellspacing= 1 cellpalding= 1 width= 70%
height= 80% align=center Bgcolor= WHITE bordercolor=
green>
<TR>
<TD BGCOLOR= MAGENTA> CELDA 1,1 </TD>
<TD BGCOLOR= YELLOW> CELDA 1,2 </TD>
</TR>
<TR>
<TD ALIGN=CENTER><IMG SRC=ESCUDOCL.GIF> </TD>
<TD BGCOLOR= BROWN><FONT COLOR= WHITE>Se detallan a
continuacin una seleccin de rutas o excursiones para realizar
a pie, en bici o a caballo, de dificultad intermedia y que pueden
realizarse por cualquier aficionado al senderismo y al contacto
con la naturaleza. Se trata de una seleccin de resmenes de
rutas por toda la comarca que estn siendo elaboradas por el
Colectivo de Ecologa Ibrica y que ya han visto la luz en forma
de Libro-Gua.</FONT>
</TD>
</TR>
</TABLE>
</body>
</html>
Marquee:
Prctica 8
<html>
<head>
<title>FORMULARIOS</title>
</head>
<body>
<p align=left><font size=6>Cuestionario de
Personal</font></p> <FORM
ACTION="MAILTO:carmenortegaper@terra.es"
METHOD=POST ENCTYPE="text/plain">
<b>Nombre</b><br>
<INPUT TYPE=TEXT NAME=NOMBRE size=50><BR><br>
<b>Sexo:</b><br>
<INPUT TYPE=RADIO NAME=SEXO
VALUE=MASCULINO>Masculino<br>
<INPUT TYPE=RADIO NAME=SEXO
VALUE=FEMENINO>Femenino<br><br>
<b>Nmero de miembros de la familia</b><br>
<INPUT TYPE=TEXT NAME=numero de miembros de la
familia size=5><BR><br>
<b>Idiomas que conoce:</b><br>
<INPUT TYPE=checkbox NAME=idiomas
VALUE=frances>Francs<br>
<INPUT TYPE=checkbox NAME=idiomas
VALUE=ingles>Ingls<br><br>
<b>Otros:</b><br>
<textarea NAME=Otros ROWS=5
COLS=50></TEXTAREA><br><br>
<INPUT TYPE=SUBMIT VALUE="ENVIAR DATOS">
<INPUT TYPE=RESET VALUE="VOLVER A
COMENZAR"><br><br>
</body>
</html>
Sonidos:
width="numero"