Scribd
Cargar
288 vistas14 páginas

Comandos de HTML

El documento describe los comandos básicos de HTML. Explica etiquetas estructurales como <html> y <body>, etiquetas de formato de texto como <p> y <br>, etiquetas para gráficos como <img>, etiquetas de ancla como <a>, y comandos para tablas, listas y caracteres especiales.

Cargado por

José Gregorio Alvarado
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 DOC, PDF, TXT o lee en línea desde Scribd
288 vistas14 páginas

Comandos de HTML

El documento describe los comandos básicos de HTML. Explica etiquetas estructurales como <html> y <body>, etiquetas de formato de texto como <p> y <br>, etiquetas para gráficos como <img>, etiquetas de ancla como <a>, y comandos para tablas, listas y caracteres especiales.

Cargado por

José Gregorio Alvarado
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 DOC, PDF, TXT o lee en línea desde Scribd

Comandos de HTML

COMANDOS BASICOS EN HTML: Los comandos HTML para dar formato a un


documento conocidos como etiquetas (tags) son meramente secuencias de caracteres que
comienzan con "<" y terminan con ">". Las etiquetas de HTML no son sensibles a
mayúsculas y por lo general se usan en pares. Por ejemplo, si tuviéramos un atributo de
formato de texto conocido como X y quisiéramos aplicarlo a la frase "Esta es una prueba" se
escribiría asi:

<X>Esta es una prueba.</X>

Para hacer más fáciles las cosas agruparemos los comandos básicos en las siguientes
categorías:

COMANDOS ESTRUCTURALES: Identifican un documento válido en HTML e indican


el inicio y el final de las secciones lógicas del documento. Veamos el siguiente ejemplo:

<DOCTYPE HTML PUBLIC"-//IETF//DTD HTML 3.0 // EN">


<HTML>
<HEAD>
<TITLE>Texto del Título.</TITLE>
</HEAD>
<BODY>
<ul>
<li type>Primer elemento.
<li type>Segundo elemento.
</ul>
</BODY>
</HTML>

COMANDOS PARA FORMATEOS DE PARRAFOS: Indican el final de párrafo, forzan


una línea, modifican la indentación o preformateo de texto, etc. Entre los estos comandos de
esta categoría se pueden mencionar los siguientes:

 <P>...</P>: Indica el principio y el final de un párrafo el cual es separado del


siguiente párrafo por aproximadamente una línea en blanco.
 <Hi>...</Hi>: Cabeceras(Headings), donde i=1,2,3,...,6 el cual es el número que
indica el nivel de cabecera. Todas las cabeceras tienen un tamaño de letra mayor que el
de texto normal y además son resaltadas en negritas. El nivel 1 es el más grande
mientras que el nivel 6 es el más pequeño.
 <BR>: Hace un rompimiento de línea. El rompimiento no es seguido por ningun
espacio en blanco. No existe una etiqueta </BR> en las versiones actuales de HTML.
 <PRE>...</PRE>: Delimita el texto que será mostrado en fuente no proporcional con
todos los espacios intactos. Respeta espacios y tabulaciones.
 <LISTING>...<LISTING>: Delimita el texto a ser mostrado como un listado de un
programa.
 <HR ALIGN=left,right SIZE=# WIDTH=# o % del ancho total de la página>:
Dibuja una regla horizontal (Horizontal Rule) a la cual se le puede modificar su
alineación con respecto a la página (ALIGN), su longitud (SIZE, en números enteros)
y su ancho (WIDTH, en números enteros o un % del ancho total de la página.) Si se
utiliza la sentencia <HR> sin parámetros el navegador dibujará una línea fija que
abarcará toda la extensión horizontal donde sea dibujada.

COMANDOS PARA FORMATO DE CARACTERES: Las etiquetas de formato pueden


ser de dos tipos: físicas y lógicas. Las físicas son pocas y tienen un efecto predecible, como el
que usted aplica en un procesador de palabras al poner en itálicas una porcion de texto,
mientras que los caracteres lógicos son arbitrarios (dependen del navegador) y muy
numerosos. Es preferible utilizar etiquetas de formateo lógico en vez de etiquetas de formateo
físico ya que las primeras realzan (enforma logica) la naturaleza real del texto sobre las cuales
son aplicadas. Para cambiar el tamaño de las fuentes se debe usar <FONT SIZE>TEXTO
afectado=X</FONT> donde x es un número del 1 al 7.

