Scribd
Cargar
384 vistas6 páginas

Comandos HTML

El documento describe las etiquetas HTML básicas para estructurar páginas web, insertar texto, enlaces, imágenes y tablas. También incluye etiquetas para formularios, caracteres especiales y algunas etiquetas no estándar.

Cargado por

Jaime Santos rodriguez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
384 vistas6 páginas

Comandos HTML

El documento describe las etiquetas HTML básicas para estructurar páginas web, insertar texto, enlaces, imágenes y tablas. También incluye etiquetas para formularios, caracteres especiales y algunas etiquetas no estándar.

Cargado por

Jaime Santos rodriguez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

HTML

Estructura básica
<html>
<head>
<title>Título de la web</title>
</head>
<body>
<center>Contenido de la web</center>
</body>
</html>

Etiquetas de control de texto básicas


COMANDO FUNCIÓN
<h1> texto </h1> Da tamaño a la cabecera (los números van del 1 al 6)
<center> texto Centra el texto que está entre las etiquetas
</center>
<hr> Dibuja una línea horizontal incrustada en el documento
<p> párrafo </p> Párrafo (deja una línea en blanco)
<p align=”right”> Párrafo (alineado a la derecha), puede ser, left, center, justify.
párrafo </p>
<br/> Cambio a la línea siguiente (sin dejar línea en blanco)
<b> y </b> Poner el texto en negrita
<i> y </i> Poner el texto en cursiva
<pre> y </pre> Preformatea el texto respetando los espacios y los retornos de
carro, como una máquina de escribir
<blockquote> y Sangra el documento a ambos lados
</blockquote>
<tt> y </tt> Disminuye el tamaño del texto
<sup> y </sup> Superíndices
<sub> y </sub> Subíndices
<ul> y </ul> ; <li> Listas desordenadas (no numeradas)
<ol> y </ol> ;<li> Listas ordenadas (numeradas)
<dl> y Listas de definición
</dl>,;<dt> ;<dd>

1
Enlaces e imágenes
<a href="#marca"> YYY </a> Enlaces en la misma página
<a name="marca"> </a>
<a href="pagina.html"> YYY </a> Enlaces con otra página nuestra
<a href="pagina.html#marca"> YYY Enlaces con una marca de otra pagina nuestra
</a>
<a href="subdir/pagina.html"> YYY Enlaces con una pagina en otro directorio posterior
</a>
<a href="../pagina.html"> YYY </a> Enlaces con una pagina en otro directorio superior
<a Enlaces con una página fuera de nuestro sistema
href="http://www.paginaweb.com">
YYY </a>
<a Abre el agente de transporte para enviar un correo a
href="mailto:[email protected]">
[email protected] </a>
una dirección de email
<img src="imagen.gif" Insertar una imagen en la página
alt="descripción">
<img src="imagen.gif" Inserta la imagen alineando arriba el texto
align=”top”>texto
<img src="imagen.gif" Inserta la imagen alineando en el centro el texto
align=”middle”> texto
<img src="imagen.gif" Inserta la imagen alineando abajo el texto
align=”bottom”> texto
<img src="imagen.gif" align=”left”> Alinea la imagen a la izquierda o a la derecha
<img src="imagen.gif" align=”right”>
permitiendo que el texto la rodee.
<img src="imagen.gif" width=”120” Da al navegador la información sobre el tamaño de la
height=”94”>
imagen, pudiendo variar su tamaño.
<a href="pagina.html"> <img Imagen que enlaza con otra página (incluye marco)
src="imagen2.gif"> </a>
<a href="pagina.html"> <img Imagen que enlaza con otra página (sin marco)
src="imagen.gif" border=”0”> </a>
<a href="imagen.gif"> <img Imagen que enlaza con otra imagen
src="imagen2.gif" align=”middle”></a>
<a href="imagen.gif"> ejemplo</a> Texto que enlaza con imagen
<a href="imagen.gif" target Texto que enlaza con imagen en una página nueva
=”_blank”> ejemplo</a>

Caracteres especiales
&lt; para < &aacute; para la á &Aacute; para la Á
&gt; para > &eacute; para la é &Eacute; para la É
&amp; para & &iacute; para la í &Iacute; para la Í
&quot; para " &oacute; para la ó &Oacute; para la Ó
&#191; para ¿ &uacute; para la ú &Uacute; para la Ú
&#161; para ¡ &uuml; para la ü &ntilde; para la ñ
&nbsp; para &Uuml; para la Ü &Ntilde; para la Ñ

