Proyecto Nahual » HTML

HTML – Primer Clase

Introduccion

El lenguaje HTML lo enseniamos porque es el que se utiliza para hacer las paginas, si bien hay otras maneras es lejos el mas usado, es un lenguaje que nacio junto con la web y nunca perdio vigencia, aunque tuvo varias versiones.
Es el lenguaje que interpretan los navegadores como el explorer, el firefox o el chrome, y nos va a permitir hacer las pantallas de nuestros sistemas.

Empezando por algo basico

<html>

<head>
<title>Mi primera Pagina</title>
</head>

<body>
</body>
</html>

Como vemos hay una estructura de tags basica para hacer una pagina.

Tomo empieza con <html>

Es un standard, ahi se pueden definir algunas cuestiones como atributos pero por ahora lo dejamos asi que esta perfecto.

Encabezado

No tiene demasiado secretos al menos en lo que vemos hoy, podemos decir que aca definimo las variables que seran validas para todo el documento, por ahora lo que importa es el titulo dentro del tag title

<head>
<title>Mi primera Pagina</title>
</head>

El cuerpo

Dentro del cuerpo o body en ingles, se escribe todo el contenido del documento, aca en general esta

Algunos tags basicos.

Una vez que empezamos a entender html en general empezamos a aprender en profundidad cada uno de los diferentes tags que tenemos disponibles

Titulos

<h1>Mucha importancia</h1>

Mucha importancia

<h2>Menos importancia</h2>

Menos importancia

<h3>Mucha menos importancia</h3>

Mucha menos importancia

Manejo de texto

Las direcciones de correo electrónico se suelen marcar con esta directiva:

<address>Dirección: webmaster@etsit.upm.es</address>

Dirección: webmaster@etsit.upm.es
Se pueden dar también los atributos más tradicionales: negrita y cursiva:

<b>Esto en negrita</b> y <i>esto en cursiva</i>

Se puede utilizar un tipo de letra similar al de una máquina de escribir:

<tt>Máquina de escribir</tt>

Listas

<ul>
<li>Tomates
<li>Zanahorias
<li>Puerros
</ul>

Esto una lista numerada:

<ol>
<li>Miguel Induráin
<li>Tony Rominger
<li>Eugeni Berzin
</ol>

Un glosario está formado por una serie de parejas de término (marcado con <dt> al principio de línea) y definición (con <dd>). Por ejemplo, podríamos crear un pequeño diccionario con los términos perro, gato y pescadilla, de la siguiente manera:

<dl>
<dt>Perro (<i>n. masc.</i>)
<dd>Animal de cuatro patas que ladra.
<dt>Gato (<i>n. masc.</i>)
<dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
<dt>Pescadilla (<i>n. fem.</i>)
<dd>Animal que vive en el mar y está recubierto de escamas.
</dl>

Tablas

Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.

Cada fila de la tabla se indica mediante las tags <tr>…..</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>…..</th>indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>…..</td> indican que se trata de celdas comunes.

<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY> 

<H1>Tablas b&aacute;sicas</H1> 

<TABLE BORDER="1">
<TR>
   <TH>Cabereca 1</TH>
   <TH>Cabereca 2</TH>
   <TH>Cabereca 3</TH>
</TR>
<TR>
   <TD>Dato 1</TD>
   <TD>Dato 2</TD>
   <TD>Dato 3</TD>
</TR>
<TR>
   <TD>Dato 4</TD>
   <TD>Dato 5</TD>
   <TD>Dato 6</TD>
</TR>
</TABLE> 

</BODY>
</HTML>

Formularios

Los formularios se utilizan muchisimo para todo lo que vamos a hacer nosotros, se utilizan muchisimo en la programacion web y me permiten cargar informacion desde el navegador.

Declaracion

Para empezar vamos a ver la declaración de un formulario

<HTML>
<HEAD>
<TITLE>Ejemplo Formularios</TITLE>
</HEAD>
<BODY> 

