viernes, 8 de junio de 2012

4. HTML


HTML
siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido 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.
HTML también es usado 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 (comoXHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).

http://es.wikipedia.org/wiki/HTML



Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).

<HTML>
    <HEAD>
        <TITLE>Título de la página</TITLE>
        ...
    </HEAD>

    <BODY>
        Aquí iría el contenido de la página
    </BODY>
</HTML>
Vamos a analizar más detenidamente las distintas secciones que componen la página
 Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:

<meta name="description" content="Información sobre el Centro,las enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">
En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.
 La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>).

El título de la página debe describir su contenido por ejemplo:
<TITLE>Colegio Público de Villamañán - Ámbito de Influencia - </TITLE> 

no valdría en cambio
<TITLE>Página de Inicio</TITLE> ya que esto no dice nada por si solo
Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas
<script language="JavaScript">
<!--

Aquí iría el código
// -->
</SCRIPT>
 El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:

BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue> 
Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en:Paleta de Colores 
TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro. 
LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo. 
Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR. 
BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).
Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">
Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas, desde C:\ aC:\webs por ejemplo, la ruta especificada debe seguir siendo válida.
Por ejemplo si la página desde la que hacemos el enlace se encuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner:
<BODY BACKGROUND="gifs/fondo.gif">



Si la página estuviese en ejemplos se pondría:
<BODY BACKGROUND="../gifs/fondo.gif">



http://platea.pntic.mec.es/~abercian/guiahtml/estructura.htm


·         Que es una etiqueta HTML

Todo texto que se encuentre entre los caracteres < y > se considerará una etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no será tenida en cuenta, sin causar ningún tipo de error. Dejándose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraña. Cuando se comete un error sintáctico al expresar una etiqueta o un atributo no se producirá ningún error, simplemente no de obtendrá el efecto que deseábamos.  
<><><><><><><><><><> <><><><><><><><><><><><><><>


Etiquetas
Apertura
AcciónAtributosCierre
< !
Comentario.
Ninguno
-->
<A>
Hipervínculo.
HREF, NAME, REL, REV, TITLE
</A>
<ADDRESS>
Formato para dirección del autor.
Ninguno
</ADDRESS>
<BASE>
Url del autor; contexto del documento.
HREF
</BASE>
<BASEFONT SIZE>
Tamaño de la fuente base.
Ninguno
NO
<BGSOUND>
Sonido de fondo.
SRC, LOOP.
NO - Internet Explorer
<BIG>
Aumenta el tamaño.
Ninguno
</BIG>
<BLINK>
Hace parpadear el texto.
Ninguno
</BLINK> - Netscape
<BLOCKQUOTE>
Da formato con sangría a un párrafo
Ninguno
</BLOCKQUOTE>
<BODY>
Cuerpo del documento.
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK
</BODY>
<BR>
Retorno de línea.
CLEAR: Se utiliza en combinación con ALIGN de IMAGE.
NO
<CAPTION>
Posición de la leyenda en una tabla.
ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER
</CAPTION>
<CENTER>
Centrar.
Ninguno
</CENTER>
<CITE>
Formato para citas en itálicas.
Ninguno
</CITE>
<CODE>
Formato en tipo código.
Ninguno
</CODE>
<DD>
Definiciones marcadas, para Lista de Definiciones <DL>.
Ninguno
NO
<DFN<
Formato en itálica.
Internet Explorer
</DFN<
<DIR>
Lista de directorio, con elementos marcados con <LI>.
Ninguno
</DIR>
<DL>
Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>.
Ninguno
</DL>
<DT>
Términos marcados, para Lista de Definiciones <DL>.
Ninguno
NO
<EM>
Formato enfatizado en itálica.
Ninguno
</EM>
<EMBED>
Sonido de Fondo.
SRC, WIDTH, HEIGHT, AUTOSTART, LOOP.
NO - Netscape
<FONT>
Definición de la fuente.
SIZE, COLOR. Internet Explorer: FACE.
</FONT>
<FORM>
Para ingreso de datos del usuario en un formulario.
ACTION, METHOD
</FORM>
<H1 ...H6>
Tamaño de letras del 1 al 6.
HTML 3.0: LEFT, CENTER, RIGHT
</H1 .../H6>
<HEAD>
Encabezamiento del documento.
BASE, TITLE, ISINDEX, NEXTID, META
</HEAD>
<HR>
Línea horizontal.
NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR
NO
<HTML>
Al principio y al fin de todo documento.
HEAD, BODY
</HTML>
<I>
Itálica (Cursiva).
Ninguno
</I>
<IMG>
Cargar imágenes.
ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE
NO
<INPUT>
Define un objeto de ingreso en un formulario.
TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED
</INPUT>
<ISINDEX>
Indica que existe un index en el server para el documento.
Netscape: PROMPT
NO
<ISMAP>
Activa la selección de imágenes para el usuario.
Ninguno
NO
<KBD>
Formato monoespaciado.
Ninguno
</KBD>
<LI>
Ítem de lista.
Netscape: VALUE, TYPE
NO
<LISTING>
Listados
Ninguno. Obsoleto.
</LISTING>
<LIT>
Literal. Como PRE, pero usa letra proporcional.
Ninguno
</LIT>
<MARQUEE>
Marquesina.
ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY.
</MARQUEE> - Internet Explorer
<MENU>
Lista menú.
Ninguno
</MENU>
<META>
Metainformación ubicada en HEAD.
EQUIV, CONTENT, NAME
NO
<NEXTID>
Es un parámetro que identifica al documento.
NO
NO
<NOBR>
Elimina los saltos de líneas.
Ninguno
NO
<OL>
Lista ordenada, con elementos marcados con <LI>.
TYPE, START, VALUE.
</OL>
<OPTION>
Opción de selección dentro de un formulario.
VALUE, SELECTED VALUE
NO
<P>
Retorno de línea, con un espacio.
Ninguno
NO
<P ALIGN>
Alineación de texto.
LEFT, CENTER, RIGHT
</P>
<PLAINTEXT>
Pasaje de texto plano.
Ninguno. Obsoleto.
</PLAINTEXT>
<PRE>
Visualiza el texto en su formato original.
WIDTH
</PRE>
<S>
Texto tachado.
Ninguno
</S>
<SAMP>
Formato tipo ejemplo.
Ninguno
</SAMP>
<SELECT>
Para selección de opciones dentro de un formulario.
NAME, SIZE, MULTIPLE
</SELECT>
<SMALL>
Disminuye el tamaño.
Ninguno
</SMALL>
<STRONG>
Formato enfatizado más fuerte que <EM>.
Ninguno
</STRONG>
<SUB>
Subíndice.
Ninguno
</SUB>
<SUP>
Superíndice.
Ninguno
</SUP>
<TABLE>
Tabla.
BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR
</TABLE>
<TD>
Celdas de una fila en una tabla, dentro de <TR>.
ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH
</TD>
<TEXTAREA>
Área para ingreso de texto dentro de un formulario.
NAME, ROWS, COLS.
</TEXTAREA>
<TH>
Título de Tabla.
ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH
</TH>
<TITLE>
Título dentro de HEAD.
Ninguno
</TITLE>
<TR>
Fila de una Tabla.
ALIGN, VALIGN
</TR>
<TT>
Formato tipo máquina.
Ninguno
</TT>
<UL>
Lista no ordenada, con elementos marcados con <LI> .
COMPACT, TYPE
</UL>
<VAR>
Formato tipo variable.
Ninguno
</VAR>
<WBR>
Se usa con NOBR para una sección que deba ser separada.
Ninguno
NO
<XMP>
Similar a PRE.
Ninguno
</XMP>


