Codigos HTML...paginas web

<title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana <link>: para vincular el sitio a hojas de estilo o iconos Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css"> <style>: para colocar el estilo interno de la página, ya sea usando CSS, JavaScript u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link> <body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, comocolor de fondo y márgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: encabezados o títulos del documento con diferente relevancia. <table>: define una tabla <tr>: fila de una tabla <td>: celda de datos de una tabla <TABLE BORDER=1 WIDTH=300>

<TR><TD WIDTH=100></TD>

<TD WIDTH=100></TD>

<TD WIDTH=100></TD></TR>

<TR><TD WIDTH=100></TD>

<TD WIDTH=100></TD>

<TD WIDTH=100></TD></TR>

</TABLE><a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a

href="http://www.wikipedia.org">Wikipedia</a> se representa como Wikipedia) <div>: área de la página <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imagenes/mifoto.jpg" /> <li><ol><ul>: Etiquetas para listas. <b>: texto en negrita (Etiqueta descartada. Se recomienda usar la etiqueta <strong><i>: texto en cursiva <u>: texto subrayado La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ("/<table><tr><td>Contenido de una celda</td></tr></table> <script>Código de un script integrado en la página</script>

_____________________________________________

ESTRUCTURA DE UNA PAGINA

Bueno, esto ya se empieza a poner interesante. Vamos a empezar a escribir nuestro primer código HTML. Loprimero que hay que saber es que todo documento HTML debe empezar y acabar por las etiquetas <HTML> y </HTML> respectivamente. Como veís empezamos a utilizar este lenguaje. Todas las etiquetas van entre <>. Además la gran mayoría de las etiquetas van emparejadas y para distinguir entre la etiqueta de inicio y de fin, se le pone / a la etiqueta de fin. Fácil no?. Todos los documentos HTML tienen dos partes, el encabezado y el cuerpo, de perogrullo no?. Pues hasta para esto hay que poner etiqueta, y cuales son? . Para el encabezado la etiqueta es <HEAD> y </HEAD> En esta sección se pone la información de la página ypoco más. Aquí es donde pónemos el título de nuestra página, para que todo el mundo nos conozca. El título irá entre las etiquetas <TITLE> y </TITLE> lo que pongamos aqui, aparecera en la parte izquierda de la línea superior de la ventana. Ya esta, manos a la obra vamos a empezar a diseñar nuestra primera página. Cogemos cualquier procesador, y acordaros de que se debe salvar como texto normal. <HEAD> <TITLE>Mi pagina Web</TITLE> </HEAD> Y ahora vamos con la parte importante, el cuerpo del documento, donde vamos a insertar nuestro texto,imagenes, hiperenlaces, scrips ......... el cuerpo también tiene su etiqueta, que como no podia ser de otra manerason <BODY> y </BODY> y entre medias que?. Nuestra página WEB

como todos los documentos, necesita un encabezamiento, algo que llame la atención y que defina el resto de la página. Podemos definir hasta 6 tamaños de encabezados, y esto se hace con las etiquetas <H1> a <H6> teniendo en cuenta que el número 1 define el tamaño de letra más grande y el 6 define el más pequeño. Seguimos diseñando la página: <BODY> <H1>BIENVENIDO A MI PAGINA PERSONAL</H1> </BODY>

Bienvenido a mi página personal (H1)




PARRAFOS

Y ahora que, ya tenemos el encabezado de nuestra página, pero se puede mejorar el aspecto, alineando el parrafo. Lo normal es que todos queramos poner el encabezado en el centro de la página. Esto se logra con la etiqueta <CENTER> </CENTER>. Esta etiqueta también es válida para gráficos, pero lo veremos mas adelante. <BODY> <CENTER><H3>BIENVENIDO A MI PAGINA PERSONAL</H3></CENTER> </BODY>

BIENVENIDO A MI PAGINA PERSONAL (H2)

