Electiva I Semana 2 Clase 2 PDF

Introducción CSS
(Hoja de estilo)
Docente: Oyarbe María
CSS - Cascading Style Sheets
Hojas de Estilo en Cascada
Para Pagina Web
CSS
Es un lenguaje de estilo que define la presentación de los
documentos HTML. Por ejemplo, CSS abarca cuestiones relativas
a fuentes, colores, márgenes, líneas, altura, anchura, imágenes
de fondo.
La sintaxis básica de CSS
Doc. Oyarbe María

Para Obtener un color rojo como fondo de nuestra página web:
Usando HTML :
Se define como atributo en la etiqueta
<body bgcolor="#FF0000">
Se define Con CSS:
body {background-color: #FF0000;}
Aplicando CSS a un documento
HTML
Método 1: En línea (el atributo style)
Un modo de aplicar CSS a HTML es usando el atributo de HTML
style.
Doc. Oyarbe María

Sintaxis:
<html>
<head>
<title>Ejemplo</title> </head>
<body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p>
</body>
</html>
HTML
Método 2: Interno (la etiqueta style)
Otra forma es incluir el código CSS usando la etiqueta HTML <style>. Se
define dentro de la etiqueta <head>
Sintaxis:
Doc. Oyarbe María

<html>
<head>
<title>Ejemplo</title>
<style type="text/css"> body {background-color: #FF0000;} </style>
</head>
<body>
<p>Esta es una página con fondo rojo</p>
</body>
</html>
HTML
Método 3: Externo (enlace a una hoja de estilo)
El método es enlazar con lo que se denomina hoja de estilo
externa. Una hoja de estilo externa es sencillamente un archivo de
texto con la extensión .css.
Doc. Oyarbe María

Ejemplo Tenemos la hoja de estilo se llama style.css y está
localizada en una carpeta que se llama style. Se debe crear un
vínculo desde el documento HTML (por ejemplo, index.htm) con la
hoja de estilo (style.css). Dicho vínculo se puede crear con una
sencilla línea de código HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />

HTML
Donde la ruta a nuestra hoja de estilo aparece indicada por medio
del atributo href. Es importante conocer que la línea de código debe
insertarse en la sección de encabezado del código HTML, es decir,
entre la etiqueta <head> y </head>. De esta manera:
Doc. Oyarbe María

<html>
<head>
<title>Mi document WEB</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
HTML
Ejercicio Abre el editor de texto que utilices y crea dos archivos - un HTML y un CSS -
con el siguiente contenido:
Primer archivo HTML : Guardar con el nombre «index.html»

Es importante mencionar que index es un archivo html que actúa como pagina principal
y permite indexar otras paginas, es vital definir, ya que al momento de cargar en un
servidor siempre es solicitada la pagina principal ya que a partir de esta se activa en la
Doc. Oyarbe María

Web y se visualiza el contenido los diferentes enlaces.
<html>
<head>
<title>Mi document HTML</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Mi primera hoja de estilo</h1>
</body>
</html>
HTML
Segundo archivo CSS: Guardar como «style.css»
body {
background-color: #FF0000;
Doc. Oyarbe María

}
Ahora coloca los dos archivos en la misma carpeta. Recuerda grabar

los archivos con las extensiones correctas (".htm" y ".css",
respectivamente).
HTML
El lenguaje de hojas de estilo, aplica los estilos de manera selectiva
a elementos en documentos HTML. Por ejemplo, para
seleccionar todos los elementos de párrafo en una página HTML y
volver el texto dentro de ellos de color rojo (atributo del párrafo),
Doc. Oyarbe María

has de escribir en el archivo CSS:
p{
color: red;
}
Propiedades de CSS
Fuentes
Se describirán las siguientes propiedades CSS:
font-family
font-style
Doc. Oyarbe María

font-variant
font-weight
font-size
font
Propiedades de CSS
Familia de fuentes [font-family]
La propiedad font-family se usa para establecer una lista ordenada de
fuentes que se usarán para mostrar un elemento determinado o una
página web. Si la primera fuente de la lista no está, se seguirá probando
con la siguiente fuente hasta encontrar una fuente apropiada. Un ejemplo:
h1 {font-family: arial, verdana, sans-serif;}
Doc. Oyarbe María

h2 {font-family: "Times New Roman", serif;}
Estilo de la fuente [font-style]

La propiedad font-style define la fuente elegida bien con el valor normal,
el valor italic o el valor oblique. En el ejemplo que sigue, todos los
encabezados marcados con <h2> aparecerán en cursiva. Ejemplo:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;
font-style: italic;}
Propiedades de CSS
Variante de fuente [font-variant]
La propiedad font-variant se usa para elegir entre las variantes normal o
small-caps(versalita) de una fuente. La fuente a la que se aplica el valor
small-caps es una fuente que usa letras en mayúscula inicial más
pequeñas, en vez de letras en minúscula. Ejemplo: Si la propiedad font-
variant se establece con el valor small-caps y no hay disponible, el
navegador probablemente mostrará el texto en mayúscula.
Doc. Oyarbe María

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Peso de la fuente [font-weight]

La propiedad font-weight describe qué intensidad o "peso" en negrita
debería tener la fuente. Toda fuente puede tener los valores normal o
bold. Ejemplo:
p {font-family: arial, verdana, sans-serif;}
ul {font-family: arial, verdana, sans-serif;
font-weight: bold;}
Propiedades de CSS
Tamaño de la fuente [font-size]
El tamaño de la fuente se establece por medio de la propiedad font-size.
Para el tamaño de las fuentes, existen muchas unidades diferentes (por
ejemplo, píxeles y porcentajes) entre las que elegir.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
Doc. Oyarbe María

h3 {font-size: 120%;}
p {font-size: 1em;}
Las unidades 'px' y 'pt' establecen el tamaño de la fuente de forma
absoluta, mientras que '%' y 'em' permiten al usuario ajustar el tamaño de
la misma según considere oportuno.
Propiedades de CSS
Combinación de propiedades [font]
Si usamos la propiedad abreviada font es posible incluir todas las
propiedades diferentes relativas a fuentes en una única propiedad. Por
ejemplo, cuatro líneas de código para describir las propiedades de fuente
para la etiqueta <p>:
p{
font-style: italic;
Doc. Oyarbe María

font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usando la propiedad abreviada, el código se puede simplificar así:
p{
font: italic bold 30px arial, sans-serif;
}
El orden de los valores para la propiedad font es: font-style | font-variant |
font-weight | font-size | font-family
Propiedades de CSS
Texto
Formatear y añadir estilo al texto es un tema clave para cualquier
diseñador web. Describiremos las siguientes propiedades:
Doc. Oyarbe María

text-indent
text-align
text-decoration
letter-spacing
text-transform
Propiedades de CSS
Sangría del texto [text-indent]
La propiedad text-indent permite añadir un toque de elegancia a los párrafos de texto al aplicar
sangría a la primera línea de dicho párrafo. En el ejemplo siguiente se ha aplicado una sangría de
30px a todos los párrafos de texto marcados con la etiqueta <p>:
p{
text-indent: 30px;
}
Alineación del texto [text-align]
Doc. Oyarbe María

La propiedad CSS text-align establece la alinación. Los valores posibles de esta propiedad son:
left(texto alineado a la izquierda), right(texto alineado a la derecha) o center (texto con alineación
centrada). Además, el valor justify(alineación justificada) alargará cada línea de forma que los
márgenes izquierdo y derecho estén justificados. Ejemplo
ul {
text-align: right;
}
ol {
text-align: center;
}
p{
text-align: justify;
}
Propiedades de CSS
Decoración del texto [text-decoration]
La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al texto.
Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el
ejemplo siguiente, el elemento <h1>aparecerá subrayado, el elemento <h2> aparecerá con un
subrayado por encima del texto y el elemento <h3> tendrá el texto tachado.
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
Doc. Oyarbe María

h3 { text-decoration: line-through; }
Espaciado entre caracteres [letter-spacing]

El espaciado entre los caracteres de texto se puede especificar usando la propiedad letter-
spacing. El valor de esta propiedad corresponde, sencillamente, al ancho deseado. Por
ejemplo, si queremos un espaciado de 3px entre los caracteres de un párrafo de texto <p>
y6px entre los caracteres de los encabezados <h1>, usaríamos el siguiente código:
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
}
Propiedades de CSS
Transformación del texto [text-transform]
La propiedad text-transform controla la escritura en mayúsculas de un texto.
Puedes elegir entre los valores capitalize, uppercase olowercase, sin importar
cómo aparece el texto original en el código HTML. Un ejemplo podría ser la
palabra "título" que se puede presentar al usuario como "TÍTULO" o "Título".
Los valores de la propiedad text-transform mencionados en el párrafo anterior:
capitalize Pone en mayúscula la primera letra de cada palabra. Por ejemplo,
"carmen" aparecerá como "Carmen". uppercase Convierte todas las letras a
Doc. Oyarbe María

mayúscula. Por ejemplo, "carmen" aparecerá como "CARMEN". lowercase
Convierte todas las letras a minúscula. Por ejemplo, "CARMEN" aparecerá
como "carmen". none No se realiza transformación alguna; el texto se presenta
tal como aparece en el cógido HTML. Como ejemplo se desea que iníciales de
los nombres aparezcan en mayúscula y los títulos con todos los caracteres en
mayúscula.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Propiedades de CSS
Colores y fondos
Se explicarán las siguientes propiedades CSS:
color
background-color
Doc. Oyarbe María

background-image
background-repeat
background-attachment
background-position
background
Propiedades de CSS
Color de primer plano: la propiedad 'color'
La propiedad color describe el color de primer plano de un elemento. Por ejemplo, todos los títulos
de un documento aparezcan con color rojo oscuro.
h1 {
color: #ff0000;
}
Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior:
#ff0000; o se pueden usar los nombres de los colores: "red" (rojo).
Doc. Oyarbe María

La propiedad 'background-color'
La propiedad background-color describe el color de fondo de los elementos. El elemento <body>
contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una
página, la propiedad background-color debería aplicarse al elemento<body>.También se pueden
aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo
se aplicarán colores a los elementos <body> y <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000; background-color: #FC9804;
}
Propiedades de CSS
Imágenes de fondo [background-image]
La propiedad CSS background-image se usa para insertar una imagen de fondo. Para
insertar la imagen a utilizar como imagen de fondo de una página web, aplica
sencillamente la propiedad background-image al elemento <body> y especifica la
localización de la imagen.
body {
background-image: url("yyyyy.gif");
Doc. Oyarbe María

}
h1 {
color: #990000;
background-color: #FC9804;
}
Ubicación de imagen: se especifica la localización de la imagen: url("yyyyy.gif"). Esto

