|
Introducción:
El
lenguaje de programación de páginas web o lenguaje HTML (del inglés
Hipertext
Markup Language), es un lenguaje de programación sencillo, que
permite
la transmisión de los códigos de "hipertexto" a través
de la WWW.
Para
ello debemos tener en cuenta que:
- Como
tal, debemos seguir unos parámetros estáticos (estructura general)
que nos servirán para la creación de dichas páginas web.
- Hemos
visto un editor Web muy potente, pero ¿cómo lo hace?
- Debemos
utilizar una herramienta que genere todo el programa en código
ASCII (por ejemplo el block de notas del Windows), con el fin de
que esos comandos no se almacenen con formato.
- HTML,
es un lenguaje de etiquetas.
- Tiene
2 tipos de extensiones: Htm y Html (a partir de Windows 95
sabemos
que soporta más de 3 caracteres la extensión).
|
|
Tipos
de marcas:
- Abiertas:
las que únicamente se deben iniciar para que genere un efecto.
Por
ejemplo: <HR> [dibuja una línea en la página].
- Cerradas:
la instrucción que, para que el efecto aparezca en el navegador,
se
deben abrir y cerrar de la siguiente forma, por ejemplo:
<B>Bienvenidos
</B>
|
|
Estructura general:
Es
lo que siempre debe haber en cualquier página de hipertexto o página
web
y es la siguiente:
|
 |
No
se nos puede olvidar que
"TITLE", siempre debe estar
presente.
|
Cabecera
(dentro de HEAD):
Distinguimos
3 comandos:
<TITLE>
Mi primera página Web </TITLE>
<META>
Tiene
3 usos:
- Indicar
el contenido de la página, por ej:
<META
name="Curso" content="Mi pagina web">
- Indicar
los parámetros por los que mi web va a ser localizada, por
ej:
<META
name="keywords" content="HTML WEB CURSO">
- Realiza
un refresco automático transurridos x segundos y la carga
de otro documento, por ej:
<META
http-quiv="refresh" content="15; URL=http://www.microsoft.com">
<BASE>:
Se
utiliza para especificar un directorio por defecto a buscar
los documentos, por ejemplo:
<BASE
href="file:///c|/documentos/">
Ejemplo
de lo visto hasta ahora:
<HTML>
<HEAD>
<TITLE>
Mi primer documento en Html</TITLE>
<BASE
href="file:///c|/documentos/">
<META
http-equiv="refresh" content="10; URL=doc2.htm">
</HEAD>
<BODY>
{Aquí
introduciremos las sentencias deseadas}
</BODY>
</HTML>
|
Cuerpo
del documento (dentro de BODY):
<BODY
background="IMAGEN"> Pone
un tapiz a la página. Pueden ser tanto ficheros
Bmp, Gif, Jpeg...
<BODY
bgcolor="#color"> Especifica
un color de fondo.
<BODY
text="#color">
Especifica el color del texto por defecto del documento.
<BODY
link="#color">
Especifica el color de los hipervínculos.
<BODY
vlink="#color"> Especifica
el color de los vínculos visitados.
Los
colores tienen un formato especial, son 6 números hexadecimales
antecedidos
por #. Por ejemplo: "#000000".
Las
tonalidades deseadas se obtienen como mezcla de las combinaciones
posibles,
vamos a ver los básicos:
"#FF0000"
Rojo.
"#00FF00"
Verde.
"#0000FF"
Azul.
"#FFFFFF"
Blanco.
|
|
Espaciados
y Saltos de línea:
<!
- Comentario -->
Con
vistas a que el programador vaya insertando líneas de ayuda en el
programa.
<PRE>
Hola, buenos dias. </PRE>
Todo
lo que escribamos aparecerá con el formato que le hayamos especificado.
<BR>
Realiza
un salto de línea. Por ejemplo: Hola <BR> Adios.
<P>
Realiza
un retorno de carro e inserta una línea en blanco a continuación.
<HR
parámetros>
Muestra
una línea horizontal de separación con un tamaño y grosor determinado.
Parámetros:
- align=left/right/center
(alinea la línea respecto de la página).
Noshade
(muestra la barra plana).
Size=nº
(determina el grosor en pixels).
Width=nº/%
(define el ancho de la línea).
*
Nota: Si pusiésemos: <HR> -------- sin
cerrar pondría una línea en blanco.
|
|
Cabeceras:
Define
el tamaño de la cabecera del documento.
| <H1> |
TEXTO
|
</H1> |
| <H2> |
</H2> |
| <H3> |
</H3> |
| <H4> |
</H4> |
| <H5> |
</H5> |
| <H6> |
</H6> |
Ejemplos:
<H1>
Buenos
Dias.
</H1><BR>
<H6>
Adios.</H6>
|
|
Formatos del texto:
Con
estos comandos se especifican los distintos efectos que tendrán
los caracteres.
Son los siguientes:
| <B> |
TEXTO
|
</B> |
Negrita. |
| <I> |
</I> |
Cursiva. |
| <S> |
</S> |
Tachado. |
| <U> |
</U> |
Subrayar. |
| <BLINK> |
</BLINK> |
Parpadeo. |
| <SUB> |
</SUB> |
Subíndice. |
| <SUP> |
</SUP> |
Superíndice. |
| <CENTER> |
</CENTER> |
Centrado. |
| <STRONG> |
</STRONG> |
Negrita. |
| <STRIKE> |
</STRIKE> |
Tachado. |
| <CITE> |
</CITE> |
Cursiva. |
|
Formato
de las fuentes:
<FONT
size=nº/±nº color="#código"> TEXTO </FONT>
El
primer parámetro indica el número de pixels que tendrá la fuente, el
segundo el nº de pixels más o menos y por último el color de la
fuente.
<BASEFONT
size=nº/±nº> (No se cierra)
Este
comando fija el tamaño de letra desde donde esté hacia abajo.
<BLOCKQUOTE>
TEXTO
</BLOCKQUOTE>
Sangra
el texto a la derecha.
|
|
Listas:
Tipos:
- Ordenadas:
<OL start= nº type=parámetros>
<LI>Nombre1
<LI>Nombre2
<LI>Nombre3
</OL>
|
Parám 1: Lo numera.
Parám A: Alfabéticamente en mayúsculas.
Parám a:
Alfabéticamente en minúsculas.
Parám i:
Nº romanos en minúsculas.
Parám I:
Nº romanos en mayúsculas.
|
Start=nº
se especifica para comenzar a numerar desde un nº.
- Sin
numerar: Creará
una lista de viñetas con cuadros, círculos o discos.
<UL
type=square/circle/disk>
<LI>
Nombre
1
<LI>
Nombre 2
</UL>
- Diccionario:
Crea un índice con una aclaración de contenidos.
| <DL>
<DT>
Curso de Internet
<DD>
de 15:30 a 19:00.
<DT>
Curso de Java
<DD>
de 19:30 a 21:00.
</DL>
|
Mostraría una lista como
la siguiente:
· Curso de Internet
De 15:30 a 19:00.
· Curso de Java
De 19:30 a 21:00.
|
|
|
Imágenes
en las páginas web:
Formato:
<IMG src="nombre.gif/jpg/bmp" directivas>
Directivas:
- alt="texto":
Muestra
el texto especificado si el navegador no pudiera mostrar la
imagen.
- Align=TOP/MIDDLE/BOTTOM:
Alineación
del texto que sigue a la imagen con respecto a la misma.
- Border=nº:
ancho
en pixels del borde de la imagen.
- Heigth=nº
y Width=nº: ancho
y alto de la imagen.
- Hspace=nº
y Vspace=nº:
nº de espacios horizontales y verticales que separan a la imagen
del texto que la precede.
Ejemplo:
| <IMG src="logo.bmp"
align=bottom>Hola |
 Hola |
