Scribd
Cargar
5 vistas38 páginas

Introducción a HTML y su Estructura

El documento es un curso introductorio sobre HTML, que cubre la estructura básica de una página HTML, incluyendo elementos como títulos, párrafos, listas, hipervínculos e imágenes. Se presentan ejemplos y ejercicios prácticos para familiarizar a los estudiantes con el lenguaje HTML. El objetivo es proporcionar a los estudiantes las herramientas necesarias para crear y modificar páginas web simples.

Cargado por

danypandi83
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
5 vistas38 páginas

Introducción a HTML y su Estructura

El documento es un curso introductorio sobre HTML, que cubre la estructura básica de una página HTML, incluyendo elementos como títulos, párrafos, listas, hipervínculos e imágenes. Se presentan ejemplos y ejercicios prácticos para familiarizar a los estudiantes con el lenguaje HTML. El objetivo es proporcionar a los estudiantes las herramientas necesarias para crear y modificar páginas web simples.

Cargado por

danypandi83
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Animación de gráficos |

Apuntes y ejercicios

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

1. ¿Qué es HTML?

2. Estructura interna de una página HTML.

3. Salto de línea <br>

4. Párrafo <p>

5. Títulos <h1><h2><h3><h4><h5><h6>

6. Enfasis (<em> <strong>)

7. Hipervínculo a otra página del mismo sitio <a>

8. Hipervínculo a otro sitio de internet <a>

9. Imágenes dentro de una página <img>

10. Hipervínculo mediante una imagen <a> y <img>

11. Apertura de un hipervínculo en otra pestaña del navegador.

12. Anclas llamadas desde la misma página.

13. Anclas llamadas desde otra página.

14. Lista ordenada (<ol>)

15. Lista no ordenada (<ul>)

16. Lista de definiciones (<dl>)

17. Listas anidadas.

18. Tabla (<table><tr><td>)

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

1 - ¿Qué es HTML?
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.

Este lenguaje está constituido de elementos que el navegador interpreta y las despliega
en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer
imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página,
listas, tablas para tabular datos, etc.

Para poder crear una página HTML se requiere un simple editor de texto y un navegador
de internet (Chrome, IExplorer, FireFox, Safari etc.)

Lo más importante es que en cada concepto se desarrollen los ejercicios propuestos y


se modifiquen los que se presentan ya resueltos.

Este curso lo que busca es acercar el lenguaje HTML a un estudiante que nunca antes
trabajó con el mismo. No pretende mostrar todos los elementos HTML en forma
alfabética.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

2 - Estructura interna de una


página HTML.
Las instrucciones HTML están encerradas entre los caracteres: < y >.

Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo
aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del
navegador).

La estructura básica de una página HTML es:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Cuerpo de la página.
</body>
</html>

Una página HTML es un archivo que generalmente tiene como extensión los caracteres
html. Por ejemplo, podemos llamar a nuestra primera página con el nombre:
[Link]

Estos son los elementos básicos que toda página HTML debe llevar:

Lo primero es el DOCTYPE que informa al navegador que el contenido siguiente se trata


de un archivo HTML (todos los navegadores modernos analizan la presencia del
DOCTYPE)
Luego continúa con la marca:<html> y finaliza con la marca:</html> al final del archivo.

Los finales (o cierres) de marcas tienen el mismo nombre que el comienzo de marca,
más el caracter / (diagonal o slash)

Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
<head>
</head>
Y el cuerpo de la página:
<body>
</body>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

En la cabecera es común inicializar el título de la página dentro de las marcas


<title></title> (normalmente aparece en la barra superior de nuestro navegador y es
utilizado por los motores de búsqueda como Google para indexar la página) El título
debe hacer referencia al contenido en sí de la página.

Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual
lo hayamos escrito.
Todas las páginas tienen como mínimo esta estructura: cabecera y cuerpo.
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y
minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que
dispongamos cada etiqueta en una línea (podríamos inclusive escribir toda la página en
una sola línea).

Problema 1: Confecciona una página con las marcas mínimas que debe
tener la página HTML y en el cuerpo de la misma escribe tu nombre y
apellido.