Los párrafos van entre las etiquetas <P> y </P>, y los podemos alinear a la izquierda, a la derecha y como ya hemos visto, centrarlos, pero vamos a seguir con nuestra página, introduciendo el comando ALIGN. <BODY> <CENTER><H3>BIENVENIDO A MI PAGINA PERSONAL</H3></CENTER> <P ALIGN="LEFT"> Ahora estoy escribiendo el primer párrafo de mi página personal, que quiero que se alinea a la izquierda. </P>

<P ALIGN="RIGTH"> Pero esta línea quiero que salga a la derecha</P> <P ALIGN="CENTER"> Toma ya y ahora en el centro</P> </BODY>

Ahora estoy escribiendo el primer párrafo de mi página personal, que quiero que se alinie a la izquierda

Pero esta línea quiero que salga a la derecha

Toma ya y ahora en el centro.

Habeís visto las posibilidades de alineamiento del parrafo, pues hay más. Si lo que queremos es sangrar un párrafo, debemos escribir entre las etiquetas <BLOCKQUOTE> Y </BLOCKQUOTE>.

FORMATOS

Pues visto lo anterior, seguimos dando forma a nuestra página, ahora vamos a ver como darle formato a nuestro texto. Lo primero que vamos a ver es como modificar el tamaño de la letra, esto se hace con el comando <FONT> </FONT>, en unión con el modificador SIZE. Hay varias maneras de modificar el tamaño de la fuente. En primer lugar podemos hacer referencia al tamaño absoluto de la fuente. Los tamaños absolutos varían entre el 1 y el 7, siendo 7 el mas grande, y 1 el mas pequeño. La segunda manera de realizar la modificación, es hacer referencia al tamaño relativo de la fuente, es decir restando o incrementando el tamaño actual de la fuente en la cantidad especificada. Este modificador puede varíar entre -4 y +4. Pero como mejor se ve esto es continuando con nuestra página. <P><FONT SIZE="3">Esta línea está escrita con tamaño 3</FONT></P> Esta línea esta escrita con tamaño 3 <P><FONT SIZE="5">Esta línea está escrita con tamaño 5</FONT></P>

Esta línea esta escrita con tamaño 5

<P><FONT SIZE="-3">Esta línea está escrita con tamaño -3</FONT></P> Esta línea esta escrita con tamaño relativo -3 Cómo vemos en el último ejemplo, el resultado es el mismo que si aplicamos <FONT SIZE="2">, resultado que restarle 3unidades al último tamaño definido de fuente, en nuestro ejemplo 5.

Visto todo lo anterior, sólo queda por decir que es posible determinar cual es el tamaño base de la fuente con la que vamos a escribir nuestro documento HTML, para ello usamos la etiqueta <BASEFONT SIZE=tamaño>, escrito justo a continuación de la etiqueta <BODY>.

ESTILOS

Para resaltar partes del texto que estamos escribiendo, podemos utilizar negritas, cursivas, etc. Las etiquetas mas comúnes que podemos usar aparecen en la siguiente tabla

Estilo Etiqueta Negrita <B> </B> Negrita Cursiva <I> </I> Cursiva Subrayado <U> </U> Subrayado Cita <CITE> </CITE> Cita Código <CODE> </CODE> Código Enfasis <EM></EM> Enfasis Fuerte <STRONG> </STRONG> Fuerte Teletipo <TT> </TT> Teletipo Tachado <STRIKE< </STRIKE> Tachado Subíndice <SUB> </SUB> Subíndice Superíndice <SUP> </SUP> Superíndice Grande <BIG> </BIG> Grande Pequeño <SMALL> </SMALL> Pequeño

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:

_________________________

ENLACES

