Ejercicios Basicos HTML

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ón
separados 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>
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 de
lí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 bases
de datos.
</p>
<p>
Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de
las bases de datos.
</p>
</body>
</html>

programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc. MySQL es un
interpretador 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 de
las 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 de
nivel <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 coloca
entre 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 2000000000
aproximadamente.<br> Definimos campos de este tipo cuando queremos representar, por
ejemplo, cantidades.
</p>
</body>
</html>
Tipos de datos en MySQL

varchar
se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se
coloca 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 aproximadamente.
Definimos 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 nivel
y 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 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.</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>
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. La
página secundaria debe tener también un hipervínculo a la página principal.
pagina1.html
<html>
<head>
</head>
<body>
<h1>Página principal.</h1>
<a href="pagina2.html">Noticias</a>
</body>
</html>
pagina2.html
<html>
<head>
</head>
<body>
<h1>Noticias.</h1>
<a href="pagina1.html">Salir.</a>
</body>
</html>

7. HIPERVÍNCULO A OTRO SITIO DE INTERNET <A>
Ejemplo: Confeccionar una página que contenga un enlace al sitio de google.

pagina1.html
<html>
<head>
</head>
<body>
<a href="http://www.google.com">Buscador Google</a>
</body>
</html>
8. HIPERVÍNCULO A UN CLIENTE DE CORREO <A>
Ejemplo: Confeccionar una página que contenga un hipervínculo configurando la propiedad href de tal
manera que abra un cliente de correo.
<html>
<head>
</head>
<body>
<h1>Contacto</h1>
<a href="mailto:juanancaravaca@gmail.com">Enviar mail.</a>
</body>
</html>
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 Cultura.html y Deportes3.html. 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 que
se 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>
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 sus
campos</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 su
recuperación</h2> <p>
Usamos "insert into". Especificamos los nombres de los campos entre paréntesis y separados por
comas y luego los valores para cada campo, también entre paréntesis y separados por
comas.<br>
</p>
</body>
</html>
Jesús Núñez González 8

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.
13. LISTAS NO ORDENADAS <UL>
Ejemplo: Confeccionar una página HTML que contenga una lista no ordenada con cuatro lenguajes de
programació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>
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 en
cada pais disponer una lista de hipervínculos de periódicos de dicho pais.
<html>
<head>
</head>
<body>
<ol>
<li>Argentina
<ul>
<li><a href="http://www.lanacion.com.ar">La Nación</a></li>
<li><a href="http://www.clarin.com.ar">Clarín</a></li>
<li><a href="http://www.pagina12.com.ar">Página 12</a></li>
</ul>
</li>
<li>España
<ul>
<li><a href="http://www.elpais.es">El País
Digital</a></li> <li><a
href="http://www.abc.es">ABC</a></li>
<li><a href="http://www.elmundo.es">El Mundo</a></li>
</ul>
</li>
<li>México
<ul>
<li><a href="http://www.jornada.unam.mx">La Jornada</a></li>
<li><a href="http://www.el-universal.com.mx">El Universal</a></li>
</ul>
</li>
</ol>
</body>
</html>
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 de
habitantes 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 de
habitantes.</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>
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.

Ejercicios Basicos HTML

Cargado por

Copyright:

Formatos disponibles

Ejercicios Basicos HTML

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ejercicios Basicos HTML

Cargado por

Copyright:

Formatos disponibles

EJERCICIOS DE HTML BÁSICO

1. ESTRUCTURA INTERNA DE UNA PÁGINA HTML

En el navegador obtendríamos el resultado:

2. SALTO DE LÍNEA <BR>

En el navegador obtendríamos el resultado:

En el navegador obtendríamos el resultado:

SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de

Tipos de datos en MySQL

En el navegador obtendríamos el resultado:

Típos de datos en MySQL

Ejercicio Propuesto 1: Confeccionar el titular de un periódico con un título de nivel 1.

En el navegador obtendríamos el resultado:

Ejemplo: Confeccionar una página que contenga un enlace al sitio de google.

En el navegador obtendríamos el resultado:

8. HIPERVÍNCULO A UN CLIENTE DE CORREO <A>

Al pulsar sobre el enlace se abrirá nuestro programa gestor de correo electrónico

Jesús Núñez González 8

En el navegador obtendríamos el resultado:

Añade al Ejercicio propuesto 5 una lista no ordenada que contenga hipervínculos a

Añade al ejercicio propuesto 5 una lista no ordenada de lenguajes de programación. Luego

En el navegador obtendríamos el resultado:

También podría gustarte