miércoles, 12 de noviembre de 2014

Estructura de un documento HTML

HTML es "Hyper Text Markup Language" que significa "Lenguaje de marcado de hipertexto". Ya hemos hablado de hipertexto en el tutorial World Wide Web, www, w3 o La Web. Este lenguaje describe una página Web usando marcas o tags.

A continuación vemos un ejemplo de código fuente de una página Web o documento HTML.

<html>

<head>

<title>Hola Mundo</title>

</head>

<body>

<h1>Hola Karlos Rivas</h1>

<p>Bienvenidos a nuestra primera <br/> página Web.</p>

</body>

</html>

Tag HTML. ¿Que es un Tag HTML?

Cada palabra rodeada por los símbolos "<" y ">" en el código fuente anterior es llamada Tag. Existen 3 tipos de Tags:

Tag de inicio o apertura. Ejemplo: <h1>
Tag de fin o cierre. Ejemplo: </h1>
Tag de inicio y cierre. Ejemplo: <br/>

Elemento HTML

Un tag de inicio y su correspondiente tag de fin componen un elemento HTML.

Ej: <title>Hola Mundo</title>

Lo que esta entre un tag de inicio y su correspondiente tag de fin es el contenido del tag.

Un tag de inicio y cierre por si solo compone un elemento HTML. Ej: <br/>

Estructura básica de un documento HTML

El primer tag HTML de una página Web debería ser <html> y el último </html>.En otras palabras toda la pagina Web debe estar contenida en un elemento HTML.

Dentro del elemento HTML existen el elemento header que contendrá información de configuración y el elemento body que contendrá todo lo que es visible de nuestra página.

Cuando un Browser interpreta este código fuente anterior el resultado es:

En este ejemplo podemos ver como el elemento title define el titulo de la página que podemos ver en la pestaña superior.

Dentro del elemento body existe un elemento h1 que define un encabezado principal y un elemento p que define un párrafo. Dentro del elemento p hay un elemento br que define un salto de carro.

Como podemos ver dentro de body no solo está la información a ser representada en la página Web sino que existen marcadores o tags que indican como representar la información.

Conceptos Generales de la World Wide Web - www

Hipertexto

Hipertexto son documentos de texto entrelazados. El enlace normalmente es una palabra o frase subrayada que apunta a otro documento. Al hacer click sobre el enlace el documento actual es reemplazado por el indicado en el enlace.

Internet

Internet es el sistema mundial de interconexión de redes de ordenadores basado en el protocolo de comunicaciones IP. Algunos servicios existentes sobre esta red son: correo (e-mail), transferencia de archivos (ftp) y el servicio de documentos de hipertexto llamado World Wide Web (www) basado en el protocolo http.

World Wide Web

La World Wide Web fue inventada en los 1990s por Tim Berners-Lee en CERN y es el concepto de Hipertexto aplicado a Internet. Cada documento llamado "Página web" se encuentra en un servidor y es visto usando un programa al que Berners-Lee llamó Browser.

Página web

Una página web está escrita en lenguaje HTML y tiene un nombre o identificador único en todo Internet. Este identificador es llamado URL.

URL "Uniform Resource Locator"

Un URL está compuesto de:

Sitio Web

Un Sitio Web es un conjunto de páginas webs que normalmente se encuentran en el mismo Host. Por ejemplo www.edu4java.com es un sitio web.

Browser, Navegador, Explorador o Cliente HTTP

Un Browser es el programa que nos permite navegar por la World Wide Web. Si lo alimentamos con la dirección de una página Web URL se encargará de traerla desde el otro lado del mundo si es necesario.

Cliente HTTP

El Browser trabaja conjuntamente con un servidor HTTP que es el programa que almacena las páginas Web. Esta relación entre los dos programas es conocida como "Cliente - Servidor" donde el Browser es el cliente. La forma en que se comunican se llama "Protocolo HTTP" de allí el nombre "Cliente HTTP".

martes, 11 de noviembre de 2014

Practica de Listas - Enlaces y Estilos

universidades.html

Resultado

Listas en HTML

Listas en HTML - <UL> <OL> <LI>

Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:

Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol>y cada elemento de la lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre</li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.

Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.

Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas.
- Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>.
- Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>.

Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact: <dl compact>.

Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.

Ejemplo

martes, 17 de junio de 2014

Fichero listado de alumnos

