Utilice construcciones de programación básicas para crear programas simples
¡Aprende a codificar una página web sobre tu celebridad favorita!
Empezar
Diseña una pagina web para tu streamer, youtuber o artista favorito.
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir al Proyecto
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
Encuentra la línea que dice <p>Hello World</p> y reemplaza el texto entre <p> y </p>para decir quién es tu celebridad favorita.
10
Bajamos con la tecla enter y comenzamos en una nueva línea, y esta vez use <h1> y </h1>Estas son etiquetas HTML de encabezado.
<h1>Bienvenido a la pagina web de Bobicraft!</h1>
10
Haga clic en la pestaña que dice stylesheet.css.
Cambia el valor White al codigo del color que mas te guste de:
https://htmlcolorcodes.com/es/
10
Continuamos en CSS
Agreguemos dos nuevas reglas CSS para la etiqueta <p>: una para el color de texto y otra para el font-family.
p {
font-family: "Helvetica", sans-serif;
color: #03d000;
}
10
A continuación, utilizará la propiedad text-align en sus etiquetas <h1>
h1 {
text-align: center;
}
10
Finalmente, agregará márgenes en la etiqueta . Las propiedades margin se utilizan para crear espacio alrededor de sus elementos. Vas a agregar un margen en la parte superior de tu etiqueta <p>. Las cuatro propiedades de margen son margin-top, margin-right, margin-bottomy margin-left.
10
Dale color al texto y el fondo a tu encabezado y usa la fuente que elijas de aqui:
¡Agreguemos una imagen a tu página web!
Haga clic en la pestaña nombrada index.htmlpara ir a su código HTML. Agrega lo siguiente en cualquier lugar entre las etiquetas <body> </body>:
<img src="link de imagen" alt="nombre de imagen" width="200px" />
https://www.w3schools.com/cssref/css_websafe_fonts.php
10
Encuentra un video en YouTube que desees mostrar en tu sitio web.
Haga clic en el botón Compartir debajo del video, al lado de los Me gusta. Seleccione la opción Incorporar .
Verá un cuadro de texto con un código, que deberá copiar.
Ahora ve a la pestaña index.html y pegalo abajo de la imagen.
10
Trinket - Mi celebridad favorita
Erica De Pacheco
Created on May 13, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Practical Microsite
View
Essential Microsite
View
Akihabara Microsite
View
Essential CV
View
Akihabara Resume
View
Momentum: First Operational Steps
View
3D Corporate Reporting
Explore all templates
Transcript
Utilice construcciones de programación básicas para crear programas simples
¡Aprende a codificar una página web sobre tu celebridad favorita!
Empezar
Diseña una pagina web para tu streamer, youtuber o artista favorito.
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir al Proyecto
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
Encuentra la línea que dice <p>Hello World</p> y reemplaza el texto entre <p> y </p>para decir quién es tu celebridad favorita.
10
Bajamos con la tecla enter y comenzamos en una nueva línea, y esta vez use <h1> y </h1>Estas son etiquetas HTML de encabezado.
<h1>Bienvenido a la pagina web de Bobicraft!</h1>
10
Haga clic en la pestaña que dice stylesheet.css.
Cambia el valor White al codigo del color que mas te guste de:
https://htmlcolorcodes.com/es/
10
Continuamos en CSS
Agreguemos dos nuevas reglas CSS para la etiqueta <p>: una para el color de texto y otra para el font-family.
p { font-family: "Helvetica", sans-serif; color: #03d000; }
10
A continuación, utilizará la propiedad text-align en sus etiquetas <h1>
h1 { text-align: center; }
10
Finalmente, agregará márgenes en la etiqueta . Las propiedades margin se utilizan para crear espacio alrededor de sus elementos. Vas a agregar un margen en la parte superior de tu etiqueta <p>. Las cuatro propiedades de margen son margin-top, margin-right, margin-bottomy margin-left.
10
Dale color al texto y el fondo a tu encabezado y usa la fuente que elijas de aqui:
¡Agreguemos una imagen a tu página web!
Haga clic en la pestaña nombrada index.htmlpara ir a su código HTML. Agrega lo siguiente en cualquier lugar entre las etiquetas <body> </body>:
<img src="link de imagen" alt="nombre de imagen" width="200px" />
https://www.w3schools.com/cssref/css_websafe_fonts.php
10
Encuentra un video en YouTube que desees mostrar en tu sitio web. Haga clic en el botón Compartir debajo del video, al lado de los Me gusta. Seleccione la opción Incorporar . Verá un cuadro de texto con un código, que deberá copiar.
Ahora ve a la pestaña index.html y pegalo abajo de la imagen.
10