Para hacer que el texto parpadeé en pantalla se debe usar <BLINK>Texto afectado</BLINK>.

Etiquetas Físicas:

 <B>...</B>: Coloca el texto en negritas.


 <I>...</I>: Coloca el texto en Itálicas.
 <TT>...</TT>: Coloca el texto en fuente tipo máquina de escribir no
proporcional.

Etiquetas Lógicas:

 <EM>...</EM>: Enfasis en el texto seleccionado (las repreesnta como itálicas).


 <STRONG>...</STRONG>: Enfasis aun más fuerte en el texto (negritas e itálicas).
 <CODE>...</CODE>: Representa código de computadora.
 <SAMP>...</SAMP>: Ejemplo de salida para un comando de usuario.
 <KBD>...</KBD>: Caracter de teclado.
 <DFN>...</DFN>: Definición.
 <VAR>...</VAR>: Variable de programa.
 <CITE>...</CITE>: Cita textual.

COMANDOS PARA LISTAS: El HTML soporta 3 tipos de listas: ordenadas, no


ordenadas y listas de definiciones, cerradas con los pares <OL> </OL>, <UL> </UL>, y
<DL> </DL> respectivamente. Las listas ordenadas se usan para algoritmos mientras que las
listas no ordenadas se usan para listar artículos en los que no importa el orden. Las listas por
definición en cambio proveen un formato parecido al de un diccionario o glosario.

Los elementos individuales dentro de una lista ordenada son identificados con una etiqueta
<LI> (El elemento </LI> no existe) mientras que los elementos dentro de una lista por
definición se separan con <DT> el cual da formato al término y <DD> el cual da formato a la
definicón.

Hay otros comandos adicionales para listas:

Estilos de etiquetas con <LI TYPE= disc, circle, square> utiliza discos, círculos y cuadrados
para las viñetas.

Letras capitales y números romanos con <LI TYPE= A, a, I, i, 1>


Para indicar desde donde hay que empezar a numerar una lista con números o letras usar <OL
START=# donde # es el número o posición de alfabeto desde donde debe arrancar la
numeración.

COMANDOS PARA GRAFICOS EN LINEA: Uno de los aspectos más resaltantes de


World Wide Web son sus capacidades "multimedia" lo que consiste en la habilidad de mezclar
imágenes , iconos, videos y sonido con su respectivo soporte de texto para luego presentarlos
de una manera integrada. Parte de esto es posible gracias a la etiqueta <IMG>. Esta etiqueta
incluye un URL que específica la localización del objeto gráfico en un archivo separado y
alguna información adicional que puede ser mostrada cuando la imagen es suprimida.

La sintaxis de su uso es la siguiente:

< IMG SRC="URL específico" ALIGN=Top, Middle, Botton ALT="Texto" VSPACE= #


HSPACE= # >...</IMG>, donde el parámetro ALIGN específica la forma en la imagen, será
colocada respecto al texto circundante, el parámetro ALT permite colocar un texto que será
mostrado al usuario si se decide a suprimir la imagen, VSPACE y HSPACE especifican la
cantidad de espacio en blanco a dejar alrededor de la imagen.

COMANDOS PARA ETIQUETAS DE ANCLA: Las etiquetas de ancla (anchor tags) son
usadas para codificar los hipervínculos, los pedazos coloreados de texto o mapas de bits con
bordes especiales, en los que el usuario puede hacer click para saltar a otro documento o a
otra parte del mismo documento. La forma básica de una etiqueta de ancla es:

<A HREF="URL particular">Algo de texto</A>, donde "algo de texto" es el texto que


verá el usuario y el URL que es el destino del hipervinculo. El URL puede ser absoluto
(contiene la localización del archivo con su nombre), relativo (se asume que la ruta y nombre
del huésped es la misma que la del documento que contiene la etiqueta de ancla), o aún local
(indicando que el archivo reside en la máquina donde esta el cliente del navegador en vez del
servidor Web). La forma general de este tipo de etiqueta de ancla es:

