lunes, 11 de mayo de 2015

3.6 Aplicación en documento web

3.6 Aplicación en documento web

La implementación de un lenguaje es la que provee una manera de que se ejecute un programa para una determinada combinación de software y hardware. Existen básicamente dos maneras de implementar un lenguaje: Compilación e interpretación. Compilación es la traducción a un código que pueda utilizar la máquina. Los programas traductores que pueden realizar esta operación se llaman compiladores. Éstos, como los programas ensambladores avanzados, pueden generar muchas líneas de código de máquina por cada proposición del programa fuente.
Se puede también utilizar una alternativa para traducir lenguajes de alto nivel. En lugar de traducir el programa fuente y grabar en forma permanente el código objeto que se produce durante la compilación para utilizarlo en una ejecución futura, el programador sólo carga el programa fuente en la computadora junto con los datos que se van a procesar. A continuación, un programa intérprete, almacenado en el sistema operativo del disco, o incluido de manera permanente dentro de la máquina, convierte cada proposición del programa fuente en lenguaje
de máquina conforme vaya siendo necesario durante el procesamiento de los datos.

  1. Una hoja de estilo externa, esta almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
  2. Una hoja de estilo interna, está incrustada dentro de un documento HTML (Dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML se pierde. En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica específica una página Web.
  3. Un estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona. es necesario incluir el atributo STYLE.

HOJA DE ESTILO INTERNA

El siguiente código estará colocado en el head del archivo html.
<style>
body {
  background-color:#345485;
}
h1 {
  color:orange;
  font-family:'Times New Roman';
  text-align:center;
}
p {
  color:#E9EBAB;
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  text-align:center;
}
</style>

  • El código que a continuación se presenta deberá almacenarse en un archivo con extensióncss.
  • Dicho archivo será referenciado desde el head con la siguiente línea
<head>
  <link href='0306css02.css' rel='stylesheet' />
<head>

FIJAR UNA IMAGEN DE FONDO

  • El atributo background nos indica la imagen que se usara de fondo (línea 2)
  • El atributo background-attachment en fixed fija la imagen al centro de la forma (línea 3).
body {
  background: transparent url('escudoITV.png')
              no-repeat center
              background-attachment: fixed;
}
h1 {
  color:red;
  font-family:'Times New Roman';
  font-size:24px;
  font-weight:bold;
  text-align:center;
}
h2 {
  color:blue;
  font-family:Verdana, Geneva, sans-serif;
  font-size:20px;
  font-weight:bold;
  text-align:center;
}
p {  
  color:black;
  font-family:Arial, Helvetica, sans-serif;
  font-size:18px;
  text-align:center;
}

LISTAS

Mejorar la estética de las listas con CSS es fácil.
  • Estilo de listas no ordenadas: square, circle, disc (por defecto), y none
  • Estilo de listas ordenadas: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (por defecto), y none.
Los elementos de las líneas 8 y 13 definen tags que se definen solo dentro del espacio del tag izquierdo.
Por ejemplo en la línea 8 se define el estilo de los parrafos dentro de las listas ordenadas.
Mientras que la línea 13 define el estilo de los elementos de las listas ordenadas.
A continuación se presentan varios ejemplos:
ol {
  font: italic 1em Georgia, Times, serif;
  list-style-position: inside;
  margin: 10px;
  padding: 10px;
}
ol.p {
  margin:0px;
  padding:3px 0px;
}
ol.li {
  background: #ffffff;
  margin-left:  40px;
  padding-left: 10px;
}
ul { 
  list-style-position: inside;
  list-style-type: circle;
}

LISTAS HORIZONTALES

Aproximación a un menú horizontal.
  • El truco consiste en flotar el elemento li a la izquierda.
  • hover aplica cuando se señala un hipervinculo (línea 9).
  • float: Toma uno de tres valores posibles left ( flotar a la izquierda ) , right ( flotar a la derecha) y none ( conservar la posición normal).
a { color:#009966;}
a:link     {text-decoration: none}
a:visited  {text-decoration: none}
a:active   {text-decoration: none}
a:hover    {
 color: red;
 font-size:24px;
 font-weight:bold;
 text-decoration: underline overline;
}
ul {
    margin: 0px auto;
    padding: 0px;
}
ul.menu li {
  border: 2px solid red;
  float: left;
  list-style: none;
  margin: 5px;
  padding: 3px 10px 3px 10px;
  text-align: left;
}
ul.rollover li{
  float: left;
  list-style: none;
  text-align: left;
}
ul.rollover a {
  display: block;
  text-decoration: none;
  padding: 3px 10px 3px 25px;
  margin: 5px;
}
ul.rollover a:hover{
 background:url(favicon.ico)
    5px 5px no-repeat;
 text-decoration: none;
}

MENÚ CON SOLAPAS

body {
  background:#fff;
  color:#000;
  margin:0;
  padding:0;
  font:x-small/1.5em Georgia,Serif;
  font-size:small;
  voice-family: '\'}\''; voice-family:inherit;
} html>body {font-size:small;}
p {
  margin:0;
  padding:1em;
  clear:both; 
}
#header {
  background:#DAE0D2 url('bg.gif') repeat-x bottom;
  font-size:93%;
  float:left;
  line-height:normal;
  width:100%;
}
#header ul {
  list-style:none;
  margin:0;
  padding:10px 10px 0;
}
#header li {
  background:url('left_both.gif') no-repeat left top;
  border-bottom:1px solid #765;
  float:left;
  margin:0;
  padding:0 0 0 9px;
}
#header a {
  background:url('right_both.gif') no-repeat right top;
  color:#765;
  display:block;
  float:left;
  font-weight:bold;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  width:.1em;
}
#header > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
  color:#333;
  }
