Conceptos
World Wide Web (WWW): es un sistema de información, el sistema de
información propio de Internet.
Características:
Información por hipertexto: Diversos elementos (texto o imágenes)
Gráfico
Global
Pública
Dinámica
Independiente y libre
Navegador: el programa que nos ofrece acceso a Internet, ejm Internet
Explorer, Mozilla, Netscape
Servidor: Se encarga de proporcionar al navegador los documentos y medios
que éste solicita
HTTP: protocolo de transferencia de hipertexto
URL: Localizador Uniforme de Recursos
HTML: Lenguaje para marcado de hipertexto, para estructurar documentos a
partir de texto en WWW
MERG 1
HTML (HyperText Markup
Languaje)
HTML es un conjunto de códigos lógicos (markup) que constituyen la
apariencia de un documento web y la información que contiene.
Ejemplo: <B>Este texto aparece en negrita en el navegador</B>
Los códigos se encierran entre los caracteres menor que "<" y mayor que
">". Estos códigos encerrados entre estos dos caracteres son llamados
comúnmente etiquetas (tags). Siempre van entre los caracteres "< >" y
no importa si los codificamos en mayúsculas o en minúsculas ya que no
son sensibles a este hecho. Sin embargo, podremos reconocer de manera
más sencilla las etiquetas en un documento web si éstas se codifican en
mayúsculas
La mayor parte de los elementos de un documento HTML tienen una
etiqueta de inicio y una de fin. Esta última se distingue por la barra
inclinada "/" que aparece dentro de los corchetes.
Ejm: <FONT color="blue">Este texto aparecerá en azul</FONT>
MERG 2
Básicamente, los documentos escritos en HTML constan del
texto mismo del documento y las etiquetas que pueden
llevar atributos. Esto llevado a la práctica, vendría a ser:
<etiqueta> texto afectado </etiqueta>
La etiqueta del principio activa la orden y la última (que será
la del principio precedida del signo /) la desactiva
Estructura de un documento básico
Todo va encerrado entre las etiquetas <HTML> y
</HTML>:
<HTML>
cabecera
Cuerpo
</HTML>
Cabecera <HEAD>... </HEAD>: es donde se define entre
otras cosas el título del documento.
Cuerpo <BODY> ... </BODY>: Es la información que
aparecerá en la página.
MERG 3
Ejemplo 1
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>
Note el indentado (margen que se
deja para saber donde empieza y
donde acaba cada instrucción)
MERG 4
La etiqueta BODY
En ésta se puede establecer entre otras cosas
el color de fondo y el color del texto, así como
una imagen de fondo.
<BODY
TEXT=“#RRGGBB” | “algún color”
BGCOLOR=“#RRGGBB” | “algún color”
LINK= “#RRGGBB” | “algún color”
VLINK=“#RRGGBB” | “algún color”
BACKGROUND=“alguna imagen”
>
MERG 5
El tamaño del texto y
comentarios
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
<H1>Mi primera página H1</H1>
<!-- Aqui va un comentario que no es
interpretado por el navegador -->
<H2>h2</H2>
<H3>h3</H3>
<H4>h4</H4>
<H5>h5</H5>
<H6>h6</H6>
</BODY>
</HTML>
MERG 6
Etiquetas básicas
<br> Salto de línea (no necesita cerrar)
<center> texto </center> Centra el texto
sobre la pantalla
<HR> Barra Horizontal
Parámetros:
<HR
ALIGN=“LEFT” | “CENTER” | “RIGHT”
SIZE=“Tamaño vertical en píxeles”
WIDTH= “Tamaño horizontal en píxeles”
>
MERG 7
Etiqueta <BR> y
<center>
MERG 8
<HR> Horizontal Bar
MERG 9
Formato
<B>negrita, <I>
cursiva ,<u>subrayado, <sup>
superindice, <sub> subindice
MERG 10
La etiqueta <FONT>
<FONT
FACE=“Fuente1,Fuente2,...,fuenteN“
COLOR=“Color” | “#RRGGBB”
SIZE=“Numero entre –1 y 7”
> Texto afectado </FONT>
MERG 11
La etiqueta <BASEFONT>
Se coloca inmediatamente después de la etiqueta <BODY>
Sirve para definir las características de la fuente que
afectarán a todo el documento (el color de la fuente, tipo y
tamaño de la misma).
MERG 12
Enlaces (Ligas, links) hacia otras
páginas
Un enlace es una zona de texto o gráficos que nos puede trasladar a
otro documento de hipertexto o a otra posición dentro del documento
actual.
la etiqueta <A>. Para incorporar un enlace hay que utilizar esta
etiqueta. Todo lo que encerremos entre <A> y </A>, bien sea texto o
imágenes, será considerado como enlace y sufrirá dos modificaciones:
Se visualizará de manera distinta en el navegador. El texto aparecerá
subrayado y de un color distinto al habitual y las imágenes estarán
rodeadas por un borde del mismo color que el del texto del enlace.
Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el
enlace.
Para que el enlace nos lleve a alguna parte debemos especificarle una
dirección. Lo haremos de la siguiente manera:
<A HREF="dirección">Púlsame</A>
La dirección estará en formato URL (Uniform Resource Locator).
MERG 13
MERG 14
Marcadores
Los marcadores son un tipo de enlaces dentro de
una misma página, se suelen utilizar en páginas de
gran extensión para saltar de un sitio a otro dentro
de la la misma página sin tener que utilizar la barra
de desplazamiento.
Ejemplo:
Marcador
<A name="enlacesaotra">Enlaces a otra página</A>
Referencia a la página (ejm al inicio en un índice)
<A href="#enlacesaotra">Ir a enlaces a otra página</A>
MERG 15
Enlaces a una dirección de
correo
Este enlace funcionará al hacer clic sobre él. En ese
momento se abrirá el servidor de correo que esté
predeterminado (ejm Outlook, ...) con la dirección a la
que apunta ya colocada
Ejemplo:
<A
href="[Link]
Resultado
Escríbeme
MERG 16
Imágenes
Las imágenes más soportadas por los navegadores son de
tipo JPEG (Joint Photographic Experts Group) y GIF (Graphics
Interchange Format).
Inserción de una imagen (básico):
<img src=“ruta/nombre_imagen.ext”>
Opciones:
SRC=“ruta/nombre_imagen.ext” (Fuente de donde se
obtendrá la imagen)
WIDTH=“Ancho en píxeles”
HEIGHT=“Alto en píxeles”
ALIGN=“Alineación”
ALT=“Texto alternativo si la imagen no se carga”
BORDER=“Borde de la imagen en píxeles”
MERG 17
MERG 18
Opciones sobre las
imágenes
HEIGHT y WIDTH : Con estos atributos se puede modificar la
altura y la anchura de la imagen, esto se puede hacer dandole un
valor en pixels a estos atributos o dandole un valor en tanto por
ciento.
Ejemplo: <IMG src="[Link]" height=31 width=53>
ALIGN : Este es un atributo nos puede servir para alinear la
imagen a derecha e izquierda dandole los valores right y left
respectivamente o para que los titulares de la imagen (una linea
de texto al lado de la imagen) esten alineados arriba (top), abajo
(bottom) o en medio (middle).
Ejemplo2:
<IMG src="[Link]" align=middle>
Texto alineado en medio de la imagen.
MERG 19
MERG 20
Una liga en una imagen
Un Hyperenlace puede hacerse a cualquier tipo de fichero. En
este caso el navegador intentará "ejecutar" el fichero, y si no
puede hacerlo nos preguntará si deseamos grabarlo en nuestro
ordenador. Esta es una forma sencilla de permitir a los
visitantes de nuestra página copiar ficheros a su ordenador.
Ejm
<A href = "[Link]">Pulsa aquí para llevarte una copia del
manual.</A>
Pulsa aqui para llevarte una copia del manual.
MERG 21
LISTAS
Listas numeradas u ordenadas: Se engloban por las etiquetas
<ol>.....</ol> y cada elemento de la lista estará encabezado
por la etiqueta <li> que puede o no llevar la etiqueta de cierre
</li>.
Cuando el navegador interpreta una lista ordenada, numera y
sangra cada elemento en forma secuencial, aunque se
introduzcan modificaciones.
Opciones de <ol>:
TYPE=“1” | “A” | “a” | “I” | “i”
VALUE=“valor unicial”
Listas con viñetas o sin orden: Se engloban por las etiquetas
<ul>.....</ul> y cada elemento de la lista, también estará
encabezado por la etiqueta <li>. El resultado es que el
navegador inserta viñetas (marcadores) delante de cada
elemento.
Opciones de <ul>:
TYPE=“DISC” | “SQUARE” | “CIRCLE”
MERG 22
MERG 23
Listas de definiciones
Cada elemento de la lista está compuesto por un término y
una definición y cada una de estas partes tiene su propia
etiqueta. Estas listas se engloban con las etiquetas
<dl>.....</dl>. Para el término se usa la etiqueta <dt> y para
la definición la etiqueta <dd>.
MERG 24
Listas anidadas (listas adentro de
listas)
Consiste en poner una lista dentro de otra, de
manera que la lista secundaria sangre
respecto a la principal.
MERG 25
TABLAS
<TABLE>Es la etiqueta que engloba a todas las demás.
<TABLE>
(resto de etiquetas)
</TABLE>
<TR> (Table Row).
Ocupa el siguiente nivel dentro de la confección de una
tabla. Se utilizan para formar cada una de las filas (row)
que queramos obtener. Se repetirán tantas veces como
filas necesitemos en la tabla. Las etiquetas son:
<TR>
(Conntenido de la fila)
</TR>
MERG 26
<TD> (Table Data).
En el último nivel, dentro de las anteriores, tenemos las
etiquetas de cada celda, que son <TD> y </TD>, y que
engloban el contenido de cada celda concreta (texto,
imágenes, enlaces, etc.). Debemos repetirlas tantas veces
como celdas queramos que haya en esa fila.
MERG 27
Opciones de <TABLE>
ALIGN=“CENTER” |”RIGHT”|”LEFT”
BGCOLOR=“RRGGBB”
BORDER=“Ancho Borde en puntos”
BORDERCOLOR=“RRGGBB”
CELLSPACING=“espacio entre celdas en puntos”
CELLPADDING=“espacio entre el texto u objeto y el
borde de la celda”
COLS=“Número de columnas”
WIDTH=“Cantidad en puntos” | “porcentaje (ejm
50%)”
Otras: HEIGHT, HSPACE, VSPACE
MERG 28
Opciones de <TD>
WIDTH=”VALOR” | “PORCENTAJE”
ALIGN=“LEFT”|”RIGHT”|”CENTER”
VALIGN=“TOP”|”MIDDLE”|”BOTTOM”
BGCOLOR=“RRGGBB"
Otras opciones:
COLSPAN
ROWSPAN
Investigar para qué sirve la opción <TH> y que
diferencia existe entre esta etiqueta y <TD>.
Investigar COLSPAN y ROWSPAN (arriba)
MERG 29
Más ejemplos de tablas
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width
=80%>
<TH align = center>Buscadores
<TH align = center colspan = 2>Otros Links
<TR>
<TD align = LEFT>Yahoo
<TD align = LEFT>Microsoft
<TD align = LEFT>IBM
<TR>
<TD align = LEFT>Infoseek
<TD align = LEFT>Apple
<TD align = LEFT>Digital
</TABLE> MERG 30
<TABLE width="350"
align="center" border="1">
<TR>
<TH colspan="2">fila 1 celda 1 y 2 (colspan)</TH>
<TH bgcolor="RED">fila 1 celda 3</TH>
</TR>
<TR>
<TD>fila 2 celda 1</TD>
<TD>fila 2 celda 2</TD>
<TD rowspan="2" valign="Bottom">fila 2 y 3 celda 3
(rowspan)</TD>
</TR>
<TR>
<TD align="right" BGCOLOR="yellow">
<font face="Arial" size=2>f 2 cel 1</font>
</TD>
<TD>fila 2 celda 2</TD>
</TR> MERG 31
Ejercicios
MERG 32
Referencias
HTML
[Link]
[Link]
html/
[Link]
[Link]
2915/[Link]
Una aplicación sobre los colores (RGB)
[Link]
Lista de caracteres especiales
[Link]
MERG 33
Mejorando las páginas
usando FRAMES
Introducción a la Ingeniería en
Computación
UTM
FRAMES
FRAMES (en inglés, marcos o cuadros) es un procedimiento del lenguaje
HTML para dividir la pantalla en diferentes zonas, o ventanas, que
pueden actuar independientemente unas de otras, como si se trataran de
páginas HTML diferentes. De hecho, cada una de estas partes se “llena"
con una página HTML.
Una de sus características más importantes es que, pulsando un enlace
situado en un frame, se puede cargar en alguna parte o zona del frame.
Esto se utiliza frecuentemente un frame estrecho en la parte lateral (o
superior) con un índice del contenido en forma de diferentes enlaces,
que, al ser pulsados cargan en la ventana principal las distintas páginas.
De esta manera se facilita la navegación entre las páginas, pues aunque
se vaya pasando de unas a otras, siempre estará a la vista el índice del
conjunto.
Por ejemplo, para construir un documento dividido en dos partes, una a la
izquierda y una a la derecha, necesitaremos tres páginas HTML: una por
cada parte ([Link] y [Link]) y una que los contenga ([Link]).
MERG 35
A [Link], se le denomina documento de definición
de marcos. En ella se debe especificar el tamaño y posición
de cada marco y el documento HTML que contendrá.
MERG 36
Estructura de un
documento de definición
de marcos
Un documento HTML con frames se diferencia, en su
estructura, a un documento HTML sin frames. Un
documento básico tiene una sección de cabecera
(HEAD) y una sección de cuerpo (BODY). Un documento
con frames tiene:
1. Una cabecera (HEAD),
2. Un FRAMESET (conjunto de frames) dónde se especifica
la disposición de las vistas en la ventana principal,
3. Un cuerpo (BODY) opcional para proveer un contenido
alternativo en el caso que el navegador no soporte
frames o esté configurado para no mostrarlos.
MERG 37
Ejemplo
<HTML>
<HEAD>
<TITLE> Mi página con frames </TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="[Link]"
NAME="panel_izquierdo">
<FRAME SRC="[Link]"
NAME="panel_derecho">
</FRAMESET>
</HTML> MERG 38
<FRAMESET>
</FRAMESET>
Esta etiqueta permite crear las divisiones en la ventana del browser
y definir la distribución de los frames en columnas o en filas, según
qué atributo use.
Los atributos de este elemento son:
COLS: Determina el tamaño y el número de columnas que
aparecerán dentro del documento principal. Los valores posibles
para este atributo son:
Píxeles (valor absoluto): <FRAMESET cols="50, 700"> (Columna
izquierda 50px y la derecha 700px).
Porcentaje del total: <FRAMESET cols="20%, 80%"> (Columna
izquierda 20% y la derecha 80% de la pantalla).
Asterisco (*) y cogerá el espacio sobrante: <FRAMESET
cols="110,*,110"> (habrá tres filas: la de la izquierda y la de la derecha
tendrán una anchura fija de 110 pixeles y la del medio obtendrá el
espacio restante).
MERG 39
ROWS: determina el tamaño y el número de filas
que aparecerán dentro de la página principal.
Permite los mismos valores que el atributo COLS.
FRAMEBORDER: permite definir si queremos o no
que exista un borde entre los frames. Valores
posibles “YES” o “NO”.
BORDER: Su valor se especifica en píxeles.
BORDERCOLOR: permite elegir el color del borde
que aparece entre los frames.
MERG 40
<FRAME>
Esta etiqueta define cada uno de los frames que formarán parte
del conjunto. Habrá, por lo tanto, tantas etiquetas <FRAME> como
divisiones creadas por la etiqueta <FRAMESET>.
Sus atributos son:
SRC: facilita la URL de la página que será mostrada en el frame.
NAME: asigna un nombre el frame para que pueda ser
referenciado en caso necesario. De esta manera, se podrá "dar en
el blanco" (en inglés, target) en esta página, desde un enlace
situado en otra página (el atributo TARGET se verá más adelante).
MARGINWIDTH: determina el espacio horizontal entre el
contenido del frame y su borde, es decir, el márgen lateral. Su
valor se expresa en píxeles.
MERG 41
MARGINHEIGHT: determina el espacio vertical entre el
contenido del frame y su borde, es decir, el márgen
superior. Su valor se expresa en píxeles.
SCROLLING: muestra una barra de desplazamiento en
el frame. Permite tres valores: YES (siempre mostrará la
barra), NO (nunca la mostrará) y AUTO (será el
navegador el que decidirá su aparición en función del
contenido). Su valor por defecto es AUTO.
NORESIZE: con este atributo no se permitirá
redimensionar el frame. Por defecto, todos los frames
son redimensionables.
FRAMEBORDER: este atributo elimina el borde en un
frame, aunque si se quiere eliminar completamente,
también hay que codificarlo en el frame contiguo. Si se
quiere eliminar los bordes de todos los frames, se debe
colocar en la etiqueta FRAMESET, como hemos visto con
anterioridad. MERG 42