<A HREF="URL#etiqueta">Algo de texto</A>.

COMANDOS PARA CAMBIAR FONDOS Y CAMBIAR COLORES DE


PANTALLA: Para cambiar colores de pantalla se tiene lo siguiente:

<BODY BGCOLOR=# TEXT=# LINK=# ALINK=# VLINK=#> de donde:

BGCOLOR= color de fondo.

TEXT= color de texto.

LINK= color del vinculo.

ALINK= color del vinculo activo.

VLINK= color del vinculo visitado.

Todos estos colores vienen en el formato rrggbb (red, green, blue, rojo, verde y azul) cada uno
en hexadecimal (1, 2, 3,..., f).
COMANDOS PARA LA DEFINICION DE TABLAS: Las tablas siempre han presentado
una manera muy cómoda y visual de presentar la información. El HTML tiene un soporte
bastante amplio para éstas.

Una tabla puede ser creada siguiendo el siguiente formato:

<TABLE BORDER=# WIDTH=# HEIGHT=# CELLSPACING=#


CELLPADING=#>...</TABLE>

Para definir filas y columnas se usa:

<TABLE>...</TABLE>

<TR ALIGN=? VALIGN=?>: Define las filas.

<TH ALIGN=? VALIGN=?>: Define las cabeceras de las tablas.

<TD ALIGN=? VALIGN=?>: Define el contenido de la celda de la tabla.

Los posibles valores para ALIGN son left, center, y right (Definen la alineación horizontal del
texto) mientras que los valores para VALIGN son Top, Middle, y Botton (Definen la
alineación vertical de las tablas).

CARACTERES ESPECIALES: Para representar ciertos caracteres que pueden no


encontrarse en el teclado de un cliente de HTML se utilizan caracteres de escape especiales.
Dichos caracteres van predecidos del simbolo "&" seguido de un número o letras que definen
el caracter. He aqui algunos caracteres especiales:

 &vocalacute: coloca acento en la vocal minuscula deseada.


 &letraacute: coloca tilde sobre la letra minuscula o mayuscula deseada.
 &letragrave: coloca acento en la vocal mayuscula deseada.
DESCRIPCIO COMENTARI
INICIO FINAL
N OS
Obligatorias
Toda la codificación
Principio de
<html> </html> debe estar incluida
Documento en estas etiquetas
Dentro del
Encabezado <head> </head> encabezado se
encontrará el título.
Es el texto que
aparece en la barra
Título <title> </title> de títulos del
navegador
Cuerpo <body> </body> Cuerpo de la página

Para toda la página


Permite colocar un
color uniforme de
fondo a toda la
página. Este color
<body bgcolor="#RRVVAA"> estará formado por
3 números
Color de hexadecimales que
Fondo indiquen:
RR = tonalidad de
Ver escala de Colores color rojo
VV = tonalidad del
color verde
AA = tonalidad del
color azul
[Link]
deberá reemplazarse
Imagen de por el nombre de la
<body background="[Link]"> imagen. Se
Fondo
recomienda utilizar
formatos .gif o .jpg
Permite definir los
Colores de colores que se
<body text="#RRVVAA" aplicarán en forma
texto color de
Link ="#RRVVAA" genérica para el
enlaces
Vlink ="#RRVVAA" texto como para los
enlaces enlaces. El color
Alink ="#RRVVAA"
visitados está representado
Ver escala de Colores
enlaces activos por un número
hexadecimal
Permite definir un
estilo de fuente,
Estilos <style> </style> color, tamaño, etc
para todo el
documento.
Permite definir
propiedades
internas del
documento.
Name =
"description"
content = ”Será el
resumen con que se
<meta publicará en el
name="description" content="comentarios" buscador. No
Meta </meta> utilizar más de 25
name="keywords" content="palabra1
palabra2 ... palabran"> palabras"
Name =
"keywords" con-
tent = "podrán
definirse palabras
claves para que
nuestro documento
sea encontrado por
los buscadores"
Ejecuta un archivo
de sonido.
[Link] se debe
reemplazar por el
nombre del archivo;
loop n indica la
<bgsound cantidad de veces
src="[Link]" que se repetirá.
loop=infinite/n> La etiqueta Embed
<embed con sus
propiedades, se
Sonido src="[Link]" utiliza por las
width=200 height=55 incompatibilidades
autostart="true" de los navegadores.
loop="true" Con esta opción
hidden="true"> aparece una consola
cuyas dimensiones
se definen con
Width o Height y
que puede ocultarse
con Hidden =
"true"
Presentación de texto
Encabezamien </h1></h2>....</h Opciones de
<h1><h2>....<h6> formato de texto
tos 6> para encabezados,
Negrita <b> </b> Coloca el texto
Cursiva <i> </i> incluido con éstos
formatos.
Subrayado <u> </u>
El texto estará
Parpadeo <blink> </blink> parpadeante
Grande <big> </big> Agranda el texto
Pequeña <small> </small> Disminuye el texto

