Introduccion a html
•
1 gefällt mir•889 views
Introducción a HTML Joaquin Lara Sierra Universidad Tecnológica de Bolivar
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (14)
Ähnlich wie Introduccion a html
Ähnlich wie Introduccion a html (20)
Mehr von Joaquin Lara Sierra
Mehr von Joaquin Lara Sierra (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Introduccion a html
- 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. @joaquinls De que hablar •¿Qué es HTML? •Contexto Histórico •Historia de html •¿Por qué aprender HTML? 2
- 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. @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. @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. @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. @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. @joaquinls ElHTMLseescribeenformade «etiquetas»,rodeadasporcorchetesangulares(<,>).HTMLtambiénpuededescribir,hastaunciertopunto,laaparienciadeundocumento,ypuedeincluirohacerreferenciaauntipodeprogramallamadoscript,elcualpuedeafectarelcomportamientodenavegadoreswebyotrosprocesadoresdeHTML. Contexto Navegadores DocType Estructura Enfoques Ejemplos ¿Qué es? 8
- 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. @joaquinls LarazónparacrearnuevasetiquetasestructuralesesdividirlaspáginasWebenparteslógicasquedescribaneltipodecontenidoqueincluyen. Conceptualmente,pienseenlapáginaWebcomoundocumento.Losdocumentostienenencabezados,piesdepágina,capítulosyotrasconvencionesdiferentesquedivideneldocumentoenparteslógicas. Contexto Navegadores DocType Estructura Enfoques Ejemplos ¿Qué es? 10
- 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. @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. @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. @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?