3 - Salto de línea <br>


Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no
importa si cuando tipeamos la página disponemos cada palabra en una línea distinta (es
decir un navegador no tiene en cuenta la tecla ENTER).

Para indicarle al navegador que queremos que continúe en la próxima línea debemos
hacerlo con el elemento HTML <br>.
Cuando aparece la marca <br> el navegador continúa con el texto en la línea siguiente.
Es uno de los pocos elementos HTML que no tiene marca de cerrado.
Implementemos una página que muestre, por ejemplo, los nombres de distintos
lenguajes de programación uno por línea:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
PHP<br>
JavaScript<br>
Java<br>
C<br>
C++
</body>
</html>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Como vemos sólo hemos agregado la marca <br> cada vez que queremos comenzar
una línea. Tengamos en cuenta que es indistinto si disponemos la marca en la misma
línea o en la siguiente:
PHP<br>
es lo mismo:
PHP
<br>
Para recordar los nombres de los elementos HTML es bueno ver cuál es la palabra
completa de la misma:

<br> viene de la palabra en inglés break

Problema 2: Confeccionar una página HTML que muestre su nombre y


apellido y en la siguiente línea los nombres completos de sus padres
separados por comas.

4 - Párrafo <p>
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo
que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con
respecto al próximo párrafo.

Dentro de un párrafo puede haber saltos de línea <br>.

Veamos con un ejemplo como disponer dos párrafos:


<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</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>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Esta materia tiene por objetivo acercar los conceptos iniciales para
introducirse
en el mundo de las bases de datos.
</p>
</body>
</html>

Tenemos en esta página HTML dos párrafos, cuando el navegador interpreta esta
página, separa los contenidos de los dos párrafos con un espacio horizontal. Además el
primer párrafo contiene varios saltos de línea. Normalmente uno agrupa en párrafos
para dar más sentido a nuestro escrito.
Cuando modificamos la ventana del navegador los párrafos se acomodan
automáticamente de acuerdo al ancho de la ventana.

Para recordar el nombre de este elemento HTML:

<p> viene de la palabra paragraph

Problema 3: Confecciona una página que muestre en un párrafo datos


referentes a tus estudios y en otro párrafo tu nombre y mail.

5 - Títulos <h1><h2><h3><h4><h5><h6>
Otros elementos HTML muy utilizados son para indicar los títulos, contamos con los
elementos:
<h1> <h2> <h3> <h4> <h5> <h6>

El título de mayor nivel es <h1>, es decir el que tienen normalmente una fuente de
mayor tamaño (veremos que es el navegador el responsable de definir el tamaño de la
fuente, más adelante podremos ver que uno puede modificar la fuente, tamaño, color
etc.)

Según la importancia del título utilizaremos alguno de estos elementos HTML. Requiere
la marca de cerrado del título con la barra invertida como hemos visto.

Los buscadores que indexan contenido (Google, Bing, Yahoo etc.) hacen hincapié en los
títulos para identificar los temas que tratan las páginas.
No hay que confundir el título de la página que va en la sección del head con el
elemento title.

Confeccionaremos una página que contenga un título de primer nivel <h1> y luego dos
títulos de nivel <h2>. Definiremos un párrafo para cada título de segundo nivel.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</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>

Cada título aparece siempre en una línea distinta, no importa si lo tipeamos seguido en
el archivo, es decir el resultado será igual si hacemos:
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
o esto:
<h1>Tipos de datos en MySQL</h1><h2>varchar</h2>

El navegador dispone cada título en una línea nueva.

Recordemos que el HTML no tiene la responsabilidad de indicar el tamaño de las


fuentes. El navegador definirá el tamaño de fuente según el nivel de título que
indiquemos. La de tamaño más grande es la de nivel 1 <h1>.

<h1> viene de la palabra heading


heading significa encabezado.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Problema 4: 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.

6 - Énfasis (<em> <strong>)


Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o
conjunto de palabras.
Así como tenemos seis niveles de títulos para enfatizar un bloque contamos con dos
elementos que son (<em> <strong>)

El elemento de mayor fuerza de énfasis es strong y le sigue em.


