Professional Documents
Culture Documents
SALTO DE LINEA
Para recordar los nombres de los elementos HTML es bueno ver cual es la
palabra completa de la misma:
<br> viene de la palabra en ingls break
PARRAFO
TITULOS
Otros elementos HTML muy utilizados son para indicar los ttulos, contamos con
los elementos:
<h1><h2><h3><h4><h5><h6>
El ttulo de mayor nivel es <h1>, es decir el que tienen normalmente una fuente de
mayor tamao (veremos que es el navegador el responsable de definir el tamao
de la fuente, ms adelante podr ver que uno puede modificar la fuente, tamao,
color etc.)
Segn la importancia del ttulo utilizaremos alguno de estos elementos HTML.
Requiere la marca de cerrado del ttulo con la barra invertida como hemos visto.
Los buscadores que indexan contenido (Google, Bing, Yahoo etc.) hacen incapi
en los ttulos para identifica los temas que tratan las pginas.
No hay que confundir el ttulo de la pgina que va en la seccin del head con el
elemento title.
Confeccionaremos una pgina que contenga un ttulo de primer nivel <h1> y luego
dos ttulos de nivel <h2>. Definiremos un prrafo para cada ttulo de segundo
nivel.
pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>Ttulo de la pgina</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 mximo 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 numricos enteros, de -2000000000
a 2000000000 aproximadamente.<br> Definimos campos de este
tipo cuando queremos representar, por ejemplo, cantidades.
</p>
</body>
</html>
Cada ttulo aparece siempre en una lnea 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 ttulo en una lnea nueva.
Recordemos que el HTML no tiene la responsabilidad de indicar el tamao de las
fuentes. El navegador definir el tamao de fuente segn el nivel de ttulo que
indiquemos. La de tamao ms grande es la de nivel 1 <h1>.
<h1> viene de la palabra heading
ENFASISIS
Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una
palabra o conjunto de palabras.
As como tenemos seis niveles de ttulos 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>Ttulo de la pgina</title>
</head>
<body>
<p><strong>Tpos 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 dgitos con los que no
se realizan operaciones matemticas, por ejemplo, cdigos de
identificacin, nmeros de
documentos, nmeros telefnicos. Tenemos los siguientes
tipos: varchar, char y text.</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numricos 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 (ao) y timestamp.</p>
</body>
</html>
Podemos ver que la sintaxis para el elemento strong es:
<strong>Tpos de datos</strong>
La mayora de los navegadores muestran el texto enfatizado con strong con un
texto en negrita y para el elemento "em" utilizan letra itlica (de todos modos esto
no es obligatorio, pero seguramente mostrarn los textos enfatizados).
Otra cosa importante que podemos hacer notar es que estos elementos HTML no
producen un salto de lnea como los de ttulo (h1,h2 etc.)
Para recordar el nombre de estos elementos HTML:
<em> viene de empathize que significa nfasis
El elemento "a" tiene una propiedad target que nos permite indicar que la
referencia del recurso sea abierto en otra pestaa.
Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar
que la pgina sea abierta en otra pestaa.
Confeccionemos una pgina que contenga dos hipervnculos, el primero abre el
sitio en el mismo navegador y el segundo en otra instancia del navegador:
<!DOCTYPE html>
<html>
<head>
<title>Ttulo de la pgina</title>
</head>
<body>
<h1>Apertura de enlaces en el mismo navegador y en otra
instancia del navegador</h1>
<p>
<a href="http://www.lanacion.com.ar">Peridico La Nacin</a>
<br>
<a href="http://www.clarin.com.ar" target="_blank">Peridico
Clarin</a>
</p>
</body>
</html>
Podemos ver la diferencia entre el primer hipervnculo:
<a href="http://www.lanacion.com.ar">Peridico La
Nacin</a>
y el segundo hipervnculo que indica que el sitio sea abierto en otra pestaa del
navegador:
<a href="http://www.clarin.com.ar"
target="_blank">Peridico Clarin</a>
LISTAS ORDENADAS
Este elemento HTML es til cuando debemos numerar o listar una serie de
objetos.
Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos
el orden de llegada de tres corredores:
<!DOCTYPE html>
<html>
<head>
<title>Ttulo de la pgina</title>
</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 tambin
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 las palabras ordered list
LISTA NO ORDENADA
Lista de definiciones
FORMULARIO
TEC AREA
checkbox
El elemento checkbox es otro control que se puede insertar en un formulario. Un
checkbox es una casilla de seleccin que puede tomar dos valores
(seleccionado/no seleccionado)
Para ver su funcionamiento implementaremos un formulario que solicite el ingreso
del nombre de una persona y 4 elementos de tipo checkbox para que seleccione
los lenguajes de programacin que conoce:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione los lenguajes que conoce:
<br>
<input type="checkbox" name="java">Java<br>
<input type="checkbox" name="cmasmas">C++<br>
<input type="checkbox" name="c">C<br>
<input type="checkbox" name="csharp">C#<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Veamos la sintaxis para definir controles de formulario de tipo checkbox:
<input type="checkbox" name="java">Java<br>
Como vemos tambin utilizamos el elemento HTML input, donde inicializamos la
propiedad type con el valor checkbox.
Un control checkbox no muestra texto, solo una casilla que el operador puede
tildar o destildar.
Si queremos que aparezca un mensaje junto al checkbox solo lo agregamos
seguido al elemento input.
Es importante hacer notar que los caracteres permitidos de la propiedad name son
los caracteres alfabticos y los nmeros siempre y cuando no sea el primero.
RADIO
Cuando tenemos un conjunto de opciones pero solo una puede ser seleccionada
debemos emplear controles visuales de tipo radio.
Para definir controles de tipo radio tambin utilizamos el elemento input
inicializando la propiedad type con el valor "radio"
Veamos un ejemplo del empleo de este control grfico, supongamos que
necesitamos indicar el tipo de estudios que tenemos utilizando controles de tipo
radio:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione el mximo nivel de estudios que tiene:
<br>
<input type="radio" name="estudios" value="1">Sin
estudios<br>
<input type="radio" name="estudios" value="2">Primario<br>
<input type="radio" name="estudios" value="3">Secundario<br>
<input type="radio" name="estudios"
value="4">Universitario<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Veamos como se definen los controles de tipo radio:
<input type="radio" name="estudios" value="1">Sin
estudios<br>
<input type="radio" name="estudios"
value="2">Primario<br>
<input type="radio" name="estudios"
value="3">Secundario<br>
<input type="radio" name="estudios"
value="4">Universitario<br>
Como podemos observar todos tienen el mismo valor en la propiedad name, con
esto se logra que cuando seleccionamos uno se deseleccione el actual.
El valor que se rescata en el servidor es el dato almacenado en la propiedad
value.
Si queremos disponer varios grupos de controles de tipo radio debemos definirles
a cada grupo la propiedad name nombres distintos.
}
Una variante del cuadro de seleccin que vimos en el concepto anterior es permitir
que el visitante del sitio pueda seleccionar varias opciones.
Supongamos que tenemos un cuadro de seleccin con una lista de colores y
queremos que el visitante pueda elegir varios y no uno solo.
La pgina que resuelve este problema es:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Seleccione uno o varios colores (Presione Ctrl para
seleccionar varios colores)<br>
<select name="colores[]" size="4" multiple>
<option value="1">Rojo</option>
<option value="2">Verde</option>
<option value="3">Azul</option>
<option value="4">Amarillo</option>
<option value="5">Blanco</option>
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Podemos observar la sintaxis para la definicin de un cuadro de seleccin
mltiple:
<select name="colores[]" size="4" multiple>
Definimos una propiedad llamada multiple y no le asignamos valor, por otro lado al
nombre definido en la propiedad name le agregamos al final los caracteres [] para
que desde el servidor podamos identificar que el control retorna posiblemente
muchos valores.
Es tambin comn inicializar la propiedad size con un valor mayor a 1 para que
sea ms fcil la seleccin.
La mayora de los navegadores permiten seleccionar opciones que no se
encuentran juntas mediante el mouse y presionando simultneamente la tecla Ctrl.
BOTON+
El elemento button es un control visual que se puede utilizar para sustituir los
controles:
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
Entre otras las ventanjas de este elemento es que podemos agregar imgenes
dentro del botn.
La sintaxis de este elemento es la siguiente:
<button type="submit">
Texto a mostrar dentro del botn.
</button>
Todo lo que est contenido entre las marcas de comienzo y fin del elemento
button aparece dentro del botn, como por ejemplo una imagen, un prrafo,
enfatizado de una palabra etc.
La propiedad type se puede inicializar con alguno de estos tres valores: "submit",
"reset" y "button". Los dos primeros cumplen las funciones que ya conocemos es
decir envo de los datos al servidor y borrado del contenido de los controles. En
cuanto al tercer valor posible de la propiedad type significar que deberemos
codificar una funcin en javascript para procesar el evento.
Para ver el funcionamiento confeccionaremos un formulario que solicite el ingreso
del nombre de una persona y dos elementos button para subir el dato al servidor o
borrar el dato cargado:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<button type="submit">Enviar<img src="enviar.gif"
alt="envio"></button>
<button type="reset">Borrar<img src="borrar.gif"
alt="borrado"></button>
</form>
</body>
</html>
Perfectamente podemos definir un texto y cargar una imagen dentro del botn:
<button type="submit">Enviar<img src="enviar.gif"
alt="envio"></button>