Etiquetas HTML Básicas

Etiquetas HTML Bsicas
Etiquetas de formato de texto

Salida Etiquetas requeridas
El texto en negritas.
El <B>texto</B> en
negritas.
El texto en itlicas.
El <I>texto</I> en
itálicas.
El texto en formato teletipo.
El <TT>texto</TT> en
formato teletipo.
El texto en 2 tamaos ms
grandes y en rojo. El tamao
puede ser un valor absoluto en el
rango 1..7.
El <FONT SIZE = +2 COLOR = "RED">
texto </FONT> en 2
tamaños más
grandes y en rojo. El tamaño
puede ser ...
Utilizar la direccin de e-mail
claudio@acm.org
para contactarme.
Utilizar la
dirección
de e-mail <ADDRESS>
claudio@acm.org </ADDRESS>
para contactarme.

Etiquetas de encabezamientos

Encabezado H1
<H1>Encabezado H1<\H1>
Encabezado H3 <H3>Encabezado H3<\H3>
Encabezado H6
<H6>Encabezado H6<\H6>
Las etiquetas de encabezado generan automticamente un fin de lnea.

Justo antes del encabezado.
Un encabezado H2
Justo despus del encabezado.
Justo antes del
encabezado.
<H2>Un encabezado
H2<\H2>
Justo después del
encabezado.

Prrafos, fin de lnea y comentarios

ltima oracin del prrafo.
Primera oracin del nuevo prrafo.
Última
oración ...
<P>
Primera oració del
...
Una oracin
sobre otra.
Una oración
<BR>
sobre otra.

Observar que estas etiquetas no son bilaterales.
Los comentarios dentro de un archivo HTML se delimitan del siguiente modo:
<!-Este texto no ser analizado por el visualizador-
>

Un ejemplo de pgina WEB

El siguiente ejemplo es el contenido del archivo eje2.htm en el directorio
corriente:

<HTML>
<HEAD>
<TITLE>Página de ejemplo</TITLE>
</HEAD>
<BODY>
<H2> Encabezado </H2>
<P>Primer párrafo debajo del
encabezado.</P>
<H3> Un encabezado <BR> en dos renglones </H3>
<P>Párrafo con partes <B>en negrita</B>
</P>
</BODY>
</HTML>
Ver el ejemplo.

Etiquetas de formato lgico

La siguiente es una cita.
La siguiente es <CITE>una
cita</CITE>.>
Representa un listado de <CODE>Representa un
computadora. listado
de computadora.</CODE>
Una secuencia decaracteres
literales.
Una secuencia de<SAMP>
caracteres
literales.</SAMP>
Nota:
Esta es una cita de algn texto.
Nota: <BLOCKQUOTE> Esta
es
una cita de algún
texto.</BLOCKQUOTE>
La siguiente es una definicin.
La siguiente es <DFN>una

definición.</DFN>
El siguiente texto est enfatizado.
El siguiente <EM> texto
</EM>
está enfatizado.
Caracteres de teclado.
<KBD>Caracteres de
teclado.</KBD>
El siguiente texto est fuertemente
enfatizado.
El siguiente <STRONG>
texto
</STRONG> está
fuertemente
enfatizado.
El siguiente nombre es una variable
de programa.
El siguiente <VAR> nombre
</VAR>
es una variable de
programa.

Insercin de lneas (rulers)

Fin de la parte anterior.

Fin de la parte anterior.
<HR> Nueva parte.
Nueva parte.
Solo 40% de ancho.

Nueva parte.
Solo 40% de ancho.
<HR WIDTH=40%> Nueva
parte.
Alto del ruler = 10.

Nueva parte.
Alto del ruler = 10.
<HR SIZE=10> Nueva
parte.

