✌️👑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
00:05mire
00:08[Música]
00:12hola hola mis amigos como se encuentran
00:14sean bienvenidos a mi primer vídeo del
00:17curso de html5
00:19html es un lenguaje de marcación de
00:22hipertexto este lenguaje se puede
00:25desarrollar en diferentes plataformas
00:26como dreamweaver en un bloc de notas e
00:30incluso en visual con nosotros vamos a
00:32emplear dicho lenguaje en la plataforma
00:35de adobe dreamweaver para ello vamos a
00:38visualizarlo presionando la combinación
00:40de teclas windows r y la ventana del
00:42ejecutable vamos a digitar el nombre del
00:45programa trim web aquí nos visualiza la
00:48ventana de bienvenida de adobe
00:50dreamweaver
00:522021 no visualiza el interfaz de la
00:55plataforma luego hacemos clic en la
00:57ficha archivo nuevo y nos visualiza la
00:59siguiente ventana aquí adobe dreamweaver
01:01contamos con diferentes lenguajes como
01:04html css les javascript y otros nosotros
01:08vamos a trabajar con el lenguaje de html
01:11este lenguaje nos va a permitir crear
01:13una estructura a nuestra la propiedad
01:17tipo de documento hacemos un clic y aquí
01:19contamos con versiones de dicho lenguaje
01:22html html 4.1 html 5 x html que es una
01:28mejora de html 4 estas versiones de html
01:323 4 y 5 cada una de ellas va
01:35implementando etiquetas como por ejemplo
01:38esta vez contamos con etiquetas de audio
01:40y vídeo y es lo que vamos a elegir html
01:43si hacemos clic en el botón crear a
01:46continuación no visualiza lo siguiente
01:48nosotros vamos a hacer un clic en la
01:50opción dividir para visualizar los
01:52resultados como también visualizar la
01:54codificación estas palabras que se
01:56encuentran entre símbolo menor y mayor
01:59se conoce como etiquetas algunas son
02:02etiquetas como por ejemplo html hits y
02:04bar las etiquetas principales en una
02:07página web son html y van sobre todo la
02:10siguiente es etiqueta como de titulación
02:14opcional por lo tanto si no lo empleamos
02:16nuestra página web de todas maneras se
02:18va
02:19ejecutar ahora vamos a ir conociendo una
02:21por una html es el nombre del lenguaje y
02:24en español en la cabeza de nuestra
02:27página web y título el título por
02:29ejemplo el título voy a hacer una
02:31modificación podemos emplear caracteres
02:33como asteriscos o guiones voy a poner mi
02:36primera página y podemos terminar con
02:38asterix esto se va a visualizar cuando
02:41nosotros ejecutemos nuestra página web
02:43ahora lo importante aquí es trabajar en
02:46el cuerpo de dicha página que es página
02:49de etiquetas se abre como también se
02:52cierra el símbolo de que marca que una
02:55etiqueta está cerrada es porque tiene un
02:57slash como nosotros notamos html abierto
03:00y html cerrado y está abierto y hit
03:04cerrado y abierto y vadhir errar ahora
03:06lo que vamos a realizar aquí es cambiar
03:09de color al fondo de nuestra página web
03:11para ello dentro de la etiqueta para ti
03:13voy a escribir el siguiente parámetro
03:15que aquí en dreamweaver ya nos visualiza
03:17una lista que este récord de color es un
03:20parámetro y a mí me va a permitir
03:22aplicar un color de fondo por ejemplo ya
03:25nos muestra la opción color piquet donde
03:27yo puedo elegir aquí una tableta de
03:29degradado o un color libre a su
03:31disposición hacer clic fuera y como
03:34notarán aquí nuestra página web ya
03:35cambió el color de fondo es un estado
03:37también nosotros podemos digitar el
03:39color en inglés por ejemplo voy a poner
03:42right lee y veremos que está el color
03:44rojo tal vez no nos haga queremos el
03:46dorado con google clic y hasta el color
03:48dorado o el color plateado el verde el
03:51amarillo el color que hermano sangra
03:52ahora como lo visualizamos esto en una
03:55página web primero tenemos que proceder
03:57a guardarlo presionamos la combinación
03:59de teclas control s y no va a visualizar
04:02la ventana de guardar voy a elegir el
04:04escritorio en la parte inferior tengo
04:06que digitar el nombre de mi página esto
04:09puede ser diverso en este caso yo he
04:11quitado el nombre index aquí no es
04:13necesario aplicar una extensión como en
04:15un bloc de notas no que en la parte
04:17inferior ya nos aparece todas las
04:19extensiones con que se puede reproducir
04:20en cualquier navegador auditen guardar
04:23ahora vamos a revisar minimizando de
04:26nivel y aquí en el escritorio tengo mi
04:28archivo index que ya se encuentra con el
04:30icono de chrome que tengo instalado
04:32doble clic para abrirlo debemos tener un
04:34navegador actualizado para poder
04:36trabajar en html si ésta viene a ser mi
04:39página web y nos enfocamos en la parte
04:42superior encontramos que aquí está el
04:44título que nosotros otorgamos mi primera
04:46página y aquí está el fondo dorado que
04:49nosotros también le dimos ahora si
04:50queremos realizar alguna modificación en
04:53nuestra página web tenemos que
04:54dirigirnos nuevamente a tim weber y en
04:56general los campos ejemplo aquí me gusta
04:59ese color así que voy a elegir verde ahí
05:02está el color verde cuando nosotros
05:03realizamos alguna modificación aquí en
05:06dreamweaver notaremos que en la parte
05:08superior el nombre de nuestra página
05:11denominado index.hr ml contiene un
05:14asterisco que nos indica que tenemos que
05:17guardar para visualizarlo en una página
05:20web lo guardo con una combinación de
05:22teclas control s ya no se encuentra el
05:25asterisco y ahora y dijo a mi página web
05:28del internet y aquí le doy efe y como
05:30notaremos el fondo ahora está en color
05:33nosotros podemos también insertar una
05:36imagen de fondo en nuestra página web
05:38para ello me dirijo nuevamente a partir
05:40voy a generar un espacio para poder
05:42digitar el siguiente para ver el
05:43siguiente parámetro se llama background
05:45abro nos va a presentar la opción de
05:48examinar para poder ubicar una imagen
05:51ahora seleccionamos nuestra imagen de
05:52fondo y hacemos clic en el botón aceptar
05:54y digo que no llevará voy a hacer un
05:56clic en la parte superior y como
05:58notaremos aquí se acaba de aplicar una
06:00imagen apoyado a guardarlo con control
06:03es porque tengo que actualizarlo ahora
06:05sí voy a abrir mi página voy a presionar
06:08f5 para actualizar y aquí se estaban
06:10mostrando mi imagen ahora una imagen y
06:13html5 siempre se va a visualizar el
06:16tamaño con que nosotros lo hayamos
06:18descargar si la imagen es más pequeño va
06:21a suceder los voy a volver a dreamweaver
06:24y aquí voy a elegir por ejemplo una
06:27imagen que sea menos tamaño por ejemplo
06:29esta imagen seleccionó y hace digo que
06:32no porque es el mensaje para generar una
06:34copia de seguridad acaba de visualizar
06:36mi imagen de fondo controles para
06:38actualizar me dirijo al internet y f5
06:41para actualizar como notaremos aquí mi
06:43imagen se acaba de duplicar aquí al
06:46extremo al lado derecho y de acuerdo al
06:49tamaño de nuestra página web esto se va
06:52a estar duplicando más y más por lo
06:54tanto vamos a asignar una imagen de
06:56fondo aquí en html5 elegir una imagen
07:00que tenga una resolución alta como
07:02también un tamaño en pixel mal para no
07:04visualizar un duplicado de ahora porque
07:07aquí nosotros en desarrollo web
07:09trabajamos con páginas estáticas y
07:11dinámicas las estáticas son las que
07:13nosotros vamos a manipular de aquí en
07:15adelante con textos estilos imágenes y
07:19entre otros mientras que las dinámicas
07:21ya contienen formularios como el
07:22javascript y php acabamos de hacer una
07:25pequeña página web de código abierto
07:27esto quiere decir que yo puedo
07:29visualizar las etiquetas a pesar que yo
07:31me encuentre en el internet hacer clic
07:33derecho sobre nuestra página vamos a
07:36encontrar en la lista la opción ver
07:38código fuente o control y al hacer un
07:41clic en cualquier navegador vamos a
07:43visualizar en dicho todo lo que nosotros
07:45hemos digitado en nuestro lenguaje de
07:48html como acaban de notar tengo aquí el
07:50color de fondo el verde tengo una imagen
07:53como también tengo mit y ahora otro
07:55punto importante aquí en html es que la
07:59estructura se respeta si nosotros por
08:01ahora llegamos a borrar alguna etiqueta
08:04como badía y html principalmente nuestra
08:07página web no se ejecuta y bueno mis
08:10amigos quiero terminar de esta forma
08:13espero realmente que este corto vídeo
08:16les haya parecido interesante que hemos
08:18aprendido algo más aquí será hasta un
08:21próximo vídeo y ha gustado este vídeo
08:23por favor no olvides en suscribirte será
08:26hasta un próximo vídeo con nuevas
08:28novedades
5.0 / 5 (0 votes)