<H1>Formularios</H1> 

<FORM ACTION="mailto:unaprueba" METHOD="POST">
<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM> 

</BODY>
</HTML>

Campos de entrada

La tag <input> define la introducción de variables. Junto a esta tag encontraremos los siguientes atributos:

type=”" Indicará el tipo de variable a introducir.
- text Indica que el campo a introducir será un texto. Sus atributos:
- maxlenght=”" Seguido de un valor que limitará el número máximo de carácteres a introducir en ese campo.
- size=”" Seguido de un valor que limitará el numero de carácteres a mostrar en pantalla.
- value=”" Indica que no hay valor inicial del campo.
- Password Indica que el campo a introducir será una palabra de paso. Mostrará asteriscos en lugar de letras escritas. Sus atributos serán los mismos que para text.
Checkbox El campo se elegirá marcando de entre varias opciones una casilla cuadrada.
- value=”" Entre comillas se indicará el valor de la casilla.
- checked La casilla aparecerá marcada por defecto.
Radio El campo se elegirá marcando de entre varias opciones una casilla circular.
- value=”" Entre comillas se indicará el valor de la casilla.
Image El campo contendrá el valor en coordenadas del punto de la imagen que haya pinchado. Atributo obligatorio:
- src=”" Entre comillas escribiremos el nombre del archivo de imagen.
hidden El visitante no puede modificar su valor ya que no está visible. Se manda siempre junto al atributo value= seguido de su valor entre comillas.
- Name=”" Indicará el nombre que se asigna a un determinado campo.

<HTML>
<HEAD>
<TITLE>Ejemplo formularios de entrada</TITLE>
</HEAD>
<BODY> 

<H1>Formularios</H1> 

<FORM ACTION="mailto:unaprueba" METHOD="POST">
Texto: <INPUT TYPE="text" NAME="nombre"><BR>
Password: <INPUT TYPE="password" NAME="contra"><BR>
Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre
<INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR>
Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto
<INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche 

<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM> 

</BODY>
</HTML>

Campos de selección

Las tags <select>…..</select> encierran los valores que podremos elegir a partir de una lista. Los atributos que acompañan a la tag de apertura son:

name=”" Indicará el nombre del campo de selección.
Size=”" Indicará el número de opciones visibles. Si le asignamos 1, la selección se presentará como un menú desplegable. Si le asignamos un valor mayor se presentará como una lista con barra de desplazamiento.
multiple Indica si se pueden realizar multiples selecciones.
Las diferentes opciones de la lista se indicarán mediante la tag <option> que puede acompañarse del atributo selected para indicar cual es la opción que aparecerá por defecto. Si no lo especificamos, siempre será la primera de la lista.

<HTML>
<HEAD>
<TITLE>Ejemplo Combo</TITLE>
</HEAD>
<BODY> 

<H1>Formularios</H1> 

<FORM ACTION="mailto:unaprueba" METHOD="POST">
<SELECT NAME="Colores" MULTIPLE>
   <OPTION VALUE="r">Rojo</OPTION>
   <OPTION VALUE="g">Verde</OPTION>
   <OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<SELECT NAME="Colores" SIZE="1">
   <OPTION VALUE="r">Rojo</OPTION>
   <OPTION VALUE="g">Verde</OPTION>
   <OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM> 

</BODY>
</HTML>

Botones

Se definen mediante la tag <input> a la que le acompañan los atributos:

*Type=”" Seguido de submit para enviar los datos del formulario y seguido de reset para borrar los datos que se han introducido.
*Value=”" Indica el texto que incorporaran los botones. Normalmente, enviar y borrar.

<HTML>
<HEAD>
<TITLE>Ejemplo 16</TITLE>
</HEAD>
<BODY> 

<H1>Formularios</H1> 

<FORM ACTION="mailto:unaprueba" METHOD="POST">
<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM> 

</BODY>
</HTML>