Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Ejemplo formulario HTML y CSS - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Ejemplo formulario HTML y CSS
Buenos días a todos. Tras algunos conceptos de formularios, vamos a ver un ejemplo de un formulario de contacto.
00:00:05
Aquí tengo el código de ese formulario de contacto y tengo tanto la parte CSS, el archivo CSS, como el archivo HTML.
00:00:21
Iremos viendo cada una de las partes, cómo la hemos realizado para que salga el formulario, como vamos a ver a continuación.
00:00:31
El formulario sería este de aquí y sería con este aspecto. Entonces, vamos a ver cada una de las partes para poder llegar a realizar este formulario.
00:00:41
Lo primero que quiero que veamos sería un repaso en cuanto a lo que es DIP y en cuanto a lo que es lo básico de CSS.
00:00:54
En cuanto a CSS, en el aula virtual hice un repaso de CSS, pero voy a volverlo a hacer para poder ver cómo ejecutar o cómo introducir un fichero .css en nuestro formulario, en nuestra página HTML.
00:01:06
Aquí vemos que para poder introducir CSS en la misma se podía hacer de tres maneras. Una era una declaración en línea, una declaración interna o una declaración externa. En cuanto a la declaración en línea, no era nada más que en la propia etiqueta se metía la palabra style con la propiedad y el valor.
00:01:30
Cuando queríamos una declaración interna, lo que se hacía es que se metía dentro del head la línea de style barra style y dentro se metían cada una de las propiedades, relación propia de valor, separados por dos puntos y franqueados por dos llaves.
00:01:49
se metía cada una de las propiedades de valor para cada uno de los selectores, cada uno de los selectores de la propia página.
00:02:09
Eso se tenía que poner dentro de style y barra style.
00:02:17
En cuanto a la tercera declaración, era a través de un archivo externo, que era el llamar a un archivo externo a través de link,
00:02:22
en el que le hacíamos referencia a una hoja de estilo
00:02:30
con un fichero de tipo text barra css
00:02:34
y con la referencia a ese fichero
00:02:38
que había que poner en la misma ruta donde estaba
00:02:41
la propia página html
00:02:43
y llamábamos a ese fichero que aquí por ejemplo
00:02:47
se llama ruta archivo punto css
00:02:50
también se podía hacer a través de la palabra
00:02:51
con las palabras style
00:02:53
pero poniendo un import a través de import.
00:02:56
Una vez que hemos visto en cuanto a cómo meter una hoja de estilo
00:03:03
o hacer referencia a algún estilo a través de una página HTML,
00:03:09
vamos a ver también o repasar cómo era la sintaxis de las reglas de estilo.
00:03:15
Era un selector, una llave de apertura, luego la propiedad, dos puntos y lo que era el valor. Punto y coma y se cerraba la llave. Esto está indicando que creemos que para este párrafo, que sería el selector P, tendríamos que tener un color de color azul.
00:03:22
En cuanto a selectores, pues había muchos selectores, tantos como componentes en una página HTML y tenemos que uno en el que seleccionaba todos, lo que era el selector universal, pues era a través del asterisco y luego se ponía la propiedad con el valor.
00:03:38
Luego, también hablar de los selectores de clase. El selector de clase era cuando metíamos la palabra class dentro de una etiqueta. Por ejemplo, en párrafo metíamos class y decíamos que a esta clase la llamábamos párrafo centrado.
00:03:57
De tal manera que luego podríamos hacer referencia a ese párrafo exclusivamente y no a todos los de la página HTML. Aquellos párrafos que tenían la palabra class igual a párrafo centrado serán afectados por las reglas de estilo que le pongamos.
00:04:13
veis aquí como se hace referencia al mismo
00:04:30
se puede hacer referencia de dos maneras
00:04:32
p.y el nombre
00:04:34
de esa clase y luego dentro la propiedad
00:04:37
de manera que solo afectará a aquellos
00:04:39
párrafos que tengan
00:04:41
como nombre de clase
00:04:42
párrafo centrado, aquellos párrafos
00:04:45
restantes en el que no tengan
00:04:47
esa clase
00:04:49
con ese nombre, pues no se verán
00:04:50
afectados por estas reglas, la otra manera
00:04:53
será poniendo punto párrafo
00:04:55
centrado, veis aquí
00:04:57
tenemos un ejemplo en el que se le ha añadido al párrafo, veis aquí hay tres tipos de
00:05:02
párrafos, uno P con la clase clase azul, otro con la clase clase roja y otro sin clase.
00:05:21
Entonces cuando pongamos P.clase roja afectará solo a este de aquí, que será el que tenga
00:05:28
el nombre de la clase para clase roja. En cambio, estos dos no se verán afectados por
00:05:34
todas estas reglas de selección. En cuanto ponemos punto clase azul, solo se afectará
00:05:38
a este párrafo que pone clase azul. Pero no solo a este párrafo, al poner el punto
00:05:43
y no indicar el selector, también afectará a este encabezado, puesto que su clase también
00:05:47
se llama clase azul. Tan solo nos quedan los IDs. También podemos poner al párrafo
00:05:54
en vez de class ponerle un nombre al id, id igual al nombre que queramos único y luego hacerle...
00:06:04
- Idioma/s:
- Materias:
- Informática
- Niveles educativos:
- ▼ Mostrar / ocultar niveles
- Formación Profesional
- Ciclo formativo de grado superior
- Primer Curso
- Segundo Curso
- Autor/es:
- Francisco J. González Constanza
- Subido por:
- Francisco J. G.
- Licencia:
- Todos los derechos reservados
- Visualizaciones:
- 64
- Fecha:
- 19 de diciembre de 2024 - 22:09
- Visibilidad:
- Público
- Centro:
- IES CIFP a Distancia Ignacio Ellacuría
- Duración:
- 06′ 10″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 261.55 MBytes