|
|
Hiperenlaces
o vínculos:
Zonas
de texto e imágenes que, cuando pulsamos en ellas nos permite cambiar
de sitio
web o activar un recurso.
- Texto:
<A href="fichero.htm">Opcion
1</A>
- Imagen:
<A href="fichero.htm"><IMG src="foto.gif"></A>
- Imagen
y texto: <A href="fichero.htm"><IMG src="foto.gif">Opcion
1</A>
- Ejecutar
un fichero: <A href="antivirus.zip">
Pulse aquí para bajarlo
</A>
- E-Mail:
<A href="mailto:usuario@dominio.es">E-Mail</A>
- Enlaces
a la propia página:
<A
name="seccion1"></A>
-----------
<A
href="#seccion1">Seccion 1 del documento. </A>
|
Mapas
de Bits:
Con
dichos mapas conseguimos que una imagen sea sensible a la posición
del
cursor, de forma que pueda realizar un "salto" directo a
otro documento HTML
o a una sección dentro de la misma.
Formato:
<MAP
name="figura">
<AREA
shape="rect/circle/poly" coords="x,x,x,x" href="#sección">
</MAP>
Ejemplos:
<Area shape="rect" coords="10,10,60,60"
href="#sec1">
|
<Area shape="poly" coords="10,10,60,60,35,35"
href="#sec1">
|
<Area shape="rect" coords="10,35,10"
href="#sec1">
|
Después
de describir el mapa realizaremos la llamada con :
<IMG
src=·"foto.bmp" usemap="figura">
|
|
Tablas:
Formato:
<TABLE
directivas>
<Celdas>
</TABLE>
Directivas:
- border=nº:
número de pixels del borde exterior.
- Cellspacing=nº:
ancho interior de la celda.
- Cellpadding=nº:
pixels entre texto y borde interior.
- Width=nº%:
ancho del tamaño de la ventana.
- Heigth=nº%:
alto del tamaño de la ventana.
Celdas:
- <TH
parámetros> Texto </TH> : Marca
las celdas como cabecera (negrita).
- <TD
parámetros> Texto </TD>: Marca
las celdas como texto normal.
- <TR>:
Salta a la siguiente fila.
Parámetros
de TH y TD:
Ejemplo:
| CURSOS |
DIAS |
| Linux |
REDES |
L-V |
| C++ |
L-V |
<TABLE
border=2 cellspacing=2 cellpadding=2>
<TH
align=center valign=middle colspan=2>CURSOS
<TH
align= center valign=bottom>DIAS
<TR>
<TD
align=center valign=middle rowspan=2>Linux
<TD
align=center valign=middle> REDES
<TD
align=center valign=bottom>L-V
<TR>
<TD
align=center valign=middle>C++
<TD
align=center valign=middle>L-V
</TABLE>
|
|
Formularios:
Formato:
<FORM
parámetros>
<INPUT
directivas>
</FORM>
Parámetros:
- action="mailto:usuario@dominio.es":
Programa
que va a tratar las variables
del formulario.
- Method=POST/GET:
- POST:
si
queremos que se puedan alterar los valores.
- GET:
Sólo
consulta, no permite que modifique el formulario.
Directivas:
- Casilla
de verificación : <INPUT type=checkbox name=HTML value="SI"
checked>
- Casilla
de opción: <INPUT type=radio name=texto value="12-30">
- Cuadro
de texto: <INPUT type=text name=texto maxlegth=nº size=n
value="texto">
- <INPUT
type=image name=texto src="fichero.gif">
- Campo
oculto para el usuario: <INPUT type=hidden name=texto
value="valor">
- Botón
de opción restablecer: <INPUT type=reset value="texto">
- Botón
de opción enviar: <INPUT type=submit value="texto">
Menú
desplegable:
| <SELECT parámetros>
<OPTION>
</SELECT>
|
Parámetros:
· Name="nombre"
· Size=nº: número de
opciones visibles.
· Multiple: permite
seleccionar más de una opción.
|
Ejemplo:
<SELECT
name="nombre" size=1 multiple>
<OPTION
selected> IBM
<OPTION>
Hewlett
Packard
<OPTION>
Compact
<OPTION>
Dell
</SELECT>
- Cuadro
de texto con desplazamiento:
Formato:
<TEXTAREA
name="nombre" cols=nº rows=nº wrap=VIRTUAL/PHYSICAL>
</TEXTAREA>
Es
un buzón que normalmente se especifica para que la persona
que
ve el formulario deje sus comentarios, quejas, sugerencias...
- VIRTUAL:
Lo
que escribimos se manda como si fuese una sola línea.
PHYSICAL:
Lo
que se escriba será mandado en líneas físicas separadas, con
el formato que le hayamos dado.
El
archivo donde se almacenan todos los datos que el "internauta"
envía
puede tener un formato parecido al siguiente:
Nombre=Pepe+Pérez&clave=1234&archivo=Manual&archivo=Maptis
&edad=20-40&lugar=página+personal&donde=de+casualidad&
casualidad&
comentario%94=saludos+para +Pepe%0Dadios+Pepe%0Ame
voy%0D
|
|
Marquesinas:
(Sólo para Exporer)
Efecto
del texto que permite que se desplaze dentro de una celda.
Formato:
<MARQUEE
align=top/middle/bottom bgcolor="#color" height=nº%
width=nº%
direction=left/right loop=nº/infinite scrolldelay=nº>texto
</MARQUEE>
|
|
|
Como incluir sonido en una página web:
Si
sitúa en el Body, junto a los demás comandos que posee la página
web.
<BGSOUND
src="fichero.MID/WAV" loop=nº/infinite>
|
Marcos
o Frames:
El
propósito es dividir el visor en partes de forma que cambien algunas
partes.
Para
el visor son páginas cargadas distintas.
Pasos:
<FRAMESET
cols="30%,70%">
<FRAMESET
rows="20%,150,*">
-----------------
-----------------
Asociar a cada zona un recurso (paso 2).
</FRAMESET>
<FRAME
name="nombre a dar" src="página.htm" marginwidth=nº
marginheigth=nº scrolling="Yes/No/Auto" noresize>
Ejemplo:
<HTML>
<TITLE>
Ejemplo de creación de páginas Web.</TITLE>
<FRAMESET
cols="15%,*">
<FRAMESET
rows="35%,*">
<FRAME
name="zona1" src="fondo.htm" scrolling="auto">
<FRAME
name="zona2" src="presenta.htm" scrolling="auto">
</FRAMESET>
<FRAMESET
rows="50%,50%">
<FRAME
name="zona3" src="mapas.htm" scrolling="auto">
<FRAME
name="zona4" src="manual.htm" scrolling="auto">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
|
|