Veamos un ejemplo del empleo de estos dos elementos HTML:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</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>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Podemos ver que la sintaxis para el elemento strong es:


<strong>Tipos de datos</strong>

La mayoría de los navegadores muestran el texto enfatizado con strong con un texto en
negrita y para el elemento "em" utilizan letra itálica (de todos modos esto no es
obligatorio, pero seguramente mostrarán los textos enfatizados).
Otra cosa importante que podemos hacer notar es que estos elementos HTML no
producen un salto de línea como los de título (h1,h2 etc.)

Para recordar el nombre de estos elementos HTML:


<em> viene de empathize que significa énfasis.
<strong> es ya la palabra completa de strong que significa
fuerte.

Problema 5: Confeccionar una página que muestre la definición de tres


palabras. Aplicar el elemento strong a cada palabra previo a su
definición. Luego agregar el elemento "em" a una o a un conjunto de
palabras dentro de la definición.

7 - Hipervínculo a otra página del


mismo sitio <a>
El elemento más importante que tiene una página de internet es el hipervínculo, estos
nos permiten cargar otra página en el navegador.

Normalmente un navegador al encontrar esta marca muestra un texto subrayado, y al


hacer clic con el mouse sobre éste, el navegador carga la página indicada por dicho
hipervínculo.

Primero veremos cual es la sintaxis para disponer un hipervínculo a una página que se
encuentra en el mismo sitio (es decir otra página que hemos desarrollado nosotros).

La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:
<a href="[Link]">Noticias</a>

La propiedad href del elemento "a" hace referencia a la página que debe mostrar el
navegador si el visitante hace clic sobre el hipervínculo.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Implementemos dos páginas que contengan hipervínculos entre si, los nombres de las
páginas HTML serán: [Link] y [Link]

El contenido de [Link] es:


<!DOCTYPE html>
<html>
<head>
<title>Título de la página 1</title>
</head>
<body>
<h1>Página principal.</h1>
<a href="[Link]">Noticias</a>
</body>
</html>

Como podemos observar lo nuevo en la [Link] es el hipervínculo a la


[Link]:
<a href="[Link]">Noticias</a>

El segundo archivo [Link] tiene un hipervínculo a la primer página:


<a href="[Link]">Salir.</a>

Para recordar el nombre de esta marca HTML:


<a> viene de anchor que significa ancla.

La segunda página en nuestro ejemplo es:


[Link]
<!DOCTYPE html>
<html>
<head>
<title>Título de la página 2</title>
</head>
<body>
<h1>Noticias.</h1>
<a href="[Link]">Salir.</a>
</body>
</html>

Problema 6: 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.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

8 - Hipervínculo a otro sitio de


internet <a>
La sintaxis para disponer un hipervínculo a otro sitio de internet es:

<a href="[Link] Google</a>

Ahora la propiedad href la inicializamos con el nombre del dominio del otro sitio.

Algo importante que hay que anteceder al nombre del dominio es el tipo de protocolo a
utilizar. Cuando se trata de una página de internet, el protocolo es el http.

La siguiente página muestra un hipervínculo al sitio principal del buscador Google:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<a href="[Link] Google</a>
</body>
</html>

Problema 7: Confeccionar una página que contenga un hipervínculo a un


periódico (indicar sólo el nombre de dominio del periódico). Disponer
además un segundo hipervínculo a una página determinada de ese
periódico.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

9 - Imágenes dentro de una página


<img>
Para insertar una imagen dentro de una página debemos utilizar el elemento HTML
<img>, la misma no tiene una marca de finalización (similar a la marca <br>).

Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan


nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg
y png.

La sintaxis de esta marca es:


<img src="[Link]" alt="Pintura geométrica">

Como la imagen se encuentra en el mismo directorio donde se almacena la página


HTML, con indicar el nombre de archivo basta (no es necesario indicar ninguna ruta de
carpetas)

Confeccionemos una página que muestre una imagen llamada [Link] (La imagen se
encuentra almacenada en el servidor en la misma carpeta donde se localiza esta
página)

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<img src="[Link]" alt="Pintura geométrica">
</body>
</html>

Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para


