Cómo hacer una PÁGINA WEB en BLOC de NOTAS
Summary
TLDREn este tutorial, el creador guía a los espectadores a través del proceso de crear una página web utilizando únicamente el Bloc de notas. Comienza con la creación de una estructura HTML básica, incluyendo etiquetas como 'html', 'head' y 'body'. Luego, explica cómo agregar contenido, como un menú y un título, y cómo darle estilo a la página con CSS, incluyendo la personalización de la barra de navegación y el uso de imágenes de fondo. Continua con la adición de hipervínculos y cómo hacer que se abran en pestañas nuevas. Finalmente, muestra cómo insertar un vídeo de YouTube y ajustar el tamaño y la posición de los elementos en la página para lograr un diseño atractivo y funcional.
Takeaways
- 😀 Crea una página web con solo un Bloc de Notas y sin necesidad de otros programas.
- 🛠️ Se menciona el uso de Visual Studio Code para aquellos interesados en programación.
- 🔗 Se ofrece un curso básico de programación en el servidor para aquellos que no tienen mucho conocimiento.
- 📁 Se inicia creando una carpeta en el escritorio llamada 'página web' para guardar los archivos.
- 📝 Se comienza a programar con etiquetas HTML, comenzando con la etiqueta 'html', seguida de 'head' y 'title'.
- 🌐 La etiqueta 'head' contiene metadatos y estilos CSS dentro de la etiqueta 'style'.
- 🎨 Se describe cómo agregar y dar estilo a elementos como el menú, utilizando propiedades CSS.
- 🔗 Se explica cómo crear hipervínculos con la etiqueta 'a' y cómo hacer que abran en otra pestaña con 'target="_blank"'.
- 🖼️ Se detalla cómo agregar una imagen de fondo al body de la página web y cómo ajustarla con 'background-size' y 'background-attachment'.
- 📝 Se muestra cómo agregar contenido adicional a la página, como secciones y texto, y cómo darle estilos a estos elementos.
- 📹 Se incluye cómo insertar un video de YouTube en la página web utilizando el código proporcionado por la plataforma.
Q & A
¿Qué herramienta se utiliza para crear la página web en el tutorial?
-Se utiliza el Bloc de Notas para crear la página web, sin necesidad de otros programas adicionales.
¿Dónde se crea la carpeta para guardar la página web?
-La carpeta para guardar la página web se crea en el escritorio del usuario, con el nombre de 'página web'.
¿Cómo se inicia la programación de una página web en Bloc de Notas?
-Se inicia abriendo Bloc de Notas y comenzando con la etiqueta HTML, seguida de otras etiquetas como head, title y style.
¿Qué es la etiqueta 'head' y para qué se utiliza?
-La etiqueta 'head' se utiliza para incluir metadatos sobre el documento, como el título de la página web.
¿Qué etiqueta se utiliza para definir el título de una página web?
-Para definir el título de una página web se utiliza la etiqueta 'title' dentro de la etiqueta 'head'.
¿Cómo se guarda la página web creada en Bloc de Notas?
-Se guarda la página web seleccionando 'Guardar como', eligiendo la ubicación deseada, y asegurándose de que el archivo tenga la extensión '.html'.
¿Cómo se abren y editan las páginas web guardadas en Bloc de Notas?
-Para abrir y editar una página web guardada, se hace clic derecho en el archivo, seleccionando 'Abrir con' y luego 'Bloc de Notas'.
¿Qué se hace para corregir los acentos que no se muestran correctamente en la página web?
-Se eliminan los acentos del 'title' y se guarda el archivo nuevamente para que se muestren correctamente en el navegador.
¿Cómo se centra el texto en el menú de la página web?
-Se utilizan estilos CSS dentro de la etiqueta 'style', especificando 'text-align: center' para centrar el texto del menú.
¿Cómo se agregan hipervínculos a la página web para enlaces a otras páginas como Google o YouTube?
-Se utilizan etiquetas 'a' con la propiedad 'href' que contiene la URL de la página a la que se desea enlazar.
¿Cómo se hacen los hipervínculos para que abran en otra pestaña del navegador?
-Se agrega el atributo 'target' con el valor '_blank' dentro de las etiquetas 'a' para que los enlaces se abran en una nueva pestaña.
¿Cómo se agrega una imagen de fondo a la página web?
-Se utilizan estilos CSS dentro de la etiqueta 'style', especificando 'background-image' con la URL de la imagen y 'background-size: cover' para que la imagen cubra todo el fondo.
¿Cómo se inserta un vídeo de YouTube en la página web?
-Se copia el código de inserción del vídeo de YouTube y se pega dentro de un 'div' en la página web.
Outlines
💻 Creación de una página web con Bloc de Notas
El video comienza con la introducción de un tutorial sobre cómo crear una página web utilizando únicamente Bloc de Notas, sin la necesidad de otros programas. El creador menciona herramientas como Visual Studio Code y ofrece un curso básico de programación en C# para aquellos interesados en programación. Seguidamente, se procede a crear una carpeta en el escritorio y abrir Bloc de Notas para comenzar a programar la página web, iniciando con las etiquetas HTML y HEAD, y explicando el uso de etiquetas y metadata.
📝 Editar y guardar la página web en Bloc de Notas
En este párrafo, se detalla cómo guardar el código de la página web en Bloc de Notas y cómo hacer que este archivo sea reconocido como una página web (.html). Se muestra cómo guardar el archivo en una carpeta específica y cómo abrirlo desde un navegador web, ya sea haciendo doble clic en el archivo o arrastrándolo al navegador. También se menciona cómo volver a abrir el archivo en Bloc de Notas para continuar editándolo y cómo corregir un error relacionado con la codificación de caracteres especiales.
🎨 Añadir estilos y formateo a la página web
El script avanza con la explicación de cómo agregar estilos CSS a la página web creada en Bloc de Notas. Se describe cómo utilizar la etiqueta 'style' para definir el ancho, alineación y otros estilos de las etiquetas 'nav' y 'li'. Además, se muestra cómo agregar hipervínculos utilizando la etiqueta 'a' y cómo personalizarlos para que abran en una nueva pestaña. Se menciona el uso de la propiedad 'target' para lograr esto.
🖼️ Agregar imágenes de fondo y ajustar el diseño
En este segmento, el creador explica cómo agregar una imagen de fondo a la página web y cómo ajustarla para que cubra todo el fondo del body. Se discute el uso de la propiedad 'background-size' y cómo cambiarla a 'cover' para que la imagen se adapte al tamaño de la pantalla, a pesar de que esto puede pixelar la imagen si es demasiado pequeña. También se muestra cómo reemplazar la imagen por otra más adecuada y cómo especificar la ruta correcta para que la imagen se muestre correctamente.
🌐 Cambiar el color de fondo y agregar contenido
El video continúa con la personalización del color de fondo del menú y la adición de contenido a la página web. Se muestra cómo utilizar el color hexadecimal para cambiar el fondo de la barra de navegación y cómo agregar una sección con contenido, utilizando texto aleatorio o personalizado. Además, se discuten técnicas para centrar el contenido y ajustar su tamaño y márgenes para una mejor visualización.
🖌️ Añadir imágenes, videos y finalizar la página web
El último párrafo del script cubre la adición de imágenes y videos a la página web. Se explica cómo utilizar la etiqueta 'img' para insertar imágenes y el atributo 'alt' para proporcionar una descripción alternativa. También se muestra cómo ajustar el tamaño y el espaciado de las imágenes utilizando divs y estilos CSS. Finalmente, se agrega un video de YouTube utilizando el código de inserción proporcionado por la plataforma y se invita a los espectadores a suscribirse y activar las notificaciones para recibir actualizaciones de nuevos videos.
Mindmap
Keywords
💡Página web
💡Bloc de notas
💡HTML
💡Etiquetas
💡CSS
💡Hipervínculos
💡Imágenes de fondo
💡Div
💡Vídeo de YouTube
💡Atributos
Highlights
Crear una página web utilizando solo el Bloc de Notas.
Introducción a la programación web para aquellos interesados pero sin conocimientos previos.
Compartir un curso básico de programación en el servidor.
Cómo empezar a programar una página web con la etiqueta HTML.
La importancia de la etiqueta head para incluir metadata y títulos.
Incluyendo estilos con la etiqueta style dentro de head.
Creación del body para el contenido principal de la página web.
Uso de la etiqueta nav para crear un menú de navegación.
Cómo guardar el documento como .html para que se visualice en un navegador.
Solución de problemas con caracteres especiales en la etiqueta title.
Añadir estilos CSS para dar formato a la página y elementos.
Cómo utilizar la etiqueta section para estructurar el contenido de la página.
Inclusión de hipervínculos con la etiqueta a para enlaces dentro del menú.
Ajuste del tamaño y espaciado de los elementos del menú utilizando padding y font-size.
Cómo abrir hipervínculos en una nueva pestaña utilizando target="_blank".
Adición de una imagen de fondo a la página web.
Uso de la propiedad background-size para ajustar la imagen de fondo.
Inclusión de contenido aleatorio con etiquetas para probar el diseño de la sección.
Ajuste del tamaño de la letra y la imagen dentro de la sección.
Cómo insertar y mostrar un vídeo de YouTube en la página web.
Conclusión del tutorial y llamado a suscribirse y activar notificaciones.
Transcripts
hola cómo están hoy vamos a hacer una
página web como dice el título en tan
solo bloc de notas no van a necesitar
ningún otro programa si hay unas
herramientas que nos permiten hacer esto
un poco más sencillo como el visual
studio code que se los dejo por acá y
también para todos aquellos que están
interesados en la programación pero aún
no tienen mucho conocimiento al respecto
también les voy a dejar por aquí mi
curso básico de programación en si
server así que vamos a comenzar este
vídeo programando una página web con
solo bloc de notas vamos a ello
bien ya ando por acá en una ventanita
pues vamos a comenzar primero vamos a
crear una carpeta la voy a crear aquí en
mi escritorio con clic derecho nuevo
carpeta y le voy a poner
página web
ahora si dentro de esta página web es
donde vamos a guardar nuestro
en nuestra página web que vamos a crear
con bloc de notas entonces primero
buscamos en nuestra computadora bloc de
notas y lo abrimos
bien ya tenemos aquí el bloc de notas
que es donde vamos a programar nuestra
página web
con que vamos a comenzar siempre las
páginas web comienzan con la etiqueta
vamos a hacerlo esto más grande vamos a
comenzar con la etiqueta html
y la creación de páginas web son con
este sistema de etiquetado a esto se le
llama una etiqueta
comienza con corchete html cierra
corchete
posteriormente necesitamos
una etiqueta que se llama head
que dentro de esta etiqueta van a ir
todo toda la metadata es un poco
complicado pero bueno general aquí vamos
a poner como él
por ejemplo el título que es una
etiqueta que se llama title
por tales explicó que es el tight on si
ustedes van a una página web por ejemplo
aquí
busquemos youtube
youtube tiene aquí su title es este que
sale acá mérito aquí arriba este que
dice youtube y tiene un icono entonces
dentro de la pestaña head van a ir estos
valores también dentro de head vamos a
tener los estilos que es la etiqueta
style ahora se preguntarán por qué estoy
poniendo una etiqueta y otra etiqueta
pero con una diagonal bien
en todo lo que es html el sistema de
etiquetas la mayoría de etiquetas tienen
una una de apertura y una de cierre por
así decirlo entonces todo lo que
escribamos aquí adentro
va a estar dentro de la etiqueta que
hemos definido por ejemplo aquí mi
primera página web este va a ser el
título de mi página web como el que les
enseñé de youtube
sólo que aquí yo le he puesto mi primera
página web y sabe que va a ser el título
porque está entre esta etiqueta y su
etiqueta de cierre que la etiqueta de
cierre comienza con la diagonal y bueno
acá tenemos la etiqueta de estilos aquí
vamos a meter dentro todos los estilos
son muchos estilos podemos meter muchos
estilos entonces por eso se puede abrir
aquí y cerrar a acá ahora porque le
estoy dando estos espacios simplemente
para que sea más bonito para saber que
la etiqueta title está dentro de esta
dejen aquí está mi etiqueta de jeta de
apertura y mía etiqueta head de cierre
también como ven aquí está mi etiqueta
de cierre de html y aquí mi etiqueta de
apertura y en posteriormente el head
vamos a poner el body que es donde vamos
a tener
todo nuestro contenido de nuestra página
web
[Música]
vamos a manejar dentro del body un app
que va a ser como un menú sito digamos
ahorita vamos a ver lo que es el menú
por ejemplo aquí dentro del mnav yo
quiero tener
voy a abrir una etiqueta que se llama
leibel que es para poner texto
abro y cierro mi etiqueta y como les
dije aquí dentro de mi leibel voy a
escribir lo que quiera ir a otra página
lo voy a repetir quiero tener un menú de
3
de trece etiquetas leibel
y
vamos a guardar esto para ver cómo se va
viendo entonces como como puedo hacer
que este bloc de notas sea una página
web a la hora de irnos aquí archivo
puedo darle guardar o guardar como
me va a abrir la ubicación de donde
quiero guardar o no voy a buscar aquí en
mi escritorio la carpeta que llame
página web y aquí en el nombre le voy a
poner página lo muy importante es
ponerle punto html y luego aquí en el
tipo en vez de dejarlo en documento de
texto
voy a seleccionar y le voy a dar en
todos los archivos
le doy guardar y esto ya me lo va a
guardar como una página web vean
cerramos nos vamos a mi carpeta que está
en el escritorio que se llama página web
y aquí tenemos mi página que puedo hacer
puedo yo darle doble clic y me lo va a
abrir
en el navegador ahora también puedo
agarrar yo y arrastrarlo simplemente así
en mi navegador por ejemplo en chrome y
ya me lo va a abrir
bien ahora quiero seguir editando esta y
es como mi página web
pero quiero seguirla editando entonces
yo ya la guarde aquí en mi carpetita de
página web que está en el escritorio es
esta página web página le voy a dar clic
derecho y le puedo dar abrir con bloc de
notas si no les aparece le pueden decir
elegir otra aplicación y aquí ya buscan
el bloc de notas en caso de que no lo
tengan le dan más aplicaciones y ahí les
va a aparecer todo o buscar otra
aplicación en el equipo pero normalmente
les tiene que aparecer y si aún así no
no les aparece para abrir con bloc de
notas simplemente hablen abren otro bloc
de notas
ya que tengan su bloc de notas lo que
van a hacer es arrastrar su página para
acá y listo ya se las abre
bien vamos a continuar ahora qué pasa
con mi página web porque los acentos no
me los están mostrando por que yo estoy
causando un error aquí dentro del title
de las páginas no pueden ir acentos o
caracteres especiales entonces vamos a
quitarle el acento guardamos y
inmediatamente después de que guardemos
recuerden que esto lo abrí y en bloc de
notas pero ya es mi página web yo aquí
le puedo dar recargar en mi navegador
que en este caso estoy en google chrome
y como pueden ver ya se corrigieran los
acentos y aquí dice mi primera página
web
bien vamos a poner en bonito este menú
digamos que lo quiero centrado en mi
página entonces para eso le tengo que
dar estilos los estilos nos van a ayudar
a darle color a darle forma a todos
nuestros objetos o nuestras etiquetas
entonces aquí en la parte de style que
ya había abierto mi etiqueta de style en
xerez le puedo decir que al map
abro y cierro llaves estos estilos van a
ir siempre así voy a definir qué
etiqueta le quiero dar un estilo que en
este caso snap y dentro de digamos aquí
abrir una llavecita voy a escribir por
ejemplo
wef que es el ancho
wheat es el ancho de la etiqueta en este
caso ahorita el ancho solamente mide
desde donde comienza la y hasta donde
termina la pero yo le quiero decir que
el ancho lo ocupe toda la página para
eso le voy a decir wifi 100%
y luego quiero centrar el texto vamos a
decirle que text estos son propiedades
text align
centre estas propiedades las pueden
buscar así en internet como css estos
estilos se les llama css por lo tanto
aquí ya estamos programando html y css
ahora agregue esta etiqueta aquí nueva
que esta etiqueta nada más es para
decirle que estamos programando
justamente con html5 que es el lenguaje
de etiquetas para páginas web bien
continuamos vamos a guardar esto y
recargo mi página como pueden ver ya se
me hizo el texto para el centro pero qué
pasa que están muy pegadas mis tres
etiquetas no si yo quiero hacer un menú
como estos de inicio este contacto y eso
están muy pegadas aquí
mis menú entonces ahora le voy a dar un
estilo
a nivel
estos espacios que yo le estoy dando
realmente no son necesarios pero le doy
ese espacio es como les explico para que
se vea bonito el código ahora estas
llaves y estás que decía que son de
apertura y de cierre es por ejemplo aquí
mi estilo para nada le conecta al índico
donde comienza o todo lo que va a
contener ese estilo y con esta liga
donde terminan entonces todo lo que está
entre esto y esto es como el código del
estilo para esa etiqueta nap ahorita le
voy a dar ahora el estilo a la etiqueta
leibel porque quiero que no estén juntas
entonces le doy
este estilo que se llama padding
con 20 píxeles eso va a hacer que entre
las etiquetas leibel se van a separar
pero también quiero decirle que la letra
sea más grande entonces hay una
propiedad que se llama font-size
y le voy a dar 2.5 m
también se le puede dar el tamaño de
letra en píxeles este es un este es un
estilo el 2.5 m quiero decirle que al
tamaño original lo multa lo doble o
bueno en este caso lo multiplique por
2.5 y esto es y se va a ver así listo
vamos a dar creo que es mucho lo voy a
dejar en 2 y el padding que es el
espacio entre los lakers se lo voy a
dejar a 30 píxeles vean vamos a darle
por ejemplo 100 píxeles para que se note
la diferencia que pasó ahí está ya se ve
más separado mi página
se juntan pues por el tamaño llega un
momento en que se juntan
qué más podemos hacer vamos a poner los
hipervínculos por ejemplo aquí voy a
decirle que quiero ir a
este va a ser ir a
7
y este va a ser ir a
estimo que es donde se pueden comprar
juegos cómo le hago para que estos
textos cuando yo le dé clic me mande a
estos a estos hipervínculos digamos a
esas páginas hay una etiqueta que se
llama
que también hay que abrir y cerrar
así solo que quiero que el texto de ir a
google es el que haga la acción entonces
para que haga la acción este texto tiene
que ir dentro de las etiquetas
y ahora como sabe la que tiene que ir a
google hay una propiedad que se llama hr
le vamos a poner hr fi igual y entre
comillas dobles estas son unas comillas
dobles y estas otras comillas dobles
aquí vamos a poner la url de la página
donde queremos que vaya lo voy a pegar
aquí
ahora el de youtube va a ser muy similar
tenemos que ponerla
vamos a copiar esto
recuerden este esta etiqueta de cierre
va después del texto y dentro del nivel
porque el nivel es mi es el que contiene
mi texto digamos entonces quitamos esto
también y después de youtube listo ahora
nos falta su h ref iguala
voy a copiar esto y lo voy a pegar acá
entonces aquí quiero que vaya a
youtube
puntocom y aquí quiero que vaya a steam
cuál es el destino
starting power.com en español
entonces copio esto
y lo ponemos aquí
queda un poco más larga
le damos guardar
vamos a ver nuestra página web y listo
ya está hasta cambiaron el tipo de letra
y el color ahora se ven como moraditos y
con una línea entonces yo le doy a clic
aquí como pueden ver me llevo a google
regreso de clic aquí me envío a youtube
regreso le doy ir a steam y me llevo a
steam y esos son los hipervínculos para
qué pasa si quiero que se abra en otra
pestaña y no en mi página web para que
no se cierra podemos hacer aquí
se pone targets vamos a ponerlo al
destino que es más vistoso target iguala
blanca
entonces guardamos
recargo mi página web le voy a dar ir a
steam y como pueden ver me lo abrió en
otra pestaña ya no me cerró mi página
web como aquí youtube
le doy otra vez y ver me abre otras
pestañas esos son con el target blank
con esto que le agregué aquí si quiero
que en youtube me haga lo mismo me lo
abra en otra pestaña pues lo voy a
copiar y lo voy a pegar aquí
se está deformando un poco porque no
cabe aquí en mi bloc de notas pero vean
si lo hago más grande ahí está ya se van
acomodando bien ya tengo mi barra de
navegación vamos a recargarlo ahí va y
ahora quiero una imagen de fondo quiero
que no esté así de simple mi página
entonces está por ejemplo entonces si
quiero usar esta imagen para mi página
web le voy a dar clic derecho y me sale
copiar dirección de imagen aquí le voy a
dar clic ya tengo la dirección de la
imagen copiada me voy a mi página web y
ahora aquí en los estilos le voy a decir
que la etiqueta body
le ponga una imagen de fondo esa
propiedad se llama para ground
y más
dos puntos url quiere decir que voy a
usar una url
y voy a pegar aquí la dirección de esa
imagen ahora es muy importante que
después de poner una propiedad se
termina aquí con punto y coma
el punto y coma
ahora es muy importante que aquí en las
propiedades después de poner una se
ponga punto y coma porque el punto y
coma nos dice o nos indica que esta
propiedad ya terminó y entonces inicia
la siguiente y después aquí otra vez
punto y coma vamos a salvar esto para
ver cómo se ve la imagen de fondo
listo pueden ver que se cortó un poco
debido a que está muy chiquita la imagen
pero ahora vamos a ajustarlo para que si
la imagen se adecue al total de el fondo
de mi body bien entonces para eso aunque
se va a pixelar un poco porque como les
digo esta imagen es chiquita pero vamos
a hacerlo entonces primero el background
size back ground
6 le voy a decir que haga cover
vamos a guardar y vamos a repetir ahí
está mi imagen de fondo ya cubre toda mi
página pero como pueden ver se se pixela
ya que la imagen es muy pequeña vamos a
buscar otra imagen de fondo por ejemplo
voy a descargar esta imagen le doy clic
derecho
guardar la imagen como le voy a decir
que la guardia de una vez en mi carpeta
de página web le voy a poner universo
y me lo va a guardar como un png
entonces le voy a guardar
y vamos a ver la imagen la imagen yo la
tengo
aquí en mi carpeta aquí está universo
entonces yo ya tengo aquí mi imagen de
universo que está dentro de mi carpeta
de página web en mi proyecto y muy
fácilmente lo voy a llamar desde mi
página web
aquí en vez de todo esto de la url le
voy a decir universo png porque mi
imagen la guardia como png archivo png
ahora le doy guardar vamos a ver cómo se
aplica el cambio ahí está
y qué pasa por qué nada más en este
universo png pues porque como les
explicaba está dentro de la misma
carpeta de mi proyecto pero qué pasa si
tengo otra carpeta donde yo quiero
guardar mis imágenes voy a meter
universo aquí adentro si lo dejo como
estaba pues ya no se va a ver mi imagen
desaparece los quiero tengo que decirle
en mi página web que está dentro de la
carpeta img y luego voy a usar un
diagonal universo punto png
aquí está que es como si copiar esta
ruta
regresamos vamos a guardar
y ahí está mi fondo ahora quiero cambiar
el color de mi menú porque ya no se ve
con este fondo oscuro y morado entonces
a mí nada que es mi menú le voy a dar
con la propiedad
back ground
color
lo voy a poner aquí los colores los
podemos usar en formato rgb o en
hexadecimal como sabemos ese formato
pues podemos irnos a google a buscar por
ejemplo colores en hexadecimal
abro aquí esta página y por ejemplo aquí
yo escojo el colorcito que quiera en
este caso quiero el blanco y tiene un
gatito y todo este código voy a copiar
esto
y aquí en mi página le voy a poner
gatito y lo que copié y lo punto y coma
este es el color blanco es gatito y seis
jefes 1 2 3 4 5 6 es hexadecimal guardo
y vamos a ver mi página ahí está ya
tiene el fondo blanco la barra de
navegación tengo el de ir steam y todo
eso bien vamos a agregar ahora algo de
contenido aquí en el centro de mi página
para ello aquí después del nap voy a
poner una etiqueta que se llama section
tengo que abrir y cerrar recuerden
y ya que tengo mi contenido de sección
le voy a poner aquí vamos a buscar
[Música]
esto genera texto aleatorio o pudo
copiar todo este texto por ejemplo
el texto x que no tiene significado y lo
pegó ahí dentro de mi sección
la guardo vamos a ver mi página y listo
esto tome texto pero no se ve bien
porque pues mi fondo no entonces le voy
a decir que a mi section vamos a darle
también un fondo blanco
a la etiqueta section le voy a dar un
fondo blanco
como back ground
el color como este vamos a copiarlo ya
que ya lo tenemos aquí
guardamos y también no quiero que
abarque todo toda la página no quiero
hacerte tan grandote entonces le voy a
decir que sólo va a abarcar un 60% de
las páginas con el wifi y le voy a dar
un margin auto
vamos a ver cómo se ve
listo porque ese centro mi texto el
margin auto me ayudó a que le pusiera un
margen automático del lado izquierdo y
un margen automático del lado derecho
para que se pudiera centrar
y esta de ese tamaño el cuadrito porque
le dije que fuera del tamaño del 60% de
la página en sí reduzca el tamaño pues
se ajusta
ahora quiero que tenga un espacio entre
la sección y el nap porque se ve muy
pegado está muy pegado en toda la
sección le puedo decir que
tenga un margin top
de 100 píxeles
guardamos y listo ahí está mi contenido
ahora vamos a hacerlo más grande vamos a
hacer la letra si gigantesca vamos a
darle un font
6
tal vez si voy a usar 43 m
3 m vamos a ver qué pasa hay que jugar
con nuestra página web
vean esto se hizo gigante qué pasó con
mi fondo que se estiró mucho y cómo que
desapareció
como lo hacemos si yo no quiero que se
pierda así de horrible para ello vamos a
cambiar el background size cover por
background a touch meant y aquí le vamos
a decir fix qué quiere decir esto que el
fondo va a estar siempre fijo vamos a
guardarlo recargamos nuestra página y
como pueden ver ya sale el fondo bonito
bueno yo estoy aquí estorbando verdad
pero vean si el agua es carol se queda
fijo el fondo y yo sigo viendo el
contenido de mi página
qué más podemos hacer vamos a meter una
imagen dentro de mi contenido
vamos a darle aquí que esto se quede en
2.5 m no ese no era
el de section vamos a darle 2.52 12m
también que la letra no sea tan gigante
y vamos a meter aquí mismo en mi sección
una imagen las imágenes para meterlas es
con esta etiqueta img ésta no necesita
por ejemplo es una exclusión que no
necesita tener una etiqueta de cierre
simplemente se le pone aquí una diagonal
y como le ponemos la imagen se le pone
src iguala y aquí dentro de las comillas
dobles nuevamente vamos a poner la url
de una de nuestras imágenes vamos a
buscar una
cohete
por ejemplo imágenes
y quiero poner esta imagen entonces clic
derecho copiar dirección de imagen
y lo ponemos aquí
ahora algo importante de las imágenes es
que
algo importante de las imágenes es que
deben tener un atributo que se llama alt
que en caso de que la imagen no se
muestre que ya la hayan borrado de
internet o cualquier cosa en vez de la
imagen va a aparecer como un logo de que
no existe esa imagen como de error y un
nombre para saber a qué nos referencia
vamos o de qué se trataba esa imagen
entonces aquí le voy a poner cohete para
que la gente sepa que esa imagen es un
cohete bien guardamos vamos a ver en
nuestra página
y listo ahí está se puso la imagen
ahora qué pasa esta imagen está muy
grande como que está muy estorbosa
entonces y digamos que quiero centrarla
también quiero que se vea al centro del
texto si yo yo no le puedo poner
directamente a la etiqueta de imagen que
se centre entonces la voy a meter en una
cajita esas cajitas se llaman div
abro y cierro un dip que es una cajita y
ahí voy a meter la imagen
voy a meter la imagen aquí dentro de
este día y aparte de dar estilos
a parte de dar estilos acá arriba como
lo habíamos estado haciendo también le
puedo dar estilo a una etiqueta
directamente entonces por ejemplo aquí
le voy a dar style iguala y quiero que
haga
que alinea el texto en el centro voy a
copiar entonces este text alain center
y lo pegó aquí en mi etiqueta de div y
por ejemplo a la imagen también le
quiero dar un estilo entonces le voy a
dar aquí style
este estilo va a ser para hacer la más
chiquita la imagen quiero decirle wef
que sea de 150 píxeles
vamos a guardar
recargamos nuestra página y listo como
pueden ver ya quedó ahí la imagen de mi
cohete de entrada gracias a la cajita
que le puse y está un poquito chiquita
porque le dije que estuviera en 105 150
píxeles aquí los píxeles ustedes tienen
que ir probando para ver más o menos
cómo es el tamaño y cómo se va viendo en
nuestra página web
vamos a darle por ejemplo 350 y también
quiero darle un padding
de 50 píxeles para que no esté pegado
con el texto de arriba guardar
y listo como pueden ver ahí está ahora
por último vamos a ver una última cosa
ya está esta página ya se ve decente se
ve bonita
una última cosa es vamos a insertar un
vídeo para poner el vídeo nos vamos a ir
a por ejemplo este vídeo de youtube y en
la parte de compartir me va a salir
estas opciones le voy a dar en insertar
y me da esta etiqueta aquí de código la
voy a copiar
y la voy a pegar aquí dentro de mi
cajita de mi página web guardamos y
vamos a ver cómo se mira el cambio y
listo como pueden ver y agregue la vídeo
de el tutorial de descarga aquí se puede
reproducir o darle clic aquí me va a
enviar al vídeo
harvey
y pues eso fue todo espero que les haya
gustado puesto el vídeo pueden
suscribirse al canal y activar la
campanita para que les notifique cada
que suba un vídeo voy a estar subiendo
cosas interesantes al canal y nos vemos
en el siguiente vídeo
تصفح المزيد من مقاطع الفيديو ذات الصلة
Landing Page in 10 Minutes with Astro and CodeStitch
Curso de Diseño Web, Capitulo 0 - Introducción Para Principiantes
✌️👑Aprendiendo Desde Cero HTML 5 en Adobe Dreamweaver 2021👍✌️
Build your own Amazon price scraper on Google sheets
Tutorial De Como Crear Grilla o Rejillas Con Boostrap Y Html5 En Sublime Text 3
Qué es y Cómo usar la Etiqueta Header en HTML (Ejemplo de uso)
5.0 / 5 (0 votes)