SlideShare una empresa de Scribd logo
1 de 21
Descargar para leer sin conexión
H T M L
H T M L
H T M L
- MAESTRO:
JOSÉ MARIA MANCEBO
WWW.html.com
¿Cuál es la diferencia entre
¿Cuál es la diferencia entre
las etiquetas y los elementos HTML?
las etiquetas y los elementos HTML?
WWW.html.com
WWW.html.com
Las etiquetas HTML son fragmentos de
código que nos permiten crear
elementos HTML.
Los elementos son la estructura básica
de HTML. Dichos elementos tienen dos
propiedades básicas: atributos y
contenido.
WWW.html.com
WWW.html.com
¿Qué es el "HTML
semántico"?
Los elementos semánticos HTML son aquellos
que describen claramente su significado de una
manera legible por humanos y máquinas.
Elementos tales como <header> , <footer>
y <article> son considerados semánticos porque
describen con precisión el propósito del
elemento y el tipo de contenido que hay dentro
de ellos.
WWW.html.com
WWW.html.com
¿Cómo se optimizan los activos de
un sitio web?
¿Qué son los activos de
un sitio web?
Cualquier archivo u objeto que se almacene en
formato digital .
Para optimizar los activos de un sitio web, es esencial
comprimir imágenes, minimizar archivos CSS y
JavaScript, y configurar la caché del navegador. Además,
el uso de una red de entrega de contenido (CDN) y la
eliminación de código innecesario ayudan a acelerar la
carga de la página. También es importante priorizar la
carga del contenido visible, reducir las solicitudes HTTP y
medir el rendimiento de forma regular para mantener
un sitio rápido y eficiente.
WWW.html.com
WWW.html.com
¿Cuáles son las tres formas de reducir
el tiempo de carga de la página?
- Comprimir imágenes:
Utiliza herramientas de compresión de imágenes
para reducir su tamaño sin comprometer
demasiado la calidad visual.
- Caché de página y recursos:
Minificación de CSS, JavaScript y HTML: Elimina espacios en
blanco, comentarios y caracteres innecesarios de tus archivos de
código para reducir su tamaño.
- Uso de CDNs:
Utiliza Content Delivery Networks(Red de distribución de
contenidos) para alojar recursos estáticos como archivos CSS y
JavaScript, lo que puede acelerar la carga al servirlos desde
ubicaciones geográficamente cercanas a los usuarios.
WWW.html.com
WWW.html.com
¿De qué tipo de cosas hay que tener cuidado
cuando se diseña o desarrolla para sitios
multilingües?
Debemos tener cuidado que la traducción no
perjudique al diseño, al SEO o la experiencia de
usuario. Asimismo, tener cautela con la
traducción de las imágenes con texto, las cuales
puedan que no se traduzcan. Además, algo
importante para la página web es utilizar la
etiqueta <hreflang> la cual se utiliza para indicar
que una página debe ser exhibida a los usuarios
de un país o idioma específico.
WWW.html.com
WWW.html.com
¿Qué significa DOCTYPE?
Doctype es una declaración, no una
etiqueta, este nos ayuda a determinar
en qué versión de HTML vamos a
trabajar. Indica qué tipo de
documento debe abrir el navegador y
qué sintaxis y gramática utiliza su
código fuente.
WWW.html.com
WWW.html.com
¿Cuál es la diferencia entre el modo
estándar y el modo extravagante?
En resumen, la principal diferencia entre el modo
estándar y el modo extravagante en informática se
basa en cómo los navegadores interpretan y
renderizan el código de una página web. El modo
estándar sigue los estándares web actuales y
promueve la consistencia entre navegadores,
mientras que el modo extravagante es menos
estricto en la interpretación de estándares y puede
resultar en un comportamiento incoherente.
WWW.html.com
WWW.html.com
¿Cuáles son las limitaciones
al servir páginas XHTML?
XHTML tiene ventajas en términos de estructura y
conformidad con los estándares web, también
presenta limitaciones y desafíos, como una sintaxis
más estricta, problemas de compatibilidad con
navegadores antiguos y mayor complejidad en el
manejo de errores. Estas limitaciones han llevado a
una disminución en su uso en favor de HTML5 en el
desarrollo web moderno.
WWW.html.com
WWW.html.com
¿Cuál es la diferencia sintáctica entre una
lista con viñetas y una lista numerada?
Las viñetas (así llamadas en muchos procesadores de
texto) son un instrumento gráfico. En internet, nos
ayudan a elaborar listas con las que resaltamos los
detalles principales de un párrafo, a la vez que lo
hacemos más atractivo visualmente.
En una lista numerada, los números cambian de
forma automática cuando se añaden o quitan
párrafos. Los párrafos que forman parte de la
misma lista se numeran secuencialmente.
WWW.html.com
WWW.html.com
¿Cómo hacer comentarios sin que el texto
sea recogido por el navegador?
En HTML y muchos lenguajes de programación,
puedes agregar comentarios en tu código sin que el
texto sea recogido por el navegador. Los comentarios
son útiles para incluir notas, aclaraciones o
instrucciones para otros desarrolladores que
trabajen en el código, pero no se mostrarán en la
página web que se renderiza en el navegador.
En HTML, los comentarios se hacen dentro de <!-- y --
>. Cualquier texto dentro de estos delimitadores no
será visible en el navegador.
WWW.html.com
WWW.html.com
¿Cómo se enlaza una imagen, un sitio web y
una dirección de correo electrónico?
Un sitio web es un conjunto de página
web que está alojada en un servidor web,
cualquier persona puede acceder siempre y
cuando tenga conexión a internet.
WWW.html.com
WWW.html.com
Dirección de correo electrónico.
- Un correo electrónico es un software
utilizado para mandar cualquier
información entre un receptor y un
remitente esto es mayormente usado para
empresas u organizaciones para notificar
cualquier evento.
WWW.html.com
WWW.html.com
¿Cuál es la diferencia entre <div> y
<frame>?
Una gran diferencia entre div y frame es que
el div sirve como un bloque, en ese bloque se
puede agrupar un conjunto de elementos
html y css haciendo más fácil la
programación de la página web, ahora el
frame es como un marco que permite
mostrar múltiples documentos.html
WWW.html.com
WWW.html.com
¿Qué es HTML?
El lenguaje de marcado de hipertexto (HTML)
es el lenguaje principal de la World Wide Web.
Permite a los desarrolladores diseñar la forma
en que los elementos de la página web, como el
texto, los hipervínculos y los archivos
multimedia, se muestran en el navegador.
WWW.html.com
WWW.html.com
¿Qué es HTML5?
HTML5 es la última versión del
Lenguaje de Marcado de
Hipertexto,
que admite multimedia, etiquetas
y elementos, mejoras en el
marcado de documentos y nuevas
API.
WWW.html.com
WWW.html.com
¿Cuál es la diferencia entre el modelo
de página de HTML y el de HTML5?
El HTML sólo utiliza la caché del
navegador y las cookies para almacenar
datos temporalmente.
HTML5 utiliza las bases de datos SQL de
la web, el almacenamiento local y la
caché de la aplicación para almacenar
los datos temporalmente.
WWW.html.com
WWW.html.com
¿Cuáles son algunas de las principales
nuevas API que vienen de serie con HTML5?
API de Geolocalización
API de Almacenamiento Web Local
API de Drag and Drop
API de Historial de Navegación
API de Notificaciones Web
API de Canvas
WWW.html.com
WWW.html.com
¿Cuál es la diferencia en el caching entre
HTML5 y el antiguo HTML?
El HTML sólo utiliza la caché del
navegador y las cookies para almacenar
datos temporalmente. HTML5 utiliza las
bases de datos SQL de la web, el
almacenamiento local y la caché de la
aplicación para almacenar los datos
temporalmente. El JavaScript y la interfaz
del navegador se ejecutan en el mismo
hilo.
WWW.html.com
WWW.html.com
¿Qué elementos
han desaparecido?
basefont: Usado para establecer un
tamaño de fuente por defecto.
big: Tamaño grande de texto.
center: Centrar el contenido.
font: Para establecer la fuente del
texto.
strike: Tachar texto.
tt: Texto con fuente de teletipo.
xmp: Texto preformateado.
WWW.html.com
WWW.html.com
¿Cuáles son los nuevos elementos relacionados
con los medios de comunicación en HTML5?
API de MediaStream (Acceso a Cámaras y Micrófonos): Permite el
acceso a cámaras y micrófonos desde la web, lo que habilita
aplicaciones de videoconferencia
<audio> con este elemento podemos insertar cualquier formato
de audio como MP3 y Ogg vorbis
<video> con este elemento podemos insertar videos de cualquier
duración y de diferentes calidades
<source> para especificar multiples tipos de comunicación
Transmisiones en vivo (Streaming).
Un ejemplo :
Twitch es una plataforma centrada en streaming con
transmisiones en vivo sobre videojuegos, cocina, deportes,
música y juegos de mesa.

Más contenido relacionado

Similar a HTML guía completa (20)

HTML 5
HTML 5HTML 5
HTML 5
 
PAGINA WEB paucar inga lidia
PAGINA WEB paucar inga lidiaPAGINA WEB paucar inga lidia
PAGINA WEB paucar inga lidia
 
"Publicar en Internet"
"Publicar en Internet""Publicar en Internet"
"Publicar en Internet"
 
Html
HtmlHtml
Html
 
Curso HTML5
Curso HTML5Curso HTML5
Curso HTML5
 
Diseño web
Diseño webDiseño web
Diseño web
 
Dinamicas
DinamicasDinamicas
Dinamicas
 
Html
HtmlHtml
Html
 
Dinamicas
DinamicasDinamicas
Dinamicas
 
Prototipado Web
Prototipado WebPrototipado Web
Prototipado Web
 
Html tarea
Html tareaHtml tarea
Html tarea
 
Html
HtmlHtml
Html
 
Trabajo de html sandy gutierrez
Trabajo de html sandy gutierrezTrabajo de html sandy gutierrez
Trabajo de html sandy gutierrez
 
Html
HtmlHtml
Html
 
sesion 01- HTML5
sesion 01- HTML5sesion 01- HTML5
sesion 01- HTML5
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
EQUIPO 2,LAS AGUILAS
EQUIPO 2,LAS AGUILASEQUIPO 2,LAS AGUILAS
EQUIPO 2,LAS AGUILAS
 