recuperarla será:
<img src="imagenes/[Link]" alt="Pintura geométrica">

<img> viene de la palabra image


src viene de de la palabra source
alt viene de la palabra alternative

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Problema 8: Desarrollar una página que muestre dos imágenes llamadas


[Link] y [Link], las mismas se encuentran almacenadas en el
servidor en la misma carpeta donde se almacenará la página que
desarrollaráS.
Disponer un título a cada imagen.

10 - Hipervínculo mediante una


imagen <a> y <img>
Como ya conocemos los hipervínculos y cómo insertar imágenes en nuestra página,
ahora podemos implementar un hipervínculo pero en vez de mostrar un texto
mostraremos una imagen.
La solución es simple y consiste en disponer la marca <img> encerrada entre la marca
de comienzo y fin del enlace(<a>)
Confeccionemos 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 la carpeta compartida del curso en: 1er. Parcial →
Semana 3

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h2>Presione alguna de las imagenes para conocer más sobre esa
obra.</h2>
<a href="[Link]"><img src="../[Link]" alt="Pintura
Geométrica"> </a>
<br>
<a href="[Link]"><img src="../[Link]" alt="Pintura
Geométrica"> </a>
</body>
</html>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Problema 9 : Crear tres páginas con una foto cada una ([Link],
[Link] y [Link]) luego al ser presionada avanzar a la siguiente
página, es decir de la [Link] llamar a la [Link], de la
[Link] pasar a la [Link] y de ésta a la primera.
Las imágenes se encuentran en la carpeta compartida del curso en: 1er.
Parcial → Semana 3

11 - Apertura de un hipervínculo en
otra pestaña del navegador.
El elemento "a" tiene una propiedad target que nos permite indicar que la referencia del
recurso sea abierta en otra pestaña.

Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar que la
página sea abierta en otra pestaña.

Confeccionemos una página que contenga dos hipervínculos, el primero abre el sitio en
el mismo navegador y el segundo en otra instancia del navegador:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Apertura de enlaces en el mismo navegador y en otra instancia del
navegador</h1>
<p>
<a href="[Link] La Nación</a>
<br>
<a href="[Link] target="_blank">Periódico Clarin</a>
</p>
</body>
</html>
Podemos ver la diferencia entre el primer hipervínculo:
<a href="[Link] La Nación</a>
y el segundo hipervínculo que indica que el sitio sea abierto en otra pestaña del
navegador:
<a href="[Link] target="_blank">Periódico
Clarin</a>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

12 - Anclas llamadas desde la


misma página.
Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la página
para poder posteriormente disponer un hipervínculo a dicha marca.
Es una práctica común cuanda queremos desplazarnos dentro de una página de gran
tamaño. Se disponen hipervínculos a diferentes anclas.

La sintaxis para definir un ancla es:

<a name="nombreancla"></a>

No debemos confundir un ancla con un hipervínculo, más allá que se utiliza el mismo
elemento a.

Para un ancla inicializamos la propiedad name con el nombre del ancla.

Un ancla se la define en una parte de la página que queremos que el operador llegue a
partir de un hipervínculo.

Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

<a href="#nombreancla">Introducción</a><br>

Vemos que en la propiedad href indicamos el nombre del ancla.

Haremos un ejemplo, donde dispondremos una lista de hipervínculos que llaman a una
serie de anclas dispuestas en la misma página:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="#introduccion">Introducción</a><br>
<a href="#mostrarbasedatos">show databases</a><br>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

<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>
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.<br>
Ingresando instrucciones en la linea de comandos o embebidas en
un lenguaje como PHP nos comunicamos
con el servidor. Cada sentencia debe acabar con punto y coma
(;).<br>
La sensibilidad a mayúsculas y minúsculas, es decir, si hace
diferencia entre ellas, depende del
sistema operativo, Windows no es sensible, pero Linux si. Por
ejemplo Windows interpreta igualmente
las siguientes sentencias:<br>
create database administracion;<br>
Create DataBase administracion;<br>
Pero Linux interpretará como un error la segunda.<br>
Se recomienda usar siempre minúsculas. Es más el sitio
[Link] está instalado sobre un servidor
Linux por lo que todos los ejercicios deberán respetarse
mayúsculas y minúsculas.
</p>
<a name="mostrarbasedatos"></a>
<h2>show databases</h2>
<p>
Una base de datos es un conjunto de tablas.<br>
Una base de datos tiene un nombre con el cual accederemos a
ella.<br>
Vamos a trabajar en una base de datos ya creada en el sitio,
llamada "administracion".<br>
Para que el servidor nos muestre las bases de datos existentes,
se lo solicitamos enviando la instrucción:<br>
show databases;<br>
Nos mostrará los nombres de las bases de datos, debe aparecer en
este sitio "administracion".<br>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

