Como Crear Web Con HTML

Unidad 1.
Introduccin a HTML (III)
Para que te vayas haciendo una idea de cmo crear una pgina html a travs del Bloc
de notas, vamos a crear una pgina web sencilla, con una lnea de texto.
Mi primera pgina
Lo primero que tienes que hacer es abrir el
Bloc de notas. Para abrirlo, puedes dirigirte al
men Inicio, Programas, Accesorios, opcin
Bloc de notas.
Seguidamente introduce, en el documento en
blanco, el texto siguiente:
<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy
haciendo pruebas.</font>
</body>
</html>
Guarda
el
documento con la
extensin htm, con
el
nombre
miprimpag.htm.
Puedes guardarlo a
travs del men
Archivo,
opcin
Guardar.
Pulsando
dos
veces sobre el icono
del
archivo
miprimpag.htm,
ste debera abrirse
automticamente en
el navegador que
tengas instalado en
tu ordenador.
El
navegador
deber mostrar una
pgina como la de la
derecha.
Como puedes ver,
la pgina resultante
es una pgina que
solamente tiene una
lnea de texto.
Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI

PRIMERA PAGINA. Este ttulo ha sido establecido por la lnea <title>MI PRIMERA
PAGINA</title>.
El color de fondo de la pgina ha sido establecido por la lnea <body
bgcolor="#FFCC99">.
El texto Hola, estoy haciendo pruebas. se ha insertado a travs de lnea <font
color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>.
Internet, que slo en los ltimos 10 aos se ha afirmado como medio de

comunicacin de masa, durante mucho tiempo fue un sistema de
comunicacin utilizado exclusivamente por el mundo militar, primero, y por el
universitario, despus. Es fcil imaginar la escasa inclinacin hacia el diseo
y la esttica mostrada por estos primeros navegantes de la red. A finales de
los aos 80, Internet sufri una transformacin radical que condujo hasta las
"autopistas telemticas" a un pblico de masa, con exigencias diversas de
las militares o acadmicas. Con la transformacin de la red, se ha impuesto
la necesidad de poner a disposicin instrumentos de navegacin ms fciles
de usar ("user friendly") y no slo para el estudio o la investigacin. As, en
1989 nace el WWW, que gracias al primer navegador de la historia, Mosaic,
transforma el texto blanco sobre fondo negro en el actual web, hecho de
color e interactividad.
La revolucin de la imagen (criticada por algunos puristas acadmicos que
vieron en el Internet de masa el fin del sistema de comunicacin) fue tambin
mrito de una marca hoy muy comn <IMG>, esto es, el elemento necesario
para invocar imgenes dentro de la pgina.
<IMG>
Antes de describir en detalle la marca principal de insercin de imgenes en
los hipertextos, es conveniente precisar algunos conceptos de HTML. A
diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los
hipertextos no se "funden" con las imgenes que les sirven de
acompaamiento grfico, sino que se limitan a invocarlas desde un recorrido
especfico in situ o en el web. Dicho de otro modo, existe una divisin muy
clara entre archivo .htm e imgenes (y tambin sonidos, apliques, etc.). Los
documentos HTML se limitan a prever dentro de ellos un espacio en el que
se insertan las imgenes solicitadas.
La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">
donce SRC corresponde al ingls Search y es el recorrido del que el
navegador saca la imagen (en este caso "immagine.gif"). Como hemos
sealado, esta marca es nica en el sentido de que NO lleva como cierre el
correspondiente </IMG>.
Para un ejemplo prctico, haz clic aqu
Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos
formatos grficos, aunque los ms utilizados son dos: GIF (Graphics
Interchange Format) y JPEG (Joint Photographics Experts Group). En los
ltimos meses, asistimos a la difusin a nivel internacional de otro formato:
PNG (Portable Network Graphics).
El elemento <IMG> va acompaado de diversos atributos que facilitan su
uso. Veamos ahora juntos cules son.
ALT
El uso de texto para comentar las imgenes es una regla fundamental que
debemos observar en la creacin de sitios web por varias razones:
algunos navegadores pordran estar impostados para no invocar las
imgenes;
los navegadores textuales para invidentes no conseguiran interpretar las
imgenes si carecieran de comentario;
es posible evitar pies de imagen incluyendo comentarios dentro de la
imagen misma.
En todos estos casos, el uso de comentarios resuelve el problema y permite
optimizar la pgina web. La sintaxis correcta de los comentarios es la
siguiente:
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
Para comprobar sus efectos, pasa el ratn por encima de la imagen del
ejemplo.
WIDTH y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la
imagen que el navegador se ha encargado de buscar automticamente. Es
posible definir la anchura y la altura de la imagen gracias a los atributos width
y height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K.
Haring">
donde WIDTH=178 es la dimensin horizontal (ancho) de la imagen
expresada en pxel, y HEIGHT=180 la dimensin vertical (alto).
Mediante estos atributos podemos definir dimensiones diferentes de las que