La verdadera potencia de internet nos la da la posibilidad de enlazar todas las páginas como si de una tela de araña se tratase, una página sin enlaces no tiene demasiado sentido, asi que vamos a ver de forma muy breve como insertar enlaces dentro de nuestro documento. Los enlaces nos pueden llevar a otro documento o bien a otra sección dentro del documento editado. Este documento de tutorial, esta repleto de enlaces a la misma página, como habeís podido ver, desde el índice que está al principio de este documento, se accede a las secciones directamente, igualmente de cada una de las secciones, se accede al índice. Además, este documento tiene enlaces externos, como vereis en la parte inferior de la pantalla, hay un enlace a la página principal de mi site y hay otro enlace a

Por cierto si os gusta leer y escuchar música, pinchar en este enlace, podreis adquirir los mejores libros y la mejor música de internet, y además así colaborareis a que pueda seguir manteniendo este tutorial.

Bueno, y ahora manos a la obra que es lo que nos interesa, vamos a generarnos un enlace a uno de los buscadores masconocidos YAHOO

<A HREF="http://YAHOO.COM">Buscar en YAHOO</A>

Buscar en YAHOO

Ahora lo vamos a complicar un poco más y vamos a poner un gráfico como el del ejemplo anterior.

<P ALIGN="CENTER"><A HREF="http://armazon.com"><IMG SRC="armazon.gif"></A></P>

Bien no, es mucho más fácil de lo que parece.Como veis Hemos realizado dos enlaces a otras páginas pero con el mismo formato podemos acceder a otros muchos servicios de internet, podemos realizar enlace tipo ftp, correo electronico, etc.

Vamos a ver como añadir un enlace de correo: <A HREF="mailto:[email protected]">Mandame un correo</A> Mándame un correo Para agregar enlaces a marcadores dentro de la página actual, o dentro de otra página, lo primero que hay que definir es el marcador, esto se hace de la siguiente manera: <A NAME="Nombre del marcador">Texto del marcador </A> Texto del marcador El enlace al marcador anterior se definiría: <A HREF="#Nombre del marcador">Enlace al marcador anterior</A> Cómo véis se incluye el símbolo "#" antes del nombre del marcador Enlace al marcador anterior

Tambien se pueden hacer llamadas a marcadores definidos en otras páginas: <A HREF="index.html#Nombre del marcador">Enlace al marcador de la página index.html</A>

DAR COLOR A LA PAGINA

Hasta ahora hemos visto todo lo necesario para realizar nuestra primera página WEB, pero ahora, vamos a darle un poco de vidilla, ya que una pagina con letra negra sobre fondo blanco, queda un poco sosa, asi que vamos a modificar los colores tanto del fondo como de las letras, e incluso vamos a poder insertar un gráfico como fondo de nuestra página. Para modificar los colores de fondo del documento debemos añadir a la etiqueta de cuerpo de documento <BODY> el parámetro BGCOLOR="#RRGGBB" donde #RRGGBB indica la combinacion de tonos de rojo, verde y azul necesarios paraconseguir el color que deseamos. No obstante HTML reconoce 16 colores simples black, gray, maroon, purple, green, olive, navy, teal, silver, red, white, lime, yelow, aqua, blue y fuchsia con nombre y apellidos, así que para poner un fondo azul, bastará con poner <BODY BGCOLOR="BLUE"> sin más. Si lo queremos complicar más, necesitamos saber el número en hexadecimal que define el color que queremos y lo ponemos en la etiqueta bgcolor, el color rojo sin ir mas lejos sería #FF0000.Para definir el color del texto, utilizaremos el parámetro TEXT="#RRGGBB". Para definir el color de los enlaces no vilistados, LINK="#RRGGBB", para los enlaces visitados VLINK="#RRGGBB", para los enlaces en los que se haga click ALINK="#RRGGBB". Para insertar una imagen de fondo, usamos el parámetro BACKGROUND="imagenfondo.gif". Los formatos de ficheros más utilizados son el gif y jpg. Cabe reseñar que el fichero debe estar en el mismo directorio que el documento HTML que lo llama,en caso contrario se debe especifivar el PATH a dicho fichero gráfico. Y OJO, ya dije anteriormente que aunque en el código HTML da igual escribir