</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>
Una tabla es una estructura de datos que organiza los datos en
columnas y filas; cada columna es un campo
(o atributo) y cada fila, un registro. La intersección de una
columna con una fila, contiene un dato
específico, un solo valor.<br>
Cada registro contiene un dato por cada columna de la tabla.<br>
Cada campo (columna) debe tener un nombre. El nombre del campo
hace referencia a la información que
almacenará.<br>
Cada campo (columna) también debe definir el tipo de dato que
almacenará.<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>
Es importante ingresar los valores en el mismo orden en que se
nombran los campos, si ingresamos
los datos en otro orden, no aparece un mensaje de error y los
datos se guardan de modo
incorrecto.<br>
Note que los datos ingresados, como corresponden a campos de
cadenas de caracteres se colocan
entre comillas simples. Las comillas simples son OBLIGATORIAS.
</p>
</body>
</html>

Cada hipervínculo hace referencia a un ancla que se encuentra en la misma página:

<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>

Luego la definición de las anclas es:

<a name="introduccion"></a>
<h2>Introducción</h2>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Como podemos observar la definición del ancla se hace inmediatamente anterior al título
donde queremos que el navegador se sitúe.

Problema 10: Disponer una serie de hipervínculos sobre noticias del día.
Enlazar los hipervínculos con anclas que se encuentren más abajo en la
misma página.

13 - Anclas llamadas desde otra


página.
También es perfectamente válido la llamada a anclas desde otra página (no importa si
se encuentra en el mismo sitio o en otro)
Debemos conocer el nombre de la página a llamar y el nombre del ancla, luego la
sintaxis para la llamada al ancla es:

<a href="[Link]#introduccion">Introducción</a>

Es decir, luego del nombre de la página que llamamos disponemos el caracter # y


seguidamente el nombre del ancla.
Confeccionemos dos páginas y que la primera llame a diferentes anclas definidas en la
segunda:

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="[Link]#introduccion">Introducción</a><br>
<a href="[Link]#mostrarbasedatos">show databases</a><br>
<a href="[Link]#creaciontabla">Creación de una tabla
y mostrar sus campos</a><br>
<a href="[Link]#cargarregistros">Carga de registros a una
tabla y su recuperación</a><br>
</body>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

</html>

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<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>
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.<br>
Ingresando instrucciones en la linea de comandos o embebidas en
un lenguaje como
PHP nos comunicamos con el servidor. Cada sentencia debe acabar
con punto y coma
(;).<br>
La sensibilidad a mayúsculas y minúsculas, es decir, si hace
diferencia
entre ellas, depende del sistema operativo, Windows no es
sensible, pero Linux
si. Por ejemplo Windows interpreta igualmente las siguientes
sentencias:<br>
create database administracion;<br>
Create DataBase administracion;<br>
Pero Linux interpretará como un error la segunda.<br>
Se recomienda usar siempre minúsculas. Es más el sitio
[Link]
está instalado sobre un servidor Linux por lo que todos los
ejercicios
deberán respetarse mayúsculas y minúsculas.
</p>
<a href="[Link]">Retornar</a><br>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

