<img></img> esta es la etiqueta para introducir imagenes. con los atributos src y alt.
<img src="url" alt="logo de empresa"></img>
src se dice la url donde esta la imagen y alt es muy importante para la usabilidad de la web.
También son importantes los siguientes atributos opcionales:
ismap. que son para mapa de imagen
usemap también para mapas de imagen.
longdesc. para una url de comentarios largos de la imagen.
width y height .para las dimensiones de la imagen.
con este ultima entrada doy por finalizado este blog, estoy empezando con html5 otro blog.por si lo quereis ver.
lunes, 31 de julio de 2017
domingo, 30 de julio de 2017
Ejemplo de tabla
Este es un ejemplo de tablas,es un ejerccio que nos plantean en activate.
<!DOCTYPE HTML>
<html>
<meta content="text/html" charset="utf-8">
<head>
<title>El desempleo en España</title>
</head>
<body>
<h1>El desempleo en España</h1>
<table border="8 pix">
<thead>
<tr>
<td colspan=2> <strong>Pais</strong></td><td><strong>2000</strong></td><td><strong>2001</strong></td><td><strong>2002</strong></td><td><strong>2003</strong></td><td><strong>2004</strong></td><td><strong>2005</strong></td><td><strong>2006</strong></td><td><strong>2007</strong></td><td><strong>2008</strong></td><td><strong>2009</strong></td><td><strong>2010</strong></td><td><strong>2011</strong></td><td><strong>2012</strong></td><td><strong>2013</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan=2> UE (27 paises)</td><td>8.9</td><td>8.7</td><td>9</td><td>9.1</td><td>9.3</td><td>9</td><td>8.2</td><td>7.2</td><td>7</td><td>9</td><td>9.6</td><td>9.6</td><td>10.4</td><td>10.8</td>
</tr>
<thead>
<tr>
<td colspan=2><strong>España</td><td><strong>11.9</strong></td><td><strong>11.6</strong></td><td><strong>11.5</strong></td><td><strong>11.5</strong></td><td><strong>11</strong></td><td><strong>9.2</strong></td><td><strong>8.5</strong></td><td><strong>8.2</strong></td><td><strong>11.3</strong></td><td><strong>17.9</strong></td><td><strong>19.9</strong></td><td><strong>21.4</strong></td><td><strong>24.8</strong</td><td><strong>26.1</strong</td>
</tr>
</thead>
<tr>
<td colspan=2> Grecia</td><td>11.2</td><td>10.7</td><td>10.3</td><td>9.7</td><td>10.6</td><td>10</td><td>8.4</td><td>7.8</td><td>9.6</td><td>12.7</td><td>17.9</td><td>24.5</td><td>27.5</td><td>24.6</td>
</tr>
<Tr>
<td colspan=2> Estados Unidos</td><td>4</td><td>4.8</td><td>5.8</td><td>6</td><td>5.5</td><td>5.1</td><td>4.6</td><td>4.6</td><td>5.8</td><td>9.3</td><td>9.6</td><td>8.9</td><td>8.1</td><td>7.4</td>
</tr>
<tr>
<td colspan=2> Japón</td><td>4.7</td><td>5</td><td>5.4</td><td>5.3</td><td>4.7</td><td>4.4</td><td>4.1</td><td>3.9</td><td>4</td><td>5.1</td><td>5.1</td><td>4.6</td><td>4.3</td><td>4</td>
</tr>
</tbody>
</table>
<p> Fuente:<a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsdec450&plugin=1">indice de desempleos anual</a> Eurostat </P
</body>
</html>
sábado, 29 de julio de 2017
Tablas 1
Tablas:
<table>.....</table>
Es la etiqueta que nos indica que comienza una tabla,es como el contenedor, dentro de esta equiqueta se introducirán las cajas,celdas,filas,etc.
<tr></tr> son las filas horizontales donde irán las celdas.
<td></td>son las celdas y vasn dentro de las <tr>
----si agregamos a <td> un atributo colspan ,lo que logramos es juntar varias celdas de forma horizontal,ejemplo de agrandar 2 celas ,seria este:
<td colspan="2">.....</colspan>
----si agregamos rowspan a td como atributo,lo que logramos es agrandar las celdas en forma vertical,ejemplo de ampliar 2 celdas de forma vertical seria este:
<td rowspan="2">....</rowspana>
<caption></caption> esta eyiquela lo que nos hace es poner un titulo independiente el la cabecera de la tabla.
<th></th> son las celdas de encabezado, y normalmente salen en negrita, este tipo de celdas también se pueden poner en otro lugar que no sea la cabecera.
<thead></thead> lo que conseguimos es agrupar las celdas de cabecera.(como si fuera un grupo independiente).
<tbody></tbody> con esta etiqueta lo que hacemos es agrupar la parte principal de la tabla (como otro grupo)
<tfoot></tfoot> con esta etiqueta agrupamos la parte baja de la tabla a modo de grupo.
<colgroup></colgroup> con esta etiquela lo qu elogramos es crear grupos de colunnas, en las tablas.
<table>.....</table>
Es la etiqueta que nos indica que comienza una tabla,es como el contenedor, dentro de esta equiqueta se introducirán las cajas,celdas,filas,etc.
<tr></tr> son las filas horizontales donde irán las celdas.
<td></td>son las celdas y vasn dentro de las <tr>
----si agregamos a <td> un atributo colspan ,lo que logramos es juntar varias celdas de forma horizontal,ejemplo de agrandar 2 celas ,seria este:
<td colspan="2">.....</colspan>
----si agregamos rowspan a td como atributo,lo que logramos es agrandar las celdas en forma vertical,ejemplo de ampliar 2 celdas de forma vertical seria este:
<td rowspan="2">....</rowspana>
<caption></caption> esta eyiquela lo que nos hace es poner un titulo independiente el la cabecera de la tabla.
<th></th> son las celdas de encabezado, y normalmente salen en negrita, este tipo de celdas también se pueden poner en otro lugar que no sea la cabecera.
<thead></thead> lo que conseguimos es agrupar las celdas de cabecera.(como si fuera un grupo independiente).
<tbody></tbody> con esta etiqueta lo que hacemos es agrupar la parte principal de la tabla (como otro grupo)
<tfoot></tfoot> con esta etiqueta agrupamos la parte baja de la tabla a modo de grupo.
<colgroup></colgroup> con esta etiquela lo qu elogramos es crear grupos de colunnas, en las tablas.
Validar nuestra web
La validacion de un sitio web es:
Después de crear la web ,debemos pasarlo por algún gestos de filtros para ver los fallos que se nos han pasado por alto,aunque en nuestro pc se vea todo correcto,quizá no sea así.
Una de lasa primeras cosas a tener en cuenta es la primara linea de nuestra web.
<!DOCTYPE HTML> Esto es para indicar al navegador en que versión de html esta creada la web, en este caso se trata de una web creada en html5.
Las validaciones se pueden hacer en varios sitios, uno muy importante es w3c (con el validador), hay mas WDG validator, y otro el validator.nu.
Se puede subir pagina completa o archivos sueltos y nos indicara algún fallo, si solucionamos el primero, normalmente desaparecen muchos,que son consecuencia del primero.
Por unas simples comillas ,hay navegadores que dejan la web en blanco y otras hacen cosas extrañas,por eso hay que validar nuestros trabajos.
Después de crear la web ,debemos pasarlo por algún gestos de filtros para ver los fallos que se nos han pasado por alto,aunque en nuestro pc se vea todo correcto,quizá no sea así.
Una de lasa primeras cosas a tener en cuenta es la primara linea de nuestra web.
<!DOCTYPE HTML> Esto es para indicar al navegador en que versión de html esta creada la web, en este caso se trata de una web creada en html5.
Las validaciones se pueden hacer en varios sitios, uno muy importante es w3c (con el validador), hay mas WDG validator, y otro el validator.nu.
Se puede subir pagina completa o archivos sueltos y nos indicara algún fallo, si solucionamos el primero, normalmente desaparecen muchos,que son consecuencia del primero.
Por unas simples comillas ,hay navegadores que dejan la web en blanco y otras hacen cosas extrañas,por eso hay que validar nuestros trabajos.
viernes, 28 de julio de 2017
Caracteres
Los caracteres:
Cuando en una web,aparecen cosas raras,ejemplo letras chinas o la ñ no aparece, o cosas así es por que algo falla con los caracteres.
La solución es usar siempre en nuestros trabajos los mismos caracteres y aun así sera casi imposible que todo se vea bien, pues las bases de datos pueden usar unos caracteres ,nosotros otros ,los navegadores otros,el hosting otros, en fin, un lío.
La mejor opción es usar UTF-8 sin BOM, este conjunto de caracteres lo bueno que tiene es que admite todas las letras y simbolos y evitaremos problemas.
cuando hacemos una web devemos decirle al navegador que conjunto de caracteres estamos usando, y en html5 es así , y va debajo de la etiqueta <html>
Es esta <meta charset="utf-8"> o también asi <meta charset="utf-8 />
El tema del BOM (byte order mark) es: que si utf-8 con BON lo que hace es en forma hexadecimal ser uns caracteres y unas letras,que nosotros no vemos ,pero los navegadores si, y por eso hay problemas de verlas bien, si quitamos el BON ,esa forma hexacedimal desaparece y los caracteres y letras también, y en el navegador se ve bien.
Iso-8859-1 o latin 1: es después de utf-8 la mejor solución en Europa occidental, pues también dispone de muchos caracteres.
Cuando en una web,aparecen cosas raras,ejemplo letras chinas o la ñ no aparece, o cosas así es por que algo falla con los caracteres.
La solución es usar siempre en nuestros trabajos los mismos caracteres y aun así sera casi imposible que todo se vea bien, pues las bases de datos pueden usar unos caracteres ,nosotros otros ,los navegadores otros,el hosting otros, en fin, un lío.
La mejor opción es usar UTF-8 sin BOM, este conjunto de caracteres lo bueno que tiene es que admite todas las letras y simbolos y evitaremos problemas.
cuando hacemos una web devemos decirle al navegador que conjunto de caracteres estamos usando, y en html5 es así , y va debajo de la etiqueta <html>
Es esta <meta charset="utf-8"> o también asi <meta charset="utf-8 />
El tema del BOM (byte order mark) es: que si utf-8 con BON lo que hace es en forma hexadecimal ser uns caracteres y unas letras,que nosotros no vemos ,pero los navegadores si, y por eso hay problemas de verlas bien, si quitamos el BON ,esa forma hexacedimal desaparece y los caracteres y letras también, y en el navegador se ve bien.
Iso-8859-1 o latin 1: es después de utf-8 la mejor solución en Europa occidental, pues también dispone de muchos caracteres.
Formularios 3
Botones de radio:
<input type="radio" name="transportes" value="1">coche
<br/>
<input type="radio" checekt="" name="transportes" value="2">tren
<br/>
<input type="radio" name="transportes" value="1">avion
Con este código lo que nos va hacer son unos botoncitos redondos de selección, de los cuales solo podemos seleccionar uno de ellos.
si queremos que uno de ellos aparezca seleccionado le agregamos el atributo checket como el ejemplo en tren .
Lista de cajas o checkbox
En este caso lo que veremos son unos cuadraditos de los cuales podemos seleccionar uno o varios y también puede haber alguno seleccionado.vemos un ejemplo.
<input type="checkbox" name="transportes" value="1"> coche
<br>
<input type="checkbox" name="transportes" value="2">tren
<br>
<input type="checkbox" name="transportes" value="3">avión
Botón Envio
Este botón es sencillo y lo que hace es enviar el formulario a una base de datos o a nuestro correo.
<input type="submit" value="enviar formulario">
Boton reset
<input type="reset" value="borrar todo">
Lo que conseguimos con esta etiqueta es borrar todo el formulario.
<input type="radio" name="transportes" value="1">coche
<br/>
<input type="radio" checekt="" name="transportes" value="2">tren
<br/>
<input type="radio" name="transportes" value="1">avion
Con este código lo que nos va hacer son unos botoncitos redondos de selección, de los cuales solo podemos seleccionar uno de ellos.
si queremos que uno de ellos aparezca seleccionado le agregamos el atributo checket como el ejemplo en tren .
Lista de cajas o checkbox
En este caso lo que veremos son unos cuadraditos de los cuales podemos seleccionar uno o varios y también puede haber alguno seleccionado.vemos un ejemplo.
<input type="checkbox" name="transportes" value="1"> coche
<br>
<input type="checkbox" name="transportes" value="2">tren
<br>
<input type="checkbox" name="transportes" value="3">avión
Botón Envio
Este botón es sencillo y lo que hace es enviar el formulario a una base de datos o a nuestro correo.
<input type="submit" value="enviar formulario">
Boton reset
<input type="reset" value="borrar todo">
Lo que conseguimos con esta etiqueta es borrar todo el formulario.
Formularios 2
<textarea></textarea>
Esta etiqueta se usa en en formulario normalmente para que salga un recuadro un poco grande para que nos hagan sugerencias o escriban algún texto el usuario, esta etiqueta lleva asociados a varios atributos: rows para la altura o numero de filas y cols para el ancho del cuadro textarea que se vera,por defecto 20 y name,que hace referencia al nombre del campo.
ejemplo:
<textarea name="comentarios" rows="10" cols="40">escribe tus comentarios aquí</textarea>
<Password/>
Esta caja de formulario ,lo que nos permite es escribir por ejemplo una clave, y el usuario no vera nada mas que símbolos, suele ir acompañado del atributo name,que hace referencia al nombre del campo.
ejemplo:
<input type="password" name="contraseña">
Lista de selección:
<selection></selection>
En este caso sale una cajeado y una flecha desplegable con las opciones que nosotros queramos. Esta instrucción también la podemos modificar: con el atributo size lo que hacemos es ver mas nombre de los que hemos puesto ,ejemplo si ponemos size 2 lo que se verán sera coche y tren y si desplegamos,pues veremos avión.
Otro atributo el múltiple, y con eso conseguimos que se puedan seleccionar mas de un elemento.
El atributo select lo que nos permite es dejar un elemento seleccionado.
y el atributo value es muy importante para gestión del formulario. Al enviar el formulario y si por ejemplo eligen avión,a nuestro correo o base de datos llegara 3-transportes y ya sabemos que es.
ejemplo:
<selection name="transportes">
<option value="value3">avion 3</option>
</selection>
Esta etiqueta se usa en en formulario normalmente para que salga un recuadro un poco grande para que nos hagan sugerencias o escriban algún texto el usuario, esta etiqueta lleva asociados a varios atributos: rows para la altura o numero de filas y cols para el ancho del cuadro textarea que se vera,por defecto 20 y name,que hace referencia al nombre del campo.
ejemplo:
<textarea name="comentarios" rows="10" cols="40">escribe tus comentarios aquí</textarea>
<Password/>
Esta caja de formulario ,lo que nos permite es escribir por ejemplo una clave, y el usuario no vera nada mas que símbolos, suele ir acompañado del atributo name,que hace referencia al nombre del campo.
ejemplo:
<input type="password" name="contraseña">
Lista de selección:
<selection></selection>
En este caso sale una cajeado y una flecha desplegable con las opciones que nosotros queramos. Esta instrucción también la podemos modificar: con el atributo size lo que hacemos es ver mas nombre de los que hemos puesto ,ejemplo si ponemos size 2 lo que se verán sera coche y tren y si desplegamos,pues veremos avión.
Otro atributo el múltiple, y con eso conseguimos que se puedan seleccionar mas de un elemento.
El atributo select lo que nos permite es dejar un elemento seleccionado.
y el atributo value es muy importante para gestión del formulario. Al enviar el formulario y si por ejemplo eligen avión,a nuestro correo o base de datos llegara 3-transportes y ya sabemos que es.
ejemplo:
<selection name="transportes">
<option value="value1">coche1</option>
<option value="value3">avion 3</option>
</selection>
Suscribirse a:
Entradas (Atom)