✌️👑Aprendiendo Desde Cero HTML 5 en Adobe Dreamweaver 2021👍✌️
Summary
TLDREste video tutorial introduce a los espectadores al mundo de HTML5, un lenguaje de marcación de hipertexto utilizado para crear estructuras en la web. A lo largo del video, el presentador guía a los usuarios a través del proceso de crear una página web básica utilizando Adobe Dreamweaver, incluyendo la selección de lenguaje, la edición de texto, el cambio de fondo y la inserción de imágenes. Además, se toca el tema de las páginas web estáticas y dinámicas, y se enfatiza la importancia de la estructura HTML para el correcto funcionamiento de la página. El video termina con una invitación a suscribirse para obtener más contenido educativo sobre desarrollo web.
Takeaways
- 📌 HTML es un lenguaje de marcación de hipertexto utilizado para crear páginas web.
- 💻 Se puede desarrollar HTML en diferentes plataformas, incluyendo Adobe Dreamweaver y editores de texto básicos.
- 🌐 HTML5 es una versión mejorada de HTML que incluye etiquetas para audio y video, entre otras características.
- 📂 Al iniciar Dreamweaver, se presenta una ventana de bienvenida y se puede crear un nuevo archivo HTML.
- 🎨 Se puede elegir entre diferentes versiones de HTML, incluyendo HTML, HTML 4.1, HTML 5 y xHTML.
- 🏷️ Las etiquetas en HTML se abren y cierran con símbolos, como <html> y </html>, y sirven para estructurar el contenido de la página.
- 📝 El elemento <title> es utilizado para definir el título de la página web, que se muestra en el navegador.
- 🎨 Se puede cambiar el color de fondo de la página web utilizando el parámetro 'bgcolor' dentro de la etiqueta <body>.
- 🖼️ También se puede insertar una imagen de fondo utilizando la etiqueta 'background' y seleccionando una imagen.
- 🔄 Si se desea una imagen de fondo sin repetir y adaptativa, es importante elegir una imagen con una alta resolución y un tamaño adecuado.
- 🔗 Las páginas web estáticas y dinámicas tienen usos distintos; las estáticas son manipuladas con textos, estilos e imágenes, mientras que las dinámicas incluyen formularios y scripts.
Q & A
¿Qué es HTML y cómo se puede desarrollar?
-HTML es un lenguaje de marcación de hipertexto que se puede desarrollar en diferentes plataformas, como Dreamweaver, en un bloc de notas o incluso en un editor de texto simple.
¿Qué plataforma utilizaremos para trabajar con HTML en este curso?
-Vamos a utilizar la plataforma de Adobe Dreamweaver para trabajar con el lenguaje HTML.
¿Qué tipo de lenguajes diferentes se pueden trabajar en Adobe Dreamweaver?
-En Adobe Dreamweaver se pueden trabajar con diferentes lenguajes como HTML, CSS, JavaScript y otros.
¿Cuál versión de HTML vamos a utilizar en este curso?
-Vamos a trabajar con la versión HTML5, que es una mejora de HTML 4 y contiene etiquetas adicionales como audio y video.
¿Qué etiquetas son las principales en una página web HTML?
-Las etiquetas principales en una página web HTML son la etiqueta HTML que encierra todo el contenido y la etiqueta head que contiene el título de la página.
¿Cómo se puede cambiar el color de fondo de una página web en HTML?
-Para cambiar el color de fondo de una página web en HTML, se puede utilizar el parámetro 'bgcolor' dentro de la etiqueta 'body'.
¿Cómo se puede insertar una imagen de fondo en una página web?
-Para insertar una imagen de fondo en una página web, se utiliza la etiqueta 'body' con el parámetro 'background' y se especifica la ruta de la imagen.
¿Qué sucede si la imagen de fondo tiene un tamaño menor que el tamaño de la página web?
-Si la imagen de fondo es menor que el tamaño de la página web, la imagen se duplicará hasta llenar todo el espacio disponible.
¿Qué es un sitio web estático y cómo se diferencia de un sitio web dinámico?
-Un sitio web estático es aquel que no cambia automáticamente y su contenido se manifiesta a través de texto, estilos y imágenes. Los sitios web dinámicos, por otro lado, incluyen elementos interactivos como formularios, JavaScript y PHP.
¿Cómo se puede ver el código fuente de una página web en un navegador?
-Para ver el código fuente de una página web en un navegador, se puede hacer clic derecho sobre la página y seleccionar la opción 'Ver código fuente' o 'Inspect' (Inspeccionar) en la ventana del navegador.
¿Qué se aprende en este curso de HTML5?
-En este curso de HTML5, se aprende a crear una estructura básica de una página web, a cambiar el color de fondo, a insertar una imagen de fondo y a entender la diferencia entre sitios web estáticos y dinámicos.
Outlines
😀 Introducción al Curso de HTML5 y Adobe Dreamweaver
Este primer párrafo introduce el curso de HTML5 y la plataforma Adobe Dreamweaver para el desarrollo de lenguaje de hipertexto. Se describe cómo iniciar Dreamweaver, crear un nuevo documento HTML y elegir entre las diferentes versiones del lenguaje como HTML 4.1 y HTML 5. Se destaca la capacidad de HTML para crear estructuras en páginas web y se mencionan las etiquetas de audio y vídeo. Además, se explica cómo se abren y cierran las etiquetas y cómo cambiar el color de fondo de una página web utilizando parámetros dentro de la etiqueta de la página.
🖼️ Añadiendo Imagen de Fondo y Consideraciones para HTML5
El segundo párrafo se enfoca en cómo se pueden realizar modificaciones en una página web en Dreamweaver, como agregar una imagen de fondo y guardar los cambios. Se menciona la importancia de guardar los cambios con el comando 'Control + S' para que se reflejen en la página web. Se discute la selección de una imagen de fondo con una resolución alta para evitar duplicados y cómo las páginas estáticas y dinámicas difieren en cuanto a la manipulación de textos, estilos y otros elementos. Finalmente, se destaca la importancia de la estructura HTML y se invita a los espectadores a suscribirse para recibir más contenido en futuras publicaciones.
Mindmap
Keywords
💡HTML
💡Adobe Dreamweaver
💡Etiquetas HTML
💡Código de color
💡Imagen de fondo
💡Guardar y actualizar
💡Página web estática
💡HTML5
💡Título de la página
💡Código fuente
Highlights
Presentación del primer vídeo del curso de HTML5
Introducción a HTML como lenguaje de marcación de hipertexto
Múltiples plataformas para desarrollar en HTML, incluyendo Adobe Dreamweaver
Visualización de la ventana de bienvenida de Adobe Dreamweaver 2021
Creación de una estructura de documento en HTML
Elección de la versión HTML5 para trabajar en el curso
Explicación de las etiquetas en HTML y su función
Uso de etiquetas para el título de la página web
Cambio de color de fondo de la página web mediante parámetros
Demostración de selección de colores en Dreamweaver
Guardado y visualización de la página web en un navegador
Modificación de la página web con Dreamweaver y su actualización
Inserción de una imagen de fondo en la página web
Establecimiento de una imagen de fondo con un tamaño adecuado
Diferenciación entre páginas web estáticas y dinámicas
Visualización del código fuente de la página web en el navegador
Conclusión del vídeo con una invitación a suscribirse para nuevos contenidos
Transcripts
mire
[Música]
hola hola mis amigos como se encuentran
sean bienvenidos a mi primer vídeo del
curso de html5
html es un lenguaje de marcación de
hipertexto este lenguaje se puede
desarrollar en diferentes plataformas
como dreamweaver en un bloc de notas e
incluso en visual con nosotros vamos a
emplear dicho lenguaje en la plataforma
de adobe dreamweaver para ello vamos a
visualizarlo presionando la combinación
de teclas windows r y la ventana del
ejecutable vamos a digitar el nombre del
programa trim web aquí nos visualiza la
ventana de bienvenida de adobe
dreamweaver
2021 no visualiza el interfaz de la
plataforma luego hacemos clic en la
ficha archivo nuevo y nos visualiza la
siguiente ventana aquí adobe dreamweaver
contamos con diferentes lenguajes como
html css les javascript y otros nosotros
vamos a trabajar con el lenguaje de html
este lenguaje nos va a permitir crear
una estructura a nuestra la propiedad
tipo de documento hacemos un clic y aquí
contamos con versiones de dicho lenguaje
html html 4.1 html 5 x html que es una
mejora de html 4 estas versiones de html
3 4 y 5 cada una de ellas va
implementando etiquetas como por ejemplo
esta vez contamos con etiquetas de audio
y vídeo y es lo que vamos a elegir html
si hacemos clic en el botón crear a
continuación no visualiza lo siguiente
nosotros vamos a hacer un clic en la
opción dividir para visualizar los
resultados como también visualizar la
codificación estas palabras que se
encuentran entre símbolo menor y mayor
se conoce como etiquetas algunas son
etiquetas como por ejemplo html hits y
bar las etiquetas principales en una
página web son html y van sobre todo la
siguiente es etiqueta como de titulación
opcional por lo tanto si no lo empleamos
nuestra página web de todas maneras se
va
ejecutar ahora vamos a ir conociendo una
por una html es el nombre del lenguaje y
en español en la cabeza de nuestra
página web y título el título por
ejemplo el título voy a hacer una
modificación podemos emplear caracteres
como asteriscos o guiones voy a poner mi
primera página y podemos terminar con
asterix esto se va a visualizar cuando
nosotros ejecutemos nuestra página web
ahora lo importante aquí es trabajar en
el cuerpo de dicha página que es página
de etiquetas se abre como también se
cierra el símbolo de que marca que una
etiqueta está cerrada es porque tiene un
slash como nosotros notamos html abierto
y html cerrado y está abierto y hit
cerrado y abierto y vadhir errar ahora
lo que vamos a realizar aquí es cambiar
de color al fondo de nuestra página web
para ello dentro de la etiqueta para ti
voy a escribir el siguiente parámetro
que aquí en dreamweaver ya nos visualiza
una lista que este récord de color es un
parámetro y a mí me va a permitir
aplicar un color de fondo por ejemplo ya
nos muestra la opción color piquet donde
yo puedo elegir aquí una tableta de
degradado o un color libre a su
disposición hacer clic fuera y como
notarán aquí nuestra página web ya
cambió el color de fondo es un estado
también nosotros podemos digitar el
color en inglés por ejemplo voy a poner
right lee y veremos que está el color
rojo tal vez no nos haga queremos el
dorado con google clic y hasta el color
dorado o el color plateado el verde el
amarillo el color que hermano sangra
ahora como lo visualizamos esto en una
página web primero tenemos que proceder
a guardarlo presionamos la combinación
de teclas control s y no va a visualizar
la ventana de guardar voy a elegir el
escritorio en la parte inferior tengo
que digitar el nombre de mi página esto
puede ser diverso en este caso yo he
quitado el nombre index aquí no es
necesario aplicar una extensión como en
un bloc de notas no que en la parte
inferior ya nos aparece todas las
extensiones con que se puede reproducir
en cualquier navegador auditen guardar
ahora vamos a revisar minimizando de
nivel y aquí en el escritorio tengo mi
archivo index que ya se encuentra con el
icono de chrome que tengo instalado
doble clic para abrirlo debemos tener un
navegador actualizado para poder
trabajar en html si ésta viene a ser mi
página web y nos enfocamos en la parte
superior encontramos que aquí está el
título que nosotros otorgamos mi primera
página y aquí está el fondo dorado que
nosotros también le dimos ahora si
queremos realizar alguna modificación en
nuestra página web tenemos que
dirigirnos nuevamente a tim weber y en
general los campos ejemplo aquí me gusta
ese color así que voy a elegir verde ahí
está el color verde cuando nosotros
realizamos alguna modificación aquí en
dreamweaver notaremos que en la parte
superior el nombre de nuestra página
denominado index.hr ml contiene un
asterisco que nos indica que tenemos que
guardar para visualizarlo en una página
web lo guardo con una combinación de
teclas control s ya no se encuentra el
asterisco y ahora y dijo a mi página web
del internet y aquí le doy efe y como
notaremos el fondo ahora está en color
nosotros podemos también insertar una
imagen de fondo en nuestra página web
para ello me dirijo nuevamente a partir
voy a generar un espacio para poder
digitar el siguiente para ver el
siguiente parámetro se llama background
abro nos va a presentar la opción de
examinar para poder ubicar una imagen
ahora seleccionamos nuestra imagen de
fondo y hacemos clic en el botón aceptar
y digo que no llevará voy a hacer un
clic en la parte superior y como
notaremos aquí se acaba de aplicar una
imagen apoyado a guardarlo con control
es porque tengo que actualizarlo ahora
sí voy a abrir mi página voy a presionar
f5 para actualizar y aquí se estaban
mostrando mi imagen ahora una imagen y
html5 siempre se va a visualizar el
tamaño con que nosotros lo hayamos
descargar si la imagen es más pequeño va
a suceder los voy a volver a dreamweaver
y aquí voy a elegir por ejemplo una
imagen que sea menos tamaño por ejemplo
esta imagen seleccionó y hace digo que
no porque es el mensaje para generar una
copia de seguridad acaba de visualizar
mi imagen de fondo controles para
actualizar me dirijo al internet y f5
para actualizar como notaremos aquí mi
imagen se acaba de duplicar aquí al
extremo al lado derecho y de acuerdo al
tamaño de nuestra página web esto se va
a estar duplicando más y más por lo
tanto vamos a asignar una imagen de
fondo aquí en html5 elegir una imagen
que tenga una resolución alta como
también un tamaño en pixel mal para no
visualizar un duplicado de ahora porque
aquí nosotros en desarrollo web
trabajamos con páginas estáticas y
dinámicas las estáticas son las que
nosotros vamos a manipular de aquí en
adelante con textos estilos imágenes y
entre otros mientras que las dinámicas
ya contienen formularios como el
javascript y php acabamos de hacer una
pequeña página web de código abierto
esto quiere decir que yo puedo
visualizar las etiquetas a pesar que yo
me encuentre en el internet hacer clic
derecho sobre nuestra página vamos a
encontrar en la lista la opción ver
código fuente o control y al hacer un
clic en cualquier navegador vamos a
visualizar en dicho todo lo que nosotros
hemos digitado en nuestro lenguaje de
html como acaban de notar tengo aquí el
color de fondo el verde tengo una imagen
como también tengo mit y ahora otro
punto importante aquí en html es que la
estructura se respeta si nosotros por
ahora llegamos a borrar alguna etiqueta
como badía y html principalmente nuestra
página web no se ejecuta y bueno mis
amigos quiero terminar de esta forma
espero realmente que este corto vídeo
les haya parecido interesante que hemos
aprendido algo más aquí será hasta un
próximo vídeo y ha gustado este vídeo
por favor no olvides en suscribirte será
hasta un próximo vídeo con nuevas
novedades
Voir Plus de Vidéos Connexes
5.0 / 5 (0 votes)