Desarrollo de páginas web
lkc142Trabajo30 de Agosto de 2011
4.519 Palabras (19 Páginas)1.076 Visitas
lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas porcorchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML(como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
Etiquetas HTML Básicas
Etiquetas de formato de texto
Salida Etiquetas requeridas
El texto en negritas. El <B>texto</B> en negritas.
El texto en itálicas. El <I>texto</I> en
itálicas.
El texto en formato teletipo. El <TT>texto</TT> en
formato teletipo.
El texto en 2 tamaños más grandes y en rojo. El tamaño 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 dirección 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
Salida Etiquetas requeridas
Encabezado H1 <H1>Encabezado H1<\H1>
Encabezado H3 <H3>Encabezado H3<\H3>
Encabezado H6 <H6>Encabezado H6<\H6>
Las etiquetas de encabezado generan automáticamente un fin de línea.
Salida Etiquetas requeridas
Justo antes del encabezado.
Un encabezado H2
Justo después del encabezado. Justo antes del encabezado.
<H2>Un encabezado H2<\H2>
Justo después del
encabezado.
Párrafos, fin de línea y comentarios
Salida Etiquetas requeridas
Última oración del párrafo.
Primera oración del nuevo párrafo. Última oración ...
<P>
Primera oració del ...
Una oración
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 página 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 lógico
Salida Etiquetas requeridas
La siguiente es una cita. La siguiente es <CITE>una
cita</CITE>.>
Representa un listado de computadora. <CODE>Representa un listado
de computadora.</CODE>
Una secuencia decaracteres literales. Una secuencia de<SAMP>
caracteres literales.</SAMP>
Nota:
Esta es una cita de algún texto. Nota: <BLOCKQUOTE> Esta es
una cita de algún
texto.</BLOCKQUOTE>
La siguiente es una definición. 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.
Inserción de líneas (rulers)
Salida Etiquetas requeridas
Fin de la parte anterior.
________________________________________Nueva parte. Fin de la parte anterior.
<HR> 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.
Encabezados
HTML acepta seis encabezados para definir la estructura jerárquica de los párrafos en un documento:
Etiqueta Efecto visual
H1 Prueba
H2 Prueba
H3 Prueba
H4 Prueba
H5 Prueba
H6 Prueba
Atributos
Los siguientes atributos se ubican dentro de las etiquetas de estructura, de forma que los elementos pueden mostrarse en ubicaciones específicas:
Atributo Valor Efecto visual
ALIGN LEFT
RIGHT
CENTER
JUSTIFY Texto alineado a la izquierda
Texto alineado a la derecha
Texto centrado
Texto justificado
NOWRAP Evita que el navegador crea un salto de línea.
ID Otorga una identificación a la etiqueta. Este atributo es especialmente útil para la programación con JavaScript
LANG Especifica un idioma diferente
CLASS Asigna una clase a los contenidos (para hojas de estilo)
CLEAR Se usa cuando el texto está rodeando una imagen. Ubica el texto tan abajo de la página como sea necesario para tener un margen claro.
Este es un ejemplo de encabezado:
<H1 ALIGN=JUSTIFY> Texto justificado </H1>
Párrafos
HTML considera que los párrafos son bloques de texto. Los navegadores hacen lo posible para adaptar el contenido de los párrafos a la ventana, a menos que los atributos NOWRAP o NOBR estén explícitamente especificados.
Dentro de un párrafo, todos los espacios, tabuladores y saltos de línea cuentan como un espacio simple.
Para colocar textos en bloques, se utiliza el par de etiquetas <p> y </p>. Esta etiqueta puede incluir cualquiera de los atributos mencionados anteriormente.
Los saltos de línea (saltar de una línea a la siguiente) se crean usando la etiqueta <br/>.
La etiqueta <hr> se utiliza para insertar una línea horizontal.
Etiqueta Atributo Efecto visual
<br/> Salto de línea
<p> y </p> Párrafo
<hr size=5 width=20% align=left> SIZE
WIDTH
ALIGN ________________________________________________________________________________________________________________________
Contenedores
Las etiquetas usadas para indentar texto se llaman contenedores.
Contenedor Efecto visual
<blockquote> y </blockquote> Texto con indentación
<address> y </address> Para escribir información de contacto
<note> y </note> Para escribir una nota
<fn> y </fn> Para crear una nota al pie
<banner> y </banner> Hace que un bloque de texto adopte una posición fija con relación a la página
<pre> y </pre> Para escribir texto preformateado; manteniendo espacios,
saltos de líneas y tabuladores intactos
Listas
Una lista es un párrafo estructurado que contiene una serie de elementos. HTML define tres tipos de listas:
• Listas ordenadas;
• Listas no ordenadas;
• Listas de definiciones.
Lista ordenada
Contenedor Tipo de lista Efecto visual
<ol>
<li> ítem 1 </li>
<li> ítem 2 </li>
</ol> Lista ordenada 1. ítem 1
2. ítem 2
3. ítem 3
Lista no ordenada
Contenedor Tipo de lista Efecto visual
<ul>
<li> ítem 1 </li>
<li> ítem 2 </li>
</ul> No ordenada • ítem 1
• ítem 2
• ítem 3
Lista de definiciones
Contenedor Tipo de lista Efecto visual
<dl>
<dt>Término</dt>
<dd>Definición</dd>
</dl> Definición ítem 1
definición 1
ítem 2
definición 2
Atributos
Hay varios atributos utilizados únicamente en listas:
Atributo Valor Efecto visual
COMPACT estrecha el espacio entre líneas
(listas más compactas)
PLAIN elimina las viñetas
SEQNUM Define el
...