<a name="mostrarbasedatos"></a>
<h2>show databases</h2>
<p>
Una base de datos es un conjunto de tablas.<br>
Una base de datos tiene un nombre con el cual accederemos a
ella.<br>
Vamos a trabajar en una base de datos ya creada en el sitio,
llamada "administracion".<br>
Para que el servidor nos muestre las bases de datos existentes,
se lo solicitamos
enviando la instrucción:<br>
show databases;<br>
Nos mostrará los nombres de las bases de datos, debe aparecer en
este sitio
"administracion".<br>
</p>
<a href="[Link]">Retornar</a><br>
<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>
Una tabla es una estructura de datos que organiza los datos en
columnas y filas;
cada columna es un campo (o atributo) y cada fila, un registro.
La intersección
de una columna con una fila, contiene un dato específico, un solo
valor.<br>
Cada registro contiene un dato por cada columna de la tabla.<br>
Cada campo (columna) debe tener un nombre. El nombre del campo
hace referencia
a la información que almacenará.<br>
Cada campo (columna) también debe definir el tipo de dato que
almacenará.<br>
</p>
<a href="[Link]">Retornar</a><br>
<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>
Es importante ingresar los valores en el mismo orden en que se
nombran los campos,
si ingresamos los datos en otro orden, no aparece un mensaje de
error y los datos

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

se guardan de modo incorrecto.<br>


Note que los datos ingresados, como corresponden a campos de
cadenas de caracteres
se colocan entre comillas simples. Las comillas simples son
OBLIGATORIAS.
</p>
<a href="[Link]">Retornar</a><br>
</body>
</html>

Problema 11: Disponer una serie de hipervínculos sobre noticias del día.
Enlazar los hipervínculos con anclas que se encuentran en otra página.

14 - Lista ordenada (<ol>)


Esta etiqueta HTML es útil cuando debemos numerar o listar una serie de datos.
Veamos con un ejemplo una lista ordenada para conocer su sintaxis.

Por ejemplo, a continuación, se muestra el orden de llegada de tres corredores:


<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>

El resultado en el navegador es:

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

La marca <ol> y su correspondiente marca de cerrado es </ol>

En su interior cada uno de los ítems se los dispone con el elemento li, que también tiene
la marca de comienzo <li> y la marca de fin de ítem </li>

Luego se encarga el navegador de numerar cada uno de los ítems contenidos en la lista,
tengamos en cuenta que se numeran porque se trata de una lista ordenada.

Para recordar el nombre de estos elementos HTML:


<ol> viene de las palabras ordered list
<li> viene de las palabras list item

Problema 12: Confeccione una lista ordenada con los tres países 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 países enfatizado.
Colocar un título de primer nivel antes del listado.

15 - Lista no ordenada (<ul>)


Una lista no ordenada como su nombre lo indica no utiliza un número delante de cada
ítem sino un pequeño símbolo gráfico.
La forma de implementar este tipo de listas es idéntica a las listas ordenadas.

Veamos un ejemplo donde implementamos una lista no ordenada:


<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

</head>
<body>
<h2>Lenguajes de programación.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>

El resultado en el navegador es:

Para recordar los nombres de estas etiquetas HTML:


<ul> viene de las palabras unordered list
<li> viene de las palabras list item

Problema 13: Confeccionar una lista no ordenada que contenga


hipervínculos a distintos periódicos que conozcas. Agregar tantos ítems
como periódicos conozcas. Colocar un título de primer nivel antes del
listado.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

16 - Lista de definiciones (<dl>)


Como su nombre lo indica se utiliza para asociar un término y la definición de este.

El navegador se encarga de destacar y separa el término y su definición.

Crearemos una lista con la definición de varios lenguajes de programación:


<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<dl>
<dt>C++</dt>
<dd>Es un lenguaje de programación, diseñado a mediados de
los años 1980, por Bjarne Stroustrup, como extensión del
lenguaje
de programación C.</dd>
<dt>Java</dt>
<dd>Es un lenguaje de programación orientado a objetos
desarrollado
por Sun Microsystems a principios de los 90.</dd>
<dt>JavaScript</dt>
<dd>Es un lenguaje interpretado, es decir, que no requiere
compilación,
utilizado principalmente en páginas web, con una sintaxis
semejante a la
del lenguaje C.</dd>
</dl>
</body>
</html>

El resultado en el navegador es:

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Como podemos observar intervienen más etiquetas que en los otros dos tipos de listas.
Las marcas que encierran a la lista son <dl> (Definition List) y </dl>

