Saltar navegación

Evidencia contenido digital 1 - Video

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 7 de septiembre de 2023 por Monica F.

7 visualizaciones

Muestra cómo crear una página web sencilla

Más información Transcripción

Descargar la transcripción

Hola, voy a comenzar a explicar cómo podemos crear una página web de una forma muy sencilla. 00:00:00
Para ello lo único que necesitamos es tener un editor de código HTML, como puede ser Sublime Test, 00:00:06
en el cual, como podéis ver, vamos a tener ya creadas dos páginas, 00:00:13
una página con extensión HTML a la que llamaremos página web 00:00:17
y otra página con extensión CSS que la vamos a llamar estilo. 00:00:20
Bueno, pues el Sublime Test es un editor de código HTML que nos va a ayudar a escribir este código a medida que vayamos escribiendo algunas palabras que él reconoce como claves. 00:00:25
Para comenzar, ponemos el signo de admiración y ya nos aparece la estructura de una página HTML. 00:00:38
A continuación lo que vamos a hacer es darle un título a nuestra página en lugar de documento, vamos a decir por ejemplo que es página web y lo primero que vamos a hacer es dentro del body vamos a crear un título. 00:00:45
A ver, lo ponemos así, H1 y le vamos a llamar mi primera página web. 00:01:00
Muy bien, vamos a ir viendo cómo nos está quedando nuestra página. 00:01:22
Guardamos, vemos que ya nos va apareciendo el título que hemos puesto. 00:01:26
Seguimos editando y lo siguiente que vamos a hacer, 00:01:35
Vamos a meter unas cabeceras de menú, pues dentro lo que vamos a ver es, metemos una etiqueta nav, a continuación, lo que vamos a hacer es meter una lista de elementos, 00:01:38
no se me ha cerrado, vale, bien, dentro de mi lista de elementos y le vamos a meter unos enlaces, menú 1, vale, y así vamos a crear dos menús más y menú 3, perfecto, salvamos y vamos viendo, bien, como nos están apareciendo, 00:02:06
¡Estupendo! 00:03:12
A continuación, ¿qué es lo que vamos a hacer? 00:03:14
Bueno, pues después de esta sección lo que vamos a crear es otra para poder meter un texto. 00:03:16
A esta sección de edit la vamos a tener con la clase artículo. 00:03:29
Perfecto. 00:03:37
Vamos a meter otra clase que sea secciones. 00:03:40
Vale, y dentro de esta clase sí que ya vamos a meter un párrafo y aquí vamos a poner, en el momento que ponemos Lore, pues ya nos aparece pues un texto que es el que se suele poner por defecto. 00:03:48
Vamos a ver cómo está quedando nuestra página, vale, perfecto, ya nos está apareciendo nuestro título, bueno, pero esta página sí, pues no tiene un aspecto bonito, vamos a irla dando estilos, entonces lo primero que vamos a hacer para los estilos es, le vamos a poner para que esté todo un padding y un margen de cero, 00:04:18
un parín de 0 y un margen también de 0, perfecto, que más cosas vamos, que nos quede así, mucho mejor, visualizamos mejor, 00:04:42
que vamos a poner también pues nuestro título h1, lo que vamos a hacer es que sea, que esté centrado, 00:05:10
vamos a poner, este no es, test aline, este center, perfecto, que vamos a poner, pues que el fondo, background color, sea blanco, que tenga un color blanco, 00:05:22
Y por último, los margen, el padding, vamos a ponerle de 20 píxeles, quedará bien. 00:05:56
¿Vale? Vamos a ver cómo nos va quedando nuestra página con estos estilos que hemos dado. 00:06:12
Ah, importante, claro, tenemos que referenciar en nuestra página HTML nuestro fichero de estilos, 00:06:21
porque si no, no nos sirve, para ello nos vamos dentro de gea, vamos a poner nuestro link y aquí tipe y el estilo, 00:06:28
que se llama estilo.css, esta es la manera en la que tenemos, perfecto, veis como está quedando, fenomenal, 00:06:46
Bien, vamos a ir siguiendo dando estilos a nuestra página web, ¿veis? De una manera muy sencilla estamos definiendo una página web y aplicándola estilos. Esto es lo que aprenderemos en nuestro curso, con saber unas cuantas etiquetas HTML y unas cuantas de CSS podemos crear páginas web estupendas. 00:07:00
vamos a ver a nuestra lista 00:07:24
que estilos la vamos dando 00:07:27
pues por ejemplo el color 00:07:31
vamos a poner naranja 00:07:33
path ground color 00:07:34
orange 00:07:36
que más vamos a hacer 00:07:38
el ancho width 00:07:42
le vamos a poner un 100% 00:07:44
que nos ocupe 00:07:47
para que las listas 00:07:49
no nos aparezcan 00:07:55
estilo type 00:07:57
con ese azulito 00:07:58
más feo, le ponemos 00:08:00
que sea no en el estilo 00:08:02
y que estén centradas 00:08:04
test al in, test al in 00:08:06
vamos a poner 00:08:09
center 00:08:10
guardamos y veréis 00:08:11
como va quedando, veis 00:08:14
naranja 00:08:18
y nos va quedando ya 00:08:20
como queremos 00:08:22
muy bien, vamos a seguir 00:08:26
haciendo más 00:08:34
cositas para que nos vaya quedando 00:08:38
y de esta manera 00:08:40
hacemos display 00:08:44
y vamos a poner 00:08:46
inline 00:08:48
flesh 00:08:49
al bar todo 00:08:52
fenomenal 00:08:56
nos va quedando 00:09:00
vamos aquí tenemos todas nuestras etiquetas cerradas 00:09:02
hay una cosa 00:09:14
que a ver por cada una de estas 00:09:20
así 00:09:23
esta, es que si no no nos estaba 00:09:36
quedando correcto 00:09:38
así 00:09:41
perfecto, esta nos 00:09:42
sobra, vale 00:09:48
salvar 00:09:50
todo 00:09:52
nos vamos, perfecto 00:09:53
vamos a ir 00:09:58
tenemos li li li li 00:09:59
y cerramos la 00:10:06
y cerramos la 00:10:08
perfecto 00:10:09
muy bien, vamos a nuestra 00:10:12
de estilos y que más vamos a dar 00:10:14
a nuestro estilo 00:10:17
que más podemos hacer 00:10:19
bueno pues vamos a ver 00:10:20
nat a 00:10:22
para nuestros enlaces 00:10:24
y vamos a poner 00:10:26
el test decoración 00:10:28
como none 00:10:30
vamos a poner el color 00:10:32
como blanco 00:10:36
vamos a poner el padding 00:10:41
a 10 píxeles 00:10:49
y vamos a poner el ancho a 150. 00:10:54
De esta manera nuestros enlaces nos van a quedar 00:11:03
mucho más bonitos, ¿veis? 00:11:05
Nos han quedado mucho más bonitos. 00:11:09
¿Que queremos poner una foto? 00:11:11
Bueno, pues tenemos ya preparado, 00:11:13
tengo buscado una foto 00:11:17
y lo que hacemos aquí es 00:11:18
Entonces dentro de, vamos a ponerla aquí, otra caja de div, vale, y aquí vamos a poner una imagen, vale, que se, que la, vamos, hemos llamado flor, ¿veis? 00:11:21
Con muy pocos elementos tenemos una página web, mi primera página web, que tenemos enlaces, que tenemos un texto y hemos incluido una foto. 00:11:55
pues vamos a ello. 00:12:05
Vamos a aprender HTML para hacer páginas web 00:12:06
que nos sirvan para luego tener ese conocimiento 00:12:09
que nos ayude a nuestros clientes. 00:12:13
Gracias. 00:12:15
Idioma/s subtítulos:
es
Autor/es:
MFM
Subido por:
Monica F.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
7
Fecha:
7 de septiembre de 2023 - 20:07
Visibilidad:
Clave
Centro:
IES LUIS VIVES
Descripción ampliada:
We will support it soon! Click 2k/4k to download videos first. ProSubscription will automatically renew every month before you unsubscribe. Monthly $ 2.99 / month

  • 1000+ embedded vimeo player sites supported

  • Support video downloading in more resolutions e.g. 4k, 2k, 1080p, etc.

  • Support for downloading private videos

  • Support for extracting audio

  • Support for downloading subtitles

  • Unlimited downloads


Get Click here to get other payment method Tip：Please refresh the page after the payment is successful What is the payment method you want？We will gradually support itPayPal
Braintree
Alipay
Submit
Duración:
12′ 21″
Relación de aspecto:
2.07:1
Resolución:
1348x650 píxeles
Tamaño:
29.15 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid