Para que no te pienses q hacer una pagina web es soplar y hacer botella, les dejo para que estudien la modificación del html mediante javascript espero que les sirva en algun momento de su vida. Es una breve explicación de un lenguaje importante a tener en cuenta antes de hacer una pagina (lo digo por experiencia: nunca pude terminar mi pag. 
) bueno acá les va:
Para entrar en calor:
Html es esa cosa q muchos no conocen por ejemplo cuando apretan letra en negrita y les sale la b y al final la /b eso es un claro ej. o cuando pones insertar link y te sale url=http etc... eso es un ejemplo de html en taringa mediante botones programados por los creadores...
Para entender su significado: ;
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el 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 por corchetes 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).
Ahora empezamos con lo difícil:
Javascript nos permite modificar los elementos HTML de una pagina, por ejemplo, podemos cambiar de forma dinámica las características del body (color de fondo, tipo de letra) o de un elemento div entre otros.
En el primer ejemplo, crearé un script el cual mediante un formulario con un campo de texto permita cambiar el color de fondo de la pagina por el color que seleccionemos en un formulario.
<head>
<script type="text/javascript">
function modificarElemento() {
document.bgColor = document.formulario.color.value;
}
</script>
</head>
<body>
<form name="formulario">
<input type="button" value="Modificar Color" onclick="modificarElemento()">
<input name="color" type="text">
</form>
</body>
Éste código está dividido en dos partes, por un lado tenemos en el head el codigo Javascript con la función que hará el cambio de color, por otro lado tenemos en el body un formulario con un boton y un campo de texto, al apretar el boton se cambiará el color de fondo de la página por el color que hayamos escrito en el campo de texto.
El código javascript
Éste código únicamente tiene una función javascript. Podemos ver dentro de la función lo siguiente
document.bgColor = document.formulario.color.value;
document.bgColor indica que queremos trabajar con el elemento body de nuestra pagina y su atributo bgColor. Si quisieramos trabajar con otro elemento de nuestro documento como una tabla, deberiamos indicar a dicha tabla un atributo id y hacer referencia utilizando tablaID.atributo = valor . Lo veremos mejor en el segundo ejemplo de este artículo
document.formulario.color.value;
formulario hace referencia al valor del atributo name del formulario
color hace refencia al atributo name del campo de texto del formulario.
value hace referencia al valor del campo de texto
En este caso hemos utilizado el valor de un elemento para establecer el color. Tabién podríamos indicar el nuevo valor diréctamente poniendolo entre comillasdocument.bgcolor = "red"
Por lo tanto podríamos decir que en este código Javascript estamos indicando que el atributo bgcolor de nuestro body sea igual al valor que tengamos escrito en el campo de texto del formulario.
Por ultimo, nuestro boton del formulario tiene un atributo onclick con el que hacemos la llamada a nuestra funcion javascript
<input type="button" value="Modificar Color" onclick="modificarElemento()">
Posiblemente este sea un caso poco practico, ya y que rara vez vamos a necesitar cambiar el color de una pagina, pero lo que importa aqui es que entiendas como funciona este codigo y que sepas que de igual modo que ahora he modificado el elemento body de nuestro documento podemos modificar casa cual otro elemento de nuestro pagina, como una tabla, una capa...
En la siguiente pagina vemos como trabajar con una capa y su atributo style para modificar sus propiedades CSS
En este ejemplo voy a trabajar con un elemento div el cual podrá ocultarse o cerrarse segun elija el usuario que lo veo. Ëste es el código:
<head>
<script type="text/javascript">
function modificarEstilo() {
if (capa.style.height == "100px" ) {
capa.style.height = "25px";
}else {
capa.style.height = "100px";
}
}
</script>
</head>
<body>
<div id="capa" style="background:#ccc;
width:300px; height:100px; padding:5px;
border:1px solid #000; overflow:hidden;">
<a href="#" onClick="modificarEstilo()">X</a>
<p>contenido de la capa</p>
<p>contenido de la capa</p>
</div>
</body>
Ahoram el código Javascript es un poco mas extenso que en el ejemplo anterior y se ha hecho uso de código CSS para dar forma al elemento div. Analizamos el codigo Javascript
<script type="text/javascript">
function modificarEstilo() {
if (capa.style.height == "100px" ) {
capa.style.height = "25px";
}else {
capa.style.height = "100px";
}
}
</script>
En esta ocasión realizamos una comprobación mediante una sentencia if . Si el tamaño de alto de la capa es = a 100px entonces lo cambiamos a 25px de lo contrario significa que el tamaño del div es de 25px y lo convertimos en 100px
capa.style.height hace referencia al elemento div que tiene el atrobuto id con el valor capa, este div tambien tiene un atributo style y dentro de este atributo la propiedad height de CSS. Lo que hacemos aquí es cambiar esta propiedad CSS.
Dentro del elemento div tenemos un link, este link es el que acciona la funcion Javascript utilizando el atributo onclick
<a href="#" onClick="modificarEstilo()">X</a>
Al pulsar en este link si cambirá el tamaño del elemento div ejecutando el script de la cabecera
Tambien cabe destacar el codigo CSS utilizado
<div id="capa" style="background:#ccc;
width:300px; height:100px; padding:5px;
border:1px solid #000; overflow:hidden;">
En este CSS hace que el elemento div tenga un fondo de color gris, un border negro de un pixel, un tamaño ancho de 300px y alto de 100px y oculte el overflow (sino ocultaramos el overflow, al hacer pequeña la capa los contenidos se saldrian y daria una mala impresion de estetica).
A diferencia del ejemplo anterior, en este caso he utilizado el identificador de un elemento (atributo id del div) para hacer referencia a este elemento y poder modificar su atributo style.
Seleccionando la opción Ver código fuente en el navegador, se puede ver realmente la información que está recibiendo éste y cómo la está interpretando. Por ejemplo: en Internet Explorer o en Firefox, simplemente hay que desplegar el menú Ver y luego elegir Código fuente. De esta forma, se abrirá el editor de texto configurado como predeterminado en el sistema con el código fuente de la página que se esté viendo en ese momento en el explorador. Otra forma más rápida consiste en hacer clic con el botón derecho del ratón en cualquier punto del área donde el navegador muestra la página web y elegir Ver código fuente.
Para el navegador Firefox existe el plugin FireBug, un depurador que permite entre otras cosas visualizar el código HTML de la página que estamos visualizando de forma dinámica, y que incluso resalta el trozo de código por el que está pasando el ratón en cada momento, por lo que es una herramienta muy útil para aprender diversos conceptos de este lenguaje.
Fuentes: Wikipedia |
si te intereso el tema y queres averiguar mas , e aquí una pagina mas completa
wikilearning curso gratis 75 pag.
) bueno acá les va:
Para entrar en calor:
Html es esa cosa q muchos no conocen por ejemplo cuando apretan letra en negrita y les sale la b y al final la /b eso es un claro ej. o cuando pones insertar link y te sale url=http etc... eso es un ejemplo de html en taringa mediante botones programados por los creadores...
Para entender su significado: ;
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el 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 por corchetes 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).
Ahora empezamos con lo difícil:
Javascript nos permite modificar los elementos HTML de una pagina, por ejemplo, podemos cambiar de forma dinámica las características del body (color de fondo, tipo de letra) o de un elemento div entre otros.
En el primer ejemplo, crearé un script el cual mediante un formulario con un campo de texto permita cambiar el color de fondo de la pagina por el color que seleccionemos en un formulario.
<head>
<script type="text/javascript">
function modificarElemento() {
document.bgColor = document.formulario.color.value;
}
</script>
</head>
<body>
<form name="formulario">
<input type="button" value="Modificar Color" onclick="modificarElemento()">
<input name="color" type="text">
</form>
</body>
Éste código está dividido en dos partes, por un lado tenemos en el head el codigo Javascript con la función que hará el cambio de color, por otro lado tenemos en el body un formulario con un boton y un campo de texto, al apretar el boton se cambiará el color de fondo de la página por el color que hayamos escrito en el campo de texto.
El código javascript
Éste código únicamente tiene una función javascript. Podemos ver dentro de la función lo siguiente
document.bgColor = document.formulario.color.value;
document.bgColor indica que queremos trabajar con el elemento body de nuestra pagina y su atributo bgColor. Si quisieramos trabajar con otro elemento de nuestro documento como una tabla, deberiamos indicar a dicha tabla un atributo id y hacer referencia utilizando tablaID.atributo = valor . Lo veremos mejor en el segundo ejemplo de este artículo
document.formulario.color.value;
formulario hace referencia al valor del atributo name del formulario
color hace refencia al atributo name del campo de texto del formulario.
value hace referencia al valor del campo de texto
En este caso hemos utilizado el valor de un elemento para establecer el color. Tabién podríamos indicar el nuevo valor diréctamente poniendolo entre comillasdocument.bgcolor = "red"
Por lo tanto podríamos decir que en este código Javascript estamos indicando que el atributo bgcolor de nuestro body sea igual al valor que tengamos escrito en el campo de texto del formulario.
Por ultimo, nuestro boton del formulario tiene un atributo onclick con el que hacemos la llamada a nuestra funcion javascript
<input type="button" value="Modificar Color" onclick="modificarElemento()">
Posiblemente este sea un caso poco practico, ya y que rara vez vamos a necesitar cambiar el color de una pagina, pero lo que importa aqui es que entiendas como funciona este codigo y que sepas que de igual modo que ahora he modificado el elemento body de nuestro documento podemos modificar casa cual otro elemento de nuestro pagina, como una tabla, una capa...
En la siguiente pagina vemos como trabajar con una capa y su atributo style para modificar sus propiedades CSS
En este ejemplo voy a trabajar con un elemento div el cual podrá ocultarse o cerrarse segun elija el usuario que lo veo. Ëste es el código:
<head>
<script type="text/javascript">
function modificarEstilo() {
if (capa.style.height == "100px" ) {
capa.style.height = "25px";
}else {
capa.style.height = "100px";
}
}
</script>
</head>
<body>
<div id="capa" style="background:#ccc;
width:300px; height:100px; padding:5px;
border:1px solid #000; overflow:hidden;">
<a href="#" onClick="modificarEstilo()">X</a>
<p>contenido de la capa</p>
<p>contenido de la capa</p>
</div>
</body>
Ahoram el código Javascript es un poco mas extenso que en el ejemplo anterior y se ha hecho uso de código CSS para dar forma al elemento div. Analizamos el codigo Javascript
<script type="text/javascript">
function modificarEstilo() {
if (capa.style.height == "100px" ) {
capa.style.height = "25px";
}else {
capa.style.height = "100px";
}
}
</script>
En esta ocasión realizamos una comprobación mediante una sentencia if . Si el tamaño de alto de la capa es = a 100px entonces lo cambiamos a 25px de lo contrario significa que el tamaño del div es de 25px y lo convertimos en 100px
capa.style.height hace referencia al elemento div que tiene el atrobuto id con el valor capa, este div tambien tiene un atributo style y dentro de este atributo la propiedad height de CSS. Lo que hacemos aquí es cambiar esta propiedad CSS.
Dentro del elemento div tenemos un link, este link es el que acciona la funcion Javascript utilizando el atributo onclick
<a href="#" onClick="modificarEstilo()">X</a>
Al pulsar en este link si cambirá el tamaño del elemento div ejecutando el script de la cabecera
Tambien cabe destacar el codigo CSS utilizado
<div id="capa" style="background:#ccc;
width:300px; height:100px; padding:5px;
border:1px solid #000; overflow:hidden;">
En este CSS hace que el elemento div tenga un fondo de color gris, un border negro de un pixel, un tamaño ancho de 300px y alto de 100px y oculte el overflow (sino ocultaramos el overflow, al hacer pequeña la capa los contenidos se saldrian y daria una mala impresion de estetica).
A diferencia del ejemplo anterior, en este caso he utilizado el identificador de un elemento (atributo id del div) para hacer referencia a este elemento y poder modificar su atributo style.
Seleccionando la opción Ver código fuente en el navegador, se puede ver realmente la información que está recibiendo éste y cómo la está interpretando. Por ejemplo: en Internet Explorer o en Firefox, simplemente hay que desplegar el menú Ver y luego elegir Código fuente. De esta forma, se abrirá el editor de texto configurado como predeterminado en el sistema con el código fuente de la página que se esté viendo en ese momento en el explorador. Otra forma más rápida consiste en hacer clic con el botón derecho del ratón en cualquier punto del área donde el navegador muestra la página web y elegir Ver código fuente.
Para el navegador Firefox existe el plugin FireBug, un depurador que permite entre otras cosas visualizar el código HTML de la página que estamos visualizando de forma dinámica, y que incluso resalta el trozo de código por el que está pasando el ratón en cada momento, por lo que es una herramienta muy útil para aprender diversos conceptos de este lenguaje.
Fuentes: Wikipedia |
si te intereso el tema y queres averiguar mas , e aquí una pagina mas completa
wikilearning curso gratis 75 pag.