las etiquetas en mayúsculas o minúsculas, cuando se hace una llamada a un fichero, enlace, etc... Si existen diferencias, con lo cual para evitar problemas, escribimos todo en minúsculas.

INSERTAR IMAGENES

Y como todo documento que se precie debe tener imagenes, vamos a insertarlas de una manera facilísima, esto se hace con el comando <IMG SRC="Nombre de la imagen">. Si además queremos especificar el tamaño <IMG SRC="Nombre de la imagen" HEIGHT="n" WITDH="n" > siendo n el tamaño en pixels de la imagen. Si a esto le añadimos todo lo que hemos visto anteriormente, podemos alinear la imagen, incluirla en un enlace a otras páginas, etc etc. <P ALIGN="CENTER"><A HREF="http://armazon.com"><IMG SRC="armazon.gif"></A></P>

Ahora entendemos mucho mejor el ejemplo anterior

LISTAS

Este es uno de los elementos mas útiles para nuestros documentos HTML, ya que nos permite esquematizar de una forma clara la información contenida en nuestro documento.

Una lista es una sucesion de elementos que pertenecen a una estructura común y que es posible numerarlo, sin darle muchas más vueltas, el índice de esta página esta realizado con una lista.

Hay diferentes tipos de listas, sin orden con orden, numeradas, alfabeticas, etc.... Es bastante común que vayan precedidos de bolos o números para diferenciar una línea de otra.

Para crear una lista ordenada, se usan las etiquetas <OL> y </OL>, y a cada elemento se le incluye entre las etiquetas <L1> y </L1> pe.

<OL>

<LI>INTRODUCCION</LI>

<LI>QUE ES HTML?</LI>

</OL>

El resultado es como sigue:

INTRODUCCION QUE ES HTML? Las listas sin orden, preceden a las líneas por un bolo, y es igual que el ejemplo anterior, sustituyendo <OL> por <UL>

Los elementos de las listas pueden ser a su vez listas

<OL>

<LI>Estructura de un documento HTML</LI>

<UL>

<LI> Encabezado </LI>

<LI> Cuerpo </LI>

</UL>

</OL>

Estructura de un documento HTML Encabezado Cuerpo Para las listas ordenadas, también podemos usar los parámetros TYPE y START, para definir el tipo de numeracion que deseamos y en que número empezar, los tipos són AaIi, para las numeraciones Alfabéticas, Alfabéticas minúsculas, Romanas y Romano minúsculas respectivamente.

pe. <OL TYPE=A START=3>, El primer elemento numerado de la lista sera la C

CARACTERES ESPECIALES

CódigoCáracter especial

<<

>>

&&

""

¿¿

¡¡

áá

ÁÁ

éé

ÉÉ

íí

ÍÍ

óó

ÓÓ

úú

ÚÚ

ñ

ñ

ÑÑ

üü

ÜÜ

&nbspEspacio en blanco

Salto de línea <br />

Tablas en HTMLPáginas:

1

2

3

>

Tabla de contenidos

Tablas simples Tipos de celdas Unificando celdas Página siguiente...

Este tutorial explica la forma correcta y completa de definir tablas en documentos HTML (lenguaje de marcas hipertextual). Esto ayudará a principiantes a aprender a insertar tablas manualmente en documentos HTML, mientras definirá y describirá todas las herramientas disponibles para avanzados (muchos de los cuales aún no conocen todas las propiedades de una tabla).

Como probablemente ya has leído alrededor del sitio, nuestra intención es proveerte con "buenos métodos de programación" que resultarán en algunos beneficios extra. Por eso es que elegiremos una forma de declarar estas tablas de modo que sean compatibles con el estándar de código XHTML (lenguaje de marcas hipertextual extensible).

Tablas simples

http://www.htmlquick.com/es/tutorials/xhtml.html

http://www.htmlquick.com/es/tutorials/tables/2.html

