ETIQUETAS HTML MÁS USADAS, CON LAS IFRAMES

Estas son la etiquetas más usadas. Mediante el copia/pega se ponen donde haga falta lenguaje HTML.

Recordad que se ponen las etiquetas y sus atributos o parámetros siempre dentro de cajas cerradas con estas flechas <>. Siempre una antes del texto a modificar y otra detrás, la de cierre con su /.

Los modelos los pongo con este formato porque si no no se verían ya que es texto de edición:

Código:

<center> La niña se ríe </center>

INSTRUCCIONES DE TEXTO

Los más conocidos son estos, en algunos no pongo las flechas de apertura y cierre, pero siempre hay que ponerlas:

Para las letras:

Tipo de fuente: font face="tu elección", cierra con face entre flechas
Tamaño: size="tu número"
color: color="tu color"
Típo de letra: b y STRONG para negrita, i para itálica, u para subrayado, s y STRIKE para tachado

Este es el modelo:



Código:

<font face="ariel" size="3" color="darkgreen"> Modelo</font>

<font face="ariel" size="3" color="darkgreen"> Modelo de letra ariel, 3, verde </font>

Para el texto:

Párrafos: sencillo/doble > div/p.

Justificaciones: Alineados centro/derecha/izquierda > align=center/right/left.

