Curso Basico de HTML
fon:
Cita de: GerardoMunoz en 11 Mayo 2023, 22:26 pm
Muchas gracias por compartir tus conocimientos, son de mucha ayuda.
De nada. Perdon por no subir las entregas tan seguido, es que últimamente ando medio ocupado.
fon:
3ra Entrega
Hace mucho que no subo mas nada en este curso, decidi seguir subiendo cosas en mi tiempo libre.
En esta entrega veremos:
Cajas DIVVinculando Hoja De Estilos CSSCreando un formulario
Cajas DIV
Las 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.
Código
<html>
<head>
<title>Cajas DIV</title>
</head>
<body>
<div>
Texto dentro del DIV
</div>
Texto fuera del DIV
</body>
</html>
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)
Código
div {
text-align: center;
}
Deberia verse:
Texto dentro del DIV
Texto fuera del DIV
Vinculando CSS
Vincular una hoja de estilos CSS es muy sencillo, solo debes incluir lo siguiente dentro del head:
Código
<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 Formularios
Para 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 formularioEnviar los datos del formulario a un archivo de procesamiento de datos (Por ej. PHP)Código
<form action="archivo/de/procesamiento.php" method="post">
Contenido del formulario
</form>
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
Código
<button type="submit">Texto del boton</button>
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.
Código
<button type="reset">Texto del boton</button>
Este codigo renderizara un boton, que al pulsarlo reiniciara el formulario.
Poniendo Campos en el Formulario
Por ahora solo veremos campos de texto, mas adelante pondre campos de color, seleccion, seleccion multiple, fecha, etc.
Código
<input type="tipo-de-input" name="nombre" id="id" placeholder="Placeholder..." />
Type: Tipo de input, existen:
text : Input normalpassword : Cada vez que escribes, se convierte en * o en puntosemail : No dejara enviar el formulario si el email no es validoPlaceholder: 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.
Sadistski:
El post es un poco antiguo pero muchas gracias :D... no conocia el placeholder ^^
fon:
de nada. intentare seguir el curso en mi tiempo libre
Navegación
[*] Página Anterior