Leyenda:
D: Desaprobado
L: Loose DTD (Definicin del Tipo de Documento Transicional)
F: Frameset DTD (Definicin del Tipo de Documento con Marcos)
Nombre
Etiqueta
inicial
Etiqueta
final
Des. DTD Descripcin
a <a> </a> Origen o destino del vnculo
abbr <abbr> </abbr> Abreviatura (p.ej.:WWW, HTTP, etc.)
acronym <acronym> </acronym>
address <address> </address> Informacin sobre el autor
applet <applet> </applet> D L Applet Java
area <area> Prohibido rea de un mapa de imgenes en el
lado del cliente
b <b> </b> Estilo de texto en negrita
base <base> Prohibido URI base del documento
basefont <basefont> Prohibido D L Tamao base de fuente
bdo <bdo> </bdo> Anular algoritmo BiDi I18N
big <big> </big> Estilo de texto grande
blockquote <blockquote> </blockquote> Cita larga
body Opcional Opcional Cuerpo del documento
br <br> Prohibido Salto de lnea forzado
button <button> </button> Botn
caption <caption> </caption> Ttulo de tabla
center <center> </center> D L Forma abreviada de DIV align=center
cite <cite> </cite> Cita
code <code> </code> Fragmento de cdigo de computadora
col <col> Prohibido Columna de una tabla
colgroup <colgroup> Opcional Grupo de columnas de una tabla
dd <dd> Opcional Descripcin de una definicin
del <del> </del> Texto borrado
dfn <dfn> </dfn> Definicin
dir <dir> </dir> D L Lista tipo directorio
div <div> </div> Contenedor genrico de idioma/estilo
dl <dl> </dl> Lista de definiciones
dt <dt> Opcional Trmino definido
em <em> </em> nfasis
fieldset <fieldset> </fieldset> Grupo de controles de un formulario
font <font> </font> D L Cambio local de la fuente
form <form> </form> Formulario interactivo
frame <frame> Prohibido F Subventana
frameset <frameset> </frameset> F Subdivisin en ventanas
h1 <h1> </h1> Encabezado
head Opcional Opcional Cabecera del documento
hr <hr> Prohibido Separador horizontal
html Opcional Opcional Elemento raiz del documento
i <i> </i> Estilo de texto en itlica
iframe <iframe> </iframe> L Subventana en lnea
img <img> Prohibido Imagen incluida
input <input> Prohibido Control de formulario
ins <ins> </ins> Texto insertado
isindex <isindex> Prohibido D L Entrada de texto en una sola lnea con
indicador
kbd <kbd> </kbd> Texto que debe introducir el usuario
label <label> </label> Texto del rtulo de un campo de
formulario
legend <legend> </legend> Leyenda de un grupo de campos
li <li> Opcional Objeto de lista
link <link> Prohibido Un vnculo independiente del medio
map <map> </map> Mapa de imgenes en el lado del
cliente
menu <menu> </menu> D L Lista tipo men
meta <meta> Prohibido Metainformacin genrica
noframes <noframes> </noframes> F Contenedor de contenidos alternativos
para la representacin no basada en
marcos
noscript <noscript> </noscript> Contenedor de contenidos alternativos
para la representacin no basada en
scripts
object <object> </object> Objeto incluido genrico
ol <ol> </ol> Lista ordenada
optgroup <optgroup> </optgroup> Grupo de opciones
option <option> Opcional Opcin seleccionable
p <p> Opcional Prrafo
param <param> Prohibido Valor de propiedad con nombre
pre <pre> </pre> Texto preformateado
q <q> </q> Cita corta en lnea
s <s> </s> D L Estilo de texto tachado
samp <samp> </samp> Ejemplo de salida de programas,
scripts, etc.
script <script> </script> Sentencias de script
select <select> </select> Selector de opciones
small <small> </small> Estilo de texto pequeo
span <span> </span> Contenedor genrico de idioma/estilo
strike <strike> </strike> D L Estilo de texto tachado
strong <strong> </strong> nfasis fuerte
style <style> </style> Informacin de estilo
sub <sub> </sub> Subndice
sup <sup> </sup> Superndice
table <table> </table>
tbody Opcional Opcional Cuerpo de tabla
td <td> Opcional Celda de datos de una tabla
textarea <textarea> </textarea> Campo de texto multilnea
tfoot <tfoot> Opcional Pie de tabla
th <th> Opcional Celda de encabezado de tabla
thead <thead> Opcional Cabecera de tabla
title <title> </title> Ttulo del documento
tr <tr> Opcional Fila de una tabla
tt <tt> </tt> Estilo de texto de teletipo o
monoespacio
u <u> </u> D L Estilo de texto subrayado
ul <ul> </ul> Lista no ordenada
var <var> </var> Variable o argumento de un programa
Estructura de una pgina web
cdigo
<html>
<head>
<title>Primera pagina de Pepe</title>
</head>
<body>
Ésta es la primera página de Pepe
</body>
</html>
ttulo Primera pagina de Pepe
visualizacin sta es la primera pgina de Pepe

<HTML> </HTML>
Delimita y engloba toda la pgina web, que consta de cabecera y cuerpo.

<HEAD> </HEAD>
Delimita y engloba la cabecera de una pgina, que contiene un conjunto de
informaciones que no se muestran en la ventana, entre ellas el ttulo de la
pgina, pero que pueden ayudar a los navegadores y a los buscadores para
interpretar o a encontrar correctamente la pgina.

<TITLE> </TITLE>
Dentro de la cabecera (HEAD), lo que se incluye aqu se muestra en la barra
del ttulo de la ventana del navegador.

Metadatos
La cabecera admite otras muchas etiquetas (ver apuente 6 y 6.1.)

