Introduccion a html

737 views

Published on

Introducción a HTML
Joaquin Lara Sierra
Universidad Tecnológica de Bolivar

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
737
On SlideShare
0
From Embeds
0
Number of Embeds
149
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduccion a html

  1. 1. @joaquinls Introducción a HTMLJoaquín Lara Sierra Introducción a HTMLbyJoaquin Lara SierraislicensedunderaCreativeCommonsReconocimiento-CompartirIgual4.0 Internacional License. Puede hallar permisos más allá de los concedidos con esta licencia enhttp://www.unitecnologica.edu.co 1
  2. 2. @joaquinls De que hablar •¿Qué es HTML? •Contexto Histórico •Historia de html •¿Por qué aprender HTML? 2
  3. 3. @joaquinls HTML,siglasdeHyperTextMarkupLanguage(«lenguajedemarcasdehipertexto»),hacereferenciaallenguajedemarcadoparalaelaboracióndepáginasweb.Esunestándarquesirvedereferenciaparalaelaboracióndepáginaswebensusdiferentesversiones,defineunaestructurabásicayuncódigo(denominadocódigoHTML) paraladefinicióndecontenidodeunapáginaweb,comotexto,imágenes,etc.EsunestándaracargodelaW3C, organizacióndedicadaalaestandarizacióndecasitodaslastecnologíasligadasalaweb,sobretodoenloreferenteasuescrituraeinterpretación.Esellenguajeconelquesedefinenlaspáginasweb. Contexto Porqué html? Iniciando Estructura Enfoques Ejemplos ¿Qué es? 3
  4. 4. @joaquinls HTML5,laúltimaversióndelHypertextMarkupLanguage(HTML),eslaversiónmásradicaldellenguajealafecha. Estapresentamuchosrecursosnuevosenunavariedaddeáreas.Algunasdelasadicionesmásnotablesincluyen: •Etiquetasintegradasmultimediaparaaudioyvideo •Unbastidorparadibujarcontenidoenelnavegador •Formatosmásinteligentesquelepermitenhacercosascomovalidaciónmedianteelusodeunatributorequerido Contexto Porqué html? Iniciando Estructura Enfoques Ejemplos ¿Qué es? 4
  5. 5. @joaquinls Contexto •TimBerners-LeecreóelHTMLoriginalen1989parasolucionarlasdeficienciasdelosmétodosexistentesparaaccederainformaciónenInternet.Desdequeseconcibió, encontrarsucaminoenInterneteraunatareadifícil. •HTTPesunprotocolodeservicioutilizadoparaentregarcontenido. •LacombinacióndeHTTPyHTMLofreceunanavegaciónrápidayfácilporelcontenidoenInternet,alpermitirlesimplementehacerclicenlosenlacesdetextoparanavegarentredocumentos. •Despuésdecrearestasdostecnologías,Berners-LeecontinuóyfundóelWorldWideWebConsortium(W3C) Porqué html? Iniciando Estructura Enfoques Ejemplos ¿Qué es? 5
  6. 6. @joaquinls CadapáginawebquevesestáescritaenunlenguajellamadoHTML.ImaginaqueHTMLeselesqueletoqueledaestructuraacadapáginaweb.Enestecurso,usaremosHTMLparaañadirpárrafos,encabezados,imágenesyenlacesaunapáginaweb. Contexto Porqué html? Iniciando Estructura Enfoques Ejemplos ¿Qué es? 6
  7. 7. @joaquinls Sinimportarlascapacidadesdesusnavegadoresobjetivo, usteddebedecirlealnavegadorqueusteddeseaquesucontenidoseapresentadousandolaespecificaciónHTML5.Ustedhaceestousandoladeclaracióndoctype. Afortunadamente,ladeclaracióndoctypesehasimplificadobastanteenHTML5.Dehechoessólouna. ParaquesunavegadorpresenteenpantallausandolaespecificaciónHTML5 Contexto Navegadores Iniciando Estructura Enfoques Ejemplos ¿Qué es? <!DOCTYPE html> 7
  8. 8. @joaquinls ElHTMLseescribeenformade «etiquetas»,rodeadasporcorchetesangulares(<,>).HTMLtambiénpuededescribir,hastaunciertopunto,laaparienciadeundocumento,ypuedeincluirohacerreferenciaauntipodeprogramallamadoscript,elcualpuedeafectarelcomportamientodenavegadoreswebyotrosprocesadoresdeHTML. Contexto Navegadores DocType Estructura Enfoques Ejemplos ¿Qué es? 8
  9. 9. @joaquinls Contexto Navegadores DocType Estructura Enfoques Ejemplos ¿Qué es? 9 <!DocTypehtml> Declaración de tipo documento <html> Define el inicio del documento html </html> Define el final del documento html <head> Define el encabezado del documento html </head> Define el cierre del encabezado del documento html <body> Define el cuerpo del documento html </body> Define el cierre del cuerpo del documento html <h1> Define tipos de encabezados del documento html </h1> Define el cierre del encabezado h1 Mi Primera Pagina Web Texto para el encabezado h1 <p> Define apertura para el párrafo … </p> Define cierre de párrafo … Mi Primera Pagina Web Texto para párrafo <title> Define el titulo del documento html </title> Define el cierre del titulo del documento html Mi titulo Web Titulo que aparece en barra de navegacion
  10. 10. @joaquinls LarazónparacrearnuevasetiquetasestructuralesesdividirlaspáginasWebenparteslógicasquedescribaneltipodecontenidoqueincluyen. Conceptualmente,pienseenlapáginaWebcomoundocumento.Losdocumentostienenencabezados,piesdepágina,capítulosyotrasconvencionesdiferentesquedivideneldocumentoenparteslógicas. Contexto Navegadores DocType Estructura Enfoques Ejemplos ¿Qué es? 10
  11. 11. @joaquinls De HTML 4 SiustedhacreadoinclusolosdocumentosHTMLmássimples,entoncesestaráfamiliarizado(a)conlaetiquetadiv.Laetiquetadiveselprincipalmecanismodelaerapre-HTML5paracrearbloquesdecontenidoenundocumentoHTM. Contexto Navegadores DocType Estructura Enfoques Ejemplos ¿Qué es? 11 Header Footer Content
  12. 12. @joaquinls De HTML 4 Contexto Navegadores DocType Estructura Enfoques Ejemplos ¿Qué es? <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Una página HTML simple usando Divs</title> </head> <body> <divid='header'>Header</div> <divid='content'>Content</div> <divid='footer'>Footer</div> </body> </html> 12
  13. 13. @joaquinls De HTML 5 HTML5respondeaesteproblemaproporcionandounconjuntodeetiquetasquedefinenconmayorclaridadlosbloquesprincipalesdecontenidoquecomponenundocumentoHTML. Lasnuevasetiquetasson: •header •section •article •aside •footer •nav Contexto Navegadores DocType Estructura Enfoques Ejemplos ¿Qué es? 13 <div id = “header”> <div id = “nav”> <div id = “footer”> <div id = “sction”> <div id = “aside”> <div id = “article”>
  14. 14. @joaquinls El área header <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <h1>Encabezado General</h1> <h2>Encabezado General</h2> <h3>Encabezado General</h3> <h4>Encabezado General</h4> <h5>Encabezado General</h5> <h6>Encabezado General</h6> <p>Escriba párrafo aquí </p> </body> </html> 14 Contexto Navegadores DocType Estructura Enfoques Ejemplos ¿Qué es?
  15. 15. @joaquinls Gracias 15

×