Formularios en html

<!---------------- Formularios -----------------------
<form    
Atributos form:
name: Nombre del formulario válido para diferenciar los diferentes formularios javascript

action: - a que programa llama. por ejemplo php   
    - mailto:aitor@kaixo.com ya no se utiliza ya que requiere tener un cliente de correo instalado
method:
        get: se ven los parámetros en la url del navegador
        post: no se ven. Por ejemplo para enviar contraseñas, imágenes,..
       
enctype
        text/plain: por defecto
        multipart/form-data: para hacer uploads de ficheros en php


Atributos input
name: nombre
value: valor por defecto
type: - text (por defecto) caja de texto
        size: tamaño de la caja
        maxlenght: máximo número de caracteres
      - submit, botón de envio
      - password para password
      - hidden: Campos ocultos se utiliza para "modificar" en php 
      - radio :botón de opción: El name te permite agrupar y solo te permite seleccionar 1 !!!
         checked="checked" : selecciona por defecto
      - chekbox: casilla de verificación: te permite seleccionar varios

Atributo select option: listas de selección
    <select name="nombre">
        <option />

    </select>

    selected="selected" por defecto
     multiple="multiple" multiselección

Textarea: Áreas de texto. Por ejemplo comentarios
      Parámetros
        row: filas
        cols: columnas


       
     

-->
<form name="miformulario" action="mailto:aitor@kaixo.com" method="get" enctype="multipart/form-data">
<!--- input text ----->
Nombre:<input name="nombre" type="text" value="Aitor" /><br/>
Apellidos:<input name="apellidos" /><br/>
Password:<input name="palabraclave" type="password" /><br/>
Dni: <input name="dni" type="text" size="10" maxlength="9"/><br/>
<input type="hidden" value="123" name=oculto />
<!-- input radio ------->
Sexo: <input type="radio" name="sexo" value="chico" />Masculino
    <input type="radio" name="sexo" value="chica" checked="checked" />Femenino
    <input type="radio" name="aficion" value="leer" />aaaaaaaaaa
<!-- input checkbox ------->

<br/>Mis aficiones favoritas son: <input type="checkbox" name="aficion" value="dep" />Deporte
    <input type="checkbox" name="aficion" value="mus" checked="checked" />Musica
    <input type="checkbox" name="aficion" value="cine" />Cine
<!---- listas seleccion -->

<br/>Selecciona tu provincia:   
    <select name="nombre">
        <option value="1">Alava</option>
        <option value="2" selected="selected">Bizkaia </option>
        <option value="3">Gipuzkoa</option>
    </select>

<!---- listas seleccion con multiselección -->

<br/>Selecciona tu provincia:   
    <select name="nombre"  multiple="multiple">
        <option value="1">Alava</option>
        <option value="2" selected="selected">Bizkaia </option>
        <option value="3">Gipuzkoa</option>
    </select>

<!--- textarea --->
<br/>Comentarios:   
    <textarea rows="20" cols="80"> Introduce tus comentarios</textarea>

<!-- botones --->
<input type="reset" value="Borrar" />
<input type="submit" value="Enviar" />

</form>

tablas en html

<!----- tablas
table: inicio tabla
th: inicio fila cabecera
tr: inicio fila
td: inicio celda

atributos:
border: borde
width: ancho (porcentaje o tamaño fijo) 80%, 400 tanto para celdas como para filas
height: alto tanto celdas como filas
bgcolor: color del fondo
cellspacing: el espacio del borde al inicio de la celda //en table
cellpadding: el spacio del principio de la celda hasta el texto  // en table

colspan: junta dos o más columnas
rowspan: junta dos o más filas

valign: Centrado vertical: top, middle, bottom

align: Centrado horizontal: left, right, center

--->

<table border="1"  cellspacing="20" cellpadding="10" >
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>



<table border="1"  cellspacing="20" cellpadding="10" >
    <tr>
        <td colspan="3">1</td>
   
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td rowspan="2">6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>

    </tr>
</table>

Imagenes en html

<!-- imagenes -->
<!------ asfasdfasdf -->
<img src="http://www.ofiline.com/imagenes/logo.gif" />
<a href="http://www.gallina.com"><img src="images/pepito.gif" /></a>

Caracteres especiales en html

