@joaquinls 
Introducción a HTMLJoaquín Lara Sierra 
Introducción a HTMLbyJoaquin Lara SierraislicensedunderaCreativeCommon...
@joaquinls 
De que hablar 
•¿Qué es HTML? 
•Contexto Histórico 
•Historia de html 
•¿Por qué aprender HTML? 
2
@joaquinls 
HTML,siglasdeHyperTextMarkupLanguage(«lenguajedemarcasdehipertexto»),hacereferenciaallenguajedemarcadoparalael...
@joaquinls 
HTML5,laúltimaversióndelHypertextMarkupLanguage(HTML),eslaversiónmásradicaldellenguajealafecha. Estapresentamu...
@joaquinls 
Contexto 
•TimBerners-LeecreóelHTMLoriginalen1989parasolucionarlasdeficienciasdelosmétodosexistentesparaaccede...
@joaquinls 
CadapáginawebquevesestáescritaenunlenguajellamadoHTML.ImaginaqueHTMLeselesqueletoqueledaestructuraacadapáginaw...
@joaquinls 
Sinimportarlascapacidadesdesusnavegadoresobjetivo, usteddebedecirlealnavegadorqueusteddeseaquesucontenidoseapr...
@joaquinls 
ElHTMLseescribeenformade «etiquetas»,rodeadasporcorchetesangulares(<,>).HTMLtambiénpuededescribir,hastaunciert...
@joaquinls 
Contexto 
Navegadores 
DocType 
Estructura 
Enfoques 
Ejemplos 
¿Qué es? 
9 
<!DocTypehtml> 
Declaración de ti...
@joaquinls 
LarazónparacrearnuevasetiquetasestructuralesesdividirlaspáginasWebenparteslógicasquedescribaneltipodecontenido...
@joaquinls 
De HTML 4 
SiustedhacreadoinclusolosdocumentosHTMLmássimples,entoncesestaráfamiliarizado(a)conlaetiquetadiv.La...
@joaquinls 
De HTML 4 
Contexto 
Navegadores 
DocType 
Estructura 
Enfoques 
Ejemplos 
¿Qué es? 
<!DOCTYPE htmlPUBLIC "-//...
@joaquinls 
De HTML 5 
HTML5respondeaesteproblemaproporcionandounconjuntodeetiquetasquedefinenconmayorclaridadlosbloquespr...
@joaquinls 
El área header 
<!DOCTYPE html> 
<html> 
<head> 
<title> Una página HTML simple </title> 
</head> 
<body> 
<h1...
@joaquinls 
Gracias 
15
Próxima SlideShare
Cargando en…5
×

Introduccion a html

694 visualizaciones

Publicado el

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

Publicado en: Educación
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
694
En SlideShare
0
De insertados
0
Número de insertados
149
Acciones
Compartido
0
Descargas
23
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

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

×