<BODY> </BODY>
Delimita y engloba el cuerpo de la pgina, que son el conjunto de
informaciones (texto e imgenes) que se muestran en la pgina, as como las
indicaciones de cmo deben mostrarse.
Admite atributos (ver jac 8 y apuente 5.3 y 14.3).

Formatos de prrafo
El texto de la pgina se puede estructurar en encabezamientos de los
diferentes apartados de la pgina, que pueden tener distintos niveles de 1 a 6
(siendo 1 el ms importante) y prrafos normales.

<H1> ... </H1> o <H2> ... </H2> (hasta 6)
Prrafos que son encabezamientos (con distintos niveles).

<P>... </P>
Prrafos normales.

<P align="center">... </P>
El atributo align permite alinear el texto del prrafo. Se puede aplicar igual a
las etiquetas <H1>, <H2>, etc ...
<BR>
Permite partir un prrafo empezando una lnea nueva pero sin dejar espacio.

<HR>
Pone una linea horizontal de separacin. (admite atributos) (ver apuente
11.1).

<BLOCKQUOTE></BLOCKQUOTE>
Sangra el prrafo.

Formatos de texto
El formato de caracteres permite cambiar tanto el tipo de fuente como su
tamao y aspecto.
Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un
grupo de caracteres:

Formatos Fsicos:
Negrita: <B></B>
Cursiva: <I></I>
Subrayado: <U></U>
Teletipo: <TT></TT>
Tachado: <STRIKE></STRIKE>
Grande: <BIG></BIG>
Pequea: <SMALL></SMALL>
Superndice: <SUP></SUP>
Subndice: <SUB></SUB>
Formatos Lgicos:
Cita: <CITE></CITE>
Cdigo: <CODE></CODE>
Definicin: <DFN></DFN>
nfasis: <EM></EM>
Grueso: <STRONG></STRONG>
Palabras clave: <KEY></KEY>
Ejemplos: <SAMP></SAMP>
Usuario: <KBD></KBD>
Variables: <VAR></VAR>
Ejemplo literal: <XMP>...</XMP> (ignora las etiquetas HTML de
dentro)
Posibilidad de combinar etiquetas (anidndolas, esto es, una dentro de otra):

<B><I></I></B> (Correcto)
<B><I></B></I> (Incorrecto)
<FONT COLOR="red"> ... </FONT>
Indicacin expresa del tipo de letra a usar, en este caso el color (ver jac 8.2)

<FONT SIZE="+1"> ... </FONT>
Indicacin expresa del tipo de letra a usar, en este caso el tamao (ver jac 8.1-
segunda parte)

La etiqueta FONT permite combinaciones cualesquiera de los atributos
COLOR, SIZE y FACE
Caracteres especiales
Existe una serie de caracteres del ISO-LATIN-1 que no se pueden representar
directamente en un documento HTML, puesto que forman parte del propio
vocabulario del lenguaje, como por ejemplo los smbolos <, >, &, etc.
Adicionalmente, las vocales acentuadas y algunos signos de puntuacin deben
ser especificados de forma distinta, puesto que los navegadores pueden no
entender el cdigo del carcter utilizado y convertirlo a otro diferente.
Los caracteres especiales ms usados son:

á
é
í
ó
ú
à
ñ
< <
> >
& &
ç
"
espacio en blanco
(ver apuente 10.1)

Listas
(ver apuente 7)

<UL> ... </UL>
Lista numerada.
<OL> ... </OL>
Lista no numerada.
<LI> ... </LI>
Elementos de una lista.
Enlaces
Sirven para acceder desde una pgina a otra pgina o a otro recurso
disponible (ver apuente 15).

<a href="http://servidor/recurso.html">texto del enlace</a>
Enlace absoluto a una pgina

<a href="recurso.html">texto del enlace</a>
Enlace relativo a una pgina

<a name="marcador"> ... </a>
Marcador (enlace interno) dentro de una pgina

<a href="#marcador">texto del enlace</a>
Enlace a un marcador de la misma pgina

<a href="recurso.html#marcador">texto del enlace</a>
Enlace a un marcador de otra pgina (que puede darse con direccin absoluta
o relativa)

<a href="recurso.html" target="_blank">texto del enlace</a>
Enlace a otra pgina (absoluta o relativa, con o sin marcador) que se abra en
otra ventana.

Imgenes
<img src="nombre.gif">
Muestra una imagen, que normalmente es de tipo GIF o JPG
Admite atributos (ver apuente 14).

Etiquetas HTML Básicas

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Etiquetas HTML Básicas

Hochgeladen von

Copyright:

Verfügbare Formate

Etiquetas HTML Bsicas

Etiquetas de formato de texto

Das könnte Ihnen auch gefallen