significa que la imagen está en la misma carpeta que la hoja de estilo. También puedes
hacer referencia a imágenes en otras carpetas usando url("../imagenes/yyyyy.gif") o
incluso imágenes de internet si indicas la dirección completa del archivo:
url("http://www.html.net/butterfly.gif").
Propiedades de CSS
Repetir la imagen de fondo [background-repeat]
Por defecto, la imagen se repete tanto en el eje horizontal como en el
vertical para ocupar toda la pantalla La propiedad background-repeat
controla este comportamiento. La tabla siguiente resume los cuatro
valores diferentes para la propiedad background-repeat.
Doc. Oyarbe María

Background-repeat: repeat-x La imagen se repite en el eje horizontal
background-repeat: repeat-y La imagen se repite en el eje vertical
background-repeat: repeat La imagen se repite en el eje horizontal
y vertical
background-repeat: no-repeat La imagen no se repite
Propiedades de CSS
Por ejemplo, para evitar que se repita un imagen de fondo, el código
que tendríamos que usar sería el siguiente:
body {
background-image: url("butterfly.gif");
Doc. Oyarbe María

background-repeat: no-repeat;
}
h1 {
color: #990000;
}
Propiedades de CSS
Fijar la imagen de fondo [background-attachment]
La propiedad background-attachment especifica si una imagen está
fija o se desplaza con el elemento contenedor. Una imagen de fondo
fija no se moverá con el texto cuando el lector se desplace por la
página, mientras que una imagen de fondo no fija se desplazará con
Doc. Oyarbe María