Ahora debemos poner a pares estos dos elementos <dt> y <dd>


El navegador se encarga de hacer el sangrado del contenido del elemento dt

Para recordar los nombres de estas etiquetas HTML:


<dl> viene de definition list
<dt> viene de definition term
<dd> viene de definition description

Problema 14: Confecciona una lista de definición de un conjunto de 3


términos que utilices en tu carrera universitaria.

17 - Listas anidadas.
El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas
de distinto tipo, por ejemplo, podemos tener una lista no ordenada y uno de los ítems
puede ser una lista ordenada.
Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y
cerrado de las marcas.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Implementaremos una página que enumere una serie de países en una lista ordenada y
luego en cada país dispondremos una lista de hipervínculos de periódicos de dicho país:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</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>

El resultado en el navegador es:

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Se puede insertar en un elemento li una lista como podemos ver:


<li>Argentina
<ul>
<li><a href="[Link]
Nación</a></li>
<li><a href="[Link]
<li><a href="[Link]
12</a></li>
</ul>
</li>

Indentación o sangrado.

Los espacios en blanco que dejamos a la izquierda se llaman indentación y tienen por
objetivo que el código HTML sea más legible para la próxima vez que modifiquemos el
contenido de la página. El navegador no tiene en cuenta estos espacios y los ignora.

El sangrado nos permite identificar en forma más sencilla donde comienza una marca
HTML y donde finaliza.

Problema 15: Confeccionar una lista no ordenada de lenguajes de


programación. Luego disponer una lista ordenada con hipervínculos a
sitios que tratan dichos lenguajes.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

18 - Tabla (<table><tr><td>)
El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada,
organizado en filas y columnas.
Algo importante es que no utilizaremos las tablas para organizar la página completa
(esto se hace en la actualizad mediante CSS, es decir hojas de estilo)

Las tablas para componerlas se hace uso de otras etiquetas, las cuales no tienen
sentido sino están situadas dentro de una etiqueta de tabla. Estas etiquetas son las
siguientes.
Etiquetas Descripción
<table> Definición de una tabla.
<th> Definición de cabecera de tabla.
<tr> Define una fila en la tabla.
<td> Define una celda en la tabla.
<caption> Define el nombre o título de la tabla.
<colgroup> Especifica un grupo de una o más columnas para aplicar formato.
<col> Especifica las propiedades de una columna de las columnas definidas en un
elemento colgroup
<thead> Define la cabecera de la tabla.
<tbody> Define el cuerpo de la tabla
<tfoot> Define el pie de la tabla

<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre.


<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento
table. Este elemento requiere la marca de cierre.
<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento
tr. Este elemento requiere la marca de cierre.

Para recordar el nombre de estos elementos HTML:


<table>
<tr> viene de table row que significa fila de la tabla.
<td> viene de table data que significa dato de la tabla.

La mejor forma de entender y dominar este concepto es implementar tablas y ver su


resultado dentro del navegador. Confeccionemos una tabla que muestre los nombre de
países en una columna y su cantidad de habitantes en otra:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

<meta charset="UTF-8">
</head>
<body>
<table border="1">
<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>

El resultado en el navegador es:

Lo primero que aparece es la apertura del elemento table, donde inicializamos la


propiedad border con el valor 1, con esto el contorno de cada celda será visible

<table border="1">
Seguidamente viene la apertura de la primera fila de la tabla con el elemento tr:
<tr>
Continuamos con la apertura de la primera celda de la primer fila de la tabla:
<td>
Luego el dato propiamente dicho de la celda:
India
Cerramos la celda:
</td>
Abrimos la proxima celda:
<td>
Disponemos el valor de la celda:
1300 millones

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Cerramos la celda:
</td>
Ahora cerramos la primera fila de la tabla:
</tr>
El mecanismo de la siguiente fila es similar a la primera.

Problema 16: Confeccionar una tabla que muestre en la primera columna


los nombres de distintos empleados de una compañía y en la segunda el
sueldo bruto (la compañía tiene 4 empleados)

Definición de una tabla sencilla.


