Blog de la Academia de Xesus Vazquez

Fuente: http://www.webestilo.com/html/cap1a.phtml

(Códigos procedentes de esa página, comentarios, de un servidor)

El Lenguaje HTML es muy básico. Todo funciona con etiquetas. Y cada etiqueta, tiene un significado:

<tag> texto afectado </tag>

Cada etiqueta que pongamos, irá siempre al principio y al final. De esa forma, el navegador que usemos (Chrome, Explorer, Mozilla....), sabrá cuándo comienza "la orden" y donde termina.

Todo código HTML tiene 3 partes:

*head = cabecera (donde va el título)

*title = básicamente, el nombre que vemos en la parte superior izquierda

<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>

*body = que será "el cuerpo" ( o sea, prácticamente todo el código)

Y por último, ese html se cierra = </html>

Prueba este primer código, pero antes, usa el bloc de notas (sí, tiene que ser el bloc de notas). Ahora, copia este código desde el blog y pégalo en el bloc de notas:

<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
   <H1>Mi primera página</H1>

   

<P>Hola mundo, esta es un página con titular,
que tiene también un párrafo y unos cuantos
saltos de línea.</P>

Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>

Ahora, guárdalo en "guardar como", pero antes, debajo del nombre, despliega la lista, para que en lugar de guardar como un archivo de texto, guarde como "todos los archivos".

Es ahora, cuando le pondremos nosotros, el nombre completo: index.html

Se llamará "index" , porque será la primera página que creemos. Y la que permita que otras personas, al hacer clic sobre las palabras que marquemos, lleguen a nuestros blogs y foros.

Ahora, algo más "latosillo". Los marcadores.

Básicamente, un marcador es un "recordatorio" para nosotros. Este ejemplo en concreto, nos permite ir "arriba" o "abajo", según le pidamos. Y todo, sin esfuerzo. Sólo hay que poner "donde va el arriba" y "donde va el abajo" (a name="arriba".....).

<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
   <A NAME="arriba"><H1>Página de enlaces</H1></A>
   <A HREF="#abajo">Ir abajo</A><br>

   <A HREF="ej4.html">Ir a ejemplo 4</A><br><br>
   <A HREF="http://www.webestilo.com/">Ir a WebEstilo</A><br>

   <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
   <br><br><br><br><br><br><br><br><br><br><br><br>
   <br><br><br><br><br><br><br><br><br><br><br><br>
   <br><br><br>.<br>.<br>.<br>.<br>.<br>

   <A NAME="abajo"><br></A>
   <A HREF="#arriba">Ir arriba</A>

</BODY>
</HTML>

Estos no son saltos "absolutos" (que nos "sacan" de donde estamos"), si no que se trata de saltos "controlados", dentro de la página que estemos viendo.

En cambio, los saltos "absolutos", se ponen con un código como éste:

<A HREF="http://www.webestilo.com/">Ir a WebEstilo</A><br>

Antes, había un <br> (salto de página, punto y aparte, para que nos entendamos). Y luego viene un "a href="www.patatinpatatan.com"-. Ese código es para que la palabra que venga tras poner la dirección (OJO, ENTRE COMILLAS), será la destinada a que, si le hacemos clic, nos lleve justo a esa otra página web (que no es en la que estamos).

Ahora bien, en algún momento, querremos que la gente nos escriba. Y existe un comando (mailto:maselcorreoquecorresponda@yalosabes.com) específico para esto:

<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>

<H1>Diferentes tipos de URLs</H1>

Enlace a <A HREF="http://www.webestilo.com">WebEstilo</A>.
<br>
Enlace al servidor de FTP
de <A HREF="ftp://ftp.mozilla.org/pub/mozilla/">Mozilla</A>.
<br>
Enlace a <A HREF="file:///C:">la unidad C
de su ordenador</A>.
<br>
Enlace a <a href="mailto:webmaster@bienvenidos.es">
mailto:webmaster@bienvenidos.es</a>.
<br>
Enlace a las <A HREF="news://msnews.microsoft.com">News de Microsoft</A>.
<br>

</BODY>
</HTML>

Como sé que habéis visto viñetas en Word..... pues que sepáis que en HTML, también se pueden hacer:

<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>

<H1>Listas</H1>
Una lista ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<br><br>
Una lista sin ordenar
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<br><br>
Una lista de glosario
<dl>
<dt>Témino 1</dt>
<dd>Definición 1</dd>
<dt>Témino 2</dt>
<dd>Definición 2</dd>
</dl>
<br><br>

Listas anidadas
<ul>
<li>Uno
   <ul>
   <li>Uno</li>
   <li>Dos</li>
   <li>Tres</li>
   </ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>

Los tipos de letra son más fáciles:

<HTML>
<HEAD>
<TITLE>Ejemplo 7</TITLE>
</HEAD>
<BODY>

<H1>Estilos de caracter</H1>
Un ejemplo de texto de <EM>realzado</EM>.<br>
Un ejemplo de texto de <STRONG>realzado</STRONG>.<br>
Un ejemplo de texto de <CODE>realzado</CODE>.<br>
Un ejemplo de texto de <SAMP>realzado</SAMP>.<br>
Un ejemplo de texto de <KDB>realzado</KDB>.<br>
Un ejemplo de texto de <VAR>realzado</VAR>.<br>
Un ejemplo de texto de <DFN>realzado</DFN>.<br>
Un ejemplo de texto de <CITE>realzado</CITE>.<br>
<br>
Un ejemplo de texto de <B>realzado</B>.<br>
Un ejemplo de texto de <I>realzado</I>.<br>
Un ejemplo de texto de <U>realzado</U>.<br>
Un ejemplo de texto de <TT>realzado</TT>.<br>

</BODY>
</HTML>

Aunque no siempre queda como espero, por lo que puedo recurrir al texto "preformateado" (PRE) , para que salga justo con los espacios que necesito (está algo en desuso, pero podría no venir mal que lo conozcamos):

<HTML>
<HEAD>
<TITLE>Ejemplo 8</TITLE>
</HEAD>
<BODY>

<H1>Texto preformateado</H1>

Diferencia entre un texto normal y
un texto preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>

<PRE>
Diferencia entre un texto normal y
un texto preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>
</PRE>

</BODY>
</HTML>

Ahora, algo más entretenido: saltos y líneas en blanco (BR)

<HTML>
<HEAD>
<TITLE>Ejemplo 9</TITLE>
</HEAD>
<BODY>

<H1>Saltos y lineas</H1>

<HR>
<HR width="80%">
<HR width="60%">
<HR width="40%">
<HR width="20%">

----
<br><br><br>
----
</BODY>
</HTML>

Y como no podía ser menos, también existen las tablas (de lo más útil que se ha inventado, justo después del pan de molde -Bimbo-):

<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>

<H1>Tablas básicas</H1>

<TABLE BORDER="1">
<TR>
   <TH>Cabereca 1</TH>
   <TH>Cabereca 2</TH>
   <TH>Cabereca 3</TH>
</TR>
<TR>
   <TD>Dato 1</TD>
   <TD>Dato 2</TD>
   <TD>Dato 3</TD>
</TR>
<TR>
   <TD>Dato 4</TD>
   <TD>Dato 5</TD>
   <TD>Dato 6</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Y si quieres probar algo más:

<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>

<H1>Tablas avanzadas</H1>

<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">
<TR>
   <TD COLSPAN="2" ALIGN="right">Dato 1</TD>
   <TD>Un texto cualquiera</TD>
   <TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
   <TD>Dato 4</TD>
   <TD>Dato 4</TD>
   <TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Fuente: http://daleclick.blogspot.com.es/

Haz una prueba, solo copia y pega (copy-paste) el siguiente código en un editor de texto HTML y verás el resultado inmediatamente.

Código:

<marquee>Bienvenidos a mi página</marquee>

Resultado:

Bienvenidos a mi página

Vez que fácil y sencillo es añadir un código de HTML! Haz click en los enlaces de esta página para que conozcas más sobre códigos de HTML y resultados.

Códigos

Aquí una lista de los códigos que más se utilizan para crear una página de internet y sus resultados. Algunas modificaciones a estos códigos pueden obtenerse viendo los enlaces de información.

Código	Resultado
<b>Letra en Bold</b>	Letra en Bold
<i>Letra en Italic</i>	Letra en Italic
<u>Letra Subrayada</u>	Letra Subrayada
<center>Texto centralizado</center>	Texto centralizado
<hr> = Produce una línea
<img src="http://www.blogger.com/ img/logo40.gif">
<a href="http://www.blogger.com"> Blogger.com</a>	Blogger.com
<marquee>Texto en movimiento</marquee>	Texto en movimiento
<br>Rompe<br>Líneas	Rompe Líneas

Repaso:

Letras

Para aplicar diferentes tipos ó estilos de letras se pueden utilizar una varieda de códigos. Los siguientes códigos muestran varios ejemplos de como lograr esto y sus resultados.

Código:	Resultado:
<b>Letra en Bold</b>	Letra en Bold
<i>Letra en italica</i>	Letra en italica
<u>Letra subrayada</u>	Letra subrayada

Además de estos estilos existen otros códigos para adjudicar diferentes tamaños, colores y formas. Veamos el siguiente ejemplo:

Código:	Resultado:
<font face="Arial" color="orange" size=1>El tipo (face) de esta letra debe ser "Arial", el color (color) debe ser "anaranjado" y el tamaño (size) debe ser "1"</font>	El tipo (face) de esta letra debe ser "Arial", el color (color) debe ser "anaranjado" y el tamaño (size) debe ser "1"

Otros tipos de letras que se pueden utilizar son "Tahoma", "Comic Sans", "Impact", "Verdana"; otros tipos de colores que se pueden utilizar son "green" (verde), "yellow" (amarillo), "blue" (azul), "gray" (griz); y para aumentar el tamaño (size) de las letras solo debes aumentar el número dentro del código y listo.

Recuerda que para los códigos tengan efecto debes escribirlos exactamente como aparecen aquí. Si te sirve de ayuda solo copia y pega (copy paste) los códigos de ejemplos en un editor de texto para que vayas practicando.

Otro tutorial de HTML interesante (aunque en algunos puntos es menos completo que lo ya visto, es éste:

http://platea.pntic.mec.es/~rfernand/index.htm

En cambio, éste, me ha gustado:

http://www1.ceit.es/asignaturas/Informat1/Ayudainf/cursoHTML/Curso01.htm#estrgral

Í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. Block quote indenta un párrafo. Se deshace esta indentación con el fin de la TAG Block quote, como se ve en el ejemplo.
`<PRE>La TAG Preformatted permite` `respetar la forma` `original` `en que se ha` `escrito el texto.</PRE>`	La TAG Preformatted permite respetar la forma original en que se ha escrito el texto.
<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)

Volver al inicio

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 Centrado
`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 ~~tachado~~ letra más grande que el estándar letra más pequeña que el estándar Texto tipo_subíndice Texto tipo^superíndice

Volver al inicio

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: Van precedidas por "bullets" Se entiende que no importa el orden Se utilizan con mucha frecuencia

Volver al inicio

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: Van precedidas por números La numeración es automática Son también muy utilizadas

Volver al inicio

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: Primer término Definición del 1er término Segundo término Definición del 2º término

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:

Primer término: Definición del 1er término
Segundo término: Definición del 2º término

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>

celda (1,1)	celda (1,2)
celda (2,1)	celda (2,2)

<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>

celda (1,1)	celda (1,2)
celda (2,1)	celda (2,2)

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 linksforman 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

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>

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>

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>

Volver al inicio

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>

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>	Nombre:
<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>	Nombre: boton radio 1 boton radio 2 checkbox

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>

Volver al inicio

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

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

A continuación se listan los atributos que soporta la tag pareada <LAYER>:

Todo tipo de eventos de JavaScript. (Ver capítulo de eventos del tutorial de JavaScript de la ESIISS)
NAME: especifica el nombre de la capa para poder referirse a ella desde JavaScript, por ejemplo.
LEFT, TOP: indica la posición (izquierda y arriba) en la que empieza la layer (si es una tag LAYER) o la posición relativa para las definidas con ILAYER.
PAGEX, PAGEY: especifica la posición relativa de la layer a la ventana del documento
SRC="nombrearchivo.ext" carga en la layer el arhivo especificado (nombrearchivo.ext)
Z-INDEX, ABOVE, BELOW: especifican en orden de amontonamiento de las layers entre sí. Estos tres atributos son mutuamente exclusivos, empléese sólo uno de ellos.
WIDTH, HEIGHT: especifican la anchura y la altura de la layer. Limitan el área en la que se muestra el contenido de la layer.
CLIP=x1,y1,x2,y2 delimita el area visible (definida por el rectángulo de las coordenadas indicadas) de la layer.
VISIBILITY: SHOW hace la layer visible, HIDE la oculta.
BGCOLOR: especifica el color de fondo de la layer. Por defecto, una layer es transparente para que puedan verse las que están por debajo. Si se pone color de fondo, no podrán verse las layers inferiores.
BACKGROUND="archivo.ext" es lo mismo que BGCOLOR pero poniendo como fondo la imagen del archivo.ext

Volver al inicio

Una plantilla de ayuda

Así se escribe:	Así se ve:
<P>Texto aquí	Texto aquí
<P>Texto aquí	Texto aquí

Volver al inicio

No olvidemos este otro tutorial:

http://www-app.etsit.upm.es/~alvaro/manual/manual.html

Un glosario está formado por una serie de parejas de término (marcado con <dt> al principio de línea) y definición (con <dd>). Por ejemplo, podríamos crear un pequeño diccionario con los términos perro, gato y pescadilla, de la siguiente manera:

<dl>
<dt>Perro (<i>n. masc.</i>)
<dd>Animal de cuatro patas que ladra.
<dt>Gato (<i>n. masc.</i>)
<dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
<dt>Pescadilla (<i>n. fem.</i>)
<dd>Animal que vive en el mar y está recubierto de escamas.
</dl>

Perro (n. masc.)
Animal de cuatro patas que ladra.
Gato (n. masc.)
Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
Pescadilla (n. fem.)
Animal que vive en el mar y está recubierto de escamas.

Y luego, recordar qué es el texto "alternativo·:

<a href="http://www.nasa.gov/"><img src="http://naic.nasa.gov/images/nasa-logo.gif" alt="NASA"></a><p>

Si quieres profundizar, puedes ver ésto:

http://www.bolivia-internet.com/html/manualhtml.pdf

En este otro sitio también aparecen cosas interesantes:

http://www.sitiosargentina.com.ar/webmaster/cursos%20y%20tutoriales/tutorial_html.htm

LINEAS HORIZONTALES

A veces vamos a necesitar separar las distintas secciones de nuestro documento HTML, una forma sencilla de hacerlo, es insertar líneas horizontales. Esto se consigue con la etiqueta <HR>. Esta etiqueta no lleva su pareja de cierre, es individual, por defecto traza una línea de todo el ancho de la pantalla, no obstante se puede modificar el aspecto de las líneas añadiendo los siguientes parámetros:
SIZE = Indica el grosor en pixel de la línea
WIDTH = Especifica la anchura que la línea ocupa en la pantalla, se le puede especificar en pixels o en porcentaje.
ALIGN= Alineación de la línea
NOSHADE = Si queremos la línea con sombra o sin sombra.
Pero todo esto se ve mejor con un ejemplo:
<HR SIZE="5" WIDTH="50%" ALIGN="LEFT" NOSHADE="NOSHADE">
El resultado es una línea de grosor 5 pixel un 50% de la pantalla alineada a la izquierda sin sombra, es decir:

(Si quieres otros tutoriales de informática, en esa misma página, visita esto:

http://www.sitiosargentina.com.ar/webmaster/cursos_y_tutoriales.htm )

Por hoy, es suficiente. Lo básico de HTML está visto, pero aún dejo algo más para mañana..... así que..... prueba y practica!!! Esto lo puedes hacer en casa, no necesitas internet, sólo un ordenador con Windows XP o similar (vale el windows 7 y debería servirte el 98), ¡así que no hay excusa!

Blog de la Academia de Xesus Vazquez

Páginas

Contador general de visitas

menu interactivo

BlogandWeb.com

Cartel con texto animado

menú desplegable 2

martes, 24 de abril de 2012

Ejemplo 3 -marcadores dentro de una sola página-

lunes, 23 de abril de 2012

Lección 1 - HTML Básico (para ir probando en clase)

Códigos

Letras

Índice

Estructura general de un fichero HTML

Formato de párrafos

Formato de texto

Listas no ordenadas

Listas ordenadas:

Listas de definiciones:

Volver al inicio
Tablas

Volver al inicio
Anclas

Volver al inicio
Links

Volver al inicio
Inserción de imágenes

Volver al inicio
Imágenes clicables

Volver al inicio
Imágenes sensibles

Frames

Volver al inicio
Formularios

Layers

Una plantilla de ayuda

Blogs de interés

Datos personales

juego de pecera

Radio por internet

Páginas

Contador general de visitas

menu interactivo

BlogandWeb.com

Cartel con texto animado

menú desplegable 2

martes, 24 de abril de 2012

Ejemplo 3 -marcadores dentro de una sola página-

lunes, 23 de abril de 2012

Lección 1 - HTML Básico (para ir probando en clase)

Códigos

Letras

Índice

Estructura general de un fichero HTML

Formato de párrafos

Formato de texto

Listas no ordenadas

Listas ordenadas:

Listas de definiciones:

Volver al inicio Tablas

Volver al inicio Anclas

Volver al inicio Links

Volver al inicio Inserción de imágenes

Volver al inicio Imágenes clicables

Volver al inicio Imágenes sensibles

Frames

Volver al inicio Formularios

Layers

Una plantilla de ayuda

juego de pecera

Radio por internet

Volver al inicio
Tablas

Volver al inicio
Anclas

Volver al inicio
Links

Volver al inicio
Inserción de imágenes

Volver al inicio
Imágenes clicables

Volver al inicio
Imágenes sensibles

Volver al inicio
Formularios