REALIZADA Y ENVIADA!!!!!!!
jueves, 21 de febrero de 2013
jueves, 7 de febrero de 2013
PRACTICA 7
Curso básico de lenguaje HTML
Se
irá mejorando poco a pocoÍndice
Estructura general de un fichero HTML
HTML (HyperText Markup Language) es el lenguaje utilizado en la Internet para definir las páginas del WORLD WIDE WEB. Los ficheros HTML son ficheros puramente ASCII, que pueden ser escritos con cualquier editor básico, tal como Notepad en Windows o vi en Unix. También se pueden utilizar procesadores de texto más complicados como Microsoft Word, pero en este caso hay que asegurarse que el fichero es guardado en disco como "text only". En este fichero de texto se introducen unas marcas o caracteres de control llamadas TAGs, que son interpretadas por el browser. Cuando éste lee un fichero ASCII con extensión *.htm o *.html interpreta estas TAGs y formatea el texto de acuerdo con ellas. Todas las TAGs de HTML van encerradas entre los caracteres menor que ( <) y mayor que ( >), como por ejemplo <HTML>. Además, la mayor parte de ellas son dobles, en el sentido de que hay una TAG de comienzo y otra de final; entre ambas está el texto afectado por dichas TAGs. La marca de final es como la de comienzo, pero incluyendo una barrra (/). Por ejemplo, la marca de final de <HTML> es </HTML>. De la misma forma, la TAG de final de <P> es </P>, y así con otras TAGs.<HTML> <HEAD> <TITLE>Título de la página</TITLE> ... </HEAD> <BODY> ... </BODY> </HTML>Volver al inicio
Formato de párrafos
| Así se escribe: | Así se ve: |
|---|---|
<P>Este es un ejemplo de cómo se formatean los párrafos en lenguaje HTML. En esta celda de la Tabla se incluyen dos párrafos</P> <P>El resultado puede verse en la celda vecina incluida en la columna de la derecha</P> |
Este es un ejemplo de cómo se formatean los párrafos en lenguaje HTML. En esta celda de la Tabla se incluyen dos párrafos El resultado puede verse en la celda vecina incluida en la columna de la derecha |
<P>Los párrafos se separan con un espaciado superior al correspondiente a una nueva línea. <BR> Para tener un espaciado más compacto puede utilizarse el Line Break, como en este ejemplo.</P> |
Los párrafos se separan con un espaciado superior
al correspondiente a una nueva línea.
Para tener un espaciado más compacto puede utilizarse el Line Break, como en este ejemplo. |
| <P>Líneas horizontales:</P> <HR><HR WIDTH=80%><HR SIZE=4><HR NOSHADE> | Líneas horizontales:
|
| <P>Los párrafos pueden indentarse.
<BLOCKQUOTE>Block quote indenta un párrafo. Se
deshace esta indentación con el fin de la TAG Block quote,</BLOCKQUOTE> como se ve en el ejemplo.</P> |
Los párrafos pueden indentarse.
|
<PRE>La TAG Preformatted permite
|
La TAG Preformatted permite
|
| <ADRESS>
<P>Escuela Superior de Ingenieros Industriales <P>Pº Manuel de Lardizábal, 13 <P>E-20009 San Sebastián </ADRESS> |
Escuela Superior de Ingenieros Industriales
Pº Manuel de Lardizábal, 13 E-20009 San Sebastián (Esto aparece al principio del documento, a la izquierda) |
Formato de texto
Una idea importante de HTML es la de definir lo que se desea hacer (resaltar una palabra o un párrafo, utilizar un espaciado constante, etc.), pero no decir cómo se desea hacerlo, dejando que esta función la realice el browser de acuerdo con sus posibilidades. Por ejemplo, se le puede decir al browser que se quiere remarcar una palabra sin decirle que la ponga en bold; de ordinario la remarcará poniéndola en bold, pero si el browser se está ejecutando en un ordenador que no permite texto en bold, el propio browser buscará una forma alternativa de remarcar esa palabra. De todas formas, los autores quieren muchas veces determinar más en concreto cómo va a aparecer su texto en la pantalla del browser. Además, cada vez es más infrecuente ejecutar un browser que no tenga las amplias posibilidades de formatear texto de Mac o Windows. La consecuencia es que HTML se ha extendido y permite tanto definir de modo general la función del texto como determinar en concreto el formato con que se debe representar. A continuación se muestran algunos ejemplos de ambas formas de definir los formatos.| Así se escribe: | Así se ve: |
|---|---|
| <FONT SIZE="+1" COLOR="red" FACE="Arial">
Define tipo de letra, tamaño y color a tu gusto </FONT> |
Define tipo de letra, tamaño y color a tu gusto |
<P>Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con <STRONG>bold</STRONG> e <EM>italic</EM></P> |
Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con bold e italic. |
<P>En cualquier caso, también se pueden utilizar los tags <B>bold</B> (B) e <I>italic</I> (I).</P> |
En cualquier caso, también se pueden utilizar los tags bold (B) e italic (I). |
<P>Para escribir con una <TT>letra de paso constante (estilo teletipo)</TT> se emplea la Tag TeleType</P> |
Para escribir con una letra de paso constante (estilo teletipo) se emplea la Tag TeleType. |
<P>Para que el texto <BLINK>parpadee</BLINK> se emplea la TAG Blink.</P> |
Para que el texto parpadee se emplea la Tag Blink. |
| <P>Títulos: <H1>1</H1><H2>2</H2><H3>3</H3> <H4>4</H4><H5>5</H5><H6>6</H6></P> | Títulos: 123456 |
| <P>Alineados:</P>
<P ALIGN="LEFT">Izquierda</P>
<P ALIGN="RIGHT">Derecha</P> <P ALIGN="CENTER">Centrado</P> </P> |
Alineados:
Izquierda
Derecha
|
| Otros efectos:
<P><U>subrayado</U> <P><STRIKE>tachado</STRIKE> <P><BIG>letra más grande que el estándar</BIG> <P><SMALL>letra más pequeña que el estándar</SMALL> <P>Texto tipo<SUB>subíndice</SUB> <P>Texto tipo<SUP>superíndice</SUP> |
Otros efectos:
subrayado
letra más grande que el estándar letra más pequeña que el estándar Texto tiposubíndice Texto tiposuperíndice |
Listas no ordenadas
| Así se escribe: | Así se ve: |
|---|---|
<P>Las listas no ordenadas: <UL> <LI>Van precedidas por "bullets" <LI>Se entiende que no importa el orden <LI>Se utilizan con mucha frecuencia </UL> |
Las listas no ordenadas:
|
Listas ordenadas:
| Así se escribe: | Así se ve: |
|---|---|
Las listas ordenadas: <P>Las listas ordenadas: <OL> <LI>Van precedidas por números <LI>La numeración es automática <LI>Son también muy utilizadas </OL> |
Las listas ordenadas:
|
Listas de definiciones:
| Así se escribe: | Así se ve: |
|---|---|
<P>Las listas de definiciones: <DL> <DT>Primer término <DD>Definición del 1er término <DT>Segundo término <DD>Definición del 2º término </DL> |
Las listas de definiciones:
|
Volver al inicio
Tablas
Las tablas son uno de los elementos más interesantes de HTML. Permiten,
por ejemplo, escribir texto en varias columnas, hacer listas de equivalencias,
tablas propiamente dichas, etc. Este documento es un ejemplo de las posibilidades
ofrecidas por las tablas.
| Así se escribe: | Así se ve: | ||||
|---|---|---|---|---|---|
<TABLE BORDER=1> <TR><TD>celda (1,1)</TD><TD>celda (1,2)</TD></TR> <TR><TD>celda (2,1)</TD><TD>celda (2,2)</TD></TR> </TABLE> |
|
||||
<CENTER><TABLE BORDER=1> <TR><TD>celda (1,1)</TD><TD>celda (1,2)</TD></TR> <TR><TD>celda (2,1)</TD><TD>celda (2,2)</TD></TR> </TABLE></CENTER> |
|
Volver al inicio
Anclas
Las anclas son referencias que se emplean en el archivo con el fin de ser
el punto de destino de un link. En el archivo son invisibles pero
al clicar sobre una palabra señalada como link, la visualización
de la página pasa a ser el punto donde se había definido
el ancla.
| Así se escribe: | Así se ve: |
|---|---|
<P><A NAME "ancla"> |
Volver al inicio
Links
Los links son palabras diferenciadas en un archivo HTML, y tienen
la función de enviar al usuario a algún ordenador remoto,
o a algún sitio de la página, que esté señalada
por un ancla. Los links forman lo que se llama hipertexto.
| Así se escribe: | Así se ve: |
|---|---|
<P>Este link envía al Web de la Universidad<P> <A HREF="http://193.145.249.23">Al Web</A> |
Este link envía al Web de la Universidad Al Web |
<P>Este link envía al ancla<P> <A HREF="#ancla">Al ancla</A> |
Este link envía; al ancla Al ancla |
Volver al inicio
Inserción de imágenes
Un recurso que da mucha vida a una página hecha con HTML es la inserción
de elementos gráficos. La forma de insertar una imagen es la siguiente:
| Así se escribe: | Así se ve: |
|---|---|
<IMG SRC="todo.gif"> |
 |