Citaciones con margen: BLOCKQUOTE, cite, [quote

Apartados: superíndice y subíndice: sup/sub.

Encabezados, ponemos para los diferentes tamaños: h1,h2,h3

Construir una caja:


....Explicación que quieras dar....




Código:

<fieldset>....Explicación que quieras dar....</fieldset>


Hacer una caja de texto:

aqui el texto



Código:

<TEXTAREA>aqui el texto</TEXTAREA>


Salto de línea: br

Lista numerada: ol

Agrega un número a la lista: li

Lista con puntos: ul

BOTONES






Código:

<FORM NAME="aceButton"><INPUT TYPE="BUTTON" VALUE="TEXTO" Style="BACKGROUND-COLOR: #FFFFFF" onClick=window.open('http://poesiaartesana.foroactivo.com/')"></FORM>

INSTRUCCIONES DE FOTO

Para introducir la foto:

Código:

<img src=" URL">

Con un título de la foto que se ve si tarda en cargar la foto, no es obligatorio ponerlo:

Código:

<img alt="Título" src=" URL">

Para ponerle ancho y alto a la foto, no es obligatorio y puedes poner solo uno de ellos y el otro se adapta automáticamente a su proporción. Cuidado, si le pones los dos puede alterar la relación de proporción de la foto.

Código:

<img alt="Título" src="URL" width="ancho en píxeles" heigth="ancho en píxeles">

Poner o quitar un borde a la foto. Ese borde no es obligatorio, pero sale por defecto en las páginas webs y hay que poner "0" para que no aparezca, se pone una cifra para graduar el ancho del borde.

Código:

<img alt="Título" src="URL" width="ancho en píxeles" heigth="ancho en píxeles" border="0">

REENVÍOS

Nº1._ Reenviar mediante un texto (T):

Código:

<A href="URL"target=_blank>T</A>

Nº2._ Imagen / botón con o sin rótulo:

Código:

<a href="URL WEB"target=_blank> <img src="URL FOTO"></a>

Código:

<a href="URL WEB"target=_blank> <img src="URL FOTO" title="T"></a>

Nº3._ Salto de un lugar a otro de la página:

Se escribe en el lugar donde queremos hacer el anuncio para saltar:

Código:

<A HREF="#inicio">Inicio =></A>

Se escribe en el lugar adonde queremos llegar con el reenvío:

Código:

<A NAME="inicio"> </A>

Al editar la página aparece esto

Inicio =>

Pinchando ahí nos reenvia al lugar de la página donde hayamos colocado el marcador. Podemos poner lo que queramos, detrás de #, inicio, debajo, arriba, centro, el ejemplo, mi texto, la solución, etc.

Nº4._ Salto de un lugar a otro de la misma web, se puede poner el otro normal:

Código:

<A href="Nombre del documento y extensión"target=_blank>T</A>

5._ Enviar a un formulario de email. En el texto poner algo como: Por favor necesito ampliar la información.

Este es el código:

Código:

<a href="mailto:nombre@direccion.com" title="Poner aquí la dirección del email a donde va a ir el correo">Poner aquí el texto</a>

Lo que sigue a mailto no se cambia, a cada persona le va a salir su propio correo, lo otro se cambia a nuestro gusto., incluso le podemos poner un "asunto" al correo electrónico:

Código:

<a href="mailto:nombre@direccion.com?subject=Poner aquí el motivo, algo como: Contacto personal">title="Poner aquí la dirección del email a donde va a ir el correo">Poner aquí el texto</a>

TEXTO OCULTO

BBcode

Código:

[spoiler= TÍTULO =>]MENSAJE[/spoiler]

Ejemplo

Ver el nombre del asesino =>:

TEXTO EN MOVIMIENTO

Código:

<marquee behavior="scroll" direction="up" scrollamount="2"><span>TEXTO</span></marquee>

Se pueden modificar los parámetros de dirección y tiempo a nuestro gusto: up, down, right, left. Ejemplo, poniendo un poema donde pone "texto":

Estrellas

Radiantes nos contemplan las estrellas
desde su alta atalaya en el Parnaso,
componen un mural a cielo raso
de amores, amistades y querellas.

Artesana, 6-1-10


ZONA DE TEXTO DIFERENCIADA CON BARRA DEFILADORA

Con BBcode

Sirve para un texto largo: Entre code y /code cerrados con los paréntesis, se pone el texto.

Código:

Estrellas

Radiantes nos contemplan las estrellas
desde su alta atalaya en el Parnaso,
componen un mural a cielo raso
de amores, amistades y querellas.

Sagradas como efímeras doncellas,
los magos las invocan a su paso,
augures del triunfo y el fracaso,
expían nuestras faltas sobre ellas.

De reojo, traviesas con sus brillos,
burlando a la farola funcional
espían las ventanas de sus dueños

y en el muro empañado del cristal
perciben, entreabiertos los visillos,
el aliento intangible de los sueños.

Artesana, 6-1-10

Con HTML

La etiqueta en vez de "code" es "iframe". Una etiqueta iframe consiste en un recorte de texto dentro de la página donde estamos, en este espacio, de medidas programadas por nosotros, podemos incluir un texto, una foto o incluso otra página web. (No confundáis con frame, que son los cuadrados y que sustituyen con la etiqueta frameset al body en las tablas).

Vemos un ejemplo con una foto.

Código:

<iframe name="tutorial iframe con foto" width="470" height="325" src="http://i285.photobucket.com/albums/ll78/Artes-ana/Puesta_de_sol1.jpg" scrolling="yes" border="0" frameborder="0" target="_self"></iframe>

Con una página web completa.

Código:

<iframe name="tutorial iframe con web" width="600" height="350" scrolling="yes" border="4" frameborder="1" target="_self" src="http://artesana.foroactivo.com"> </iframe>

ETIQUETAS IFRAME

Una de las cosas que ponemos antes de la caja de cierre es un texto explicativo porque algunos navegadores antiguos no pueden ver los iframes. Así que podemos poner algo como esto: Portal del foro, si ve este aviso significa que su navegador no soporta iframes.

Veamos los atributos de las etiquetas iframe:

name: Un nombre para el iframe

src: Introduce la página o la foto.

width: El ancho del iframe

height: El alto del iframe

id: Sería un identificador del iframe para nombrarlo en javascript.

Border: Medida del marco donde vá la barra

frameborder: Marco del cuadro. Sus únicos valores son sí= 0, no=1.

margin: Es para la alineación del cuadro.

marginwidth: Son los valores de los márgenes a izquierda y derecha de la página de dentro del iframe.

marginheight: Son los valores de los márgenes arriba y abajo de la página de dentro del iframe.

style y class: Los tenemos que poner si queremos utilizar hojas de estilo css.

scrolling: Son las barras de desplazamiento o defilado necesarias si no cabe el contenido en las medidas dadas. Elegimos, según las queramos tener o no, entre: "si", "no" o "auto".


TUTORIAL DE ARTESANA