Para crear una tabla sencilla se ha de utilizar en primer lugar la etiqueta <table>, la cual
define la tabla. Y dentro de ella se han de situar por cada fila una etiqueta <tr>, mientras
que por cada casilla o celda dentro de la fila, se puede utilizar una etiqueta <th> o <td>,
dependiendo de que sea una casilla de cabecera o normal.
El siguiente ejemplo muestra la definición de una tabla de dos filas por dos columnas y
el atributo border, al cual se le puede dar un valor de 0 ó 1.
De esta forma se visualiza un borde en la tabla, este atributo solo se ha de utilizar
cuando se está realizando el documento web por motivos de visualización del diseño,
siendo conveniente quitar el mismo cuando se publique el documento y establecer los
formatos de la tabla mediante hojas de estilo.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Se ha de observar que, para cada una de las filas de la tabla, se utiliza la etiqueta <tr>, y
como contenido de las mismas, se utilizan etiquetas <th> o <td>, dependiendo de que se
quiera establecer celdas de encabezado o normales. Las celdas o casillas de
encabezado se visualizan con una fuente fuerte a diferencia de las normales. Para
definir el título de tabla se ha utilizado la etiqueta <caption>

Problema 17: Confeccionar una tabla que muestre en la primera columna


los nombres de distintos empleados de una compañía y en la segunda el
sueldo bruto (la compañía tiene 4 empleados) Mostrar los textos 'Nombre
del Empleado' y 'Sueldo Bruto' como primera fila de la tabla.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Problema 18: Confeccionar una tabla que muestre en la primera 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.
Definición de una tabla con combinación de columnas
Uno de los atributos que se pueden aplicar a las etiquetas de celda, independientemente
que sean de encabezado o normales. Es el atributo colspan, el cual permite realizar la
combinación de varias columnas en una sola.
Para especificar el valor del atributo, se ha de indicar el número de columnas sobre las
que se quiere realizar la combinación, utilizando un valor numérico encerrado entre
comillas dobles.
El siguiente ejemplo muestra el uso del atributo en una tabla que tiene celdas
combinadas aplicada la combinación sobre las columnas.

El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la imagen


siguiente:

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Como se puede observar en el ejemplo, se ha realizado la combinación de las columnas


1 y 2, de la primera fila, y también las columnas 4 y 5 de la misma fila.
También se ha realizado la combinación de las columnas 4 y 5 de la última fila de la
tabla.

Problema 19: 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 a
la cantidad de diarios de cada país.

Ejemplo:

Definición de una tabla con combinación de filas.


Al igual que se puede realizar la combinación de columnas, también se puede realizar la
combinación de filas, mediante el atributo rowspan.

Para especificar el valor del atributo, se ha de indicar el número de filas sobre las que se
quiere realizar la combinación, utilizando un valor numérico encerrado entre comillas
dobles.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

El siguiente ejemplo muestra el uso del atributo en una tabla que tiene celdas
combinadas aplicada la combinación sobre las filas.

El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen


siguiente.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Definición de tabla con columnas y filas combinadas

Se puede realizar la aplicación de los dos atributos de combinación de filas y columnas a


las celdas de la tabla, formando así tablas que contienen celdas combinadas.

El siguiente ejemplo muestra el uso de los atributos de combinación aplicados sobre una
tabla.

El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la imagen


siguiente.

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Problema 20: Confeccionar una tabla que muestre un horario de clase


escolar. Tomar de referencia la imagen de la carpeta que se encuentra
en la carpeta compartida del curso en: 1er. Parcial → Semana 4

Benemérita Universidad Autónoma de Puebla


Animación de gráficos |

Bibliografía:
[Link]
[Link]

Responsable del curso:

Mtro. Luis Cristhian Sánchez Mendoza

Es responsabilidad exclusiva de los autores el respeto de los derechos de autor sobre los contenidos e imágenes en el
presente documento, en consecuencia, la BUAP no se hace responsable por el uso no autorizado, errores, omisiones o
manipulaciones de los derechos de autor y estos serán atribuidos directamente al Responsable de Contenidos, así como los
efectos legales y éticos correspondientes.

Benemérita Universidad Autónoma de Puebla

También podría gustarte