Representa el texto
Subíndice <sub> </sub>
sobre el renglón o
Superíndice <sup> </sup> bajo el renglón.
Permite colocar un
color a la fuente. El
Color del color está
<font color="#RRVVAA"> </font> representado por un
Texto
número
hexadecimal.
Define un tamaño
de fuente
específico. n repre-
Tamaño del
<font size="n"> </font> senta un número del
Texto 0 al 7 al que luego
podrán agregarle los
signos + o -
Permite definir un
Tipo de fuente <font face="nombre de fuente"> </font> nombre de Fuente
específico.
Formato de fuente
Estilo de
<tt> </tt> Courier de tamaño
fuente menor (Typewriter)
Formato de fuente
Texto tipo Courier. Se
<pre> </pre> representan los
preformateado
espacios en blanco
Permite que un
texto tenga
movimiento.
Pueden agregarse
Texto en atributos para
<marquee>(texto) </marquee> dimensionar la
Movimiento
marquesina, para
alinear el texto, para
modificar tamaño,
fuente y color.
Traza un línea
horizontal cuyo
Línea No utiliza etiqueta degrosor
<hr="n"> está
Horizontal cierre representado por
“n”
Espacio en No utiliza etiqueta deRepresenta un
&nbsp espacio en blanco.
Blanco cierre
Comentarios que no
Comentario <!- comentario> -> serán visibles en la
pantalla.
Permiten que los
caracteres
Escribo Para ver especiales sean
&lt; < leídos por todos los
navegadores en sus
&gt; > distintas versiones.
&amp; &
La escritura de cada
&quot; " carácter comienza
con el signo
&aacute; á
ampersand (&) y
&eacute; é debe terminar con
punto y coma (;)
&iacute í
&oacute; ó En esta tabla vemos
como escribir
&uacute; ú algunos símbolos,
Caracteres signos, las letras Ñ
&Aacute; Á
especiales y ñ, y las vocales
&Eacute; É acentuadas en
mayúscula y
&Iacute; Í minúscula.
&Oacute; Ó
&Uacute; Ú
&ntilde; ñ
&Ntilde; Ñ
&uuml; ü
&Uuml; Ü
&#191; ¿
&#161; ¡

Presentación de párrafos
<center> </center> Todo texto que se
escriba entre estas
Alineaciones <left> </left> etiquetas sufrirá esa
<right> </right> alineación .
Se utiliza para
Sangría <blockquote> </blockquote> destacar una cita.
Realiza la
separación entre
Parrafo párrafos, y la
<p align= center*left*right*justify> </p>
alineación de estos.
Renglones en Permite dejar
<br> renglones en blanco
blanco
Tratamiento de imágenes
Imagen <img src="[Link]"> Permite insertar una
Individual imagen en la página
que estamos
diseñando. El
archivo de la
imagen deberá estar
ubicado en la
misma carpeta que
la página, caso
contrario se deberá
indicar su ruta de
acceso

Coloca un texto que


