3ra EntregaHace mucho que no subo mas nada en este curso, decidi seguir subiendo cosas en mi tiempo libre.
En esta entrega veremos:
- Cajas DIV
- Vinculando Hoja De Estilos CSS
- Creando un formulario
Cajas DIVLas cajas div son como espacios en nuestra pagina, los cuales pueden tener propiedades especificas, por ejemplo, que todo el texto de la misma se vea mas grande, o con una fuente especifica, o simplemente que se muestre de un color especifico. Para darle estilos, podemos usar CSS.
Texto dentro del DIV
Texto fuera del DIV
Sin estilo, deberia verse asi:
Texto dentro del DIV
Texto fuera del DIV
Agregamos alineado center en una hoja CSS (Mas abajo ensenaré a vincular hojas CSS)
div {
text-align: center;
}
Deberia verse:
Texto dentro del DIV
Texto fuera del DIV
Vinculando CSSVincular una hoja de estilos CSS es muy sencillo, solo debes incluir lo siguiente dentro del head:
<link rel="stylesheet" href="ruta/a/el/archivo.css" />
Por cada carpeta, agrega una "/", eso indica que el texto de antes de la barra, es el nombre de la carpeta a la que entrara, en ese caso:
ruta
a
el
archivo.css
archivo.html
El archivo CSS puede tener cualquier nombre, pero debe tener la extension .css
Creando FormulariosPara crear formularios, usa la etiqueta <form>.
La etiqueta form es como una etiqueta div, pero que puede contener dos (2) botones con acciones predeterminadas:
- Reiniciar el formulario
- Enviar los datos del formulario a un archivo de procesamiento de datos (Por ej. PHP)
<form action="archivo/de/procesamiento.php" method="post"> Contenido del formulario
Action: A donde enviara los datos (y sera redirigido el usuario) cuando pulse el boton "submit"
Method: Metodo de envio de datos al archivo de procesamiento
Creando los botones
Este codigo renderizara un boton, que al pulsarlo, el usuario sera redirigido a el archivo que pusimos en action, y enviara los datos con el metodo que pusimos en method.
Este codigo renderizara un boton, que al pulsarlo reiniciara el formulario.
Poniendo Campos en el FormularioPor ahora solo veremos campos de texto, mas adelante pondre campos de color, seleccion, seleccion multiple, fecha, etc.
<input type="tipo-de-input" name="nombre" id="id" placeholder="Placeholder..." />
Type: Tipo de input, existen:
- text : Input normal
- password : Cada vez que escribes, se convierte en * o en puntos
- email : No dejara enviar el formulario si el email no es valido
Placeholder: Muestra un texto que desaparece al escribir.
Value (no se muestra en el ejemplo): El texto que aparece por defecto al cargar la pagina
Id y Name son campos para identificar el input, para obtener los datos desde archivos de procesamiento.
Eso seria todo por la entrega de hoy.