el texto de la página web. Los valores siguiente resume los dos
valores posibles para la propiedad background-attachment.
Background-attachment: scroll
La imagen se desplaza con la página - no está fija
Background-attachment: fixed
La imagen está fija
Propiedades de CSS
Por ejemplo, el siguiente código fijará la imagen de fondo.
body {
Doc. Oyarbe María

background-attachment: fixed;
}
h1 {
color: #990000;
}
Propiedades de CSS
Ubicación de la imagen de fondo [background-position]
Por defecto, una imagen de fondo se posiciona en la esquina
superior izquierda de la pantalla. La propiedad background-position
te permitirá cambiar este valor por defecto y posicionar la imagen
de fondo en cualquier lugar de la pantalla. Hay muchas formas
diferentes de establecer los valores de la propiedad background-
Doc. Oyarbe María

position. Sin embargo, todas ellas se formatean como un conjunto
de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la
imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles
del margen superior del la ventana del navegador. Las coordenadas
se pueden indicar como porcentajes del ancho de la pantalla, como
unidades fijas (píxeles, centímetros, etc.) o puedes usar las palabras
"top" (superior), "bottom" (inferior), "center" (centro), "left"
(izquierda) y "right" (derecha). El modelo siguiente ilustra cómo
funciona el sistema:
Propiedades de CSS
El modelo siguiente ilustra cómo funciona el sistema: La tabla siguiente
proporciona varios ejemplos.
background-position: 2cm 2cm

La imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen
Doc. Oyarbe María

background-position: 50% 25%
La imagen se posiciona en el centro de la página y un 25 % del margen
superior de la misma
background-position: top right

La imagen se posiciona en la esquina superior derecha de la página
superior de la página
Propiedades de CSS
El ejemplo de código siguiente posiciona la imagen de fondo en la
esquina inferior derecha:
body {
Doc. Oyarbe María

background-position: right bottom; }
h1 {
color: #990000;
}
Propiedades de CSS
Combinación de propiedades [background]
La propiedad background es una forma abreviada de todas las propiedades
de fondo listadas anteriormente. Con la propiedad background se pueden
comprimir varias propiedades, y así escribir una hoja de estilo de forma
más abreviada, lo que facilitará su lectura. Por ejemplo, observa estas cinco
líneas de código:
Doc. Oyarbe María

background-image: url("yyyyy.gif");
background-position: right bottom;
Usando background se puede lograr el mismo resultado con una única

línea de código:
background: #FFCC66 url("yyyyy.gif") no-repeat fixed right bottom;

Propiedades de CSS
El orden en que deben aparecer las propiedades individuales es el
siguiente:
[background-color] | [background-image] | [background-repeat]|
[background-attachment] |[background-position]
Si se omite alguna propiedad, de forma automática ésta se establecerá con
Doc. Oyarbe María

su valor por defecto. Por ejemplo, si se omiten las propiedades
background-attachment y background-position
del ejemplo anterior, quedando el código de la siguiente manera:

background: #FFCC66 url("butterfly.gif") no-repeat;
Estas dos propiedades que no se especifican se establecerían, sin más, con

sus valores por defecto, que, como ya sabes, son scroll y top left.
Propiedades de CSS
El orden en que deben aparecer las propiedades individuales es el
siguiente:
[background-color] | [background-image] | [background-repeat]|
[background-attachment] |[background-position]
Si se omite alguna propiedad, de forma automática ésta se establecerá con
Doc. Oyarbe María

su valor por defecto. Por ejemplo, si se omiten las propiedades
background-attachment y background-position
del ejemplo anterior, quedando el código de la siguiente manera:

background: #FFCC66 url("butterfly.gif") no-repeat;
Estas dos propiedades que no se especifican se establecerían, sin más, con

sus valores por defecto, que, como ya sabes, son scroll y top left.
Ejercicio
Archivo 1: código HTML (index.html) Archivo 2: código CSS (estilo.css)
<!DOCTYPE<html> body { background-color: #fff;
<head> background-image: url("pcomunidad.png");
<title> Mi Web Comunitaria</title> background-repeat: repeat-x;
<link rel="stylesheet" type="text/css" href="estilo.css" /> background-position: top;
</head> font-family: Georgia, arial, sans-serif;
<body> }
<h1>Proyectos Comunitarios</h1> h1 { background-color: #035;
<h2> Ofrecemos todos los Proyectos Comunitarios</h2> text-align: center;
<BR><BR><BR> color:red;
<p> A continuación se listan los Proyectos Comunitarios font-family: Colonna MT;
aprobados hasta el momento. font-size:46px
Si desea realizar su Servicio Comunitario en alguno de esos }
Doc. Oyarbe María

proyectos, contacte al Tutor que se especifica en el mismo para averiguar la
h2 { text-align: center;
posibilidad de participar en él.
color:blue;
<BR> <BR>
font-family: Colonna MT;
<h1>Bienvenidos, conoce los Proyectos Comunitarios</h1>
font-size:26px
<h3>Menu Principal</h3>
}
<ul>
h3 { text-align: left;
<li>Inicio
color:blue;
<li>Sectores
font-family: Colonna MT;
<ol>
font-variant: small-caps;
<li>Sector Rojo
font-size:26px
<li>Sector Azul
}
<li>Sector Verde
hr { color:#035;
</ol>
size:1;
<li>Proyectos
}
<ol type="a">
p{ text-align: justify;
<li>Luz
text-indent: 30px;
<li>Agua
font-family: Comic Sans MS;
font-size:22px
</ol>
}
ul { color: purple;
</ul>
text-decoration: underline;
<hr>
font-size:20px
<footer> Copyright 2020 <br> Creada por: xxxxxxxxxxxxxxx.
</footer> }
</body> footer { font: italic bold 12px Lucida Calligraphy, arial, sans-serif;
</html> text-align: center;
color:red;
}
Ejercicio
Doc. Oyarbe María

