EJERCICIOS DE HTML BÁSICO
1. ESTRUCTURA INTERNA DE UNA PÁGINA HTML
Ejemplo: Confeccionar una página que muestre los nombres de 5 lenguajes de
programaciónseparados por un guión.
<html>
<head>
</head>
<body>
PHP - Java - JavaScript - C -
C++ </body>
</html>
En el navegador obtendríamos el
resultado:PHP - Java - JavaScript - C -
C++
2. SALTO DE LÍNEA <BR>
Ejemplo: Confeccionar una página HTML que muestre distintos lenguajes de
programación, mostrarlos uno por línea.
<html>
<head>
</head>
<body>
PHP<br>
JavaScript<br>
Java<br>
C<br>
C++
</body>
</html>
En el navegador obtendríamos el
resultado:PHP
JavaScrip
t
Java
C
C++
3. PÁRRAFO <P>
Ejemplo: Confeccione una página que muestre dos párrafos. En el primero agregar varios
saltos delínea.
<html>
<head>
</head>
<body>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle,
etc.<br>MySQL es un interpretador de SQL, es un servidor de base de datos.<br>
MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos,
ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar
basesde datos.
</p>
<p>
Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo
delas bases de datos.
</p>
</body>
</html>
En el navegador obtendríamos el resultado:
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.
MySQL es uninterpretador de SQL, es un servidor de base de datos.
MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos,
ordenarlos,hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar
bases de datos.
Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el
mundo delas bases de datos.
4. TÍTULOS <H1 – H6>
Ejemplo: Confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos
denivel <h2>. Definir un párrafo para cada título de segundo nivel.
<html>
<head>
</head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p>
se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se
colocaentre comillas (simples): 'Hola'.<br>
El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo de
caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30
caracteres,definimos un campo de tipo varchar(30).
</p>
<h2>int</h2>
<p>
Se usa para guardar valores numéricos enteros, de -2000000000 a
2000000000aproximadamente.<br> Definimos campos de este tipo cuando queremos
representar, por ejemplo, cantidades.
</p>
</body>
</html>
En el navegador obtendríamos el resultado:
Tipos de datos en MySQL
varchar
se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de
caracteres. Secoloca entre comillas (simples): 'Hola'.
El tipo "varchar" define una cadena de longitud variable en la cual determinamos el
máximo de caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas
de hasta 30 caracteres, definimos un campo de tipo varchar(30).
int
Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000
[Link] campos de este tipo cuando queremos representar, por
ejemplo, cantidades.
5. ÉNFASIS <EM> <STRONG>
Ejemplo: Crear una página que contenga cuatro párrafos. En el primero enfatizar con el
máximo nively en los otros párrafos emplear el elemento de enfatizar de menor fuerza.
<html>
<head>
</head>
<body>
<p><strong>Típos de datos</strong> en MySQL</p>
<p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. Las cadenas
secolocan entre comillas simples. Podemos almacenar dígitos con los que no se realizan
operaciones matemáticas, por ejemplo, códigos de identificación, números de
documentos, números telefónicos. Tenemos los siguientes tipos: varchar, char y text.</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros,
negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que
hacen referencia a cantidades, precios, etc., usamos el tipo integer. Para almacenar
valores con decimales utilizamos: float o decimal.</p>
<p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date
(fecha), datetime (fecha y hora), time (hora), year (año) y timestamp.</p> </body>
</html>
En el navegador obtendríamos el resultado:
Típos de datos en MySQL
TEXTO: Para almacenar texto usamos cadenas de caracteres. Las cadenas se colocan entre
comillas simples. Podemos almacenar dígitos con los que no se realizan operaciones
matemáticas, por ejemplo, códigos de identificación, números de documentos, números
telefónicos. Tenemos los siguientes tipos: varchar, char y text.
NUMEROS: Existe variedad de tipos numéricos para representar enteros, negativos,
decimales. Para almacenar valores enteros, por ejemplo, en campos que hacen referencia a
cantidades, precios, etc., usamos el tipo integer. Para almacenar valores con decimales
utilizamos: float o decimal.
FECHAS Y HORAS: para guardar fechas y horas dispone de varios tipos: date (fecha),
datetime(fecha y hora), time (hora), year (año) y timestamp.
Ejercicio Propuesto 1: Confeccionar el titular de un periódico con un título de nivel 1. Luego definir dos
títulos de segundo nivel con los textos (Noticias políticas y Noticias deportivas), en cada una de estas
secciones definir dos titulares de tercer nivel con un párrafo cada una. Al final de la página mostrar un
título de cuarto nivel con el nombre de la empresa propietaria del periódico. Añade a los párrafos escritos
anteriormente palabra en negrita, palabras en cursiva y alguna palabra que esté en negrita y cursiva a la
vez.
6. HIPERVÍNCULO A OTRA PÁGINA DEL MISMO SITIO <A>
Ejemplo: Confeccionar una página principal que tenga un hipervínculo a otra página
secundaria. Lapágina secundaria debe tener también un hipervínculo a la página principal.
[Link]
<html>
<head>
</head>
<body>
<h1>Página principal.</h1>
<a href="[Link]">Noticias</a>
</body>
</html>
[Link]
<html>
<head>
</head>
<body>
<h1>Noticias.</h1>
<a href="[Link]">Salir.</a>
</body>
</html>
En el navegador obtendríamos el resultado:
7. HIPERVÍNCULO A OTRO SITIO DE INTERNET <A>
Ejemplo: Confeccionar una página que contenga un enlace al sitio de google.
[Link]
<html>
<head>
</head>
<body>
<a href="[Link] Google</a>
</body>
</html>
En el navegador obtendríamos el resultado:
8. HIPERVÍNCULO A UN CLIENTE DE CORREO <A>
Ejemplo: Confeccionar una página que contenga un hipervínculo configurando la propiedad
href de talmanera que abra un cliente de correo.
<html>
<head>
</head>
<body>
<h1>Contacto</h1>
<a href="[Link] mail.</a>
</body>
</html>
En el navegador obtendríamos el resultado:
Al pulsar sobre el enlace se abrirá nuestro programa gestor de correo electrónico
Ejercicio propuesto 2: Confeccionar una página principal con dos hipervínculos a las páginas [Link]
y [Link]. Luego en las dos páginas secundarias disponer hipervínculos a la página principal.
Además en la página principal añade un hipervínculo a un periódico (indicar sólo el nombre de dominio del
periódico) y un vínculo llamado Sugerencias a un correo electrónico.
9. ANCLAS DE PÁGINA
Ejemplo: Confeccionar una página que contenga cuatro anclas, luego definir cuatro
hipervínculos quese enlacen con dichas anclas.
<html>
<head>
</head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="#introduccion">Introducción</a><br>
<a href="#mostrarbasedatos">show databases</a><br>
<a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br>
<a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br>
<a name="introduccion"></a>
<h2>Introducción</h2>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle,
etc.<br>MySQL es un interpretador de SQL, es un servidor de base de datos.<br></p>
<a name="mostrarbasedatos"></a>
<h2>show databases</h2>
<p>
Una base de datos es un conjunto de tablas.<br></p>
<a name="creaciontabla"></a>
<h2>Creación de una tabla y mostrar
suscampos</h2> <p>
Una base de datos almacena sus datos en tablas.<br></p>
<a name="cargarregistros"></a>
<h2>Carga de registros a una tabla y
surecuperación</h2> <p>
Usamos "insert into". Especificamos los nombres de los campos entre paréntesis y separados
porcomas y luego los valores para cada campo, también entre paréntesis y separados por
comas.<br>
</p>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio propuesto 3: Crea una página web haciendo uso de enlaces internos de forma que
tengamos un menú con dos opciones Cultura y Deporte. Desde estas opciones podemos saltar a la
parte inferior del documento donde añadiremos un título y dos párrafos a Cultura y otro título y
dos párrafos para deportes.
Nota: pon nombres claros a las anclas y para provocar el salto usa la etiqueta <br> de forma
reiterada.
10. IMÁGENES DENTRO DE UNA PÁGINA <IMG>
Ejemplo: Implementar una página que muestre una imagen llamada [Link] que se
encuentra en elmismo servidor y en la misma carpeta donde se localiza el archivo HTML.
<html>
<head>
</head>
<body>
<img src="[Link]" alt="Pintura geométrica">
</body>
</html>
En el navegador obtendríamos el resultado:
Añade al ejercicio propuesto 3 una imagen al apartado Cultura y otra al apartado
Deportes.
11. HIPERVÍNCULO MEDIANTE UNA IMAGEN <A> Y <IMG>
Ejemplo: Confeccionar una página que muestre dos imagenes ([Link] y [Link]) como
hipervínculos. Al ser presionados llamar a otra página. Las imágenes se encuentran en una
carpeta llamada imagenes que depende directamente de la raiz del sitio.
[Link]
<html>
<head>
</head>
<body>
<h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2>
<a href="[Link]"><img src="/imagenes/[Link]" alt="Pintura Geométrica"> </a>
<a href="[Link]"><img src="/imagenes/[Link]" alt="Pintura Geométrica"> </a>
</body>
</html>
[Link] (HACE FALTA UNA PAGINA 3 SIMILAR A ESTA)
<html>
<head>
</head>
<body>
<p>Esta obra fue desarrollada en el año 2003</p>
<a href="[Link]">Retornar</p>
</body>
</html>
En el navegador obtendríamos el resultado:
Añade al ejercicio propuesto 3 dos imágenes, una para el apartado Cultura y otra para elapartado Deportes de
forma que al pulsarlas vulva al principio de la página.
Ejercicio Propuesto 4: Una empresa que vende pizzas tiene 3 ofertas. Las mismas son ( 1- 1 mozzarella y una
bebida cola a 5 euros, 2- 2 mozzarellas a 6 euros y 3 - 4 mozarrellas a 10 euros). Confeccionar una página
que disponga tres hipervínculos a cada una de esas ofertas. Al ser presionadas abrir el cliente de correo y
enviar la promoción correspondiente. En el título indicar si se trata de la promoción 1, 2 o 3. En el cuerpo del
mensaje pedir que ingresela dirección y teléfono de la persona que hace el pedido.
AYUDA: Para que en el correo nos aparezca aparte de la dirección de correo de destino, el asunto y texto en el
contenido, se usaría lo siguiente:
<a href="[Link] 1&body=Ingrese aquí su dirección y
teléfono:">Solicitar.</a>
El aspecto final de la página sería el siguiente:
12. LISTAS ORDENADAS <OL>
Ejemplo: Mostrar el orden de llegada de tres corredores utilizando el elemento HTML ol.
<html>
<head>
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>
En el navegador obtendríamos el resultado:
1. Rodriguez Pablo
2. Gonzalez Raul
3. Lopez Hector
Ejercicio Propuesto 5: Confeccione una lista ordenada con los tres paises con mayor población del
planeta. Disponer un título de segundo nivel y debajo de la lista la suma de habitantes de esos tres paises
enfatizado.
El aspecto final debería ser el siguiente:
Paises con mayor población
1. China (1300 millones)
2. India (1080 millones)
3. Estados Unidos (295 millones)
Sumando estos tres paises tenemos una población de 2675 millones
13. LISTAS NO ORDENADAS <UL>
Ejemplo: Confeccionar una página HTML que contenga una lista no ordenada con cuatro
lenguajes deprogramación muy populares. Agregar un título de segundo nivel indicando el
concepto de esta lista.
<html>
<head>
</head>
<body>
<h2>Lenguajes de programación.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
En el navegador obtendríamos el resultado:
Lenguajes de programación.
• C
• C++
• Java
• C#
Añade al Ejercicio propuesto 5 una lista no ordenada que contenga hipervínculos a distintos
periódicos que usted conoce.
14. LISTAS ANIDADAS
Ejemplo: Implementar una página que enumere una serie de paises en una lista ordenada y
luego encada pais disponer una lista de hipervínculos de periódicos de dicho pais.
<html>
<head>
</head>
<body>
<ol>
<li>Argentina
<ul>
<li><a href="[Link] Nación</a></li>
<li><a href="[Link]
<li><a href="[Link] 12</a></li>
</ul>
</li>
<li>España
<ul>
<li><a href="[Link] País
Digital</a></li> <li><a
href="[Link]
<li><a href="[Link] Mundo</a></li>
</ul>
</li>
<li>México
<ul>
<li><a href="[Link] Jornada</a></li>
<li><a href="[Link] Universal</a></li>
</ul>
</li>
</ol>
</body>
</html>
En el navegador obtendríamos el resultado:
Añade al ejercicio propuesto 5 una lista no ordenada de lenguajes de programación. Luego disponer una lista
ordenada con hipervínculos a sitios que tratan dichos lenguajes.
15. TABLAS <TABLE>
Ejemplo: Confeccionar una tabla que muestre los nombre de países en una columna y su
cantidad dehabitantes en otra. Disponer un título de los datos que representa la tabla.
<html>
<head>
</head>
<body>
<table border="1">
<caption>Población de los paises con mayor cantidad
dehabitantes.</caption> <tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio Propuesto 6: Confeccionar una tabla que muestre en la primer columna los nombre de distintos
empleados de una compañía y en la segunda el sueldo bruto (la compañía tiene 4 empleados) Disponer en la
tabla un título representativo.
16. TABLAS CON CELDAS NO UNIFORMES <TABLE>
Ejemplo: Confeccionar una tabla que muestre la facturación de los últimos tres meses de los
artículos:'Discos Duros', 'CPU' y 'Monitores'. La primer columna debe mostrar solo el texto
'recursos' yen la primer fila el texto 'Facturación de los últimos tres meses'.
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th>
</tr>
<tr>
<td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td>
</tr>
<tr>
<td>CPU</td><td>73000</td><td>67300</td><td>51000</td>
</tr>
<tr>
<td>Monitores</td><td>53000</td><td>72000</td><td>88000</td>
</tr>
</table>
</body>
</html>
En el navegador obtendríamos el resultado:
En el Ejercicio Propuesto 6: Confeccionar una tabla que muestre los nombres de periódicos y
su nombre de dominio agrupados por países. En la primera columna disponer los nombres de
países, expandir en fila de acuerdo con la cantidad de diarios de cada país.
Por ejemplo, podemos llegar a obtener una tabla parecida a la siguiente: