Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Ejemplo formulario HTML y CSS. Parte2 - 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. Parte2
referencia a través de, como habíamos visto anteriormente, pero con la almohadilla, almohadilla
00:00:04
único, que sea como se llama, y luego la propiedad y el valor. Solo afectará a aquellos
00:00:10
que tengan este ID. Si lo ponemos con P, estará haciendo esto, todas aquellas etiquetas que
00:00:14
tengan, de párrafo que tengan el ID igual a único, pues serán afectados por un color
00:00:23
azul, mientras que si ponemos la almohadilla con único sin el selector delante, estaremos
00:00:28
indicando que todas aquellas etiquetas cuyo ID se llama único serán afectadas por esta
00:00:36
propiedad valor. Esto en cuanto al resumen en cuanto a ACSS. También otro repaso quería
00:00:42
en cuanto a el modelo de cajas, en cuanto a lo que es, a ver si lo encuentro, para que
00:00:52
sepamos lo que es el padding y el margin. Aquí tenemos una caja, un modelo de caja
00:01:02
en el que se divide en el margen externo, que sería este recuadro de color blanco,
00:01:07
luego el borde, luego el margen interno y luego el contenido. Bien, el borde sería
00:01:16
cuando tenemos un contenido, pues el color de borde que va a tener o el tipo de borde
00:01:20
que va a tener. Dentro del contenido, el espacio que hay entre el contenido y el borde sería
00:01:25
lo que es el margen interno. Y el margen interno es lo que llama aquí margin. Perdón, el
00:01:30
margen interno es lo que llama aquí padding. Padding sería todo esto de aquí. Si se refiere
00:01:36
a padding up, down, left o right, sería en cada uno de los márgenes. Pero el padding
00:01:42
es este margen interno que está entre el contenido y lo que es el borde, el borde del
00:01:49
contenido. Margen externo sería toda la parte de exterior entre el borde y el resto de página.
00:01:54
Este margen externo se le llama margin. ¿Por qué? Porque cuando tenemos un, vamos a ver
00:02:01
aquí un ejemplo, cuando hablamos de padding, top, bottom, right o left, estamos indicando
00:02:07
en el padding estamos indicando este lado, este otro, este y este. En cambio, si lo que ponemos es, en vez de padding margin, estaríamos refiriéndonos a toda esta parte.
00:02:17
Bien, entonces, con todos estos conceptos podemos pasar al ejemplo que tenemos aquí. Hemos visto cómo era el formulario y lo que vamos a ver primero es el documento HTML,
00:02:35
Que es este de aquí que le he llamado mi formulario. Documento HTML, en principio, la primera parte que tiene sería esta de aquí, vamos a agrandarlo para que se vea, y sería pues toda la parte, bueno, sabéis que todo documento HTML tiene que estar flanqueado por HTML y luego aparte abajo sería barra HTML, ¿vale?
00:02:48
Entonces tenemos el caso del lenguaje que le he puesto como atributo HTML y lo tenemos la cabecera. Esta sería la cabecera en la que le ha metido un título y le ha metido también un link.
00:03:07
Ese link que aparece aquí va a hacer referencia a la página .css, que es mi CSS, que sería este de aquí, que es la que nos va a dar todo el estilo al formulario.
00:03:21
ya lo hemos explicado
00:03:32
se realizaba a través de link
00:03:36
y luego pues a través de
00:03:37
referenciando
00:03:40
pues aquí va a ser una hoja de estilo
00:03:42
de tipo text barra css
00:03:43
esto hay que ponerlo
00:03:46
en la cabecera
00:03:48
para que pueda
00:03:49
ya vimos que de las tres maneras
00:03:51
para poder hacer referencia
00:03:54
a una hoja de estilos o a un estilo
00:03:55
pues se hacía a través
00:03:58
de una referencia exterior
00:03:59
que sería una referencia a una página exterior, que sería esta de aquí, que sería mi.css.css.
00:04:01
Bien, una vez que ya se ha configurado el head, vamos a pasar al body.
00:04:08
En el body vamos a tener al principio lo que es un div.
00:04:11
El div no es nada más que una etiqueta que lo que va es a agrupar o a generar agrupaciones,
00:04:16
Es como una especie de contenedor en el que en principio parece que no se ve parada, pero sirve para agrupar distintos componentes o etiquetas y dentro de ellas puedes darle un formato o un estilo.
00:04:26
Si veis, he rodeado div a todo lo que es el formulario. Entonces, al poner el div, lo que estoy haciendo es que a toda la parte, no solo del formulario, sino incluido en las dos cabeceras que tenemos aquí, formulario de contacto y escribir, para denominarle con una clase como es contact form y le aplique en el CSS, le aplique todas estas reglas del contact form.
00:04:39
Por eso le he añadido el div. Bien, ese div que va a tener en principio tendrá dos cabeceras, una primera que será formulario de contacto y otra que escribimos y en breve le pondremos en contacto contigo.
00:05:06
Bien, vimos que en estas cabeceras el tamaño de letra era mayor cuanto más pequeño pues era el número que había acompañado al lado derecho de la H, entonces este sería un título mucho mayor y este más pequeño.
00:05:20
Si nosotros lo ejecutamos, nosotros lo ejecutamos, vemos que esas dos cabeceras serían esta de aquí, que sería el H1, y este sería el H3.
00:05:33
bien entonces seguimos si seguimos aquí
00:05:53
vemos que ya empieza el formulario y en
00:05:59
el formulario pues bueno le ha metido el
00:06:02
método post y va a estar configurado
00:06:04
pues por varias varias partes
00:06:08
aquí tengo las bien esta es la parte
00:06:12
primera parte del formulario que lo
00:06:17
único que tiene pues es un dos párrafos
00:06:18
con en el que
00:06:21
- 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:
- 38
- Fecha:
- 19 de diciembre de 2024 - 22:11
- Visibilidad:
- Público
- Centro:
- IES CIFP a Distancia Ignacio Ellacuría
- Duración:
- 06′ 23″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 296.96 MBytes