Html
HtmlHtml
Html
 
Ekipo 2
Ekipo 2Ekipo 2
Ekipo 2
 
Revision de tecnologias web
Revision de tecnologias webRevision de tecnologias web
Revision de tecnologias web
 

HTML guía completa

  • 1. H T M L H T M L H T M L - MAESTRO: JOSÉ MARIA MANCEBO WWW.html.com
  • 2. ¿Cuál es la diferencia entre ¿Cuál es la diferencia entre las etiquetas y los elementos HTML? las etiquetas y los elementos HTML? WWW.html.com WWW.html.com Las etiquetas HTML son fragmentos de código que nos permiten crear elementos HTML. Los elementos son la estructura básica de HTML. Dichos elementos tienen dos propiedades básicas: atributos y contenido.
  • 3. WWW.html.com WWW.html.com ¿Qué es el "HTML semántico"? Los elementos semánticos HTML son aquellos que describen claramente su significado de una manera legible por humanos y máquinas. Elementos tales como <header> , <footer> y <article> son considerados semánticos porque describen con precisión el propósito del elemento y el tipo de contenido que hay dentro de ellos.
  • 4. WWW.html.com WWW.html.com ¿Cómo se optimizan los activos de un sitio web? ¿Qué son los activos de un sitio web? Cualquier archivo u objeto que se almacene en formato digital . Para optimizar los activos de un sitio web, es esencial comprimir imágenes, minimizar archivos CSS y JavaScript, y configurar la caché del navegador. Además, el uso de una red de entrega de contenido (CDN) y la eliminación de código innecesario ayudan a acelerar la carga de la página. También es importante priorizar la carga del contenido visible, reducir las solicitudes HTTP y medir el rendimiento de forma regular para mantener un sitio rápido y eficiente.
  • 5. WWW.html.com WWW.html.com ¿Cuáles son las tres formas de reducir el tiempo de carga de la página? - Comprimir imágenes: Utiliza herramientas de compresión de imágenes para reducir su tamaño sin comprometer demasiado la calidad visual. - Caché de página y recursos: Minificación de CSS, JavaScript y HTML: Elimina espacios en blanco, comentarios y caracteres innecesarios de tus archivos de código para reducir su tamaño. - Uso de CDNs: Utiliza Content Delivery Networks(Red de distribución de contenidos) para alojar recursos estáticos como archivos CSS y JavaScript, lo que puede acelerar la carga al servirlos desde ubicaciones geográficamente cercanas a los usuarios.
  • 6. WWW.html.com WWW.html.com ¿De qué tipo de cosas hay que tener cuidado cuando se diseña o desarrolla para sitios multilingües? Debemos tener cuidado que la traducción no perjudique al diseño, al SEO o la experiencia de usuario. Asimismo, tener cautela con la traducción de las imágenes con texto, las cuales puedan que no se traduzcan. Además, algo importante para la página web es utilizar la etiqueta <hreflang> la cual se utiliza para indicar que una página debe ser exhibida a los usuarios de un país o idioma específico.
  • 7. WWW.html.com WWW.html.com ¿Qué significa DOCTYPE? Doctype es una declaración, no una etiqueta, este nos ayuda a determinar en qué versión de HTML vamos a trabajar. Indica qué tipo de documento debe abrir el navegador y qué sintaxis y gramática utiliza su código fuente.
  • 8. WWW.html.com WWW.html.com ¿Cuál es la diferencia entre el modo estándar y el modo extravagante? En resumen, la principal diferencia entre el modo estándar y el modo extravagante en informática se basa en cómo los navegadores interpretan y renderizan el código de una página web. El modo estándar sigue los estándares web actuales y promueve la consistencia entre navegadores, mientras que el modo extravagante es menos estricto en la interpretación de estándares y puede resultar en un comportamiento incoherente.
  • 9. WWW.html.com WWW.html.com ¿Cuáles son las limitaciones al servir páginas XHTML? XHTML tiene ventajas en términos de estructura y conformidad con los estándares web, también presenta limitaciones y desafíos, como una sintaxis más estricta, problemas de compatibilidad con navegadores antiguos y mayor complejidad en el manejo de errores. Estas limitaciones han llevado a una disminución en su uso en favor de HTML5 en el desarrollo web moderno.
  • 10. WWW.html.com WWW.html.com ¿Cuál es la diferencia sintáctica entre una lista con viñetas y una lista numerada? Las viñetas (así llamadas en muchos procesadores de texto) son un instrumento gráfico. En internet, nos ayudan a elaborar listas con las que resaltamos los detalles principales de un párrafo, a la vez que lo hacemos más atractivo visualmente. En una lista numerada, los números cambian de forma automática cuando se añaden o quitan párrafos. Los párrafos que forman parte de la misma lista se numeran secuencialmente.
  • 11. WWW.html.com WWW.html.com ¿Cómo hacer comentarios sin que el texto sea recogido por el navegador? En HTML y muchos lenguajes de programación, puedes agregar comentarios en tu código sin que el texto sea recogido por el navegador. Los comentarios son útiles para incluir notas, aclaraciones o instrucciones para otros desarrolladores que trabajen en el código, pero no se mostrarán en la página web que se renderiza en el navegador. En HTML, los comentarios se hacen dentro de <!-- y -- >. Cualquier texto dentro de estos delimitadores no será visible en el navegador.
  • 12. WWW.html.com WWW.html.com ¿Cómo se enlaza una imagen, un sitio web y una dirección de correo electrónico? Un sitio web es un conjunto de página web que está alojada en un servidor web, cualquier persona puede acceder siempre y cuando tenga conexión a internet.
  • 13. WWW.html.com WWW.html.com Dirección de correo electrónico. - Un correo electrónico es un software utilizado para mandar cualquier información entre un receptor y un remitente esto es mayormente usado para empresas u organizaciones para notificar cualquier evento.
  • 14. WWW.html.com WWW.html.com ¿Cuál es la diferencia entre <div> y <frame>? Una gran diferencia entre div y frame es que el div sirve como un bloque, en ese bloque se puede agrupar un conjunto de elementos html y css haciendo más fácil la programación de la página web, ahora el frame es como un marco que permite mostrar múltiples documentos.html
  • 15. WWW.html.com WWW.html.com ¿Qué es HTML? El lenguaje de marcado de hipertexto (HTML) es el lenguaje principal de la World Wide Web. Permite a los desarrolladores diseñar la forma en que los elementos de la página web, como el texto, los hipervínculos y los archivos multimedia, se muestran en el navegador.
  • 16. WWW.html.com WWW.html.com ¿Qué es HTML5? HTML5 es la última versión del Lenguaje de Marcado de Hipertexto, que admite multimedia, etiquetas y elementos, mejoras en el marcado de documentos y nuevas API.
  • 17. WWW.html.com WWW.html.com ¿Cuál es la diferencia entre el modelo de página de HTML y el de HTML5? El HTML sólo utiliza la caché del navegador y las cookies para almacenar datos temporalmente. HTML5 utiliza las bases de datos SQL de la web, el almacenamiento local y la caché de la aplicación para almacenar los datos temporalmente.
  • 18. WWW.html.com WWW.html.com ¿Cuáles son algunas de las principales nuevas API que vienen de serie con HTML5? API de Geolocalización API de Almacenamiento Web Local API de Drag and Drop API de Historial de Navegación API de Notificaciones Web API de Canvas
  • 19. WWW.html.com WWW.html.com ¿Cuál es la diferencia en el caching entre HTML5 y el antiguo HTML? El HTML sólo utiliza la caché del navegador y las cookies para almacenar datos temporalmente. HTML5 utiliza las bases de datos SQL de la web, el almacenamiento local y la caché de la aplicación para almacenar los datos temporalmente. El JavaScript y la interfaz del navegador se ejecutan en el mismo hilo.
  • 20. WWW.html.com WWW.html.com ¿Qué elementos han desaparecido? basefont: Usado para establecer un tamaño de fuente por defecto. big: Tamaño grande de texto. center: Centrar el contenido. font: Para establecer la fuente del texto. strike: Tachar texto. tt: Texto con fuente de teletipo. xmp: Texto preformateado.
  • 21. WWW.html.com WWW.html.com ¿Cuáles son los nuevos elementos relacionados con los medios de comunicación en HTML5? API de MediaStream (Acceso a Cámaras y Micrófonos): Permite el acceso a cámaras y micrófonos desde la web, lo que habilita aplicaciones de videoconferencia <audio> con este elemento podemos insertar cualquier formato de audio como MP3 y Ogg vorbis <video> con este elemento podemos insertar videos de cualquier duración y de diferentes calidades <source> para especificar multiples tipos de comunicación Transmisiones en vivo (Streaming). Un ejemplo : Twitch es una plataforma centrada en streaming con transmisiones en vivo sobre videojuegos, cocina, deportes, música y juegos de mesa.