podrá leerse al pasar
Texto de la el puntero del ratón
<img src="[Link]" alt="texto"> sobre la imagen o
imagen
cuando ésta no se
carga.
Indicará la posición
en que ubicaremos
al texto que
Alineación del <img src="[Link]" acompaña a la
texto align= top * middle * bottom> imagen
Top Arriba *
Middle Medio *
Bottom Abajo
Define el tamaño de
<img src="[Link]" la imagen
Ancho Width = ancho *
width="n" height = altura n =
Alto
height="n"> será un valor en
pixeles
<img dynsrc="[Link]" Permite agregar
Videos loop=infinite controls archivos de video.
start= mouseover>
Listas
Se utiliza cuando
<ol type= A * a * I * i start=n> las opciones deben
<lh> título de la lista </lh> ser numerados. La
Lista opción type
<li> Primera opción </ol> representan número
numerada
<li> Segunda opción o letras y start
<li> Tercera opción indicará el número
con que inicia.
<ul type=square * circle * disk> Se utiliza cuando
<lh> título de la lista </lh> las opciones no
Lista no presentan un orden
<li> Primera opción </ul> determinado. La
ordenada
<li> Segunda opción opción type
<li> Tercera opción representa la viñeta.
<dl> Se utiliza cuando
<lh> título de la lista </lh> las opciones llevan
un título y una
<dt> Primer tema definición
Lista con <dd> Primer detalle
</dl>
sangrado <dd> Segundo detalle
<dt> Segundo tema
<dd> Tercer detalle
<dd> Cuarto detalle
Enlaces o Links
xxx se debe
reemplazar por la
dirección URL
Enlace a otro destino del enlace.
<a href="xxx"> yyy </a>
URL yyy es el texto
indicativo que se
leerá en la página.
Te permite un
Enlace a un <a href = "[Link] e-mail"> texto enlace directo a tu
</a> cliente de correo
e-mail indicativo del enlace
predeterminado
Marca para Referencia una
enlace dentro posición a la que
luego se accederá.
de la misma <a href="#marca"> Texto de enlace al
</a>
página ancla
(Ancla -
Anchor)
Enlaza una posición
Localizar previamente
<a name="marca"> texto del ancla </a> marcada, dentro de
enlace anterior
la misma página
Enlace a otra Enlaza a la posición
página con <a href="[Link]#marca"> texto indicativo establecida en
</a> marca, en la página
marca, dentro del enlace [Link]
del mismo sitio
xxx se debe
reemplazar por la
dirección URL
destino del enlace.
[Link]
se debe reemplazar
Enlace con <a href="xxx"><img
</a> por el nombre de
imagenes src="[Link]"> imagen
seleccionado
Enlaza a la
dirección URL
haciendo un click
sobre la imagen.
Tablas
Definición <table> </table> Crea una tabla

<table border=n n = representa al


Bordes grosor del borde.
bordercolor="#RRVVAA">
Color de También se podrá
Bordes especificar el color
Ver escala de Colores del borde
Las celdas podrán
Separación separarse por el n
<table cellspacing=n> valor
entre celdas

Separación El contenido podrá


