Cuadro de Etiquetas

Cuadro de etiquetas
 Instrucciones: Júntese con un compañero y Una vez observados y analizados los temas anteriores,
creen un cuadro que muestre en el siguiente formato las etiquetas HTML, su descripción, sintaxis y
como se usa.
Busquen en la rúbrica 1.2 las etiquetas que deberá contener y complementen con las que vienen en el programa de
estudios.
Etiqueta Descripción Sintaxis Ejemplo
head Delimita el titulo <ht <html> <head> <title> la belleza de la vida </title>
</head>
br Produce un salto de línea en él. <br> Mozilla Foundation<br>
Es útil para escribir un poema o una dirección, 1981 Landings Drive<br>
donde la división de las líneas es significante. Building K<br>
Mountain View, CA 94043-0801<br>
USA
Img Presenta una imagen en el documento <img> <HTML>

<HEAD>
<TITLE>Añadiendo
imágenes</TITLE>
</HEAD>
<body>
<IMG SRC="images/bander.gif">
</body>
</HTML>
Label Interfaz de usuario <label> <label for =”name”click me</label>
Ins Marca las partes de un texto que ha sido añadido a un <p> <p>
documento
</p> El agua es insípida
</ins> </p>
cite Marca una referencia a una fuente, o el autor de un texto citado. <cite> <p> <cite>Galileo</cite> dijo: "... y sin embargo, se
mueve." </p>
</cite>
<p> <span style='font-style: italic;'>Galileo</span>
dijo: "... y sin embargo, se mueve." </p>
body Representa el contenido de un documento HTML. <body> <body>
Sólo puede haber un elemento <body> en un documento. <h1> la belleza de la vida

<p> Es el apropiado para distribuir el texto en párrafos. <p> <p>
</p> Esto
es un
párrafo
</p>
<h1> Esta etiqueta viene acompañada de un número, <h> <h1>Texto muy grande</h1>
desde el 1 hasta el 6, predefiniendo éstos el </h>
tamaño del encabezado. Así, <h1> sería el <h2>Texto grande</h2>
encabezado más grande mientras que <h6> sería el

más pequeño.
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
<em> Es el apropiado para marcar con énfasis las partes importantes de <em>
un p>Get out of bed <em>now</em>!</p>
texto. El elemento <em> puede ser anidado, con cada nivel de
anidamiento indicando un mayor grado de énfasis.
<p>We <em>had</em> to do something about it.</p>
<p>This is <em>not</em> a drill!<p>
<strong> es el apropiado para marcar con especial énfasis las partes <strong> <p>
más importantes de un texto.
<em>El dinero</em> es importante pero
<strong>la salud</strong> lo es más.
</p>
<del> (deleted-borrado) marca las partes de un texto o documento <del> <p>

que han sido suprimidas o sustituidas.
El agua es insípida <del>y húmeda.</del>
<ins>inodora e incolora.</ins>
</p>
Ejemplo de ins en bloque:
<p>
El agua es insípida.
</p>
<del>
<p>
y húmeda.
</p>
</del>
<blockquote Crea citas en bloque, marca las citas a otros autores o <blockquote> <blockquote
documentos. cite='http://html.conclase.net/w3c/html401...def
-BLOCKQUOTE'>
<p>
<strong>Nota.</strong> Recomendamos que las
implementaciones de hojas
de estilo porporcionen un mecanismo para
insertar signos de puntuación de citas
antes y después de una cita delimitada por
un BLOCKQUOTE de un modo apropiado según
el contexto del idioma actual y el grado de
anidamiento de las citas.
</p>
</blockquote>
<abbr> representa una abreviación o acrónimo; el atributo <abbr> <p>I do <abbr title="Hypertext Markup
opcional title puede ampliar o describir la abreviatura. Si
Language">HTML</abbr></p>
está presente, el atributo title debe contener la descripción
completa y nada más.
<acronym> Es el encargado para marcar estas formas abreviadas (modem, <abbr> <p>
AJAX...). Además, gracias al atributo title podemos indicar la El acrónimo de moda es:
<acronym lang="en" title="Asynchronous
versión extendida del término. JavaScript and XML">Ajax</acronym>.
</p>
<dfn> Sirve para marcar el término que se quiere definir. <dfn> <p>
El <dfn>HTML</dfn> es un lenguaje de
marcado para hipertextos.
</p>
<a> crea un enlace a otras páginas de internet, archivos o ubicaciones <a> <a href="https://developer.mozilla.org">MDN</a>
dentro de la misma página, direcciones de correo, o cualquier otra
URL.
<ul> Crea una lista no ordenada. <ul> </ul> <ul>
<li>Esto</li>
<li>Lo otro</li>
<li>Lo de más allá</li>
</ul>
<ol> (Lista ordenada) crea una lista ordenada. <ol> </ol> <ol>
<li>punto uno</li>
<li>punto dos</li>
<li>punto tres</li>
</ol>
<dl> Crea una lista de definiciones. <dl> y </dl> <dl>
<dt>dl</dt>
<dd>Crea la caja que contiene los items de la
lista.</dd>
<dt>dt</dt>
<dd>Item que contiene un término a definir.</dd>
<dt>dd</dt>
<dd>Item que contiene una definición.</dd>
</dl>
<dt> Contiene un término a definir dentro de una lista de <dt> </dt> <dl>
definiciones.
<dt>dl</dt>
<dd>Crea la caja que contiene los items de la

