El Mundo de Ubuntu

En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.

Tabla.
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. Una vez que avance en este curso puede visitar CSS Ya)

Para la creación de una tabla intervienen una serie de elementos:
<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 paises en una columna y su cantidad de habitantes en otra:

<html>
<head>
</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>

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 (pruebe de asignarle el valor cero y otros valores superiores a 1)

<table border="1">

Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr:

<tr>

Continuamos con la apertura de la primer 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

Cerramos la celda:

</td>

Ahora cerramos la primer fila de la tabla:

</tr>

El mecanismos de la siguiente fila es similar a la primera.

Tabla con encabezado.

La primer característica que le vamos a agregar a una tabla son las celdas de encabezado. Normalmente la primer fila de una tabla puede representar los títulos para cada columna.

Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td>

El navegador representa distinto las celdas de datos y las celdas de encabezamiento.

Confeccionemos el mismo problema del concepto anterior pero agregando un título a cada columna de la tabla mediante celdas de encabezamiento:

<html>
<head>
</head>
<body>
<table border="1">
<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>

Si observamos el código de la página para indicar que se trata de una celda de tipo encabezado utilizamos el elemento th:

<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>

El elemento th debe estar contenido entre las marcas <tr> y </tr>, es decir pertenecen a una fila.

Para recordar el nombre de este nuevo elemento HTML:

<th> viene de table header cell que significa celda de encabezado de tabla.

Tabla con título.

Para disponer un título a una tabla debemos incorporar el elemento caption inmediatamente después que abrimos la marca table. El elemento caption requiere la marca de apertura y cierre.

Dispongamos un título a nuestra tabla con la población de distintos paises:

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

Como podemos observar la marca caption está inmediatamente después que se abre la marca de comienzo de la tabla:

<table border="1">
<caption>Población de los paises con mayor cantidad de habitantes.</caption>
<tr>

Para recordar el nombre de este nuevo elemento HTML:

<caption> significa título.

Tabla y combinación de celdas.

En algunas situaciones se necesita que una celda ocupe el lugar de dos o más celdas en forma horizonzal o vertical, para estos casos el elemento td o th dispone de dos propiedades llamadas rowspan y colspan.

A estas propiedades se les asigna un valor entero a partir de 2.

Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad rowspan con el valor 3:

<td colspan="3">Facturación de los últimos tres 
meses</td>

Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos:

<td rowspan="3">Secciones</td>

Veamos un ejemplo empleando el concepto de combinación de celdas:

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

Veamos como definimos la primer fila de la tabla:

<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturación 
de los últimos tres meses</th>
</tr>

Como podemos observar la primer celda la expandimos hacia abajo 4 casilla y la segunda celda la expandimos hacia la derecha en 4 celdas.

Cuando tenemos que disponer las celdas de la segunda fila debemos tener en cuenta que la primera está ocupada. Luego el código es:

<tr>
<td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td>
</tr>

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Guias y Tutoriales

En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.

Lista de definiciones.
Como su nombre lo indica se utiliza para asociar un término y la definición del mismo. 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:

<html>
<head>
</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>

Como podemos observar intervienen más marcas 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> (Definition Term) y <dd> (Definition Description)

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

Para recordar los nombres de estas marcas HTML:

<dl> viene de definition list

<dt> viene de definition term

<dd> viene de definition description

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 item puede ser una lista ordenada.

Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y cerrado de las marcas

Implementaremos una página que enumere una serie de paises en una lista ordenada y luego en cada pais dispondremos 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>

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

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

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Guias y Tutoriales

En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.

Lista ordenada.
Este elemento HTML es útil cuando debemos numerar una serie de objetos.

Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos el orden de llegada de tres corredores:

<html>
<head>
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>

La marca <ol> y su correspondiente marca de cerrado es </ol>
En su interior cada uno de los items se los dispone con el elemento li, que también tiene la marca de comienzo <li> y la marca de fin de item </li>

Luego se encarga el navegador de numerar cada uno de los items 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 ordened list
<li> viene de list item

Lista no ordenada.
Una lista no ordenada como su nombre lo indica no utiliza un número delante de cada items sino un pequeño símbolo gráfico.

La forma de implementar este tipo de listas es idéntico a las listas ordenadas.

Veamos un ejemplo donde implementamos una lista no ordenada:

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

Para recordar los nombres de estas marcas HTML:
<ul> viene de unordered list
<li> viene de list item

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Guias y Tutoriales

En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.

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

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

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 mysqlya.com.ar
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>
</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 son:
<a name="introduccion"></a>
<h2>Introducción</h2>
<p>
Como podemos observar la definción del ancla se hace inmediatamente anterior al título donde queremos que el navegador se sitúe.

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="pagina2.html#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ágina y que la primera llame a diferentes anclas definidas en la segunda:
pagina1.html
<html>
<head>
</head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="pagina2.html#introduccion">Introducción</a><br>
<a href="pagina2.html#mostrarbasedatos">show databases</a><br>
<a href="pagina2.html#creaciontabla">Creación de una tabla
y mostrar sus campos</a><br>
<a href="pagina2.html#cargarregistros">Carga de registros a una
tabla y su recuperación</a><br>
</body>
</html>
pagina2.html
<html>
<head>
</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 mysqlya.com.ar
está instalado sobre un servidor Linux por lo que todos los ejercicios
deberán respetarse mayúsculas y minúsculas.
</p>
<a href="pagina1.html">Retornar</a><br>
<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="pagina1.html">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="pagina1.html">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
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="pagina1.html">Retornar</a><br>
</body>
</html>

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Guias y Tutoriales