estar separado del
entre el borde <table cellpadding=n> borde por el valor
y el contenido indicado en n
Alto <table height=n o porcentaje Se puede establecer
ancho width=n o porcentaje> un valor o un
porcentaje para
definir el tamaño de
la tabla
Color de <table bgcolor="#RRVVAA" Se puede establecer
un color de fondo
Fondo o background="[Link]">
de toda la tabla o
Imagen de colocar una imagen
Fondo Ver escala de Colores de fondo
Posibilita colocar un
<caption título a la tabla
Título </caption> alineado top=arriba
align=top * bottom> texto del título
o bottom=abajo
Por cada fila que
tenga la tabla
deberá utilizarse
<tr esta etiqueta: se
Definición de align=left*center*right podrá establecer la
</tr> alineación del
filas valign=top*middle*bottom
bgcolor="#RRVVAA"> contenido, la
ubicación dentro de
la fila y el color de
fondo.
<th Permite definir los
Definición de align=left*center*right*justify*decimal nombres de las
</th> columnas.
títulos valign=top*middle*bottom*baseline
bgcolor="#RRVVAA">
<td Coloca contenidos a
Definición de cada celda
align=left*center*right*justify*decimal
datos o </td>
valign=top*middle*bottom*baseline
contenidos
bgcolor="#RRVVAA">
Celda que Se puede combinar
ocupa muchas <td rowspan=numero de filas> </td> una celda para que
ocupe muchas filas.
filas
Celda que Se puede combinar
una celda para que
ocupa muchas <td colspan=numero de columnas> </td> ocupe muchas
columnas columnas.
Formularios
Inicia un
formulario. Se
Definición <form> utiliza para la
entrada o el envío
de datos.
Envía la respuesta
<form action="[Link] inmediatamente a la
Acciones method=post enctype="text/plain">Texto dirección
referente especificada en
formato de texto.
Introducción <input Ingresa un objeto
de datos type="text" dentro del
formulario, se
name="nombre del campo formulario" deberá definir el
value="asignación de un dato" tipo de objeto, el
size="número" nombre del campo
maxlenght="número"> formulario, el valor
inicial que se le
asigna, el tamaño
máximo de
visualización del
campo y el tamaño
máximo de
caracteres que
puede tener ese
campo.
Con el type =
"text" no se asigna
Value
checkbox = se
visualiza un cuadro
de verificación, si
deseamos que
aparezca tildado
agregamos
CHECKED.
password = el
ingreso se
representa con
button asteriscos.
checkbox radio = visualiza
file botones de radio y
hidden permite que el
usuario elija una
Opciones de image
opción entre varias.
type password Se agregan tantos
radio input como opcio-
reset nes deseamos.
submit reset = visualiza un
botón que al hacerle
text
click borrará los
datos.
submit = visualiza
un botón que al
hacerle click
enviará los datos.
text = crea un
campo para ingresar
caracteres alfa-
numéricos
Ingreso de un <textarea Permite ingresar un
texto que name="nombre del campo formulario" texto extenso, por
</textarea> ejemplo
ocupa muchas rows="cantidad de filas" comentarios
líneas cols="cantidad de columnas">
<select name="nombre del campo Permite optar por
Ingreso por formulario"> los datos de un
menú
medio de un <option>1º opción </select>
menú <option>2º opción
<option>3º opción
Frames o Marcos
Inicia la definición
Definición <frameset> </frameset> de un frame.
Frames en <frameset cols="20%,80%"> Define dos frame en
columnas <frameset rows="30%,70%> columnas ocupando
uno el 20% de la
pantalla y el otro el
80% restante.
Define dos frame en
Frame en filas filas ocupando una
el 30% de la
pantalla y la otra el
70% restante
Define en que frame
se cargará cada
página.
<frame src="[Link]"> Se asignará un
Contenido de
<frame src="[Link]" name en este caso
cada frame principal para
name="principal">
indicar que se
visualicen allí los
futuros enlaces
Se utiliza como
atributo de un
enlace e indica en
que frame deberá
visualizarse ese
enlace.
"_ blank" = se
abrirá una nueva
ventanadel nave-
Destino del gador y se
target="principal" visualizará en ella.
frame
"_self" = el enlace
se carga en el
propio frame.
"_top" = el enlace
se carga a pantalla
completa en la
misma ventana,
suprimiendo los
otros frame.
Border = 0 indica
que no habrá huecos
de separación entre
frames (para
Netscape).
frameborder = 0
indica que no habrá
Atributos del border=0
borde de separación
tag frameset frameborder=0 entre frames.
framespacing=0 framespacing = 0
indica que no habrá
huecos de
separación entre
frames (para
Explorer).
Frameborder =
elimina los bordes
de un frame
marginwidth y
marginheight =
definen el ancho y
frameborder="no" alto de los margenes
marginheight="número" del frame.
marginwidth="número" name = define el
Atributos del nombre del frame.
name="nombre del frame" Noresize = indica
tag frame
noresize que el fram no
scrolling="yes/no/auto" podrá redimen-
src="direcció[Link]" sionarse.
scrolling = inidca si
tendrá o no barra de
desplazamiento.
src = indica el
contenido del
frame.
Si el navegador no
cuenta con la
posibilidad de
incluir Frames, con
este tag puede
Si el frame no definirse una
dirección
puede <noframes> </noframes> alternativa. Se
visualizarse coloca luego de los
tag FRAME y
llevan dentro un
texto definifo entre
los tag <body>
</body>

También podría gustarte