Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

miércoles, 18 de diciembre de 2013

Día 38. Combinando JavaScript y HTML (II)

Querido diario;

Hoy seguimos viendo varios ejemplos de cómo se pueden combinar estos dos lenguajes.

En concreto, hemos hecho un contador, usando alert en vez de document.write por el problema que comenté ayer. Espero aprender pronto como hacerlo, lo miraré por foros a ver...


En este caso, dentro del script hemos declarado una variable contador con valor 0, y que cada vez que pulsemos el botón creado en el HTML fuera del script, sume 1 y cree una alerta que nos diga por que valor vamos.

El resultado por pantalla se vería así




En el siguiente ejemplo lo que haremos será dejar que el usuario marque varios checkbox y que con un alert muestre cuántas opciones ha elegido.

Éste es el código




Basicamente lo que está sucediendo aquí es que le decimos: si ha marcado la primera, suma uno a la variable cant, si ha marcado la segunda, suma otro, etc. Y luego con un alert le decimos que muestre por pantalla ese valor total.
Y la última línea

document.location.reload();

Lo que hace es refrescar el documento sobre el que trabajamos para restaurar los checkbox a no marcados.

Mirad el resultado


Y esto ha sido todo por hoy. Interesante, ¿no?




miércoles, 20 de noviembre de 2013

Día 27. Notas

Querido diario;

Hoy hemos corregido el examen que realizamos la semana pasada, y ya tengo la nota.

Un.... (redoble de tambores).... ¡9.75!

Estoy bastante contento, la verdad.


miércoles, 13 de noviembre de 2013

Día 25. El día D

Querido diario;

Hoy ha sido el examen. A secas.

Salvo las dos preguntas de teoría que no las recordaba exactamente, todos los ejercicios prácticos creo tenerlos bien. Eso espero.

Seguiré informando en futuras conexiones.

viernes, 25 de octubre de 2013

Día 16. Pseudoclases

Dentro de la etiqueta  <style> podemos configurar diferentes tipos de pseudoclases para indicar que una misma etiqueta se comporte de forma diferente según interactue el usuario con ella.

En la etiqueta <a> podemos seleccionar los siguientes

  • a:link {color: #FF0015; text-decoration: none;}- Color del enlace que no ha sido explorado
  • a:active {color: #FF0015; text-decoration: none;}- color del enlace mientres es pulsado
  • a:visited {color: #FF0015; text-decoration: none;}- Color de enlaces visitados
  • a:hover {color: #FF0015; text-decoration: none;}- Color del enlace mientras se pasa pro encima el ratón, sin ser pulsado

Para las etiquetas de por ejemplo <img> tenemos otras pseudoclases, no se usan las mismas para todas las etiquetas.

Después de esta explicación continuaremos con los trabajos atrasados.

viernes, 18 de octubre de 2013

Día 14

Querido diario;

Comenzamos / continuamos (según el punto en el que esté cada uno en clase) la práctica de desarrollar una página web de temática libre dividiendo las páginas, o eso es lo que entendí yo.

Me explico. Ayer realicé la práctica correctamente, montando una web con tablas, pero al preguntarle al profesor me lié y acabe entendiendo que con <table> no se podía hacer este ejercicio (había que dividir en frames y cargar la página en la zona central). Esta era la estructura de la web:


 Así que hoy he comenzado a hacerla usando los <frameset>.

- Profe, ¿puedes venir? Que no entiendo porque no me carga correctamente
- ¿Pero con frameset lo haces?
- Sí, ¿no? Es que ayer me dijiste que con tabla no se podía hacer
- ¿Yo te dije eso?
- Sí
- ¿Pero yo te dije eso?
- Creo
- A mi no me suena que te dijese eso
- To' pudiera ser que lo entendiese mal

Y eso, que al final lo había entendido yo mal. Hay que hacerlo con tablas, o en su defecto con <div>, y usando la etiqueta <iframe> que es la que permite cargar páginas en otras secciones de la página.
Así que he realizado la práctica con <table> e <iframe> pero me ha entrado tanta curiosidad por seguir probando con esta nueva etiqueta que también estoy armando la misma página haciendo divisiones de zonas (<div>) e <iframe>.

He tenido algunos problemas para colorear el menú del índice pero con arreglos "chapuceros", lease <pre> y muchos espacios, ha funcionado bien.

La etiqueta la he aplicado con estos parámetros:

<iframe name="cuerpo"  src="cancion.html" width="100%" height="100%" marginheight="100%">
 </iframe>

Y eso ha sido todo por hoy. Seguiremos informando

miércoles, 16 de octubre de 2013

Día 13. HTML (y VII)

Querido diario;

Continuamos con la lección de ayer, la división de páginas por zonas. La "nueva" forma de realizarlo es con

<frameset></frameset>

Hay que indicar que es una etiqueta desaconsejada, la solución sería utilizar los divisiores de página <div> y dentro de estos usar la etiqueta <iframe>

Atributos:

rows Altura en filas. Dos formas, por píxeles o porcentaje:

<frameset rows="cantidad primera sección, cantidad segunda sección, cantidad tercera sección,..."></frameset>

O con asterisco, que indica que sea el espacio que falte hasta terminar la pantalla

 <frameset rows="cantidad de primera sección, *></frameset>

cols Hace exactamente lo mismo pero en vez de filas con columnas.

<frameset cols="tamaño, *"></frameset>

Dentro de la etiqueta frameset usaremos la etiqueta <frame> para indicar los nombres de las secciones creadas y que páginas se van a cargar en ella por defecto.

Atributos:
name="nombre" El nombre de la zona. Se puede introducir el name que se quiera, son como atributos de variable.
src="URL" Página que se va a cargar

<frame name="alto" src="top.html">
<frame name="central" src="central.html">

target (Dentro de la etiqueta <a> para enlazar. Permite elegir en que frame cargar la página enlazada. Se pueden utilizar los nombres de los frames o algunos ya configurados
<a href="página a cargar" target="nombre de la página en la que se va a cargar (central, top,...)></a>

border=0 Eliminar border gris de los marcos
noresize Los marcos no son redimensionales
scrolling="no" No aparece las barras de desplazamiento
marginheight=Número / marginwidth=Número Regula la distancia del contenido del marco con respecto a márgenes izquierdo / derecho


La explicación completa se encuentra en htmlpoint.com/guida/html_13.htm

martes, 15 de octubre de 2013

Día 12. Etiquetas HTML (y VI)

Querido diario;

<div> cómo forma de dividor páginas

Para separar áreas de contenido en diferentes regiones, permitiéndonos estructurar de una manera muy sencilla los contenidos del documento usaremos la etiqueta <div>. No son frames, es en un único archivo HTML

La introduciremos dentro del <body>

<div style="width: 100%; height; 150px; text-align: center; background-color: pink;">
<span style="font-size:1.8cm; color:blue;">DIVISIÓN Nº1</span>
</div>

Para indicar que queremos dos zonas, una a la izquierda y otra a la derecha, deberemos utilizar el atributo float tal que así:

<div style="float: right;...">DIVISIÓN Nº 2</div>

Y en la partre de la izquierda insertaríamos ésta

<div style="float: left;...">DIVISIÓN Nº 3</div>

 El problema es que con esta forma no se permite realizar enlaces a las otras divisiones de la página, como sí permitía el frameset. Es decir, no permite cargar una nueva página desde DIVISIÓN Nº1 a DIVISIÓN Nº2

La solución sería utilizar la etiqueta <iframes>, porque también posee el atributo target.

viernes, 11 de octubre de 2013

Día 11

Querido diario;

Hoy hemos continuado con las prácticas de tablas. Me he percatado de que para realizar correctamente las combinaciones de celdas, hay que "eliminar" las <td> que no pienses utilizar. Me explico:

Supongamos que queremos realizar esta tabla:


En ella hemos combinado nueve filas para Sistemas Microinformáticos, cinco para 1º SMR y 4 para 2º SMR.

Para ello, el código que debemos introducir sería (sin incluir <table></table>, solo me voy a referir a lo que sucede dentro de ella.

<tr>
<td rowspan="9">SISTEMAS MICROINFORMÁTICOS Y REDES.
<br>(R.D. 1691/2008, BOE 17/01/08
<br>
<br>Referente europeo: CINE-3</td>

Con esto lo que hacemos es una combinación de nueve filas (rowspan="9")
<td rowspan="5">1º SMR</td>
<td>Montaje y mantenimiento de equipos</td>
</tr>
Y de cinco para SMR. Hasta aquí bien. Pero ahora vamos a crear celdas que no van a ser combinadas, con lo cual si escribimos

<tr>
<td>
<td>
<td>Sistemas Operativos Monopuestos</td>
Lo que conseguiriamos sería descuadrarnos de la estructura planteada, porque no escribiriamos en la tercera columna, sino que después de las dos anteriores, se crearían dos columnas más en blanco, y luego esta.
El código correcto sería

<tr>
<td>Sistemas Operativos Monopuestos</td>
</tr>
Porque al estar combinado, no necesitamos hacer referencia a los espacios de las dos columnas anteriores.

Ya finalizada la práctica en clase, sólo queda decir

Día 10. Etiquetas HTML (y V)

Querido diario;
Hoy hemos visto la teoría de las tablas.

<table> </table>

Estos son los parametros que podemos configurarle:

  • width Ancho de la tabla
  • border Borde personalizado
  • frames Lados de la tabla serán visibles. Es decir, si queremos ocultar la linea de limitación derecha de la tabla.
  • rules  Que lineas o reglas se mostraran entre celda y celda
  • cellpadding Distancia entre contenido y borde de celda
  • cellspacing Distancia entre celda y borde

También nos encontramos con las siguientes etiquetas, que van anidadas dentro de <table>

  • <caption></caption> Etiqueta anidada dentro de table. establece un titulo para la tabla.
  • <tr></tr> Inserta una nueva fila en la tabla. Aquí tenemos varios parámetros configurables
    • align Indica el alineamiento horizontal. Ejemplo 
    • align="left|center|right|justify"
    • valign Indica el alineamiento vertical. Ejemplo
    • valign="top|middle|bottom|baseline"
    • baseline Hace referencia a la linea base.
  • <th></th> Declarar columnas como cabecera. Atributos por defecto en negrita y centrado
    • colspan Agrupa celdas por columnas (lo que se conoce como Combinar celdas). Si por ejemplo queremos combinar nueve columnas, el atributo lo colocaremos así:
    • colspan="9"
    • rowspan Agrupa celdas por filas (Ídem). Exactamente de igual funcionamiento que el colspan. Si deseamos combinar tres filas, escribiremos:
    • rowspan="3"
  • <td></td> Declarar columnas normales, las de toda la vida.

Y eso es todo por hoy. Ciao!

viernes, 4 de octubre de 2013

Día 7. Etiquetas HTML (y IV)

Querido diario;

It's friday "madarfacars"

Pues eso, que seguimos con el HTML.

<img>

El único atributo que es obligatorio es source="ruta de imagen.formatodeimagen"

Atributos posibles:
  • height="número de pixeles" Es para indicar el tamaño de alto de la imagen
  • width="número de píxeles" Indica el tamaño de ancho de la imagen
  • alt="texto alternativo" Cuándo el navegador no es capaz de cargar una imagen, con este atributo escribiremos un texto de aviso
  • id/class/style="nombre" Para hacer referencia y dar estilo a todos los objetos que tengan la misma id/clase/estilo
  • title="titulo" Pone un título a la imagen

Un ejemplo sería
<img src="imagenes/imagen1.jpg" width="600" alt="No se ha podido cargar la imagen" class="perricos" title="perretes"></img>

<object> / <embed>

  • type=|"image/formato de imagen"|"application/x-shockwave-flash|"audio=x-mp3|"video/mp4|"application/x-java-applet" Indica el tipo de formato de nuestro video
  • data="ruta relativa" Ruta relativa donde se encuentra nuestro objeto
  • classid="Hola" Para hacer referencia al objeto
  • codebase="ruta" Ruta base en relación a a la cual se pueden establecer rutas relativas por parte del resto de atributos
  • height="número de pixeles" Igual que <img>
  • width="número de píxeles" Igual que <img>
  • standby="texto" Mientras se carga el elemento multimedia mostrará un texto
  • <param></param> (Dentro de object) Personaliza el comportamiento de reproducción de un objeto.
  • name="quality" value="low/medium/high" Calidad del objeto flash
  • name="loop" value="true/false" Repetición automática del objeto. Si no se indica nada, en un flash por defecto es true. Si es pelicula, true o false igual. Si es un sonido, tambien admite true, false, o número de repetición por número
<object type="application/x-shockwave-flash data="objetos/object.swf> 
<param name="loop" value="true" name="quality" value="high"></param
</object> 

¡Nos vemos! 

jueves, 3 de octubre de 2013

Día 6 Etiquetas HTML (y III)

Querido diario;
¿Adivinas de que voy a hablar hoy? En efecto, etiquetas HTML. La parte tres, que suele ser la floja en las sagas largas.

<a>

Sirva para hacer los hipervínculos.
Tenemos varios atributos para utilizar en <a>..

Href

Con él enlazaremos a el archivo/parte del documento que queramos. Ejemplo
<a href="www.google.com">Ir a Google</a>

Name

Pongamos que queremos hacer un hipervínculo dentro de nuestra página web. Queremos ir directamente a la palabra Hola que tenemos cuatrocientas líneas más abajo. Para ello, pondremos esto en la palabra a la que queremos ir.
<a name="nombre">HOLA</a>
Y en la palabra donde debemos pulsar para ir,
<a href="#nombre">Quio, yo soy de Huesca</a>
El típico ejemplo que se utiliza es el botón de subir para ir al principio de la web

Target

Cuando utilizamos frames sirve para indicar en que marco queremos que aparezca la página cargada, y también nos sirve para enlazar a otra página y que se nos abra en una nueva pestaña.
<a href="URL" target="Opción de atributo"></a>
    ¿Qué opciones hay?
  • "blank" para abrir en una nueva pestaña
  • "self" para abrir en el propio frame creado
  • "parent" para mostrar en el frameset padre del frame actual
  • "top" se muestra en toda la ventana, destruyendo la estructura de frames

Vinculos sobre una dirección email:

<a href="mailto:direcciondecorreo@dominio.com;direcciondecorreo2@gmail.com?subject=Asunto del mensaje&amp;body="Cuerpo del mensaje"></a>

Mailto es obligatorio, subject y body son opcionales. ? Separa los receptores del mensaje.

miércoles, 2 de octubre de 2013

Día 5. Etiquetas HTML (y II)

Querido diario;
Seguimos viendo las etiquetas HTML.
Hoy tengo un dolor de cabeza de la hostia, así que intentaré explicarlo lo mejor que pueda.
Esto es lo que hemos visto:

En <!DOCTYPE> hay varias formas de indicar que tipo de página es.

  • Transational. Permite usar todas las etiquetas. HTML
  • Strict. Hay etiquetas que no rerconoce. XHTML
  • Frameset. divide la página en marcos de página. HTML / XHTML
  • Applet. Trozo de código java incrustado en el documento

<style>

A la hora de dar estilos a una etiqueta hay varias formas de hacerlo:

Afectar de manera global a todas las etiquetas que tengan ese nombre dentro del documento, sin distinción.

<style type="text/css" media="screen">
        img {/*Propiedades de estilo asociadas a todas las imagenes del documeto. */}
</style>

Hacer referencia al atributo class para diferenciar exclusivamente a quien aplicar el estilo


<style type="text/css" media="screen">
        img.imagen1 {/*Propiedades de estilo asociadas a todas las imagenes del documeto class="imagen1" */}
        .estilo1 {/*Propiedades de estilo asociadas a todas las imagenes del documeto class="estilo1" */}
</style>

Y en el cuerpo de la página:
<img class="estilo 1" src="imagenes/imagen.png" width="100px" height="80px"

Hacer referencia al valor asignado al atributo id

<style type="text/css" media="screen">
        img#imagen1 {/*Propiedades de estilo asociadas a todas las imagenes del documeto class="estilo1"  */}
        #estilo1 {/*Propiedades de estilo asociadas a todas las imagenes del documeto class="estilo1" */}
</style>

Y en el Body hacer referencia con el ID

<script>

Tenemos tres formas de hacer un script:

<script type="text/javascript">
       /* Lineas de código del script JavaScript embebido en el documento */
</script>

<script type="text/vbscript
       /* Lineas de código del script VisualBasicScript embebido en el documento */
</script>

<script type="text/javascript" src="scripts/script-externo.js"></script>


Etiquetas para el formateado del texto

<h1></h1> Un título dentro del documento. H es un valor entre 1 y 6
<p></p> Nuevo párrafo de texto
<blockquote></blockquote> Igual que el <p> pero realiza un sangrado de izquierda a derecha.
<pre></pre> Crea un bloque de texto de manera libre. Respeta espacios en blanco, tabulaciones y saltos de linea. 
<big></big> Texto en tamaño grande
<small></small> Pequeño
<sub></sub> Como subindice
<sup></sup> Como superindice
<b></b> Negrita
<i></i> Cursiva
<code></code> Maquina de escribir
<samp></samp> Similar a <code>
<cite></cite> Como si fuera una cita
<q></q> de manera destacada a <cite>

¡Hasta la próxima!

sábado, 28 de septiembre de 2013

Día 3. Características HTML

Querido diario;
Hoy hemos empezado con el lenguaje HTML y XHTML (que sería una combinación del XML y el HTML). Ya lo habíamos visto el año pasado en Redes, pero nunca está de más repasar, y seguir aprendiendo cosas nuevas.

El protocolo HTML fue estandarizado en el año 1990, ya que CERN quería crear un lenguaje de etiquetas para maquetar sencillamente los datos recibidos por el servidor que se mostraban en los navegadores.

El paso en el proceso sería el siguiente:


Lo más básico para desarrollar una página web en HTML sería un navegador para cargar la página y un editor de texto. Valdría el bloc de notas, aunque yo prefiero el Notepad ++ por resaltar las etiquetas en color, poder ver los fallos, comprobar donde abren y cierran los tags, etc

Para pasar el certificado de página XML (o XHTML) una opción es ingresar en la web de la W3C.

Características del lenguaje HTML:
  • Lenguaje de marcado o etiquetado de información. Para ver todas las etiquetas hay muchas opciones, puedes entrar en www3.org/TR/html4/index/elements.html, o por ejemplo otra opción sería HTML Quick
  • Lenguaje interpretado sin compilación previa. Las diferencias entre lenguaje interpretado y compilado es:
    • Interpretado: El navegador lee linea a linea. Si algo no entiende, se lo salta. HTML o Batch son lenguajes interpretados.
    • Compilado: Se programa en texto plano, pasa por un compilador y lo convierte en un objeto. Luego va al lanzador que lo transforma en un ejecutable. Si se quiere cambiar, se debe realizar los tres pasos de nuevo. Java, C, Phyton...
  • Lenguaje anárquico: No depura los errores, pasan desapercibidos. Tiene diferentes formas de hacerlo:
    • Si una etiqueta no se reconoce, el navegador asume los errores. Por ejemplo la etiqueta <y> que no existe en HTML, se la saltaría completamente.
    • Fallo sintáctico. Por ejemplo no cerrar la etiqueta <img>, dejandola <img. El programa la ejecutaría sin problemas y podríamos ver la imagen.
  • Indiferente a mayúsculas (referido a las etiquetas), saltos de linea, tabulaciones o espacios en blanco. Para poder trabajar con ellos, hay que añadir:
    • <br> = Salto de linea
    • <blockquote></blockquote> = Tabulaciones en cualquier parte del texto
    • Propiedad margin = Márgenes del elemento
    • Propiedad text-indent = Márgen de la primera linea
    • &nsp = Crea un espacio extra en nuestro texto. Ejemplo Hola&nsp&nsp&nspadiós nos añadiría tres espacios entre la palabra Hola y adiós
  • No es un lenguaje de programación al uso. Esto es referido a que no tiene estructura de control
  • Etiqueta información estática. Quiere decir que las etiquetas como tal son fijas y limitadas, definidas ya en un estándar
Para realizar un comentario en el .html hay que poner esta etiqueta:
<!-- COMENTARIO A REALIZAR -->