Etiquetas no estándar (algunas no funcionan en todos lo navegadores)


<blink> texto </blink> El texto parpadea (en el explorer no funciona)

2
<hr width=”75%”> Línea horizontal que no ocupa todo el ancho de
<hr width=”300”>
página (se puede indicar en % o en pixels)
<hr width=”50%” align=”left”> Además se puede alinear a la izquierda o derecha
<hr width=”350” align=”right”>
<hr size=”20”> También podemos variar su espesor
<hr noshade> Para que no quede embutida en el fondo
<font size=”5”> texto </font> Le da al texto el tamaño 5 (SIZE va del 1 al 7)
<font size=”+1”> texto </font> Aumenta o disminuye el tamaño del texto respecto al
valor por defecto (el 3). (SIZE =+1 => SIZE=4)
<basefont size=”5”> Se pone después de BODY y afecta a todo el
documento (menos al texto con tamaño propio)
<font face="Verdana"> texto </font> Le ponemos el tipo de fuente que queremos, pero
debe estar instalada y con el mismo nombre.
<font face="Impact, Arial"> texto Podemos indicarle varios tipos de fuente por si
</font>
acaso.
<body bgcolor="#XXYYZZ"> Para el color de fondo uniforme sustituimos las xx
(rojo); yy (verde); zz (azul) por cifras hexadecimales
<body bgcolor="#XXYYZZ" Para cambiar el color del texto (TEXT), los enlaces
text="#XXYYZZ" link="#XXYYZZ"
vlink="#XXYYZZ"
(LINK) los enlaces visitados (VLINK) y los enlaces
alink="#XXYYZZ"> en el momento de pulsarlos (ALINK).

<font color="#FF0000"> texto </font> Cambia sólo el texto entre estas etiquetas
<body background="imagen.gif"> Pone una imagen de fondo en forma de tapiz (pueden
ser GIF o JPG)
<br clear=”left”> Busca el primer margen libre a la izquierda, a la
<br clear=”right”>
<br clear=”all”>
derecha o a ambos lados dejando de bordear la
imagen.

Tablas
<table> </table> Son las etiquetas que definen el principio y fin de la
tabla
<table border=”numero”> </table> Ídem a la anterior pero añade el borde (cambiando
el numero variamos el aspecto)
<tr> </tr> Para definir cada fila (se pone tantas como filas)
<td> </td> Para cada celda de cada fila (se ponen tantas como
celdas (columnas))
<caption> </caption> Para poner titulo a la tabla
<th> </th> Celdas cabecera
<td align=”center”> </td> Posicionar en el centro, a la izquierda o la derecha
<td align=”left”> </td>
<td align=”right”> </td>
<td valign=”top”> </td> Posicionar arriba o abajo (por defecto es en el
<td valign=”bottom”> </td>
<td valign=”middle”> </td> centro)

3
<table width=”60%”> Forzar la tabla a que ocupe un tamaño
<table height=”200”>
<td colspan=”2”> </td> Para unir celdas (columnas)
<td rowspan=”2”> Para unir filas, añadir huecos
<table bgcolor="#00ff00"> Da color a la tabla
<td bgcolor="#00ff00"> Da color a una celda
<table cellspacing=”20”> Separación entre celdas
<table cellpadding=”20”> Separación entre texto y celdas

4
Formularios
<form Define el formulario y la dirección de correo que los
action="mailto:[email protected]"
method="post" enctype="text/plain"> recibirá en formato texto.
<input type="text" name="apellido" > Almacena el dato requerido en la variable apellido
<textarea name="comentarios" Almacena el dato requerido en la variable
rows="6" cols="40"> contenido del
texto</textarea> Comentarios (recomendable para texto de múltiples
líneas) Se le puede dar formato, p.e: (6/40)
<select name="colorpreferido" Almacena menús deslizantes, donde se puede elegir
multiple size="2">
<option>amarillo
el numero de opciones visibles, p.e: (SIZE=”2”). El
<option selected>rojo numero de opciones viene definido por: <OPTION>
<option>verde
</select >
<input type="radio" Almacena valores definidos en forma de botón,
name="sistemaoperativo" value="pc"
checked> pc
donde el valor por defecto es el checked. Se pone
tantas veces como opciones. Tiene forma redonda.

<input type="checkbox" Almacena valores definidos en forma de botón,


name="sistemaoperativo" value="pc"
checked> pc
donde el valor por defecto es el checked. Se pone
tantas veces como opciones. Tiene forma cuadrada.
<input type="submit" value="enviar Para enviar los datos
datos">
<input type="reset" value="borrar Para vaciar el formulario
datos">
</form> Cierra el formulario

Frames (División de la pantalla en ventanas)


<html> Se sitúa en lugar del body y sirve para dividir la
<head>
</head>
pantalla en columnas y filas, donde el contenido
<frameset cols=”20%, 80%”> son páginas web.
<frame src=”indice.html”>
<frame src=”pagina_uno.html”>
</frameset >
</html>
<frameset cols=”20%, 80%”> Divide la pantalla en dos columnas. La primera
<frame src=”indice.html”
tiene un ancho del 20% y la segunda del 80%. En
name="indice">
<frame src=”pagina_uno.html” la primera se visualiza en contenido del fichero
name="contenido"> indice.html y se llama indice. En la segunda se
</frameset > visualiza el contenido del fichero pagina_uno.html
y su nombre es contenido
<frameset cols=”20%,*, 20%”> Algunos atributos de la etiqueta frameset son:
<frameset rows=”200, *”>
<frameset frameborder=”0”
cols (columnas), rows (filas), frameborder y
framespacing=”0” border=”0”> border (borde de los frames), framespacing
(espacio entre frames)
<frame src=”indice.html” Algunos atributos de la etiqueta frame son: src
name="indice">
5
<frame src=”indice.html” (contenido que queremos cargar en el frame),
marginwidth="2" marginheight="2" name (nombre del frame), marginwidth (ancho del
scrolling =”no/yes/auto” noresize
frameborder=”no”> margen), marginheight (alto del margen), scrolling
(barra deslizadora), noresize (tamaño no
modificable), frameborder (borde del frame)
<a href=”pagina_uno.html” target= Para conseguir que el contenido de una página se
"contenido"></a>
<a href=”pagina_uno.html” target=
cargue en el frame adecuado utilizamos el
"_blank"></a> parámetro target en el enlace. Puede tomar varios
<a href=”pagina_uno.html” target= valores:
"_self"></a>
<a href=”pagina_uno.html” target=
 nombre del frame (contenido, indice, ...)
"_top"></a>  _blank (en un navegador nuevo)
 _self (en el mismo frame)
 _top (elimina todos los frames y se carga
ahí la página)
<html> Los frames pueden anidarse, como indica el
<head>
</head> ejemplo. La primera fila ocupa el 15% con el
<frameset rows=”15%, *”> contenido de superior.html, el resto esta dividido
<frame src=”superior.html”> en dos columnas, la izquierda del 20% con
<frameset cols=”20%, *”>
indice.html y la de la derecha con pagina_uno.html
<frame src=”indice.html”>
<frame src=”pagina_uno.html”>
</frameset >
</frameset >
</html>

Insercción de películas Flash y applets de java


<applet code=”sinetext.class” Inserta un applet de java llamado sinetext.class
width=”500” height=”100”>
con tamaño 500 x 100. Le pasa al applet el
<param name=”text” value="¡curso
para realizar una web!"> parámetro llamado text con el valor ¡curso para
</applet> realizar una web!.
< embed src="boton.swf" width=”100” Inserta una película flash. El nombre es
height=”36” type="application/x-
shockwave-flash"> boton.swf, y las dimensiones 100x36
</embed>
< embed src="boton.swf" width=”100” Inserción de película flash con varios parámetros,
height=”36” type="application/x-
shockwave-flash" quality=”high” quality, bgcolor, scale, border, align.
bgcolor=”#ffcc99” scale="exactfit"
border="0" align="center">
</embed>
pluginspage= Parámetro opcional para que busque el plugin de
"http://www.macromedia.com/shockwave
/ flash si el navegador no lo tiene instalado. (¡ojo! el
download/index.cgi? enlace está todo seguido sin espacios)
P1_prod_version=shockwaveflash"

También podría gustarte