Índice
Esta es la estructura basica de una pagina web.
las palabras entre los signos mayor y menor son denomidas etiquetas.
En esta pagina lo unico que se va a ver es el texto "Cuerpo de la página"
con el color y la fuente predeterminada del navegador q estemos usando
Todo lo que aparezca entre < > no se vera en el navegador.
Para hacer una pagina web podemos usar el notepad o block de notas que
viene con windows, hay muchos programas que podemos usar pero por ahora
el block de notas o el kwrite nos alcanzan y sobran.
Si queremos podemos escribir un texto plano y guardarlo con extension
HTML o HTM pero no podremos tener control sobre este.
Siempre hay q respetar la estructura basica del codigo HTML:
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
Y el cuerpo de la página:
El texto en la pagina web no se imprime tal cual en el navegador como lo escribimos nosotros, si queremos un salto de linea no alcansa con apretar enter tenemos que
usar la etiqueta
Entences si quiero escribir en una pagina web el siguiente texto ponemos:
Hola formuleros,
Como les va?
El cogido HTML sera:
PÁRRAFOS
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las marcas
Dentro de un párrafo puede haber saltos de línea
Para recordar el nombre de esta marca HTML:
El título de mayor nivel es
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:
o esto:
El navegador dispone cada título en una línea nueva.
Para recordar el nombre de esta marca HTML:
ÉNFASIS
Para dar un poco de énfasis al texto en la web podemos usar:
q lo hara como en cursiva o italik y
que lo unico q hace es poner el texto en negrita
el modo de uso de las dos es identico
LINKS
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. Esto es lo que hace diferente la página de un libro con la página de un sitio en internet. Normalmente un libro lo recorremos en forma secuencial, pero un sitio de internet podemos disponer estos enlaces entre un conjunto de páginas y luego tener distintas alternativas de recorrido.
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:
pagina1.html
pagina2.html
Links a otra web:
La sintaxis para disponer un hipervínculo a otro sitio de internet es:
Para recordar el nombre de esta marca HTML:
Imágenes
Para insertar una imagen dentro de una página debemos utilizar el elemento HTML
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:
Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para recuperarla será:
Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /
Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML luego la sintaxis será:
Es decir, le antecedemos .. y la barra / al nombre de la imagen
Si queremos subir dos carpetas luego escribimos:
Por último, si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes pero que está al mismo nivel:
Primero le indicamos que subimos al directorio padre mediante los dos puntos .. y seguidamente indicamos el nombre de la carpeta y la imagen a mostrar.
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:
Para recordar los nombres de estas marcas 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:
La marca
En su interior cada uno de los items se los dispone con el elemento li, que también tiene la marca de comienzo
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:
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:
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:
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:
paréntesis y separados por comas y luego los valores para cada campo, también
entre paréntesis y separados por comas.
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.
Note que los datos ingresados, como corresponden a campos de cadenas de caracteres
se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS.
Cada hipervínculo hace referencia a un ancla que se encuentra en la misma página:
Luego la definición de las anclas son:
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:
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
pagina2.html
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.
Cada registro contiene un dato por cada columna de la tabla.
Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia
a la información que almacenará.
Cada campo (columna) también debe definir el tipo de dato que almacenará.
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:
Como podemos observar intervienen más marcas que en los otros dos tipos de listas. Las marcas que encierran a la lista son
Ahora debemos poner a pares estos dos elementos
El navegador se encarga de hacer el sangrado del contenido del elemento dt
Para recordar los nombres de estas marcas HTML:
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:
El titulo en las paginas:
El elemento title nos permite definir el título que aparecerá en la barra del navegador (es decir en la parte más alta de la ventana)
Siempre debemos buscar un título lo más significativo en cuanto a lo que muestra la página.
Veamos una simple página que muestre un mensaje y contenga un hipervínculo a una segunda página que muestre otro título:
pagina1.html
pagina2.html
**********************************************************************************
Contenido de la cabecera de la página (
Un elemento que no se visualiza es el meta, que tiene por objetivo especificar información sobre el propio documento.
Veamos las dos propiedades fundamentales de la marca meta y los valores más comunes con lo que podemos inicializarlos:
Name almacena el nombre de la propiedad y content el valor de la propiedad.
No existe ninguna especificación de la W3C que defina los valores posibles para el atributo name, si bien existen algunos que son estandares de facto (description, keywords, author etc.)
Veamos las propiedades y valores más comunes
Los buscadores tienen en cuenta los metadatos. Si en la página inicializamos la propiedad name del elemento meta con el valor keywords luego buscará en la propiedad content las distintas palabras claves más representativas para dicha página. Esto es muy útil para posicionar nuestra página según el contenido que provee.
Veamos otras inicializaciones del elemento meta:
En este caso especificamos una descripción de la página, pudiendo ser del sitio si se trata de la página principal.
//////****** Comentarios! *******/////////
Un comentario es un texto que solo le interesa a la persona que desarrolló la página, el navegador ignora todo el contenido que se encuentra dentro de esta marca.
Los comentarios son muy útiles para el desarrollador de la página. Uno deja anotaciones para facilitar el mantenimiento del sitio.
Además hay que tener en cuenta que puede ser otra persona la que desarrolle en otro momento el mantenimiento de las páginas que desarrollamos nosotros. Lo que para uno puede ser muy obvio a otro desarrollador puede no ser tan obvio.
Otro uso muy habitual cuando estamos desarrollando la página si queremos deshabilitar una parte del código podemos encerrarla entre los caracteres de comentarios.
La sintaxis para definir un comentario es:
----------------------------------------------------------------------------------------
Caracteres especiales!
Posiblemente hasta ahora no se a preguntado como disponer dentro de una página los caracteres: < y >. Veremos que no los podemos disponer directamente ya que el navegador los confudiría con los caracteres que se utilizan para las marcas HTML.
La solución es utilizar otra sintaxis para dichos caracteres, veamos los más utilizados:
Es decir la sintaxis es disponer un ampersand seguido de un nombre significativo (por lo menos para los que entienden ingles) y finalmente un punto y coma.
Para ver su funcionamiento mostraremos la siguiente ecuación:
pagina1.html
las palabras entre los signos mayor y menor son denomidas etiquetas.
En esta pagina lo unico que se va a ver es el texto "Cuerpo de la página"
con el color y la fuente predeterminada del navegador q estemos usando
Todo lo que aparezca entre < > no se vera en el navegador.
Para hacer una pagina web podemos usar el notepad o block de notas que
viene con windows, hay muchos programas que podemos usar pero por ahora
el block de notas o el kwrite nos alcanzan y sobran.
Si queremos podemos escribir un texto plano y guardarlo con extension
HTML o HTM pero no podremos tener control sobre este.
Siempre hay q respetar la estructura basica del codigo HTML:
- Código:
<html>
<head>
</head>
<body>
Cuerpo de la página.
</body>
</html>
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
- Código:
<head>
</head>
Y el cuerpo de la página:
- Código:
<body>
Cuerpo de la página.
</body>
El texto en la pagina web no se imprime tal cual en el navegador como lo escribimos nosotros, si queremos un salto de linea no alcansa con apretar enter tenemos que
usar la etiqueta
Entences si quiero escribir en una pagina web el siguiente texto ponemos:
Hola formuleros,
Como les va?
El cogido HTML sera:
- Código:
<html>
<head>
</head>
<body>
Hola formuleros,<br>
Como les va?
</body>
</html>
PÁRRAFOS
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las marcas
- Código:
<p>
- Código:
</p>
Dentro de un párrafo puede haber saltos de línea
- Código:
<br>
- Código:
<html>
<head>
</head>
<body>
<p>
En este post vamos a aprender algo sobre las equiquetas q nos permiten<br>
ir a otras paginas de nuestro sitio y a paginas externas, tambien veremos<br>
como agregar una imagen a nuestra web
</p>
<p>
Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse
en el mundo de la producción de las páginas WEB.
</p>
</body>
</html>
Para recordar el nombre de esta marca HTML:
viene de paragraph
TÍTULOS
Otros elementos HTML muy utilizados son para indicar los títulos, para esto contamos con los elementos:
- Código:
<h1><h2><h3><h4><h5><h6>
El título de mayor nivel es
- Código:
<h1>
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:
- Código:
<h1>Tipos de datos en Lenguaje CL</h1>
<h2>int</h2>
o esto:
- Código:
<h1>Tipos de datos en Lenguaje C</h1><h2>int</h2>
El navegador dispone cada título en una línea nueva.
- Código:
<html>
<head>
</head>
<body>
<h1>Tipos de datos en Lenguaje C</h1>
<h2>int</h2>
<p>
Se usa para numeros enteros. Desde 16 bits -32,768 a 32,767
</p>
<h2>Float</h2>
<p>
Se usa para numeros con decimales. Desde 32 bits 3.4*10-38 a 3.4*10+38 (6 dec)
</p>
</body>
</html>
Para recordar el nombre de esta marca HTML:
- Código:
<h1>
ÉNFASIS
Para dar un poco de énfasis al texto en la web podemos usar:
- Código:
<em>
q lo hara como en cursiva o italik y
- Código:
<strong>
que lo unico q hace es poner el texto en negrita
el modo de uso de las dos es identico
- Código:
<html>
<head></head>
<body>
<p>
<em>texto en cursiva</em>
<strong>texto en negrita</strong>
</p>
</body>
</html>
LINKS
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. Esto es lo que hace diferente la página de un libro con la página de un sitio en internet. Normalmente un libro lo recorremos en forma secuencial, pero un sitio de internet podemos disponer estos enlaces entre un conjunto de páginas y luego tener distintas alternativas de recorrido.
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:
- Código:
<a href="pagina2.html">Noticias</a>
pagina1.html
- Código:
<html>
<head>
</head>
<body>
<h1>Página principal.</h1>
<a href="pagina2.html">Noticias</a>
</body>
</html>
pagina2.html
- Código:
<html>
<head>
</head>
<body>
<h1>Noticias.</h1>
<a href="pagina1.html">Salir.</a>
</body>
</html>
Links a otra web:
La sintaxis para disponer un hipervínculo a otro sitio de internet es:
- Código:
<a href="http://www.google.com">Buscador Google</a>
Para recordar el nombre de esta marca HTML:
- Código:
<a>
Imágenes
Para insertar una imagen dentro de una página debemos utilizar el elemento HTML
- Código:
<img>
- Código:
<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:
- Código:
<img src="foto1.jpg" alt="Pintura geométrica">
Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para recuperarla será:
- Código:
<img src="imagenes/foto1.jpg" alt="Pintura geométrica">
Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /
Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML luego la sintaxis será:
- Código:
<img src="../foto1.jpg" alt="Pintura geométrica">
Es decir, le antecedemos .. y la barra / al nombre de la imagen
Si queremos subir dos carpetas luego escribimos:
- Código:
<img src="../../foto1.jpg" alt="Pintura geométrica">
Por último, si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes pero que está al mismo nivel:
- Código:
<img src="../imagenes/foto1.jpg" alt="Pintura geométrica">
Primero le indicamos que subimos al directorio padre mediante los dos puntos .. y seguidamente indicamos el nombre de la carpeta y la imagen a mostrar.
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:
- Código:
<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:
- Código:
<ul>
- Código:
<li>
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:
- Código:
<html>
<head>
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>
La marca
- Código:
<ol>
- Código:
</ol>
En su interior cada uno de los items se los dispone con el elemento li, que también tiene la marca de comienzo
- Código:
<li>
- Código:
</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:
- Código:
<ol>
- Código:
<li>
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:
- Código:
<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:
- Código:
<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:
- Código:
<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>
paréntesis y separados por comas y luego los valores para cada campo, también
entre paréntesis y separados por comas.
- Código:
<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.
- Código:
<br>
Note que los datos ingresados, como corresponden a campos de cadenas de caracteres
se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS.
- Código:
</p>
</body>
</html>
Cada hipervínculo hace referencia a un ancla que se encuentra en la misma página:
- Código:
<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:
- Código:
<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:
- Código:
<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
- Código:
<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
- Código:
<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 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.
Cada registro contiene un dato por cada columna de la tabla.
Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia
a la información que almacenará.
Cada campo (columna) también debe definir el tipo de dato que almacenará.
- Código:
</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>
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:
- Código:
<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
- Código:
<dl>
- Código:
</dl>
Ahora debemos poner a pares estos dos elementos
- Código:
<dt>
- Código:
<dd>
El navegador se encarga de hacer el sangrado del contenido del elemento dt
Para recordar los nombres de estas marcas HTML:
- Código:
<dl>
- Código:
<dt>
- Código:
<dd>
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:
- Código:
<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>
- Código:
<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>
El titulo en las paginas:
El elemento title nos permite definir el título que aparecerá en la barra del navegador (es decir en la parte más alta de la ventana)
Siempre debemos buscar un título lo más significativo en cuanto a lo que muestra la página.
Veamos una simple página que muestre un mensaje y contenga un hipervínculo a una segunda página que muestre otro título:
pagina1.html
- Código:
<html>
<head>
<title>Título de la primer página</title>
</head>
<body>
<h1>Prueba del elemento title</h1>
<a href="pagina2.html">Ir a la segunda página</a>
</body>
</html>
pagina2.html
- Código:
<html>
<head>
<title>Título de la segunda página</title>
</head>
<body>
<h1>Prueba del elemento title (segunda página)</h1>
<a href="pagina1.html">Ir a la primer página</a>
</body>
</html>
**********************************************************************************
Contenido de la cabecera de la página (
Un elemento que no se visualiza es el meta, que tiene por objetivo especificar información sobre el propio documento.
Veamos las dos propiedades fundamentales de la marca meta y los valores más comunes con lo que podemos inicializarlos:
- Código:
<meta name="nombre de la propiedad" content="valor de la propiedad">
Name almacena el nombre de la propiedad y content el valor de la propiedad.
No existe ninguna especificación de la W3C que defina los valores posibles para el atributo name, si bien existen algunos que son estandares de facto (description, keywords, author etc.)
Veamos las propiedades y valores más comunes
- Código:
<meta name="keywords" content="html, programación, webmaster">
Los buscadores tienen en cuenta los metadatos. Si en la página inicializamos la propiedad name del elemento meta con el valor keywords luego buscará en la propiedad content las distintas palabras claves más representativas para dicha página. Esto es muy útil para posicionar nuestra página según el contenido que provee.
Veamos otras inicializaciones del elemento meta:
- Código:
<meta name="description" content="El objetivo de este tutorial
es presentar los conceptos básicos de HTML. Es objetivo prioritario respetar
los estándares del W3C">
En este caso especificamos una descripción de la página, pudiendo ser del sitio si se trata de la página principal.
- Código:
<meta name="author" content="Diego Rodriguez">
<meta name="copyright" content="Interpolacion inc.">
//////****** Comentarios! *******/////////
Un comentario es un texto que solo le interesa a la persona que desarrolló la página, el navegador ignora todo el contenido que se encuentra dentro de esta marca.
Los comentarios son muy útiles para el desarrollador de la página. Uno deja anotaciones para facilitar el mantenimiento del sitio.
Además hay que tener en cuenta que puede ser otra persona la que desarrolle en otro momento el mantenimiento de las páginas que desarrollamos nosotros. Lo que para uno puede ser muy obvio a otro desarrollador puede no ser tan obvio.
Otro uso muy habitual cuando estamos desarrollando la página si queremos deshabilitar una parte del código podemos encerrarla entre los caracteres de comentarios.
La sintaxis para definir un comentario es:
- Código:
<!-- Aquí va el comentario -->
----------------------------------------------------------------------------------------
Caracteres especiales!
Posiblemente hasta ahora no se a preguntado como disponer dentro de una página los caracteres: < y >. Veremos que no los podemos disponer directamente ya que el navegador los confudiría con los caracteres que se utilizan para las marcas HTML.
La solución es utilizar otra sintaxis para dichos caracteres, veamos los más utilizados:
- Código:
< <
> >
& &
" "
//Espacio en blanco.
© ©
€ €
Es decir la sintaxis es disponer un ampersand seguido de un nombre significativo (por lo menos para los que entienden ingles) y finalmente un punto y coma.
Para ver su funcionamiento mostraremos la siguiente ecuación:
- Código:
10+x*y < 12*z
pagina1.html
- Código:
<html>
<head>
<title>Título de la primer página</title>
</head>
<body>
<h1>
10+x*y < 12*z
</h1>
</body>
</html>
Última edición por Calabuig el Miér Jul 28, 2010 2:44 pm, editado 1 vez