#home #nav-home, #news #nav-news,
#products #nav-products, #about #nav-about,
#contact #nav-contact {
  background-position:0 -150px;
  border-width:0;
  }
#home #nav-home a, #news #nav-news a,
#products #nav-products a, #about #nav-about a,
#contact #nav-contact a {
  background-position:100% -150px;
  color:#333;
  padding-bottom:5px;
}
#header li:hover, #header li:hover a {
  background-position:0% -150px;
  color:#333;
}
#header li:hover a {
  background-position:100% -150px;
}

FORMULARIOS

Los formularios son una parte esencial de la interacción en Internet y con CSS es factible mejorar su estética.
Ejemplo: Observe que el formulario carece de estética
Nombre
E-mail
<body>
<form id='forma' name='forma' action='' method='post'>
<p><label for='nombre'>Nombre</label> 
   <input type='text' id='nombre' name='nombre' /></p>
<p><label for='e-mail'>E-mail</label>
   <input type='text' id='e-mail' name='e-mail' /></p>
<p><input type='submit' value='Enviar' /></p>
</form>
</body>

Ahora con una hoja de estilo vamos a darle algo de estética al formulario sin usar tablas.
Mediante la aplicación de propiedades CSS modificaremos la estética de un tag HTML en este caso label. Para este ejemplo todas las etiquetas iniciaran en un nueva línea, flotaran a la izquieda, estarán en negritas, alineadas a la izquierda, y espaciadas en forma relativa (em).
label {
   display:      block;
   float:        left;
   font-weight:  bold;
   margin-right: 0.5em;
   text-align:   left;
   width:         4.5em;
}    

Se define una clase llamada enviar. Observe que esta clase modifica el elemento input
.enviar input {
   color:        #000;
   background:   #ffa20f;
   border:       2px outset #d7b9c9
   font-weight:  bold;
   margin-left:  6em;
}   

APLICAR COLORES A LA FORMA

input {
   background: #fee3ad;
   border:     1px solid #781351;
   color:      #781351;
}

FIELDSET

La etiqueta fieldset se usa en formularios para agrupar campos que están relacionados entre sí.
Su sintaxis es <fieldset> </fieldset>.
El efecto que conseguimos es un rectángulo enmarcando el texto que esté incluido dentro de él. Su ancho por defecto será del 100%, el cual se puede modificar mediante CSS.