realmente tiene la imagen. En cualquier caso, es aconsejable insertar
imgenes con su tamao efectivo sobre todo si estn en formato GIF, dado
que, cuando se cambian las medidas, este formato pierde mucha calidad.
BORDER
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores
son numricos y van expresados en pxel. Si impostamos el valor BORDER
en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el
navegador no aplica ningn borde, pero si la imagen es tambin un enlace
automticamente se le asignar un BORDER=1. La sintaxis correcta es:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2
ALT="Obra de K. Haring">
HSPACE y VSPACE
Con estos dos atributos podemos establecer la distancia en pxel de la
imagen a los objetos que se encuentran a los cuatro lados de la misma.
HSPACE define la distancia de los lados derecho e izquierdo de la
imagen a los objetos ms cercanos (texto, imgenes, apliques, etc.).
VSPACE define la distancia de los lados superior e inferior de la imagen
a los objetos ms cercanos (texto, imgenes, apliques, etc.). La sintaxis
correcta es
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2
VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">
Estos atributos resultan tiles cuando queremos distanciar la imagen de los
objetos ms cercanos.
ALIGN
El atributo ALIGN define la posicin de la imagen respecto al texto colocado
inmediatamente antes o despus de la misma. Existen varias opciones para
el atributo ALIGN:
ALIGN=top: alinea la primera lnea de texto con la parte superior de la
imagen.
Para un ejemplo prctico, haz clic aqu.
ALIGN=middle: alinea la primera lnea del texto con el centro de la
imagen.
ALIGN=bottom: alinea la primera lnea de texto con la parte inferior de la
imagen.
ALIGN=left: el texto se coloca a la derecha de la imagen empezando
desde la parte superior de la misma.
ALIGN=right: el texto se coloca a la izquierda de la imagen empezando
desde la parte superior de la misma.
Cmo insertar videos con un cdigo vlido

JMiur
Cosas sencillas, cumple dos meses de edad y para celebrarlo, nos da una de esas
informaciones que son como el oro en polvo: Cmo insertar videos de YouTube con
XHTML
vlido?
Esto, que parece algo "demasiado" tcnico para un usuario comn es, en realidad la
respuesta a por qu Blogger nos hace tan difcil la tarea, mostrando errores y cambiando
el cdigo a su antojo. Voy a transcribir, palabra por palabra porque la explicacin no
tiene
desperdicio:
Este es un ejemplo del cdigo que entrega YouTube:
<object width="425" height="350">
<param name="movie"
value="http://www.youtube.com/v/PsRkU7FV4aw"<</param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/PsRkU7FV4aw"
type="application/x-shockwave-flash" wmode="transparent"
width="425" height="350">
</embed>
</object>
El problema es que el elemento <embed> no es vlido, o ms bien, no existe en las

especificaciones del W3, sino que es un invento de Netscape (de aquellos tiempos en
que su navegador an era importante). Por otra parte, <object> s es vlido, pero si
insertramos el cdigo precedente sin ninguna otra modificacin que remover el
elemento
<embed>,
los
usuarios
de
Firefox
no
veran
nada.
La
solucin
es
utilizar
OBJECT
pero
especificando
un
atributo
fundamental:
type="application/x-shockwave-flash".
El cdigo vlido quedara de esta forma:
<object width="425" height="350"
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/PsRkU7FV4aw">
<param name="movie" value="http://www.youtube.com/v/PsRkU7FV4aw" />
<param name="wmode" value="transparent" />
</object>
De esta manera, el tag EMBED, desaparece de una vez por todas y pasa al saln de los
recuerdos.

Como Crear Web Con HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Como Crear Web Con HTML

Transféré par

Droits d'auteur :

Formats disponibles

Unidad 1.

Introduccin a HTML (III)

Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI

Internet, que slo en los ltimos 10 aos se ha afirmado como medio de

Mediante estos atributos podemos definir dimensiones diferentes de las que

Para un ejemplo prctico, haz clic aqu.

Cmo insertar videos con un cdigo vlido

El problema es que el elemento <embed> no es vlido, o ms bien, no existe en las

Vous aimerez peut-être aussi