·         Explique las etiquetas HTML con sus correspondientes atributos.
     El lenguaje HTML es un lenguaje que evoluciona muy rápidamente y cada nueva versión de los programas navegadores presenta etiquetas nuevas que causan efectos más espectaculares o atributos nuevos de las etiquetas ya existentes. Esto causa que los programas más antiguos no entiendan estas nuevas etiquetas y por tanto las considere erróneas y no realice la acción que deseábamos. Dándose el caso de atributos que son validos solo para un único navegador.
     Cuando creemos código HTML hay que hacerlo lo más estándar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores, ya que las personas que se conectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que nosotros. Tambien es interesante como se vería el documento en los distintos tamaños de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolución.
     En este manual se han tratado de incluir las características más estándar de HTML y en caso de tratarse de instrucciones más particulares se indicará convenientemente.


 



.



·         Que es un atributo HTML
Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario.










<html>
<head>
<title> VIDEOJUEGOS
</head>
</title>
<body BGCOLOR="#0000FF">
<font COLOR="#6495ED" SIZE="5">
Un videojuego o juego de vídeo es un software creado para el entretenimiento en general y basado en la interacción entre una o varias personas y un aparato electrónico que ejecuta dicho videojuego;[1] este dispositivo electrónico puede ser una computadora, una máquina arcade, una videoconsola, un dispositivo handheld (un teléfono móvil, por ejemplo) los cuales son conocidos como "plataformas". Aunque, usualmente el término "video" en la palabra "videojuego" se refiere en sí a un visualizador de gráficos rasterizados,[1] hoy en día se utiliza para hacer uso de cualquier tipo de visualizador.





Entendemos por videojuegos todo tipo de juego digital interactivo, con independencia de su soporte.[2]
Hay videojuegos sencillos y otros más complejos, algunos son capaces de narrar historias y acontecimientos usando audio y video creados ex profeso, demostrando que el videojuego es otra manifestación del arte.
Al dispositivo de entrada usado para manipular un videojuego se lo conoce como controlador de videojuego, y varía dependiendo de lo que se trate la plataforma. Por ejemplo, un controlador de consola podría únicamente consistir de un botón y una palanca de mando. No obstante, otro podría presentar una docena de botones y una o más palancas. Frecuentemente, los primeros juegos informáticos hacían uso de un teclado para llevar a cabo una interacción, e incluso se necesitaba que el usuario adquiriera una palanca por separado, que tenía un botón como mínimo.[3] Varios juegos de computadora modernos permiten, y en algunos casos exigen, que el usuario use un teclado y un ratón de forma simultánea.
Por lo general, los videojuegos hacen uso de otras maneras de proveer la interactividad e información al jugador. El audio es casi universal, usándose dispositivos de reproducción de sonido, tales como altavoces y auriculares. Otros de tipo feedback se presentan como periféricos hápticos que producen una vibración o realimentación de fuerza, con la manifestación de vibraciones cuando se intenta simular la realimentación de fuerza.
</html>