LEGEND

La etiqueta “legend” nos permite titular o etiquetar el conjunto de campos que están incluidos dentro de fieldset.
Legend se abre con la etiqueta <legend> y se cierra con </legend>. Por supuesto, estas dos etiquetas deben estar dentro de la etiqueta <fieldset>..
fieldset {
   border: 1px solid #781351;
   margin:auto;
   padding: 0em, 0em, 0.4em, 0.8em;
   width: 400px;
}
legend {
   background: #ffa20c;
   border: 1px solid #781351;
   color: #fff;
   padding: 2px 6px
}



FUENTE:


https://programacion1class.wordpress.com/3-6-aplicacion-en-documento-web/
 
 
https://www.youtube.com/watch?v=cDr67CVQ5GY 

3.5 Modelo de caja

3.5 Modelo de caja

 El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:
Figura 4.1 Las cajas se crean automáticamente al definir cada elemento HTML
Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde. La siguiente imagen muestra las cajas que forman la
El modelo de cajas o “box model” es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:
Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde. La siguiente imagen muestra las cajas que forman la página web de http://www.alistapart.com/ después de forzar a que todas las cajas muestren su borde:
Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes
Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
  • Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
  • Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
  • Borde (border): línea que encierra completamente el contenido y su relleno.
  • Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
  • Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
  • Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
Imagen1
imagen 3
Imagen4
Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles (cuando se requiere una precisión total), los em (para hacer diseños que mantengan las proporciones) y los porcentajes (para hacer diseños líquidos o fluidos).
El siguiente ejemplo añade un margen izquierdo al segundo párrafo:
.destacado { margin-left: 2em; }
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit. Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum, laoreet non, tincidunt a, viverra sed, tortor.</p>
<p class=”destacado”>Vestibulum lectus diam, luctus vel, venenatis ultrices, cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non nisl tincidunt faucibus.</p>
<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt, risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>
Los márgenes verticales (margin-top y margin-bottom) sólo se pueden aplicar a los elementos de bloque y las imágenes, mientras que los márgenes laterales (margin-left y margin-right) se pueden aplicar a cualquier elemento.


FUENTES:

http://es.slideshare.net/search/slideshow?searchfrom=header&q=modelo+de+caja

https://www.youtube.com/watch?v=s2Yi8WUQLBw 

3.4 Tipos de medios

3.4 Tipos de medios 

HTML permite a los autores diseñar documentos que saquen partido de las características de los medios en los que el documento vaya a ser representado (p.ej., pantallas gráficas, pantallas de televisión, dispositivos de mano, navegadores basados en voz, dispositivos táctiles Braille, etc.). Al especificar el atributo media, los autores permiten a los agentes de usuario cargar y aplicar las hojas de estilo de manera selectiva.
Las siguientes declaraciones de ejemplo se aplican a elementos H1. Cuando se proyecten en una reunión de negocios, todos ellos aparecerán en azul. Cuando se impriman, aparecerán centrados. <HEAD> <STYLE type="text/css" media="projection"> H1 { color: blue } </STYLE> <STYLE type="text/css" media="print"> H1 { text-align: center } </STYLE> Este ejemplo añade efectos de sonido a los vínculos para su uso en salidas por voz: <STYLE type="text/css" media="aural"> A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} </STYLE> </HEAD> El control de medios es particularmente interesante cuando se aplica a hojas de estilo externas, ya que los agentes de usuario pueden ahorrar tiempo si obtienen de la red únicamente aquellas hojas de estilo que se apliquen el dispositivo actual. Por ejemplo, los navegadores basados en voz pueden evitar la descarga de hojas de estilo diseñadas para la representación visual. Hay dos maneras de especificar las hojas de estilos dependientes de los medios.
Una de las características más importantes de las hojas de estilos CSS es que permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras, móviles, proyectores, etc.
  • Además, CSS define algunas propiedades específicamente para determinados medios, como por ejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de voz para los medios de audio. La siguiente tabla muestra el nombre que CSS utiliza para identificar cada medio y su descripción
