Cómo hacer una PÁGINA WEB en BLOC de NOTAS

Summary

En 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

00:00

💻 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.

05:00

📝 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.

10:03

🎨 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.

15:04

🖼️ 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.

20:05

🌐 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.

25:06

🖌️ 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.

Keywords

💡Página web

Una página web es un documento informático accesible a través de Internet y que puede contener texto, imágenes, videos y enlaces a otros documentos. En el video, el tema principal es la creación de una página web utilizando simplemente un bloc de notas, lo que implica la programación HTML para estructurar el contenido y CSS para el diseño y presentación.

💡Bloc de notas

El bloc de notas es una aplicación básica en sistemas operativos que permite la creación y edición de archivos de texto sin formato. En el contexto del video, se utiliza el bloc de notas como herramienta principal para escribir y guardar el código HTML y CSS de la página web, mostrando que no se requieren programas complejos para iniciar en el desarrollo web.

💡HTML

HTML, o Lenguaje de Marcado de Hipertexto, es el estándar básico para la creación de páginas web. Es utilizado para estructurar el contenido de una página web. En el video, el creador utiliza HTML para definir las etiquetas y elementos que conformarán la página, como la etiqueta 'html' para el inicio de la página, 'head' para la sección de metadatos y 'body' para el contenido principal.

💡Etiquetas

Las etiquetas en HTML son marcas que se utilizan para estructurar el contenido de una página web. Cada etiqueta tiene un propósito específico y se utiliza en parejas de apertura y cierre. En el video, se mencionan varias etiquetas, como 'title' para el título de la página, 'style' para los estilos CSS y 'a' para los hipervínculos.

💡CSS

CSS, o Hojas de Estilo en Cascada, es un lenguaje utilizado para describir la presentación de un documento escrito en un lenguaje de marcado, como HTML. En el video, el creador aplica CSS para dar estilo a la página web, como el ancho, alineación del texto y el tamaño de la fuente, para mejorar la apariencia visual de la página.

💡Hipervínculos

Los hipervínculos son elementos en una página web que permiten a los usuarios navegar a otras páginas web o a otras secciones dentro de la misma página. En el script, se muestra cómo crear hipervínculos utilizando la etiqueta 'a' y el atributo 'href' para dirigir al usuario a sitios externos como Google, YouTube y Steam.

💡Imágenes de fondo

Las imágenes de fondo son imágenes que se colocan en el fondo de un elemento en una página web, generalmente en el body o en secciones específicas. En el video, se discute cómo agregar una imagen de fondo al body de la página web y cómo ajustarla para que cubra todo el fondo y se adapte a la pantalla del usuario.

💡Div

Un 'div' es una etiqueta en HTML que se utiliza como contenedor para otros elementos. Es una forma de 'dividir' el contenido de una página en secciones más pequeñas. En el video, el creador utiliza un 'div' para insertar y estilizar una imagen, permitiendo así una mejor organización y presentación del contenido.

💡Vídeo de YouTube

Un vídeo de YouTube es un tipo de contenido multimedia que puede ser insertado en páginas web utilizando un código proporcionado por la plataforma. En el video, el creador muestra cómo insertar un vídeo de YouTube en la página web utilizando el código de inserción proporcionado por YouTube, lo que permite a los visitantes de la página web ver el vídeo sin abandonar el sitio.

💡Atributos

Los atributos en HTML son pares de nombre y valor que se utilizan dentro de las etiquetas para proporcionar información adicional o para personalizar el comportamiento de los elementos. En el video, se menciona el atributo 'alt' en la etiqueta 'img', que es importante para la accesibilidad, proporcionando una descripción de la imagen en caso de que no se pueda cargar.

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

google

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