Scribd
Cargar
47 vistas19 páginas

UNIDAD 2 - HTML, XML y CSS - 2

Este documento trata sobre elementos básicos de programación web como HTML, CSS y XML. Explica conceptos como etiquetas, atributos, listas, enlaces y más.

Cargado por

Marco Antonio Romero Andrade
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 PPTX, PDF, TXT o lee en línea desde Scribd
47 vistas19 páginas

UNIDAD 2 - HTML, XML y CSS - 2

Este documento trata sobre elementos básicos de programación web como HTML, CSS y XML. Explica conceptos como etiquetas, atributos, listas, enlaces y más.

Cargado por

Marco Antonio Romero Andrade
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 PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 19

Programación Web

M.S.C. Norma Leticia Hernández Chaparro


HTML, XML y CSS

2.1 Introducción.
2.2 Estructura global de un documento Web.
2.3 Elementos básicos: texto, vínculos, listas, tablas, objetos,

imágenes y aplicaciones.
Atributos para páginas

 Las páginas HTML pueden construirse con variedad de


atributos que le pueden dar un aspecto a la
 página muy personalizado. Podemos definir atributos como:

 el color de fondo,

 el color del texto

 o de los enlaces.

 Estos atributos se definen en la etiqueta <body>


Atributos para fondos

 bgcolor: Especificamos un color de fondo para la página.


<body bgcolor = “Blue”> </body>
 background: sirve para indicar la colocación de una
imagen como fondo de la página
 <body background="fondo.jpg"> </body>

 <body background = "img\fondoTec.jpg">


el color del texto

 text: este atributo sirve para asignar el color del texto de la página. Por
defecto es el negro.
 Los tres atributos son los siguientes:

 Link: el color de los enlaces que no han sido visitados. (por defecto es
azul clarito)
 vlink: el color de los enlaces visitandos. La "v" viene justamente de la
palabra visitado. (morado)
 alink: es el color de los enlaces activos. Un enlace está activo en el
preciso instante que se pulsa
 <body bgcolor="#000000" text="#ffffff" vlink="#ffff33"
alink="#ffffcc" alink="ffff00">
Márgenes

 Con otros atributos de la etiqueta <body> se pueden


asignan espacios de margen en las páginas, lo que es muy
útil para eliminar los márgenes en blanco que aparecen a
los lados, arriba y debajo de la página.

 Debemos utilizarlos todos si queremos que todos los


navegadores los interpreten perfectamente.
 leftmargin: para indicar el margen a los lados de la
página.
 topmargin: para indicar el margen arriba y debajo de
la página.
 marginwidth: la contrapartida de leftmargin para

 marginheight: igual que topmargin. (Margen arriba y


abajo)
Ejemplo de márgenes

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0


bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Hola amigos</h1>
<br>
<br>
Gracias por visitarme!
</td>
</tr>
</table>
</body>
Listas

 las listas, que sirven para enumerar y definir elementos, los


textos preformateados y las cabeceras o títulos.
 Las listas son utilizadas para citar, numerar y definir
objetos. También son utilizadas corrientemente para
desplazar el comienzo de línea hacia la derecha.
 Podemos distinguir tres tipos de listas:
 Listas desordenadas
 Listas ordenadas
 Listas de definición
Listas desordenadas

 Son delimitadas por las etiquetas <ul> y </ul> (unordered


list). Cada uno de los elementos de la lista es citado por
medio de una etiqueta <li> (sin cierre, aunque no hay
inconveniente en colocarlo).
Listas desordenadas: código
y vista
 <p>Países del mundo</p>  Países del mundo
 <ul>  • Argentina
 <li>Argentina  • Perú
 <li>Perú  • Chile
 <li>Chile
 </ul>
 <ul type="square"> Que tiene como resultado :
 <li>Elemento 1
 Elemento 1
 <li>Elemento 2  Elemento 2
 <li>Elemento 3  Elemento 3
 <li type="circle">Elemento 4 O Elemento 4
 </ul>
Listas ordenadas

 En este caso usaremos las etiquetas <ol> (ordered list) y


su cierre. Cada elemento será igualmente precedido de su
etiqueta <li>.

<p>Reglas de comportamiento en el El resultado es:


trabajo</p> Reglas de comportamiento en el
<ol> trabajo
<li>El jefe siempre tiene la razón 1. El jefe siempre tiene la razón
<li>En caso de duda aplicar regla 1 2. En caso de duda aplicar regla 1
</ol>
Cambiando el tipo de
numeración a listas ordenadas
Los valores que puede tomar el atributo en este caso son:

1 Para ordenar por números


a Por letras del alfabeto
A Por letras mayúsculas del alfabeto
i Ordenación por números romanos en minúsculas
I Ordenación por números romanos en mayúsculas

Ejemplo: <p>Ordenamos por numeros</p>


<ol type="1">
<li>Elemento 1
<ol type="1"> <li> Elemento 2
</ol>
Uso y resultado:
Listas de definición
 Cada elemento es presentado junto con su definición. La
etiqueta principal es <dl> y </dl> (definition list). La
etiquetas del elemento y su definición son <dt>
(definition term) y <dd> (definition definition)
respectivamente.

<p>Diccionario de la Real El efecto producido:


Academia</p>
<dl> Diccionario de la Real Academia
<dt>Brujula Brujula
<dd>Señórula montada en una Señórula montada en una
escóbula escóbula
<dt>Oreja Oreja
<dd>Sesenta minutejos Sesenta minutejos
</dl>
Listas anidadas

<p>Ciudades del mundo</p>


<ul>
Resultado:
<li>Argentina
<ol>
Ciudades del mundo
<li>Buenos Aires
<li>Bariloche
• Argentina
</ol>
1. Buenos Aires
<li>Uruguay
2. Bariloche
<ol>
<li>Montevideo
• Uruguay
<li>Punta del Este
1. Montevideo
</ol>
2. Punta del Este
</ul>
Enlaces

 no podríamos hablar de navegante o de navegación si los


archivos HTML no estuviesen debidamente conectados
entre ellos y con el exterior de nuestro sitio por medio de
enlaces hipertexto
 Para colocar un enlace, nos serviremos de las etiquetas
<a> y </a>. Dentro de la etiqueta de apertura deberemos
especificar asimismo el destino del enlace. Este destino
será introducido bajo forma de atributo, el cual lleva por
nombre href.
La sintaxis general de un
enlace
 <a href="destino">contenido</a>

 Siendo el contenido un texto o una imagen. Es la parte de


la página que se colocará activa y donde deberemos
pulsar para acceder al enlace.
 Por su parte, destino será una página, un correo
electrónico o un archivo.
enlaces son clásicamente
agrupados del siguiente
modo:
 Enlaces internos: los que se dirigen a otras partes dentro de la
misma página.
 Enlaces locales: los que se dirigen a otras páginas del mismo
sitio web.
 Enlaces remotos: los dirigidos hacia páginas de otros sitios web.
 Enlaces con direcciones de correo: para crear un mensaje de
correo dirigido a una dirección.
 Enlaces con archivos: para que los usuarios puedan hacer
download de ficheros.

También podría gustarte