tabla
Los medios más utilizados actualmente son screen (para definir el aspecto de la página en pantalla) y print (para definir el aspecto de la página cuando se imprime), seguidos de handheld (que define el aspecto de la página cuando se visualiza mediante un dispositivo móvil).
Además, CSS clasifica a los medios en diferentes grupos según sus características. La siguiente tabla resume todos los grupos definidos en el estándar:
  • Medios definidos con las reglas de tipo @media
Las reglas @media son un tipo especial de regla CSS que permiten indicar de forma directa el medio o medios en los que se aplicarán los estilos incluidos en la regla. Para especificar el medio en el que se aplican los estilos, se incluye su nombre después de @media. Si los estilos se aplican a varios medios, se incluyen los nombres de todos los medios separados por comas.
A continuación se muestra un ejemplo sencillo:
@media print { body { font-size: 10pt } }
@media screen { body { font-size: 13px } }
@media screen, print { body { line-height: 1.2 } }
El ejemplo anterior establece que el tamaño de letra de la página cuando se visualiza en una pantalla debe ser 13 píxel. Sin embargo, cuando se imprimen los contenidos de la página, su tamaño de letra debe ser de 10 puntos. Por último, tanto cuando la página se visualiza en una pantalla como cuando se imprimen sus contenidos, el interlineado del texto debe ser de 1.2 veces el tamaño de letra del texto.
  • Medios definidos con las reglas de tipo @import
Cuando se utilizan reglas de tipo @import para enlazar archivos CSS externos, se puede especificar el medio en el que se aplican los estilos indicando el nombre del medio después de la URL del archivo CSS:
A continuación se muestra un ejemplo sencillo:
@import url(“estilos_basicos.css”) screen;
@import url(“estilos_impresora.css”) print;
Las reglas del ejemplo anterior establecen que cuando la página se visualiza por pantalla, se cargan los estilos definidos en el primer archivo CSS. Por otra parte, cuando la página se imprime, se tienen en cuenta los estilos que define el segundo archivo CSS. Si los estilos del archivo CSS externo deben aplicarse en varios medios, se indican los nombres de todos los medios separados por comas. Si no se indica el medio en una regla de tipo @import, el navegador sobreentiende que el medio es all, es decir, que los estilos se aplican en todos los medios.
  • Medios definidos con la etiqueta
Si se utiliza la etiqueta <link> para enlazar los archivos CSS externos, se puede utilizar el atributomedia para indicar el medio o medios en los que se aplican los estilos de cada archivo:
<link rel=”stylesheet” type=”text/css” media=”screen” href=”basico.css” />
<link rel=”stylesheet” type=”text/css” media=”print, handheld” href=”especial.css” />
En este ejemplo, el primer archivo CSS se tiene en cuenta cuando la página se visualiza en la pantalla (media=”screen”). Los estilos indicados en el segundo archivo CSS, se aplican al imprimir la página (media=”print”) o al visualizarla en un dispositivo móvil (media=”handheld”), como por ejemplo en un iPhone.
Si la etiqueta <link> no indica el medio CSS, se sobreentiende que los estilos se deben aplicar a todos los medios, por lo que es equivalente a indicar media=”all”.
Comentarios
  • CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos.

3.3 Selectores

3.3 Selectores


