EJERCICIOS EN HTML
A continuación mostraremos algunos ejemplos o ejercicios de los códigos mas básicos:
1*Cómo crear un documento HTML
Por ejemplo, con el Bloc de notas de Microsoft Windows, podemos crear el siguiente archivo "dos-parrafos.html" (la extensión del archivo puede ser ".html" o ".htm"):
A la hora de guardar el archivo, pinchando en "Archivo" > "Guardar como...", es importante hacerlo codificado en UTF-8, como se muestra en la siguiente imagen:
El resultado sería el esperado. Ahora bien, si se guardase codificado en ANSI en vez de UTF-8, en pantalla se visualizaría algo parecido a:
2* Como poner enlaces en HTML
A partir del texto que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Además, tienes que tener en cuenta los siguientes requisitos:
- El título de la página debe ser Los tres pilares de la Web.
- Los enlaces que aparecen en la página deben tener los siguientes destinos:
- Tim Berners-Lee → http://es.wikipedia.org/wiki/Tim_Berners-Lee
- Web → http://es.wikipedia.org/wiki/World_Wide_Web
- HTML → enlace intradocumental al epígrafe HTML
- HTTP → enlace intradocumental al epígrafe HTTP
- URL → enlace intradocumental al epígrafe URL
- Fuente: HTML → http://es.wikipedia.org/wiki/HTML
- Fuente: HTTP → http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol
- Fuente: URL → http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme
Consejo: para comprobar que los enlaces intradocumentales funcionan correctamente, aumenta el tamaño o zoom de la página con "Control +"
Esta seria la solución:
Los tres pilares de la Web Tim Berners-Lee es considerado el padre de la Web porque desarrolló los tres elementos básicos para el funcionamiento de la Web: HTML HTTP URL HTML HTML, siglas de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web. Fuente: HTML, Wikipedia HTTP Hypertext Transfer Protocol o HTTP (en español protocolo de transferencia de hipertexto) es el protocolo usado en cada transacción de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboración que culminó en 1999 con la publicación de una serie de RFC, el más importante de ellos es el RFC 2616 que especifica la versión 1.1. Fuente: HTTP, Wikipedia URL Un localizador de recursos uniforme o URL —siglas en inglés de Uniform Resource Locator— es un identificador de recursos uniforme (URI) cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo. Están formados por una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que designa recursos en una red, como Internet. Fuente: URL, Wikipedia
3* Como poner listas en HTML
A partir del texto que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Además, tienes que tener en cuenta los siguientes requisitos:
*El título de la página debe ser Curriculum Vitae de Bruce Wayne.
*El resto de la estructura de la página debes deducirlo a partir de la imagen proporcionada
Esta es la solución:
<!DOCTYPE html> <html> <head> <title>Curriculum Vitae de Bruce Wayne</title> </head> <body> <h1>Curriculum Vitae de Bruce Wayne</h1> <h2>Datos personales</h2> <ul> <li>Nombre completo: <strong>Bruce Wayne</strong></li> <li>Fecha de nacimiento: <strong>1/5/1939</strong></li> <li>Lugar de nacimiento: <strong>Gotham City</strong></li> </ul> <h2>Formación académica</h2> <ul> <li>1956-1961: <strong>Universidad del Espantapájaros</strong></li> <li>1952-1956: <strong>Instituto de Dos Caras</strong></li> <li>1944-1952: <strong>Escuela Primaria del Joker</strong></li> </ul> <h2>Experiencia laboral</h2> <ul> <li>1975-1985: <strong>En el paro</strong></li> <li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li> <li>1962-1965: <strong>Aprendiz de superhéroe</strong></li> </ul> </body> </html>
4* Como poner formularios en HTML
Crea una página web que contenga un formulario con los siguientes campos de información:
- El nombre, con un control de tipo texto.
- Los apellidos, con un control de tipo texto.
- El sexo, con dos opciones excluyentes hombre o mujer.
- El correo electrónico, con un control de tipo texto.
- Una casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas".
- Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos".
- Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
- El título de la página debe ser Formulario de registro - Mi web.
- El método de envío del formulario debe ser GET.
- El destino del envío del formulario debe ser "".
- La longitud máxima de entrada de datos de los controles para el nombre y los apellidos debe ser 50 caracteres.
- La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas" debe estar activada por defecto.
Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Esta es la solución:
<!DOCTYPE html> <html> <head> <title>Formulario de registro - Mi web</title> </head> <body> <h1>Formulario de registro</h1> <form action="" method="get"> <p> Nombre: <input type="text" name="nombre" maxlength="50" /> </p> <p> Apellidos: <input type="text" name="apellidos" maxlength="50" /> </p> <p> Sexo: <input type="radio" name="sexo" value="h" /> hombre <input type="radio" name="sexo" value="m" /> mujer </p> <p> Correo: <input type="text" name="correo" maxlength="100" /> </p> <p> <input type="checkbox" name="info" checked="checked" /> Deseo recibir información sobre novedades y ofertas </p> <p> <input type="checkbox" name="condiciones" /> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos </p> <p> <input type="submit" value="Enviar" /> </p> </form> </body> </html>
5* Como poner una tabla en HTML
A partir del texto que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Además, tienes que tener en cuenta los siguientes requisitos:
* El destino del enlace Índice de desempleo anual es la página web:
http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsdec450&plugin=1
Nota: en el código base que se te proporciona vas a encontrar una etiqueta nueva, la etiqueta <style>. Esta etiqueta permite introducir instrucciones de CSS (Cascading Style Sheets) en una página web. CSS se emplea para definir la presentación visual de una página web y se explica en la segunda parte de este curso. Las instrucciones que se han incluido tienen como objetivo que la tabla y las celdas de la tabla se muestren con un borde. Esto también se podría haber logrado con el atributo border de HTML, pero es mejor utilizar siempre CSS para todo lo relacionado con la presentación de una página web.
Esta es la solución:
<!DOCTYPE html>
<html>
<head>
<title>Desempleo</title>
<style>
table, tr, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>El desempleo en España</h1>
<p>
La siguiente tabla muestra la evolución del desempleo en España, comparado con la media de los 27 países de la Unión Europea, Grecia, que compite con España en ser el primero en esta vergonzosa competición y Estados Unidos y Japón, dos de las primeras economías mundiales.
</p>
<table>
<tr>
<th>País</th>
<th>2000</th>
<th>2001</th>
<th>2002</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
<th>2007</th>
<th>2008</th>
<th>2009</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
</tr>
<tr>
<td>UE (27 países)</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>
<tr>
<td><strong>España</strong></td>
<td><strong>11.9</strong></td>
<td><strong>10.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>
<tr>
<td>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>9</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>
</tr>
<tr>
<td>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>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>
</table>
<p>
Fuente: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsdec450&plugin=1">Índice de desempleo anual</a>, Eurostat
</p>
</body>
</html>
No hay comentarios.:
Publicar un comentario