listado_alumnos.php

<html>
<head>
<meta charset="UTF-8">
<title>Listado de Alumnos</title>
<link href="matricula.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
require ("conexion.php");
$result = mysqli_query($enlace, "SELECT * FROM alumnos");
?>
<h1 id='titulo'>LISTADO ALUMNOS</h1>
<div id='menu'>
<button onclick="window.location='insertar.html'">Nuevo Alumno</button>
<button onclick="window.location='buscar_alumno.php'">Actualizar</button>
<button onclick="window.location='buscar_eliminar_alumno.php'">Eliminar</button>
</div>
<table id='tabla' >
<tr id="fila">
<td>Id Alumno</td>
<td>Apellidos</td>
<td>Nombres</td>
<td>Telefono</td>
<td>Domicilio</td>
</tr>
<?php
//Con la condicional while obtenemos los datos, mysqli_fetch_array() nos permite hacer esto, solo colocamos la variable que contiene esta con el nombre de la columna y nos arroja el dato, y como while es una condicional repetitiva y a la vez estamos construyendo la tabla, nos resultara una tabla con los datos ordenados según lo consultemos.
while ($row = mysqli_fetch_array($result)){
    echo "<tr>";
    echo "<td>".$row[idalum]."</td>";
    echo "<td>".$row[apealum]."</td>";
    echo "<td>".$row[nomalum]."</td>";
    echo "<td>".$row[telealum]."</td>";
    echo "<td>".$row[domialum]."</td>";
    echo "</tr>";
}
mysqli_close($enlace);
?>
</table>
</body>
</html>

______________________________________________________________________

NOTA: Agregar las siguientes reglas al fichero matricula.css

#titulo{
background-color: #f26300 !important;
color:#ffffff;
font-size: 26px;
text-align: center;
}

#menu{
background:#dcdcdc;
margin:0 auto;
padding:14px;
}

#menu button{
clear:both;
margin:0 auto;
width:100px;
height:31px;
background:#f26300 !important;
text-align:center;
line-height:20px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

#tabla{
border:solid 2px #708090;
background:#dcdcdc;
margin:0 auto;
width:1000px;
padding:14px;
}

#fila{
clear:both;
margin:0 auto;
height:31px;
background:#f26300 !important;
text-align:center;
line-height:20px;
color:#FFFFFF;
font-weight:bold;
}

Fichero guardar datos actualizados del alumno

guardar_actualizacion_alumno.php

<html>
<head>
<meta charset="UTF-8">
<title>Actualizar datos de alumno</title>
</head>
<body>
<?php
require ("conexion.php");
//Recibimos los parametros enviados mediante POST por el Formulario
$idalum=$_POST["idalum"];
$apealum = $_POST["apealum"];
$nomalum = $_POST["nomalum"];
$telealum = $_POST["telealum"];
$domialum = $_POST["domialum"];
$actualizar = mysqli_query($enlace,"UPDATE alumnos SET apealum='$apealum', nomalum='$nomalum', telealum='$telealum', domialum='$domialum' WHERE idalum=$idalum");
if (!$actualizar){
echo "<script type='text/javascript'>confirm('Error al actualizar');</script>";
}else{
echo "<script type='text/javascript'>confirm('Actualizacion exitosa');</script>";
}
//Cerramos la conexión
mysqli_close($enlace);
echo "<script type='text/javascript'>window.location='listado_alumnos.php';</script>";
?>
</body>
</html>

martes, 27 de mayo de 2014

Insertar Nuevo Registro con PHP y MySQL

Insertar Nuevo Registro con PHP y MySQL

matricula.css

body{
font-family:verdana, arial, helvetica, sans-serif;
font-size:12;
color:black;
background-color:#cccccc;
text-align:center;
}

#formulario{
border:solid 2px #708090;
background:#dcdcdc;
margin:0 auto;
width:400px;
padding:14px;
}
#formulario h1 {
font-size:20px;
font-weight:bold;
margin-bottom:30px;
margin-top: 5px;
}

#formulario label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}

#formulario input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #708090;
width:200px;
margin:2px 0 20px 10px;
}
#formulario button{
clear:both;
margin:0 auto;
width:100px;
height:31px;
background:yellowgreen;
text-align:center;
line-height:20px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

#titulo{
background-color: #ff0000;
color:#ffffff;
font-size: 26px;
text-align: center;

}