Evaluación:
Porcentaje 25%
Puntos: 5
Será evaluada el desarrollo de la pagina web (avance del proyecto o temática
seleccionada), es decir los objetivos vistos en clase
Entrega por Classroom
Fecha de entrega: Indicada por el docente. Sino la entrega queda como objetivo no
alcanzado.
Actividad a evaluar
• Selección de Tema libre de Proyecto (deporte, cultura,
recreativo, gastronómico, publicitario, comunitario, entre
otros)
• Estructura contenido: diseño, organización, contenidos y
apariencia
Doc. Oyarbe María

• Hacer uso de los elementos que conforma o define la
estructura, contenido y apariencia (etiquetas, atributos y CSS)
• Es mucho lo que podemos lograr en el desarrollo de una
pagina web para lograr vistosidad, apariencia y mejor acceso
interactivo para el usuario, no se queden solo con esta
información. Realiza investigación adicional sobre etiqueta
atributos y propiedades css (solo avanzar de acuerdo a la
contenido visto en clase)
Pagina Web
Doc. Oyarbe María

IMÁGENES Y MULTIMEDIA
Imágenes
Uno de los elementos más utilizados en una página web son las
imágenes, tanto para mostrar información como parte del propio
diseño de la página. Pueden ser fotografías o gráficos creados por
programas como Photoshop. Básicamente, en una páginas web se
utiliza tres tipos de imágenes: GIF, PNG y JPG.
Ahora bien, cuando se desea introducir una imagen, se hace con la
etiqueta <img />. Los atributos que como mínimo ha de tener esta
etiqueta son los siguientes:
<img src="ubicación/imagen.gif" alt="texto alternativo" />
nombre de la imagen
Imágenes
Lo primero es saber dónde está la imagen, su ubicación, que es lo que debe
contener el atributo «src». Es por ello, que en una página web es casi
imprescindible referenciar a otros archivos, ya sea al utilizar una imagen, al
enlazar con otra web, o al llamar a un archivo javascript o a una hoja de
estilo. Se emplean:
Direcciones absolutas: es aquella que incluye toda la ruta hasta el archivo,

incluido el protocolo http. Se utiliza siempre que queremos referenciar
archivos que no estén en nuestro sitio. Por Ejemplo:
http://www.laboratorio.es/illustra/graficos/homer_final.gif,
http://www.laboratorio.es/index.htm.
Imágenes
Direcciones relativas: es aquella que se expresa a partir de una ubicación conocida,
dentro de un mismo sitio.
Relativas a un archivo: Por ejemplo, tenemos una página, en
www.misitio/webs/pagina1.htm. Para referenciar a la página
www.misitio/webs/pagina2.htm con solo escribir pagina2.htm, de esta manera
indica que esta en la misma carpeta.
Ahora bien, si de la misma página, se hace referencia al archivo
www.misitio/webs/imagenes/imagen1.gif, se escribe la dirección a partir de la
carpeta en la que se encuentra, es decir, solo se escribe imagenes/imagen1.gif.
Si lo que se hace referencia está en una carpeta de nivel superior, por ejemplo el
archivo www.misitio/fondo.gif, utilizamos “..” para subir de nivel. Por lo tanto se
escribe ../fondo.gif.
Se puede combinar las dos formas para referenciar por ejemplo al archivo
www.misitio/graficos/imagen1.gif, escribiendo ../graficos/imagen1.gif.
Imágenes
Relativas al sitio: Otra opción es establecer una referencia relativa al sitio.
Para esto, se comienza la referencia al archivo con el signo /, que indica que
se empieza a buscar en la carpeta raíz del sitio.
Así, para referenciar al archivo www.misitio/webs/pagina1.htm, se puede

emplear /webs/pagina1.htm. Y esto sería válido tanto si se referencia el
archivo desde la página www.misitio/webs/pagina2.htm o si se hace desde
www.misitio/paginas/personal/ventas/inicio.htm o de cualquier otra
página dentro del sitio. Un inconveniente de este tipo de direcciones
relativas es que sólo funcionan si vemos la página utilizando un servidor, ya
que si abrimos un archivo local, tomará como raíz del sitio la raíz de la
unidad.
Imágenes
<img src="ubicacion/imagen.gif" alt="texto alternativo" />
Lo primero es saber dónde está la imagen, su ubicación, que es lo que debe