http://www.htmlquick.com/es/tutorials/tables.html#cell-spanning

http://www.htmlquick.com/es/tutorials/tables.html#types-of-cells

http://www.htmlquick.com/es/tutorials/tables.html#simple-tables




Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo:

Código Visualización

< table border="1" summary="Ejemplo de tabla simple."><tr><td>Celda 1</td><td>Celda 2</td><td>Celda 3</td></tr><tr><td>Celda 4</td><td>Celda 5</td><td>Celda 6</td></tr></table>

Celda 1 Celda 2 Celda 3


Nota: Los bordes en este ejemplo son creados utilizando el atributo "border" para el tag HTML table, el cual es sólo utilizado para mejorar la visualización. Como los atributos de presentación van siendo desaprobados con cada versión del estándar HTML, y dado que los mismos efectos pueden lograrse usando hojas de estilo, recomendamos evitar el uso de atributos de presentación como "border".

Ten en cuenta que las celdas vacías igual deben ser declaradas utilizando sus respectivos tags para lograr correctitud en el código. Cuando el contenido de una celda debe ser vacío, deberías usar siempre un espacio en blanco ( ) en su lugar. Esto hará que tu página sea más comatible, dado que ciertos navegadores tienen problemas al mostrar celdas vacías.

Tipos de celdas

Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comúnmente encontrado en el encabezado de una tabla.

En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado:


http://www.htmlquick.com/es/reference/tags/th.html


http://www.htmlquick.com/es/reference/tags/td.html


http://www.htmlquick.com/es/reference/tags/table.html


http://www.htmlquick.com/es/reference/tags/tr.html

http://www.htmlquick.com/es/reference/tags/table.html

< table border="1" summary="Ejemplo de tabla simple con celdas de encabezado."><tr><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th></tr><tr><td>Celda 1</td><td>Celda 2</td><td>Celda 3</td></tr><tr><td>Celda 4</td><td>Celda 5</td><td>Celda 6</td></tr></table>

Columna 1 Columna 2 Columna 3



Las características de estas celdas pueden ser logradas visualmente usando una celda simple con atributos de presentación (texto centrado y en negrita), pero las celdas de encabezado proporcionan más información oculta que puede ser útil para navegadores no visuales (los navegadores hablados pueden decir a los usuarios el contenido de una celda asociándolo inmediatamente con el encabezado correspondiente) y arañas (como las de los motores de búsqueda lo que ayudaría en la promoción del sitio).

Otra forma de asociar celdas de encabezados con celdas simples es usando los atributos: "headers" para definir una lista de celdas que proveen información de encabezado para la celda actual (ver el tag HTML td) y "scope" para definir una lista de celdas para las cuales la celda actual provee información de encabezado (ver el tag HTML th).

Unificando celdas

Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que tomará el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).


< table border="1" summary="Ejemplo de tabla simple con unificación de celdas de una fila.">

Campo 1 Campo 2 Campo 3

Campos 4 y 5 Campo 6






<tr><td>Campo 1</td><td>Campo 2</td><td>Campo 3</td></tr><tr><td colspan="2">Campos 4 y 5</td><td>Campo 6</td></tr><tr><td>Campo 7</td><td>Campo 8</td><td>Campo 9</td></tr></table>

Campo 7 Campo 8 Campo 9

Observa en el ejemplo anterior como una definición de celda unificando dos celdas, es el equivalente unificado de dos definiciones de celda simple. Esto también funciona para unificar verticalmente con una pequeña diferencia debida a la naturaleza de las tablas HTML. Al unificar celdas verticalmente, las definiciones de celda en la columna afectada deberán ser omitidas. Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificadas:


< table border="1" summary="Ejemplo de tabla simple con unificación de celdas de una columna."><tr><td rowspan="3">Campo unificado</td><td>Campo 2</td><td>Campo 3</td></tr><tr><td>Campo 5</td><td>Campo 6</td></tr><tr><td>Campo 8</td><td>Campo 9</td></tr></table>