lista.</dd>
<dt>dt</dt>
<dd>Item que contiene un término a definir.</dd>
<dt>dd</dt>
</dl>
<dd> <dd> </dd>
Contiene la descripción de un término definido dentro de una lista de <dl>
definiciones.
<dt>dl</dt>
<dd>Crea la caja que contiene los
items de la lista.</dd>
<dt>dt</dt>
<dd>Item que contiene un término a
definir.</dd>
<dt>dd</dt>
</dl>
<table> <table> <table width="100%" border="1" cellpadding="0"

Etiqueta contenedora que tendrá en su interior toda la cellspacing="0" bordercolor="#000000">
tabla.
<tr>
<tr> <tr>
Etiqueta contenedora que tendrá en su interior toda la tabla.
<th> Cada una de las celdas de cabecera de la tabla. <th> <th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
<tr>
<td rowspan="2" valign="middle" align="left">Este

texto está alineado al centro
verticalmente y a la izquierda horizontalmente</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
<caption> Es el encargado de darle un título descriptivo a las tablas. <caption>

</caption>
<table border='1'>
<caption>Tabla con caption</caption>

<tr> <td> tabla de una celda. </td> </tr>
</table>
<map> es el tag necesario para poder crear un mapa de imágenes <map> </map> <map name="image-map-1">
en html.
<area href="../../tutorials.html" alt="Tutoriales
HTML" shape="circle" coords="67,73,47">
<area href="../../tutorials.html" alt="Tutoriales
HTML" shape="rect" coords="60,54,142,99">
</map>
<img src="../../../images/image-map-1-es.png"
usemap="#image-map-1" alt="Mapa de imagen de
ejemplo">
<área> Sirve para crear las distintas secciones en las que se puede : <area> (solo
dividir un mapa de imágenes en el cliente. <object
tiene una). data="http://developer.mozilla.org/wiki-
images/es/3/39/Firefoxlogo.png"
usemap="#map1" type="image/png"
width="135" height="155">
<map name="map1">
<area
href="http://www.mozilla.com/firefox/"
alt="El navegador"
shape="rect"
coords="0,0,60,155">
<area
href="http://www.mozilla.com/thunderbird/"
alt="El gestor de correo"
shape="rect"
coords="75,0,135,155">
</map>
</object>
<object> es usado para ejecutar aplicaciones externas como applets, <object> <object data="/img/p/link-to-us/button.jpg"
películas flash o imágenes. type="image/jpeg" width="88" height="31">
</object>
Este elemento se torna útil a la hora de mostrar contenido </object>
que no es nativamente soportados por los navegadores, al

permitir a los autores especificar qué aplicación debería
intervenir para mostrar correctamente el contenido
personalizado.
Desde su comienzo, este elemento ha sido muy pobremente

soportado por los navegadores, y aún hoy, sólo algunas
instancias son compatibles. Este es el caso de las películas
flash, que necesitan ser definidas con el uso de los atributos
"data" y "type" (en lugar de "classid") para que funcione
correctamente en navegadores como Netscape y Mozilla.
<param> Permite especificar parámetros de ejecución para un objeto. <param> <object data="../../../flash/light-bulb.swf"
type="application/x-shockwave-flash" width="180"
(solo tiene una).
height="350">
<param name="movie" value="../../../flash/light-

bulb.swf">
<param name="quality" value="high">

<param name="wmode" value="transparent">
</object>
<embed> representa un punto de integración para una aplicación <embed> <p>Apenas puedo ver. ¿Podrías prender la luz por
favor?</p>
externa o de contenido interactivo (en otras palabras,
un plug-in).
<embed src="../../../flash/light-bulb.swf"
type="application/x-shockwave-flash" width="180"
height="350" quality="high" wmode="transparent">
<form> representa una sección de un documento que contiene <form> 
Las opciones contenidas en el menú son representadas por </select> <select name="select">
elementos <option>, los cuales pueden ser agrupados por
<option value="value1">Value 1</option>
elementos <optgroup>.
<option value="value2" selected>Value 2
La opcion puede estar preseleccionada por el usuario.
</option>
</select>
<option> se usa para representar un item dentro de un <select>, un <option> <select name="select">
<optgroup> o un elemento HTML5 <datalist>
</opttion> <option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>