Los selectores identifican a un elemento dentro de la página Web para luego poder definir sus propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas usadas en HTML (BODY, P, CODE, TABLE, UL, etc.) hasta complejas combinaciones que permiten un juego muy amplio de selecciones dentro de la página. El conocimiento en profundidad de los distintos selectores es uno de los aspectos más complejos del lenguaje de las Hojas de Estilo y también el que nos permite sacar el máximo provecho de las CSS. Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas de Estilo, pero los selectores que se pueden definir con estos programas son sólo los más elementales. La complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier herramienta y es ahí donde los diseñadores deberán apelar a sus propios recursos. En esta sección se explican los llamados selectores simples.El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
  • [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamadonombre_atributo, independientemente de su valor.
  • [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo con un valor igual a valor.
  • [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a valor.
  • [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
A continuación se muestran algunos ejempEl último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
  • [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamadonombre_atributo, independientemente de su valor.
  • [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo con un valor igual a valor.
  • [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a valor.
  • [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
A continuación se muestran algunos ejempEl último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
  • [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamadonombre_atributo, independientemente de su valor.
  • [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo con un valor igual a valor.
  • [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a valor.
  • [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
A continuación se muestran algunos ejemplos de estos tipos de selectores:
/* Se muestran de color azul todos los enlaces que tengan 
   un atributo "class", independientemente de su valor */
a[class] { color: blue; }
 
/* Se muestran de color azul todos los enlaces que tengan 
   un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
 
/* Se muestran de color azul todos los enlaces que apunten 
   al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
 
/* Se muestran de color azul todos los enlaces que tengan 
   un atributo "class" en el que al menos uno de sus valores
   sea "externo" */
a[class~="externo"] { color: blue; }

FUENTES:
http://www.prograweb.com.mx/pweb/0303Selectores.php

https://www.youtube.com/watch?v=rps1MC-XdEY


3.2 Sintaxis

3.2 Sintaxis

El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendrá que presentar el texto y otros elementos en la página.
La etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> Un cierre de tipo </etiqueta>


•CSS permite separar los contenidos de la pagina y la información sobre su aspecto. En le ejemplo anterior, dentro de la propia pagina HTML se crea una zona especial en la que se incluye toda la información relacionada con los estilos de la pagina.

•Utilizando CSS, se puede establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los contenidos con etiquetas <font>. Como se vera mas adelante, la etiqueta <style> crea una zona especial donde se incluyen todas las reglas CSS que se aplican en la pagina.

•Los estilos se definen en una zona especifica del propio documento HTML.

Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (solo dentro de la sección <head>).









Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:

•Rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la pagina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
•Type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.
•Href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
•Media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Mas adelante se explican en detalle los medios CSS y su funcionamiento.
Cuando se habla de la sintaxis de un lenguaje se trata de un elemento que se le conoce como etiqueta, la cual alberga instrucciones especificas del lenguaje de programación, estas señalizaciones se determinan
encapsulando las palabras reservadas entre un símbolo de mayor y uno de menor que se ubican al principio y al final de la palabra respectivamente. Las etiquetas funcionan para instrucciones como:
• Letras cursivas, negritas, subrayadas
• Alineación del texto
• Salto de línea
• Salto de párrafo
• Inserción de nombre de pagina (titulo)
• Inicio y final del cuerpo del documento
• Etc.



4.3 Manipulacion de Objetos

4.3 Manipulacion de Objetos



La manipulación de objetos sigue los mismos principios que en el lenguaje de programación que se esté utilizando. Una de las características de estos objetos es la función para la cual están diseñados, de hecho la mayoría de las ocasiones tienen más de una función. En JavaScript, muchas funciones para cada uno de los objetos, incluyendo el navegador y la ventana que lo contiene, han sido definidas previamente; adicionalmente, el usuario puede definir funciones de acuerdo a sus necesidades, por ejemplo el código: function comeLaLetraA(Texto){ var TextoNuevo = ""; while(letras en el Texto recibido){ //lee la siguiente letra //si esta letra no es «a» añádela al nuevo texto.
} return TextoNuevo; } Añade una nueva función al documento utilizado para crear una página web
Shady GroveAeolian
Over the River, CharlieDorian




La principal utilidad de JavaScript en el manejo de los
formularios es la validacion de los datos introducidos por los
usuarios. Antes de enviar un formulario al servidor, se
recomienda validar mediante JavaScript los datos insertados por
el usuario. De esta forma, si el usuario ha cometido alg?n error al
rellenar el formulario, se le puede notificar de forma instant?nea,
sin necesidad de esperar la respuesta del servidor.
A continuaci?n se muestra el c?digo JavaScript b?sico necesario
para incorporar la validaci?n a un formulario:

<form action="" method="" id="" name="" onsubmit="return
validacion()"> ... </form>

Y el esquema de la funci?n validacion() es el siguiente:

function validacion()

{

if (condicion que debe cumplir el primer campo del formulario)

{ // Si no se cumple la condicion...

alert('[ERROR] El campo debe tener un valor de...');

return false;

}

// Si el script ha llegado a este punto, todas las condiciones

// se han cumplido, por lo que se devuelve el valor true

return true;

}
Validar que se ha seleccionado una opcion de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista
desplegable. El siguiente codigo JavaScript permite conseguirlo:
indice = document.getElementById("opciones").selectedIndex;

if( indice == null || ?ndice == 0 )

{ return false; }

<select id="opciones" name="opciones">

<option value="">- Selecciona un valor -</option>

<option value="1">Primer valor</option>

<option value="2">Segundo valor</option>

<option value="3">Tercer valor</option>

</select>
Validar que se ha seleccionado una opcion de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista
desplegable. El siguiente codigo JavaScript permite conseguirlo:
indice = document.getElementById("opciones").selectedIndex;

if( indice == null || indice == 0 )

{ return false; }

<select id="opciones" name="opciones">

<option value="">- Selecciona un valor -</option>

<option value="1">Primer valor</option>

<option value="2">Segundo valor</option>

<option value="3">Tercer valor</option>

</select>



FUENTES:
https://drive.google.com/file/d/0B-n5pXmLDjNjNmYyYzM2ODMtZGIyZC00MjhiLTk5ZjQtMGM4OWMzZDkzOTFi/view 


http://itpn.mx/recursosisc/8semestre/programacionweb/Unidad%20IV.pdf





4.2 Elementos de Programacion

4.2 Elementos de Programacion


Cualquier acción o evento que causa un cambio
dinámico en una página web usando javascript
debe ser agrupado bajo DOM (Modelo Objeto
dinamico). Cualquier elemento HTML, pude ser
accedido o cambiado dinámicamente usando
javascript DOM.

El W3C Documento de Objeto Modelo (DOM) es
una plataforma e interface de lenguaje neutral que
brinda a los programas y scripts acceso dinámico y
actualizaciones de contenido, estructura y estilo de un
documento. El Documento Object Modelo (DOM) es
una aplicación de programa de interface (API) para
HTML válido.
Todos los elementos HTML y sus atributos pueden
ser accedidos mediante el árbol DOM. Sus contenidos
pueden ser modificados o eliminados, nuevos
elementos pueden ser creados usando DOM.
Por ejemplo, el form nombrado "ssss" en un documento.  



ESTRUCTURA DE OBJETOS


JavaScript es un lenguaje de objetos. Un objeto es un ente

abstracto que agrupa por un lado a un conjunto de propiedades que

definen al propio objeto y por otro, una serie de métodos que interactúan

sobre él (funciones o procedimientos). Un ejemplo de objeto en un

entorno de gestión de una empresa podría ser un empleado.

En JavaScript, se identifican una serie de objetos sobre los que

podremos interactuar, como las ventanas, las páginas, las imágenes, los formularios, ... Por
ejemplo, El objeto ventana tendrá, entre otras, una propiedad que sea el ancho de la ventana.
Un método (funciones en el caso de JavaScriupt) asociado a este objeto será la función que
abre una nueva ventana.
Contiene a los siguientes tres objetos:

document: agrupa las propiedades del documento actual, tales como el título, formularios,
imágenes, colores de texto o fondo, ...



history: contiene las URLs que el cliente ha visitado anteriormente.




location: propiedades de la URL de la página.



Veamos un ejemplo:

<HTML>

<HEAD>

<TITLE>Ejemplo</TITLE>

</HEAD>

<BODY BGCOLOR=“#000000” FGCOLOR=“#FFFFFF”>

<FORM NAME=“mi_formulario” ACTION=“procesa_formulario( )” METHOD=“get”>

Escribe tu texto: <INPUT TYPE=“text” NAME=“texto1” VALUE=“Hola” SIZE=25><br>

</FORM>

<CENTER>

<IMG SRC=“mi_imagen1.jpg”><IMG SRC=“mi_imagen2.jpg”>

</CENTER>

</BODY>

Veamos algunas propiedades:

document.fgColor = #FFFFFF

document.bgColor = #000000

document.title = Ejemplo

location.href = www.iua.upf.es/~tnavarrete/ejemplo.html

location.host = www.iua.upf.es

history.length = 5

document.mi_formulario.action = procesa_formulario( )

document.mi_formulario.method = get

document.mi_formulario.texto1.name = texto1

document.mi_formulario.texto1.value = Hola


EL OBJETO LOCATION

La propiedad más importantes es:

href: indica la URL actual completa. De hecho, si no se indica propiedad alguna, se hace
referencia a href. Por ejemplo:

window.location = “http://www.upf.es” , es similar a:

window.location.href = “http://www.upf.es”

Otras propiedades indican, por ejemplo, el nombre del servidor (propiedad host) o del puerto
(propiedad port).

EL OBJETO HISTORY

Contiene una lista con las URLs que el navegador ha visitado. Las propiedades

history.current, history.next y history.previous hacen referencia a las entradas actual,
siguiente y anterior, respectivamente.

Para las demás, se puede hacer utilizando un índice; por ejemplo: history(3).

El método go permite cargar el contenido de una entrada concreta: history.go(3). en
concreto history.go(0) carga de nuevo la página actual.

EL OBJETO NAVIGATOR

El objeto navigator contiene información sobre la versión del navegador que se está
utilizando. Por ejemplo, la propiedad appName especifica el nombre del navegador,
mientras que la propiedad appVersion nos da información sobre la versión de dicho
navegador.

En cuando a sus métodos, pueden ser de interés javaEnabled que especifica si Java está
habilitado en el navegador y preference que permite ver y modificar algunas preferencias
del usuario (este último método apareció con la versión 1.2 de JavaScript).

Un caso típico del uso del objeto navigator es cuando necesitamos detectar si el browser
del usuario es uno u otro (debido a problemas de compatibilidad). El siguiente ejemplo
detecta si el navegador es un Netscape 4 o posterior:

if ((navigator.appName==’Netscape’) && (navigator.appVersion.indexOf(’Win’)>-1) &&

(parseInt(navigator.appVersion)<=4) )

alert("Tu navegador es Netscape de Windows, versión 4 o posterior")

...

También es importante hacer notar que el objeto navigator tiene dos objetos hijo, que

son Plugin y MimeType, para interactuar con los plugins y diferentes tipos

MIME.

OBJETO WINDOW

Como aspecto importante de notación, todos los métodos y propiedades asociados al objeto
window no es necesario que antepongan dicho nombre al nombre del método o propiedad.
Por ejemplo, basta escribir document.write(“hola”) en vez de window.document.write(“hola”),
o open(“hola.html”) en vez de window.open(“hola.html”).

El objeto window tiene varios métodos dedicados a crear cajas de diálogo y nuevas
ventanas. Veamos los más empleados:

El método alert abre una ventana de aviso (con sólo la opción de “Aceptar”), mientras que el
método confirm, abre una ventana de diálogo con confirmación (con dos opciones). Por otra
parte, el método open abre una ventana nueva. Los parámetros son:

window.open(“URL”,”nombre de la nueva ventana”,”parámetros auxiliares”)

los parámetros auxiliares son:

− toolbar = yes/no ( o tambíen 1/0): la barra de los botones Back, Forward, Stop, ...

− location = yes/no ( o tambíen 1/0): la barra donde se escribe la URL

− directories = yes/no ( o tambíen 1/0): la barra con What’s New, Search, ...

− status = yes/no ( o tambíen 1/0): la barra inferior de la ventana, donde se escribe el % que
se ha cargado del fichero, su peso, ...

− menubar = yes/no ( o tambíen 1/0): la barra de menús




Fuente: http://es.wikibooks.org/wiki/Programaci%C3%B3n_en_VHDL/Elementos_b%C3%A1sicos_del_lenguaje





https://www.youtube.com/watch?v=D7TrueDqyUM