Volver al inicio
Imágenes clicables
Se pueden unir los dos apartados anteriores, es decir, se puede crear una
imagen que a la vez sea un link. Al clicar sobre la imagen, ésta
te enviará a un documento o un ancla destino.
| Así se escribe: | Así se ve: |
|---|---|
<P><A HREF="#ancla"> <IMG SRC="todo.gif"> </A> |
|
Volver al inicio
Imágenes sensibles
Imágenes sensibles son un tipo de imágenes las cuales detectan
la zona en la que se ha clicado y según el punto realizan un link
a una zona del documento u a otra (o entre archivos). Hay que definir los
puntos de la imagen y la zona a la que hay que ir si se clica. Se pueden
definir zonas rectangulares, circulares y poligonales. El ejemplo crea
dos zonas rectangulares definiendo los puntos según las coordenadas
del punto superior izquierdo y el del punto inferior derecho.
| Así se escribe: | Así se ve: |
|---|---|
<P><IMG USEMAP="#mapadirec" SRC="mapa.gif"> <MAP NAME="mapadirec"> <AREA COORDS=0,0,47,46 HREF="http://193.145.249.23"> <AREA COORDS=47,0,96,46 HREF="#ancla"> </MAP> |
 |
Frames
| Así se escribe: | Así se ve: |
|---|---|
<FRAMESET ROWS="50%,50%,*"> <FRAME SCR="ejemplo.htm"> <FRAME SCR="ejemplo.htm"> </FRAMESET> |
 |