</select>
<video> Para poder insertar videos en nuestras páginas HTML <video> <video src="video.mp4" width="640"
height="480"></video>
tenemos que utilizar la etiqueta <video>, que junto a la Si lo que quieres es
etiqueta <source> podremos utilizar estas capacidades insertar videos
multimedia de HTML5 desde se usa
<iframe>
<marquee> Se utiliza para insertar un area de texto en movimiento. <marquee> <marquee>Este texto se mueve de derecha a
También se la conoce como marquesina. izquierda</marquee>
</marquee>
<marquee direction="up">Este texto se mueve de

abajo hacia arriba</marquee>
<marquee direction="down" width="250" height=
"200" behavior="alternate" style="border:solid">
<marquee behavior="alternate">
Este texto rebotará dentro de la marquesina.

</marquee>
</marquee>
<bgsound> es un elemento de Internet Explorer que asocia un sonido <bgsoun> <bgsound src="sound1.mid">
de fondo con un página .
<bgsound src="sound2.au" loop="infinite">
<frame> Define cada uno de los marcos que va a haber en la ventana.<FRAMESET> <html>
Debe ir colocada siempre entre <FRAMESET> y </FRAMESET>,
<head>
</FRAMESET>, y debe haber tantas etiquetas como
<title>Mi pagina</title>
marcos hayamos definido con COLS y ROWS.
</head>
Sus atributos son:
<frameset rows="40%,*" >
<frame src="a.html" marginwidth="50"

Estas etiquetas se deben situar entre <HTML> y </HTML>,
marginheight="30">
pero podemos hacerlo también entre </HEAD>
<frame src="b.html" marginwidth="10"
y <BODY>, en incluso podemos no utilizar
marginheight="0">
<BODY>…</BODY>.
</frameset>
</html>

Cuadro de Etiquetas

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Cuadro de Etiquetas

Încărcat de

Drepturi de autor:

Formate disponibile

Cuadro de etiquetas

Etiqueta Descripción Sintaxis Ejemplo

br Produce un salto de línea en él. <br> Mozilla Foundation<br>

Es útil para escribir un poema o una dirección, 1981 Landings Drive<br>

donde la división de las líneas es significante. Building K<br>

Mountain View, CA 94043-0801<br>

Img Presenta una imagen en el documento <img> <HTML>

body Representa el contenido de un documento HTML. <body> <body>

Sólo puede haber un elemento <body> en un documento. <h1> la belleza de la vida

desde el 1 hasta el 6, predefiniendo éstos el </h>

tamaño del encabezado. Así, <h1> sería el <h2>Texto grande</h2>

encabezado más grande mientras que <h6> sería el

<p>This is <em>not</em> a drill!<p>

<del> (deleted-borrado) marca las partes de un texto o documento <del> <p>

marcado para hipertextos.

<ul> Crea una lista no ordenada. <ul> </ul> <ul>

<li>Lo de más allá</li>

<dl> Crea una lista de definiciones. <dl> y </dl> <dl>

<dd>Item que contiene un término a definir.</dd>

<dd>Item que contiene una definición.</dd>

<dd>Crea la caja que contiene los items de la

<dd>Item que contiene un término a definir.</dd>

<dd>Item que contiene una definición.</dd>

<dd>Crea la caja que contiene los

<dd>Item que contiene un término a

<dd>Item que contiene una definición.</dd>

<table> <table> <table width="100%" border="1" cellpadding="0"

<td rowspan="2" valign="middle" align="left">Este

verticalmente y a la izquierda horizontalmente</td>

<caption> Es el encargado de darle un título descriptivo a las tablas. <caption>

<caption>Tabla con caption</caption>

<area href="../../tutorials.html" alt="Tutoriales

HTML" shape="circle" coords="67,73,47">

<area href="../../tutorials.html" alt="Tutoriales

HTML" shape="rect" coords="60,54,142,99">

que no es nativamente soportados por los navegadores, al

Desde su comienzo, este elemento ha sido muy pobremente

<param name="movie" value="../../../flash/light-

<param name="quality" value="high">

<input id="GET-name" type="text" name="name">

<input type="submit" value="Save">

</textarea> Write something here</textarea>

<option value="value3">Value 3</option>

<option value="value2" selected>Value 2</option>

<marquee direction="up">Este texto se mueve de

<marquee direction="down" width="250" height=

"200" behavior="alternate" style="border:solid">

Este texto rebotará dentro de la marquesina.

de fondo con un página .

<bgsound src="sound2.au" loop="infinite">

<frame src="a.html" marginwidth="50"

S-ar putea să vă placă și