Campo unificado

Campo 2 Campo 3

Campo 5 Campo 6

Campo 8 Campo 9

Debes ser cuidadoso al unificar filas y columnas de modo de que no se encimen las celdas unificadas. Esto puede provocar un resultado indeseado.

Con etiquet

a

Sin etiquet

a

Con etiquet

a

Sin etiquet

a

Con etiqueta

Sin etiquet

a

ADDRESS

ADDRESS

CITE CITEB: NEGRITA

B: NEGRITA

BIG BIG CODE CODE DFN DFN

EM EMI: ITALICA

I: ITALICA

KBD KBD

SAMP SAMP SMALLSMALL

STRONG

STRONG

SUB5 SUB 5 SUP5 SUP 5S Tachado

S Tachado

TT TTU Subrayado

U Subrayado

VAR VAR

EtiquetasApertura Acción Atributos Cierre

< ! 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 Ninguno </DL>

Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>.

<DT>

Términos marcados, para Lista de Definiciones <DL>.

Ninguno NO

<EM>Formato enfatizado en itálica.

Ninguno </EM></TD< tr>

<EMBED> Sonido de Fondo.SRC, WIDTH, HEIGHT, AUTOSTART, LOOP.

NO - Netscape</TD< tr>

<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

TYPE, START, VALUE.

</OL>

<LI>.

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

AtributosNombre Etiqueta Acción Valor

HREF<A>Dirección del URL local o remoto.

href="www.hp.com"

LOOP

<BGSOUND>

Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1.

loop=infinite

SRCNombre del archivo de sonido (Internet Explorer)

src="sonido.wav"

LOOP <EMBED> Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1.

loop=-1

SRCNombre del archivo de sonido (con Crescendo)

src="sonido.mid"

SRC

<IMAGE>

Nombre del gráfico src="imagen.gif"

ALTNombre que reemplaza a la imágen cuando ésta no puede ser cargada.

alt="Nombre de Imágen"

BGCOLOR

<BODY>

Color de fondobgcolor="#FFFFFF" (blanco)

BACKGROUND Imágen de fondo background="foto.gif"

TEXT Color del textotext="#000000" (negro)

LINK Color de vínculo link="#0000FF" (azul)

VLINK Color de vínculo visitadovlink="#FF0000" (rojo)

ALINKColor de vínculo presionado

alink="#00FF00" (verde)

ALIGN<CAPTION> dentro de <TABLE>

Colocar título arriba (TOP) o debajo (BOTTOM) de la tabla.

align=top

ALIGN

<H1..H6>, <P ALIGN>, <TD>, <TH>, <TR>, <DIV>,

Alinear el texto: LEFT, RIGHT, CENTER

align=center

ALIGN

<HR>

Alinear el texto: LEFT, RIGHT, CENTER

align=center

SIZEValor de la altura en pixels o porcentaje

size=3

WIDTHValor del ancho en pixels o porcentaje

width=50%

SIZE

<FONT>

Tamaño de la letra de 1 a 7 size=6

COLOR Color de la letracolor="#000000" (negro)

FACEFuente del texto (Internet Explorer)

face="helv" (helvética)

HEIGHT <EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH>

Valor de la altura en pixels o porcentaje

heigth=80


width=50%

BORDER

<TABLE>

Borde y ancho del borde en la tabla

border=5

CELLPADDINGEspacio entre el borde y el texto

cellpadding=10

CELLSPACINGEspacio entre las líneas interna y externa del borde

cellspacing=3

HEIGHTValor de la altura en pixels o porcentaje

heigth=80


width=50%

COLSPAN<TD> dentro de <TABLE>

Expandir una celda varias columnas

colspan=4

ROWSPANExpandir una celda varias filas

rowspan=4

Codigos HTML...paginas web

Internet

Transcript of Codigos HTML...paginas web