<!----- Caracteres especiales
&nbsp: Espacio
&ntilde: ñ
&Ntilde: Ñ
&aacute: a
&Aacute: Á
&amp:    &
&lt; <
&gt; >
-->
&lt;html&gt;

listas de definición en html

<!-- listas de definición
dl: lista
dt: termino
dd: definición
-->
<p>Diccionario de la Real Academia</p>
<dl>
<dt>Brujula</dt>
<dd>Se&ntilde;&oacute;rula montada en una esc&oacute;bula</dd>
<dt>Oreja</dt>
<dd>Sesenta minutejos</dd>
</dl>

listas ordenadas en html

<!--- listas ordenadas
ol li
atributo type: 1,a,i,A (si comienzan por 1,2,3 ; a,b,c,d ; i,ii,iii,iv ; A,B,C,..)
atributo start: 1,2,3 (
valores: circle, disc o square
por defecto tiene el valor 1 y 1.

-->
<br/>Mis aficiones favoritas son:
<ol type="a" start="3" >
    <li>Deporte </li>
    <li>Cine </li>
    <li>.... </li>
</ol>

listas desordenadas en html

<!--- listas desordenadas
ul li
atributo type: tipo de viñeta
valores: circle, disc o square
por defecto tiene el valor cicle:

-->
<br/>Mis aficiones favoritas son:
<ul type="square">
    <li>Deporte </li>
    <li>Cine </li>
    <li>.... </li>
</ul>
<!--- Se pueden anidar las listas -->

<br/>Mis aficiones favoritas son:
<ul type="square">
    <li>Deporte </li>
        <ul>
            <li>F&uacute;tbol</li>
                       
            <li>Baloncesto</li>           

            <li>Balonmano</li>
        </ul>
    <li>Cine </li>
    <li>.... </li>
</ul>

Parrafos Superíndices y subíndices en html

<!-- Parrafos -->
<p>Parrafo 1: Estoa askfjaslkfjlkasfjaslk fjalskfj aslkfjaslkfjsadlkfjsalkfjsalkfjsakfjasdlkfjaskf f afasfasdfasdfasdfsa fasdfasdfsadfasfasfasasf f</p>
<p>Parrafo 2</p>

<p align="right">Parrafo alineado a la derecha </p>

 <!-- Superíndices y subíndices -->
<br/>
5³    
<br/>
H₂O

<pre>
sdfaasdf
dsfa
sdfa
fsda
sdf
</pre>

Aling y Font en html4

<!-- los atributos nos permite dar diferentes propiedades a las etiquetas
pueden tener diferentes valores por ejemplo  el atributo aling (que sirve para aliniar):
left (por defecto), center o right -->

<!-- Cabecera con el atributo align -->
<h1  align="center">Cabecera centrada </h1>

<!-- la etiqueta font está obsoleta en html4 en su lugar se utiliza la etiqueta span
este era su formato. Además los estilos deben de ir en las hojas de estilo -->

<font face="Arial, Verdana" size="20" color="blue">letra Arial azul tamaño 20</font>


<h1  align="center"><font color="red">Cabecera centrada roja</font> </h1>

<font color="#c47692"> Color rosa </font>
<font color="maroon"> Color gris </font>

Saltos de linea y cabeceras html

<br/> <!-- Salto de linea -->
<b>Negrita </b> <br/>
<i>Cursiva </i> <br/>
<u>Subrayado </u> <br/>
<b><i>Negrita y cursiva</i></b>
<!-- cabeceras: Tamaño de letras predefinidas. Una especie de titulares. h1 es la de mayor tamaño -->
<h1>Cabecera 1</h1>

<h2>Cabecera 2</h2>
<h3>Cabecera 3</h3>
<h4>Cabecera 4</h4>
<h5>Cabecera 5</h5>
<h6>Cabecera 6</h6>

Inicio html

<html>
 <head>
        <title>Mi primera web</title>   
 </head>

<!-- atributos del body

bgcolor: color de fondo
background: fondo de imagen
        direcciones relativas: imagen/fondo.jpg o ./imagen/fondo.jpg
        absolutas http://www.google.com/imagen/fondo.jpg
text: color del texto
link: color a los enlaces no visitados
vlink: color a los enlaces visitados
alink: color de los enlaces activos (click sin soltar)
leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.
topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer.
marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)
marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)                    


-->
<body> </body>
</html>