contener el atributo src:
Si la imagen está en una página Web, basta con saber su ruta, por ejemplo
http://www.laboratorio/logo1.jpg. Esto es lo que se llama una dirección
absoluta.
Si la imagen está en el mismo sito que la página web, se puede utilizar una
dirección relativa, como imagen.gif o imagenes/imagen.gif. Cuando el
navegador no encuentre la imagen ubicada en scr no podrá mostrar la
imagen. En su lugar puede mostrar una imagen de error.
En segundo aspecto es el atributo alt, ya que ésa es su función: mostrar un
texto alternativo cuando no se puede mostrar la imagen. Esto es
importante para la accesibilidad a la web. Si resulta que existen imágenes
que hacen de botón para ir a partes de nuestra web, como Inicio o Galería.
Si no se coloca el atributo alt, y no se muestran las imágenes, el usuario no
podrá navegar por nuestro sitio.
Imágenes
Otros atributos pocos obligatorios, height (alto) y width (ancho),
introduciendo en ellos las dimensiones de la imagen, en píxeles.
Al cargar una página, el navegador muestra primero el texto y
después las imágenes. Si conoce las dimensiones de cada
imagen, puede dejar un hueco reservado para ellas. Si no, pondrá
el texto y luego irá desplazándolo para colocar las imágenes, lo
que hará incómodo leer la página hasta que no esté totalmente
cargada.
Imágenes
Un atributo frecuente en las imágenes es title (titulo a la
imagen). Se emplea ya que al momento de posar el cursor sobre
la imagen se mostrará su valor.
Por ejemplo, para el siguiente código se muestra la siguiente

imagen:
<img src="imagenes/logo2.gif" alt="Logo" width="91"

height="41" title="El logo del UPTV" /> Los valores de
Audio
De forma general, podemos incluir en la web los siguientes tipos de Archivos
de audio.
• WAV (Wave form Audio File format): reproducción de ruidos o frases cortas.
• AU (Audio File format): se guardan con la extensión .au
• MIDI Se guardan con extensión .mid, son de pequeño tamaño, lo que los
hace idóneos para la web.
• MP3 (MPEG): desarrollado por el MPEG (Moving Picture Expert Group),
obtiene una alta compresión del sonido y una muy buena calidad.
• MOD especie de mezcla entre el formato MIDI y el formato WAV, ya que por
un lado almacena el sonido en forma de instrucciones para la tarjeta de
sonido, pero por otro puede almacenar también sonidos de intrumentos
musicales digitalizados
Cargar sonido a traves de un enlace normal en nuestras páginas, apuntando al
fichero de sonido. Como ejemplo, si queremos enlazar en nuestra página un
fichero MP3, bastaría con escribir:
<a href="sonidos/mp3.mp3" target="_blank"> Haz Click aquí para oir la

música. </a>
Audio
BGSOUND La etiqueta incorpora sonidos de fondo en una página web, sonidos que
se ejecutan automáticamente al cargarse la página. Su sintaxis general, con sus
atributos más importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
Donde:
• src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a
reproducir. La
ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el
sistema de
carpetas del servidor web o una URL completa que localice el fichero en Internet.
• loop="l" determina el número de veces (l) que se debe ejecutar el fichero de
audio. Si le
damos el valor infinite, el fichero se reproducirá indefinidamente.
• balance="b" determina el balance del sonido entre los dos altavoces del equipo, es
decir, la potencia o intensidad con que se oirá en cada uno de ellos (derecho e
izquierdo).
• volume="v" fija el volumen al que se oirá el sonido,
Ejemplo:
<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>
Audio
EMBED
Nestcape implementó esta etiqueta para incorporar ficheros de audio. Es ésta una etiqueta de carácter general, que se
usa para la inclusión en las páginas web de todos aquellos archivos ajenos al navegador y que necesitan por lo tanto la
ejecución de algún plugin para su interpretación.
La sintaxis general de la etiqueta embed es del tipo:
<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>
Y en el caso que nos ocupa, de la inclusión de ficheros de audio, los atributos podemos dividirlos en dos tipos:
Atributos referentes al sonido:
• src="ruta_fichero", que fija la ruta en la que se encuentra el fichero de audio a reproducir.
• loop="l/true/false", que determina el número de veces que se debe ejecutar el fichero de audio. Los valores
admitidos son l (número entero de veces), true (infinitas veces) y false (sólo una vez). Sólo es reconocida por Netscape
Navigator.
• playcount="n", que define el número de veces (n) que se debe ejecutar en fichero de audio en el caso de Internet
Explorer
• type="tipo_fichero", atributo importante, que declara el tipo de fichero de audio que estamos usando, con lo que el
navegador web puede ejecutar el programa o plugin adecuado para la reproducción del fichero. Puede ser audio/midi,
audio/wav, etc.
• autostart="true/false", que determina si el fichero de audio debe empezar a reproducirse por sí sólo al cargarse la
página o si por el contrario será preciso la actuación del usuario (o de código de script) para que comience la audición.
• pluginspage="URL", que establece, en caso de ser necesario un plugin especial para reproducir el fichero, la página
web donde se puede descarga el mismo. Sólo se activa en el caso de que el navegador no sea capaz de reproducir el
fichero por sí mismo, y es soportada tan sólo por Netscape Navigator.
• name="nombre", que asigna un nombre identificador (debe ser único en la página) a una etiqueta embed
determinada, con objeto de ser accedida luego por lenguajes de script.
• volume="v", que determina el volumen de reproducción del sonido, y que puede variar entre 0 y 100.
Audio
Atributos referentes a la consola:
• hidden="true/false", establece si la consola va a ser visible (false) o no (true).
• width="w", determina el ancho visible de la consola, en pixels.
• height="h", determina el alto visible de la consola, en pixels. Estos atributos son
también muy importantes, caso de que hayamos establecido hidden= "false", ya que
de su valor va a depender la correcta visulazación de la consola.
•align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbot
om", análogo al de la etiqueta IMG, define la alineación horizontal o vertical de la
consola respecto de los elementos de la página.
• hspace="hs", establece la separación horizontal, vspace="vs", que establece la
separación vertical, en pixels, entre la consola y los elementos de la página que la
rodean.
Ejemplo sin consola:
<embed src="../sonidos/mid.mid" hidden="true" type="audio/midi"
autostart="true"></embed>
Ejemplo con consola:

<embed src="../sonidos/mid.mid" hidden="false" type="audio/midi"
autostart="false" width="150" height="100"></embed>
MODELO CAJA
Modelo caja
El modelo de caja de CSS describe las cajas rectangulares que son
generadas por los elementos en la estructura del documento y
compuestas de acuerdo al modelo de formato visual. Cada caja
tiene:
• Area de contenido (ej., texto, una imagen, etc.)
• áreas circundantes opcionales de padding (Relleno)
• border(borde)
• margin (margen); el tamaño de cada área es especificado por
las propiedades que se definen abajo. Además del contenido,
cada elemento puede tener o no un borde y, además,
podemos modificar la distancia entre el borde y el límite de la
caja (margin) y la distancia entre ese borde y el comienzo del
contenido (padding).
Modelo caja
El siguiente diagrama muestra cómo se relacionan estas áreas y la
terminología usada para referirse a las partes:
Modelo caja
Bordes
Podemos agregar un borde alrededor de un elemento html, con
la propiedad border. Esta propiedad engloba las tres propiedades
del borde:
color, un color RGB. Se define con la propiedad border-color.
Por ejemplo, border-color: blue; o border-color: #F37760;.
grosor, normalmente expresado en px. se define con la propiedad
border-width.
Por ejemplo, border-width: 2px;.
thin Un borde fino.
medium Un borde mediano.
thick Un borde grueso.
Ejemplo:
H1 { border-width: thin}
Modelo caja
Estilo, es uno de los aspecto sque puede tener el borde. Puede ser
cualquiera de los siguientes, que definimos con la propiedad
border-style: none;
none: ningun borde
dotted: punteado.
dashed: línea discontinua.
solid: línea continua.
double: línea doble.
groove: tipo de relieve.
ridge: tipo de relieve.
inset: tipo de relieve.
outset: tipo de relieve.
none: empleado para indicar que no habrá borde
Por lo tanto, podríamos definir el borde de un elemento de la siguiente
manera:
<p style="border-color:#009933; border-width: 3px; border-
style:double;">bordes</p>
Modelo caja
En este caso, podemos resumirlo con el atributo border, siguiendo el
formato border: color grosor estilo;
ejemplo border:#009933 3px double;.
En una hoja estilo
img {
border-width: 2px;
border-style: solid;
border-color: #007000;
}
Cada elemento tiene cuatro bordes, que podríamos definir de forma
independiente, como border-top, border-right, border-bottom y border-
left. A su vez, para cada uno de ellos podemos definir su color, grosor y
estilo de forma independiente, por ejemplo border-bottom-color o border-
top-width.
Ejemplo
img { border: 2px solid #007000;}
Modelo caja
Esquinas redondeadas
Traza un borde alrededor de una figura y que tenga sus esquinas
redondeadas. La propiedad que lo permite es border-radius,
acompañada de un valor numérico. Ejemplo:
img {
border: 2px solid #007000;
border-radius:25px; }
Modelo caja
Márgenes
Los elementos html tienen dos márgenes. El margen externo y el
margen interno. Ambos se refieren a l la distancia hacia uno u otro lado
con respecto al borde del elemento, a su límite, independientemente
de que el borde sea visible o no.
El margen externo se regula con la propiedad margin. El margen
exterior es la distancia mínima que habrá entre el borde exterior del
elemento y el elemento siguiente, por cada uno de sus cuatros lados.
Ejemplo:
margin: 0
margin:5px
El margen interno se regula con la propiedad padding. Se refiere a la
distancia que hay ente el borde del elemento y su contenido, por
ejemplo el texto.
padding: 0
padding:5px
padding:15px
Modelo caja
Laterales
Tanto margin, como padding y border se pueden emplear para
modificar laterales de una caja, con independencia de los demás.
Añadiendo a cada uno de ellos la variación -left (izquierda), -right
(derecha), -top (arriba) o -bottom (abajo) conseguimos que sólo
afecte al valor o valores indicados.
margin-top:40px;
padding-left: 5px;
padding-right:5px;
border-top-width: 2px
Evaluación II:
Doc. Oyarbe María

Porcentaje 25%
Puntos: 5
Actividad Practica II:

Será evaluada el desarrollo de la pagina web el cual se evalúa de acuerdo a las
actividades asignadas, el avance del proyecto final (Pagina Web) y objetivo visto en
clase, una vez culminada la actividad la entrega es vía correo electrónico (Subir archivo
a Classroom).
Fecha : será indicada por Classroom o Telegram
Sin prorroga. Sino entrega en fecha queda objetivo no alcanzado.
Actividad practica II
El proyecto en construcción debe contener lo visto en clase e
investigaciones realizadas:
• Un tema bien definido(deporte, cultura, recreativo,
gastronómico, publicitario, comunitario, entre otros)
• Estructura contenido : diseño, organización, contenidos y
apariencia
• Hacer uso de los elementos que conforma o define la
estructura, contenido y apariencia (etiquetas, atributos y CSS)
• Recuerde una pagina web esta constituida por varias paginas.
• Hacer uso de CSS e investigar mas sobre los atributos de cada
elemento
• Elementos multimedia (Imagen, audio y video) y elementos
del modelo caja
Confía en tu talento y creatividad, para diseñar
Doc. Oyarbe María

Tu Pagina Web
Tendrás éxito.

Electiva I Semana 2 Clase 2 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Electiva I Semana 2 Clase 2 PDF

Cargado por

Copyright:

Formatos disponibles

Introducción CSS

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

<link rel="stylesheet" type="text/css" href="style/style.css" />

Doc. Oyarbe María

Primer archivo HTML : Guardar con el nombre «index.html»

Doc. Oyarbe María

Doc. Oyarbe María

Ahora coloca los dos archivos en la misma carpeta. Recuerda grabar

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

Estilo de la fuente [font-style]

Doc. Oyarbe María

Peso de la fuente [font-weight]

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

Alineación del texto [text-align]

Doc. Oyarbe María

Doc. Oyarbe María

Espaciado entre caracteres [letter-spacing]

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

Ubicación de imagen: se especifica la localización de la imagen: url("yyyyy.gif"). Esto

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

background-position: 2cm 2cm

Doc. Oyarbe María

background-position: top right

Doc. Oyarbe María

Doc. Oyarbe María

Usando background se puede lograr el mismo resultado con una única

background: #FFCC66 url("yyyyy.gif") no-repeat fixed right bottom;

Si se omite alguna propiedad, de forma automática ésta se establecerá con

Doc. Oyarbe María

del ejemplo anterior, quedando el código de la siguiente manera:

Estas dos propiedades que no se especifican se establecerían, sin más, con

Si se omite alguna propiedad, de forma automática ésta se establecerá con

Doc. Oyarbe María

del ejemplo anterior, quedando el código de la siguiente manera:

Estas dos propiedades que no se especifican se establecerían, sin más, con

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

Doc. Oyarbe María

<img src="ubicación/imagen.gif" alt="texto alternativo" />

Direcciones absolutas: es aquella que incluye toda la ruta hasta el archivo,

Así, para referenciar al archivo www.misitio/webs/pagina1.htm, se puede

Lo primero es saber dónde está la imagen, su ubicación, que es lo que debe

Por ejemplo, para el siguiente código se muestra la siguiente

<img src="imagenes/logo2.gif" alt="Logo" width="91"

<a href="sonidos/mp3.mp3" target="_blank"> Haz Click aquí para oir la

Ejemplo con consola:

Doc. Oyarbe María

Actividad Practica II: