SlideShare a Scribd company logo
1 of 32
[object Object],Ing. Diego J. Arcusin [email_address] ,[object Object],[object Object]
Objetivos del Curso ,[object Object]
Temas del Curso ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Internet y la WWW ,[object Object],[object Object],[object Object],[object Object]
HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Historia del HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Tim Berners-Lee Director del W3C
El W3C ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML – CSS – Javascript Página Web Estructura Contenido Apariencia Comportamiento HTML CSS Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Elementos HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Elemento Etiqueta de Apertura Etiq. de Cierre Contenido <p class=“texto”>Curso HTML CEMA</p> Nombre Valor Atributo
Atributos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tipos de Elementos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estructura de un Documento HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Elementos del HEAD ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Contenedores (Block-Level Elements) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Contenedores (Tablas) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tablas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Hipervínculos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Imágenes ,[object Object],[object Object],[object Object],[object Object]
Formularios ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Formularios ,[object Object],[object Object],[object Object],[object Object],[object Object]
Más Elementos ,[object Object],[object Object],[object Object],[object Object]
Estilos CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],En el documento HTML: <h2>Seminario de HTML UCEMA</h2> En la hoja de estilos se define el formato de los encabezados h2: h2 {  text-align: center;  color: blue;  font: italic large &quot;Times New Roman&quot;, serif;  }
Ventajas del uso de CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Formatos CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Margin (Margen) Border (Borde) Padding (Relleno) Contenido
Estilos CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],h2  {  text-align: center;  color: blue;  font: italic large &quot;Times New Roman&quot;, serif;  } .textoresaltado { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold;   /* Esto es un comentario */ color: #000000; } #logo { background-image: url(&quot;/img/logo.gif&quot;); background-position:center;  background-repeat:no-repeat; height: 50px; width: 150px; position: absolute; left: 0px; top: 0px; }
Como incluir estilos CSS ,[object Object],[object Object],[object Object],<h2 style=&quot;color: blue; background: green;&quot;> Curso HTML UCEMA  </h2>  <head>  <style type=&quot;text/css&quot;>  h2 { font-style: italic; font-weight: bold;  color: blue; }  </style>  </head> <body> <h2>Curso HTML UCEMA</h2>  </body> <head> <link rel=stylesheet type=&quot;text/css“ href=“estilos.css&quot;>  </head>
Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],DOM:  Es una interface (independiente del lenguaje) que permite a los scripts acceder dinámicamente y  actualizar el contenido, la estructura y el estilo de los documentos. Brendan Eich Creador del Javascript
Capacidades de Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Dónde incluir el Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
El Futuro ,[object Object],[object Object],[object Object],[object Object],[object Object]
Conclusiones Página Web Estructura Contenido Apariencia Comportamiento HTML CSS Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Preguntas ,[object Object]

More Related Content

What's hot

What's hot (20)

Css - Tema 1
Css - Tema 1Css - Tema 1
Css - Tema 1
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a html
 
Arquitectura para aplicaciones web
Arquitectura para aplicaciones webArquitectura para aplicaciones web
Arquitectura para aplicaciones web
 
Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)
 
Gestores de contenido
Gestores de contenidoGestores de contenido
Gestores de contenido
 
Html
HtmlHtml
Html
 
Html html5 diapositivas
Html  html5 diapositivasHtml  html5 diapositivas
Html html5 diapositivas
 
Identificación del lenguaje de css
Identificación del lenguaje de cssIdentificación del lenguaje de css
Identificación del lenguaje de css
 
Diapositivas servicios web
Diapositivas servicios webDiapositivas servicios web
Diapositivas servicios web
 
HTML
HTMLHTML
HTML
 
Introduction to JavaScript.pptx
Introduction to JavaScript.pptxIntroduction to JavaScript.pptx
Introduction to JavaScript.pptx
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
 
Presentacion de etiquetas "HTML"
Presentacion de etiquetas "HTML"Presentacion de etiquetas "HTML"
Presentacion de etiquetas "HTML"
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formularios
 
Top web development tools
Top web development toolsTop web development tools
Top web development tools
 
Aula 07
Aula 07Aula 07
Aula 07
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Etiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasEtiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadas
 
html-css
html-csshtml-css
html-css
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 

Similar to Html (20)

Html
HtmlHtml
Html
 
Html1
Html1Html1
Html1
 
Html
HtmlHtml
Html
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
Presentación de html, css y javascript.
Presentación  de html, css y javascript.Presentación  de html, css y javascript.
Presentación de html, css y javascript.
 
Tipo
TipoTipo
Tipo
 
Htm ltlalti
Htm ltlaltiHtm ltlalti
Htm ltlalti
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
 
Camilo diaz
Camilo diazCamilo diaz
Camilo diaz
 
Expo html
Expo htmlExpo html
Expo html
 
Retroalimentación 2011 Lopez, Carlos
Retroalimentación 2011 Lopez, CarlosRetroalimentación 2011 Lopez, Carlos
Retroalimentación 2011 Lopez, Carlos
 
Presentacion asignatura
Presentacion asignaturaPresentacion asignatura
Presentacion asignatura
 
Html juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabadoHtml juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabado
 
Xhtml
XhtmlXhtml
Xhtml
 
Presentación HTML
Presentación HTML Presentación HTML
Presentación HTML
 
Pres 2
Pres 2Pres 2
Pres 2
 
Curso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTMLCurso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTML
 
Clase 04 Html
Clase 04   HtmlClase 04   Html
Clase 04 Html
 
DIAPOSITIVA.pptx
DIAPOSITIVA.pptxDIAPOSITIVA.pptx
DIAPOSITIVA.pptx
 

Recently uploaded

Estrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfEstrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfromanmillans
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesRaquel Martín Contreras
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptAlberto Rubio
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfManuel Molina
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxMartín Ramírez
 
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDUFICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDUgustavorojas179704
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialpatriciaines1993
 
c3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptxc3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptxMartín Ramírez
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxOscarEduardoSanchezC
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfNataliaMalky1
 
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxPROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxEribertoPerezRamirez
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfcoloncopias5
 
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfvictorbeltuce
 
Manejo del Dengue, generalidades, actualización marzo 2024 minsa
Manejo del Dengue, generalidades, actualización marzo 2024 minsaManejo del Dengue, generalidades, actualización marzo 2024 minsa
Manejo del Dengue, generalidades, actualización marzo 2024 minsaLuis Minaya
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptxJunkotantik
 

Recently uploaded (20)

Estrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfEstrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdf
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materiales
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
 
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDUFICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
 
c3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptxc3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptx
 
Aedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptxAedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptx
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
 
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdfTema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
 
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxPROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
 
Sesión La luz brilla en la oscuridad.pdf
Sesión  La luz brilla en la oscuridad.pdfSesión  La luz brilla en la oscuridad.pdf
Sesión La luz brilla en la oscuridad.pdf
 
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
 
TL/CNL – 2.ª FASE .
TL/CNL – 2.ª FASE                       .TL/CNL – 2.ª FASE                       .
TL/CNL – 2.ª FASE .
 
Manejo del Dengue, generalidades, actualización marzo 2024 minsa
Manejo del Dengue, generalidades, actualización marzo 2024 minsaManejo del Dengue, generalidades, actualización marzo 2024 minsa
Manejo del Dengue, generalidades, actualización marzo 2024 minsa
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptx
 
PPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptxPPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptx
 

Html

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.