SlideShare una empresa de Scribd logo
Introducción HTML5

        Elaborado por :Ing. Ronald Rivas Arguello.
HTML5
• Muchos Se preguntaran ,que es HTML5 pues en este
  Documento Sobran que HTML5 es un Lenguaje de Modelado
  Web y como la palabra lo dice «Modelado", estructuramos
  una pagina web con Ciertas Etiquetas que fueron
  Implementadas en esta Nueva Versión del HTML, les
  adelantare que hay nuevas Versiones de Este HTML, en las
  cuales son HTML Next o HTML6,en esta introducción nos
  centraremos en HTML5 y las nuevas etiquetas con las que
  podemos contar para el modelado de la web.
Estructuración Básica de
        HTML5
HTML5
• Como Vieron Anteriormente en la imagen se ve como se
  podría estructurar una web básica, además están ciertas
  etiquetas que son nuevas de este HTML.

• También Debemos de tomar en cuenta de que para que los
  navegadores conozcan que es lenguaje html5 debemos de
  escribir de la siguiente manera

• <!Doctype HTML>
• Esa es la forma correcta de escritura en HTML5,a diferencia
  del html comun que solo se escribe <HTML>
Etiquetas Básicas
• Ahora Les presentare las etiquetas que debemos de utilizar
  para modelar con este lenguaje.

Header: Esta etiqueta como su nombre lo dice es un encabezado
y además vino a sustituir al antiguo «Div» utilizado para modelar
web en los HTML anteriores, su forma de expresión es de la
Siguiente Forma.

<Header></Header>
Como pueden ver también hay etiqueta de Cierre pero HTML5
trae por Defecto de que la Etiqueta deba Cerrar, pero por
Significado Sintáctico es Mejor hacerlo de Esa forma.
Etiqueta Hgroup
• Esta es la siguiente Etiqueta por que Va de la mano con la
  etiqueta Header, en este Caso la función del Hgroup es
  permitir agregar uno o mas Títulos dentro de la web atraves
  de la Etiqueta <H1>,<H2>,<H3>,ect.

• Como Recomendacion Para tener mejor posionamiento
  Utilizar una Unica Etiqueta H1,por que de lo contrario perdera
  Importancia dentro de las Busquedas que realize los
  buscadores Como Google.
Etiqueta Nav
• Esta etiqueta Quizás es muy conocida en los lenguajes HTML
  anteriores, pero la menciono como una etiqueta básica de
  estructuración ya que con ella podemos crear Menú en
  nuestras paginas Web, la etiqueta Nav es un espacio
  reservado para colocar los botones o títulos de las pagina
  vinculadas a la principal.

• Se expresa de la siguiente Manera
• <Nav></Nav>
Dentro de Ella Se crea la Etiqueta UL o mejor conocida Como
Etiqueta de lista Para listar las paginas,se expresa asi <ul></ul>
Etiqueta Section
• Con esta Etiqueta podemos crear una seccion dentro de la
  pagina web en la cual podemos agregar contenido Textual o
  contenido de imagen ya sea de su preferecia.

• Se expresa de la siguiente Manera

• <Section></section>
Etiqueta Article
• Esta Etiqueta Trabaja de la mano con la Etiqueta Section por
  que una vez creada una Etiqueta section se crea una Etiqueta
  article,que en Español es «ARTICULO", recomendable para
  agregar texto Perfecta para crear Contenido Textual dentro de
  la pagina.

• Se forma de expresar es la siguiente
• <article></article>
• Ademas de esta Etiqueta tambien debemos agregar la
  Etiqueta «p» que es para párrafo <p></p>
Etiqueta Aside
• Esta etiqueta es utilizada para crear contenido no tan
  relevante dentro de la pagina ya que se ubica a los lados de la
  pagina web,recomendable para anuncios o publicidad como
  ustedes lo conoscan

• Se expresa de la siguiente Manera
• <aside></aside>
Etiqueta Footer
• Finalmente Llegamos a la Etiqueta Footer la cual significa pie o
  Para ser mas claro pie de pagina,en esta agregamos contenido
  de derechos o informacion dentro de la pagina web Como
  pueden ser los derechos reservados,numeros de telefono,ect.
Conclusion
Html5 es un lenguaje de modelado web         estructurado
,recomendable para crear las mejores paginas web con la
tecnologia mas nueva,tambien contamos con CSS3 que es el
nuevo lenguaje de estilo de HTML5.

Sin nada mas que decir les agradezco por Seguir esta
introduccion



                                        Muchas Gracias 

Más contenido relacionado

La actualidad más candente

tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina webkaren_malik
 
Primeros pasos en Blogger.3
Primeros pasos en Blogger.3Primeros pasos en Blogger.3
Primeros pasos en Blogger.3Ángel Encinas
 
Insertar tu propio banner en el blog
Insertar tu propio banner en el blogInsertar tu propio banner en el blog
Insertar tu propio banner en el blog
alexgjv
 
Primera clase de HTML
Primera clase de HTMLPrimera clase de HTML
Primera clase de HTML
Jorge Llanten
 
Manual Cuadro Google Reader
Manual Cuadro Google ReaderManual Cuadro Google Reader
Manual Cuadro Google Reader
blogosferagorria
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1
luchopaisa
 
Como crear una pagina web
Como crear una pagina webComo crear una pagina web
Como crear una pagina web
carolinaduran45
 
El mejor curso de html lección no.1
El mejor curso de html lección no.1El mejor curso de html lección no.1
El mejor curso de html lección no.1gabrielhernandezvc
 
04 Marcas HTML
04 Marcas HTML04 Marcas HTML
04 Marcas HTML
pizarg0
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandraTatianita Is
 

La actualidad más candente (15)

Html5 y php5
Html5 y php5Html5 y php5
Html5 y php5
 
Blogger
BloggerBlogger
Blogger
 
tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina web
 
Primeros pasos en Blogger.3
Primeros pasos en Blogger.3Primeros pasos en Blogger.3
Primeros pasos en Blogger.3
 
Insertar tu propio banner en el blog
Insertar tu propio banner en el blogInsertar tu propio banner en el blog
Insertar tu propio banner en el blog
 
Primera clase de HTML
Primera clase de HTMLPrimera clase de HTML
Primera clase de HTML
 
Manual Cuadro Google Reader
Manual Cuadro Google ReaderManual Cuadro Google Reader
Manual Cuadro Google Reader
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1
 
Html Sharon 4101
Html Sharon 4101Html Sharon 4101
Html Sharon 4101
 
Como crear una pagina web
Como crear una pagina webComo crear una pagina web
Como crear una pagina web
 
El mejor curso de html lección no.1
El mejor curso de html lección no.1El mejor curso de html lección no.1
El mejor curso de html lección no.1
 
04 Marcas HTML
04 Marcas HTML04 Marcas HTML
04 Marcas HTML
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexa
Expo html alexaExpo html alexa
Expo html alexa
 

Destacado

Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGR
valgreens
 
HTML5
HTML5HTML5
Curso de HTML5
Curso de HTML5Curso de HTML5
Curso de HTML5
Carlos Azaustre
 
HTML5 Enfoque Semantico
HTML5 Enfoque SemanticoHTML5 Enfoque Semantico
HTML5 Enfoque Semantico
Max Kraszewski
 
Manual de html5_en_español
Manual de html5_en_españolManual de html5_en_español
Manual de html5_en_español
Heinrrich Facho
 
Html5 css3
Html5 css3Html5 css3
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
Paradigma Digital
 
Introducción HTML5 y CSS3
Introducción HTML5 y CSS3Introducción HTML5 y CSS3
Introducción HTML5 y CSS3
Néstor Ramírez Salas
 

Destacado (8)

Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGR
 
HTML5
HTML5HTML5
HTML5
 
Curso de HTML5
Curso de HTML5Curso de HTML5
Curso de HTML5
 
HTML5 Enfoque Semantico
HTML5 Enfoque SemanticoHTML5 Enfoque Semantico
HTML5 Enfoque Semantico
 
Manual de html5_en_español
Manual de html5_en_españolManual de html5_en_español
Manual de html5_en_español
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 
Introducción HTML5 y CSS3
Introducción HTML5 y CSS3Introducción HTML5 y CSS3
Introducción HTML5 y CSS3
 

Similar a Introducción html5

Guia 1 y 2 paginas web 11 (modulo)
Guia 1 y 2 paginas web 11 (modulo)Guia 1 y 2 paginas web 11 (modulo)
Guia 1 y 2 paginas web 11 (modulo)
María C. Plata
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
alexander polanco
 
265069606-Curso-basico-HTML5.pdf
265069606-Curso-basico-HTML5.pdf265069606-Curso-basico-HTML5.pdf
265069606-Curso-basico-HTML5.pdf
YolitaGaona
 
Códigos HTML Sede magdalena ortega de Nariño
Códigos HTML Sede magdalena ortega  de NariñoCódigos HTML Sede magdalena ortega  de Nariño
Códigos HTML Sede magdalena ortega de Nariño
samaraoviedom
 
Clase 1
Clase 1Clase 1
Clase 1
sinaibucio
 
Clase 2 Desarrollo Web
Clase 2 Desarrollo Web Clase 2 Desarrollo Web
Clase 2 Desarrollo Web
Planeta Digital 360
 
Practica 1
Practica 1Practica 1
Practica 1
Raul Hernandez
 
Html
HtmlHtml
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
KarolCortes7
 
Diversas características generales
Diversas características generalesDiversas características generales
Diversas características generalesga12007
 
Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1
yanburbano
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas webABel Palma
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
joraloca
 
Laura bonilla 102 tics jmv
Laura bonilla 102 tics jmvLaura bonilla 102 tics jmv
Laura bonilla 102 tics jmv
lauran
 
Qué es una etiqueta html
Qué es una etiqueta htmlQué es una etiqueta html
Qué es una etiqueta html
miriam marin
 
Html Basico en Español
Html Basico en EspañolHtml Basico en Español
Html Basico en Español
Ileana Echandi
 
Encabezados h1 h6 p aplicar estilos parrafos etiqueta pre html var
Encabezados h1   h6 p aplicar estilos parrafos etiqueta pre html varEncabezados h1   h6 p aplicar estilos parrafos etiqueta pre html var
Encabezados h1 h6 p aplicar estilos parrafos etiqueta pre html var
noelia alarcon
 

Similar a Introducción html5 (20)

Guia 1 y 2 paginas web 11 (modulo)
Guia 1 y 2 paginas web 11 (modulo)Guia 1 y 2 paginas web 11 (modulo)
Guia 1 y 2 paginas web 11 (modulo)
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 
265069606-Curso-basico-HTML5.pdf
265069606-Curso-basico-HTML5.pdf265069606-Curso-basico-HTML5.pdf
265069606-Curso-basico-HTML5.pdf
 
Códigos HTML Sede magdalena ortega de Nariño
Códigos HTML Sede magdalena ortega  de NariñoCódigos HTML Sede magdalena ortega  de Nariño
Códigos HTML Sede magdalena ortega de Nariño
 
Clase 1
Clase 1Clase 1
Clase 1
 
Clase 2 Desarrollo Web
Clase 2 Desarrollo Web Clase 2 Desarrollo Web
Clase 2 Desarrollo Web
 
Practica 1
Practica 1Practica 1
Practica 1
 
Html
HtmlHtml
Html
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
 
Diversas características generales
Diversas características generalesDiversas características generales
Diversas características generales
 
Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
Tpd 02
Tpd 02Tpd 02
Tpd 02
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
 
Laura bonilla 102 tics jmv
Laura bonilla 102 tics jmvLaura bonilla 102 tics jmv
Laura bonilla 102 tics jmv
 
Manual html
Manual htmlManual html
Manual html
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Qué es una etiqueta html
Qué es una etiqueta htmlQué es una etiqueta html
Qué es una etiqueta html
 
Html Basico en Español
Html Basico en EspañolHtml Basico en Español
Html Basico en Español
 
Encabezados h1 h6 p aplicar estilos parrafos etiqueta pre html var
Encabezados h1   h6 p aplicar estilos parrafos etiqueta pre html varEncabezados h1   h6 p aplicar estilos parrafos etiqueta pre html var
Encabezados h1 h6 p aplicar estilos parrafos etiqueta pre html var
 

Último

(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
Ventajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloroVentajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloro
durangense277
 
EduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clasesEduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clases
PABLOCESARGARZONBENI
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
Emilio Casbas
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
zoecaicedosalazar
 
Estructuras básicas_ conceptos de programación (1).docx
Estructuras básicas_ conceptos de programación  (1).docxEstructuras básicas_ conceptos de programación  (1).docx
Estructuras básicas_ conceptos de programación (1).docx
SamuelRamirez83524
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
cj3806354
 
biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
Luis Enrique Zafra Haro
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
sarasofiamontezuma
 
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
thomasdcroz38
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
ManuelCampos464987
 
Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
cristianrb0324
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
JimmyTejadaSalizar
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
DanielErazoMedina
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
Fernando Villares
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
cdraco
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
ItsSofi
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
marianabz2403
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
AlejandraCasallas7
 

Último (20)

(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
Ventajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloroVentajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloro
 
EduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clasesEduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clases
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
 
Estructuras básicas_ conceptos de programación (1).docx
Estructuras básicas_ conceptos de programación  (1).docxEstructuras básicas_ conceptos de programación  (1).docx
Estructuras básicas_ conceptos de programación (1).docx
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
 
biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
 
Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
 

Introducción html5

  • 1. Introducción HTML5 Elaborado por :Ing. Ronald Rivas Arguello.
  • 2. HTML5 • Muchos Se preguntaran ,que es HTML5 pues en este Documento Sobran que HTML5 es un Lenguaje de Modelado Web y como la palabra lo dice «Modelado", estructuramos una pagina web con Ciertas Etiquetas que fueron Implementadas en esta Nueva Versión del HTML, les adelantare que hay nuevas Versiones de Este HTML, en las cuales son HTML Next o HTML6,en esta introducción nos centraremos en HTML5 y las nuevas etiquetas con las que podemos contar para el modelado de la web.
  • 4. HTML5 • Como Vieron Anteriormente en la imagen se ve como se podría estructurar una web básica, además están ciertas etiquetas que son nuevas de este HTML. • También Debemos de tomar en cuenta de que para que los navegadores conozcan que es lenguaje html5 debemos de escribir de la siguiente manera • <!Doctype HTML> • Esa es la forma correcta de escritura en HTML5,a diferencia del html comun que solo se escribe <HTML>
  • 5. Etiquetas Básicas • Ahora Les presentare las etiquetas que debemos de utilizar para modelar con este lenguaje. Header: Esta etiqueta como su nombre lo dice es un encabezado y además vino a sustituir al antiguo «Div» utilizado para modelar web en los HTML anteriores, su forma de expresión es de la Siguiente Forma. <Header></Header> Como pueden ver también hay etiqueta de Cierre pero HTML5 trae por Defecto de que la Etiqueta deba Cerrar, pero por Significado Sintáctico es Mejor hacerlo de Esa forma.
  • 6. Etiqueta Hgroup • Esta es la siguiente Etiqueta por que Va de la mano con la etiqueta Header, en este Caso la función del Hgroup es permitir agregar uno o mas Títulos dentro de la web atraves de la Etiqueta <H1>,<H2>,<H3>,ect. • Como Recomendacion Para tener mejor posionamiento Utilizar una Unica Etiqueta H1,por que de lo contrario perdera Importancia dentro de las Busquedas que realize los buscadores Como Google.
  • 7. Etiqueta Nav • Esta etiqueta Quizás es muy conocida en los lenguajes HTML anteriores, pero la menciono como una etiqueta básica de estructuración ya que con ella podemos crear Menú en nuestras paginas Web, la etiqueta Nav es un espacio reservado para colocar los botones o títulos de las pagina vinculadas a la principal. • Se expresa de la siguiente Manera • <Nav></Nav> Dentro de Ella Se crea la Etiqueta UL o mejor conocida Como Etiqueta de lista Para listar las paginas,se expresa asi <ul></ul>
  • 8. Etiqueta Section • Con esta Etiqueta podemos crear una seccion dentro de la pagina web en la cual podemos agregar contenido Textual o contenido de imagen ya sea de su preferecia. • Se expresa de la siguiente Manera • <Section></section>
  • 9. Etiqueta Article • Esta Etiqueta Trabaja de la mano con la Etiqueta Section por que una vez creada una Etiqueta section se crea una Etiqueta article,que en Español es «ARTICULO", recomendable para agregar texto Perfecta para crear Contenido Textual dentro de la pagina. • Se forma de expresar es la siguiente • <article></article> • Ademas de esta Etiqueta tambien debemos agregar la Etiqueta «p» que es para párrafo <p></p>
  • 10. Etiqueta Aside • Esta etiqueta es utilizada para crear contenido no tan relevante dentro de la pagina ya que se ubica a los lados de la pagina web,recomendable para anuncios o publicidad como ustedes lo conoscan • Se expresa de la siguiente Manera • <aside></aside>
  • 11. Etiqueta Footer • Finalmente Llegamos a la Etiqueta Footer la cual significa pie o Para ser mas claro pie de pagina,en esta agregamos contenido de derechos o informacion dentro de la pagina web Como pueden ser los derechos reservados,numeros de telefono,ect.
  • 12. Conclusion Html5 es un lenguaje de modelado web estructurado ,recomendable para crear las mejores paginas web con la tecnologia mas nueva,tambien contamos con CSS3 que es el nuevo lenguaje de estilo de HTML5. Sin nada mas que decir les agradezco por Seguir esta introduccion Muchas Gracias 