<FRAMESET COLS="40%,60%"> <FRAME SCR="ejemplo.htm"> <FRAME SCR="ejemplo.htm"> </FRAMESET> |
 |
Volver al inicio
Formularios
| Así se escribe: | Así se ve: |
|---|---|
<FORM> Nombre: <INPUT NAME="nombre"> </FORM> |
|
<FORM> Nombre: <INPUT NAME="nombre"><P> <INPUT TYPE="radio" NAME="boton" CHECKED> boton radio 1<P> <INPUT TYPE="radio" NAME="boton" CHECKED> boton radio 2<P> <INPUT TYPE="checkbox" NAME="check"> checkbox </FORM> |
Layers
Antes que nada, hay que decir que las layers sólo son compatibles con Netscape Communicator por el momento. Así que si no es este tu navegador, no verás esta parte como debería ser en la realidad. Las capas permiten jugar con contenidos situados en capas distintas, escondiéndolos o haciéndolos visibles, situandolos en la parte deseada de las ventanas... pero con el handicap de la compatibilidad. Para browsers que no soportan layers, está la tag pareada<NOLAYER>Hay dos tipos de layers: las definidas por <LAYER> son posicionadas de una forma absoluta. Las definidas por <ILAYER> son posicionadas con relación a otra layer.
| Así se escribe: | Así se ve: |
|---|---|
<LAYER NAME="uno" VISIBILITY="HIDE"> Esta es la capa uno </LAYER> <LAYER NAME="dos" VISIBILITY="SHOW"> Esta otra es la capa dos </LAYER> |
Esta otra es la capa dos |
PRACTICA 6
HTML
HTML, siglas de HyperText Markup
Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de
páginas web que se utiliza para describir y traducir la
estructura y la información en forma de texto, así como para complementar el
texto con objetos tales como imágenes. El HTML se escribe en forma de
«etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un
cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo, JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.1
HTML también
sirve para referirse al contenido del tipo de MIME text/html o
todavía más ampliamente como un término genérico para el HTML, ya sea en forma
descendida del XML (como XHTML 1.0 y
posteriores) o en forma descendida directamente de SGML (como HTML
4.01 y anteriores).
Las etiquetas del lenguaje HTML
Básicamente,
HTML utiliza los mismos elementos que SGML, esto es,
marcas o etiquetas compuestas de códigos enmarcados por los signos < >.
Cualquier documento HTML comienza con la etiqueta <html> y termina con la etiqueta </html>. Dentro existen dos zonas bien
identificadas: el encabezamiento, que se identifica con la etiqueta <HEAD> y </HEAD> y sirve para definir una serie de valores válidos en todo el documento, y
el cuerpo del documento, representado por etiqueta <BODY> y </BODY> que muestra la información del documento.
Dentro del
encabezamiento, la etiqueta principal es la del título, representado por la
etiqueta <TITLE> En el cuerpo del documento se pueden establecer
diferentes categorías utilizando diversos tamaños de fuentes y estableciendo
así la estructura básica del documento. Dentro del cuerpo se coloca el
contenido de la página web: textos, imágenes, tablas, formularios, gráficos,
mapas sensibles, etc. La información se puede estructurar en párrafos y/ o
secciones con cabeceras de distinto nivel, enlaces a otras partes del mismo documento, a documentos
distintos, o a documentos que estén en distinto servidor, etc.
También
podemos determinar el estilo y tipo de letra mediante los atributos, como son
los de final de línea <br> y final de párrafo <p>, los
de presentación de texto preformateado, es decir, manteniendo los espacios y
retornos de carro <pre> o los de negrita <b>, cursiva <i>, centrado <center>, etc. Además se pueden definir
listas numeradas y no numeradas, glosarios, trazar líneas horizontales para
separar textos, insertar comentarios, etc.
Pero, sin
duda, los elementos más característicos del lenguaje HTML y que dotan a los
documentos con él creados de la característica hipertextual, son las anclas o anclajes utilizados para establecer los enlaces, ya se trate de texto o gráficos. Para fijar
un enlace, se debe enmarcar el texto que aparecerá subrayado
para que el usuario pueda pulsarlo y le redirija a la dirección o URL marcada.
La etiqueta ancla debe incluir el parámetro href="URL" y el texto para pulsar. Si se trata de imágenes,
éstas se insertan mediante la etiqueta src="URL" y también podemos conseguir que el gráfico se
convierta en un enlace mediante la etiqueta correspondiente.
Existen una
gran cantidad de etiquetas, muchas de ellas pueden contener elementos y
atributos que realizarán una función u otra según la voluntad del autor.
La estructura de un documento HTML
Un documento
HTML comienza con la etiqueta <html>, y termina con </html>.
Dentro del
documento hay dos zonas principales: el encabezamiento, delimitado por
las marcas <HEAD> y </HEAD>, que sirve para definir algunos valores válidos para
todo el documento, y el cuerpo, delimitado por las etiquetas <BODY> y </BODY>, donde reside la información del documento.
El elemento <TITLE> contenido dentro del encabezamiento
permite especificar el título de un documento HTML. Este título no forma parte
del documento en sí pues no se ve en la pantalla principal, sino que sirve como
título de la ventana del programa que la muestra.
Existen
muchos otros elementos que se engloban dentro del encabezamiento pero para la
estructura básica del lenguaje HTML en su nivel básico no son necesarios.
El cuerpo de
un documento HTML contiene el texto, imágenes, etc. que,
con la presentación y los efectos que se decidan, se presentarán ante el usuario. Dentro del
cuerpo se pueden aplicar una serie de efectos a través de diferentes marcas o
etiquetas (también otros autores las denominan "directivas").
Así pues, la
estructura de un documento HTML es la siguiente:
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>
<BODY>
[Aquí se sitúan otras etiquetas que hacen posible visualizar la página]
</BODY>
</HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>
<BODY>
[Aquí se sitúan otras etiquetas que hacen posible visualizar la página]
</BODY>
</HTML>
El texto
puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo
el número indicativo del tamaño. El tamaño mayor es el correspondiente al
número 1.
Hay otras
etiquetas como <P>, para separar los distintos
párrafos, la etiqueta de centrado <CENTER> y </CENTER> que sirve
para centrar todo lo que esté dentro de ella, ya sea texto, imágenes, etc. la
etiqueta <HR> para obtener una raya horizontal
tan ancha como la pantalla, y con la apariencia de estar embutida sobre el
fondo, etc.
He aquí un
ejemplo:
<HTML>
<HEAD>
<TITLE>Mi pagina Web</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Primera pagina</H1>
</CENTER>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla.
<P>Aqui va un segundo parrafo.
</BODY>
</HTML>
<HEAD>
<TITLE>Mi pagina Web</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Primera pagina</H1>
</CENTER>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla.
<P>Aqui va un segundo parrafo.
</BODY>
</HTML>
Pero existen
también una serie de Atributos:
<body background="nombre_de_archivo">
Especifica una imagen para el fondo
del documento.
<body bgcolor="#rrggbb">
Especifica un color para el fondo
del documento.
<body text="#rrggbb">
Especifica un color para el texto
normal del documento.
<body link="#rrggbb"
vlink="#rrggbb" alink="#rrggbb">
Establece el color del texto de
vínculo, del vínculo visitado y del vínculo activo.
#rrggbb representa el valor hexadecimal del color expresado
como rojo-verde-azul.
Los
componentes de HTML
<HEAD>
<TITLE>Mi pagina Web</TITLE>
</HEAD>
<TITLE>Mi pagina Web</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Primera pagina</H1>
</CENTER>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla.
<P>Aqui va un segundo parrafo.
</BODY>
<CENTER>
<H1>Primera pagina</H1>
</CENTER>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla.
<P>Aqui va un segundo parrafo.
</BODY>
miércoles, 6 de febrero de 2013
martes, 5 de febrero de 2013
PRACTICA 2
Diseño web
El diseño web es una actividad que consiste en la planificación,
diseño e implementación de sitios web. No es simplemente una aplicación
del diseño convencional, ya que requiere tener en cuenta la navegabilidad,
interactividad,
usabilidad,
arquitectura de la información
y la interacción de medios como el audio, texto, imagen, enlaces y vídeo.
Se lo considera dentro del diseño multimedia.
La unión de un buen diseño con una jerarquía bien elaborada de
contenidos, aumenta la eficiencia de la web como canal de comunicación
e intercambio de datos, que brinda posibilidades como el contacto directo entre
el productor y el consumidor de contenidos, característica destacable del medio.
El diseño web ha visto amplia aplicación en los sectores comerciales de
Internet especialmente en la World Wide
Web. Asimismo, a menudo la web se utiliza como medio de expresión
plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio
más para ofrecer sus producciones y utilizarlas como un canal más de difusión
de su obra.
Etapas
Para el
diseño de páginas web debemos tener en cuenta tres etapas:
- La primera, es el diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un boceto o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
- La segunda, es la estructura y relación jerárquica de las páginas del sitio web, una vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.
- La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el año 2012 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.
Suscribirse a:
Entradas (Atom)