SlideShare a Scribd company logo
1 of 12
¿Cómo hacemos una
página en HTML5?
¿Cómo hacemos una página en
HTML5?
Al igual que las versiones anteriores de HTML,
podemos hacer una página en la nueva
versión desde cualquier procesador de texto
que genere archivos con extensión txt, es
decir, que tenga salida a texto plano.
¿Cómo hacemos una página en
HTML5?
Por lo que podemos hacer páginas desde el
Bloq de Notas de Windows o el Simple Text
de Mac.
Sin embargo, hay excelentes codificadores de
HTML, como Dreamweaver (con costo) o
como Aptana (gratuito).
http://aptana.com/
¿Cómo hacemos una página en
HTML5?
En el presente curso utilizaremos
Dreamweaver, pero usted podrá seguirnos
en cualquier editor.
Abra el editor de su preferencia y verifique
que no contenga ninguna instrucción. Si
utiliza Dreamweaver, entre en modo de
codigo y borre todo el contenido.
¿Cómo hacemos una página en
HTML5?
Una de las caracteristicas favorables de
HTML5, es que es una herramienta más
sofisticada que las versiones anteriores,
pero simplifica muchas de sus etiquetas.
Por ejemplo, la etiqueta <!DOCTYPE>, la cual
especifica al navegador, el tipo de
documento, en xhtml es la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml
1-transitional.dtd">
La etiqueta <!DOCTYPE> para HTML 4.01 es la
siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
¿Cómo hacemos una página en
HTML5?
La etiqueta <!DOCTYPE> para HTML5
simplemente es:
<!DOCTYPE HTML>
¿Cómo hacemos una página en
HTML5?
Después de escribir la etiqueta <!DOCTYPE>
escribimos las etiquetas <html>, <head> y
<body> como en las versiones anteriores de
HTML:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
¿Cómo hacemos una página en
HTML5?
Otro cambio (simplificado) es la etiqueta
<meta> para indicar el conjunto de
caracteres que utilizaremos en la página.
<meta charset="utf-8">
Con estos elementos básicos, ya tenemos
nuestra primer página HTML5
¿Cómo hacemos una página en
HTML5?
Escribimos la etiqueta <title> como se muestra
a continuación:
<title>Prueba pagina HTML5</title>
Grabamos la película como pruebaHTML5.html
y ejecute la página en el navegador de su
preferencia. Como observará se encuentra
sin ningún contenido.
¿Cómo hacemos una página en
HTML5?
Es una buena idea

More Related Content

What's hot (12)

Trabajo practico n 2
Trabajo practico n 2Trabajo practico n 2
Trabajo practico n 2
 
DREAMWEAVER
DREAMWEAVERDREAMWEAVER
DREAMWEAVER
 
Tutorial Javascript01
Tutorial Javascript01Tutorial Javascript01
Tutorial Javascript01
 
Instalacion Decompiladores VB Decompiler Lite 10.8 y dotPeek 2018
Instalacion Decompiladores VB Decompiler Lite 10.8 y dotPeek 2018Instalacion Decompiladores VB Decompiler Lite 10.8 y dotPeek 2018
Instalacion Decompiladores VB Decompiler Lite 10.8 y dotPeek 2018
 
Herramientas Web1.Pot
Herramientas  Web1.PotHerramientas  Web1.Pot
Herramientas Web1.Pot
 
HERRAMUENTAS WEB
HERRAMUENTAS WEBHERRAMUENTAS WEB
HERRAMUENTAS WEB
 
Maria teresa morelos (3)
Maria teresa morelos (3)Maria teresa morelos (3)
Maria teresa morelos (3)
 
Presentación: Aplicación de evaluaciones digitales
Presentación: Aplicación de evaluaciones digitalesPresentación: Aplicación de evaluaciones digitales
Presentación: Aplicación de evaluaciones digitales
 
Introducción a los Lenguajes HTML y PHP para el desarrollo web
Introducción a los Lenguajes HTML y PHP para el desarrollo webIntroducción a los Lenguajes HTML y PHP para el desarrollo web
Introducción a los Lenguajes HTML y PHP para el desarrollo web
 
Jesus maria-fernanda
Jesus  maria-fernandaJesus  maria-fernanda
Jesus maria-fernanda
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 

Viewers also liked (7)

00 historia-video
00 historia-video00 historia-video
00 historia-video
 
Recursos en internet para cartoons en flash
Recursos en internet para cartoons en flashRecursos en internet para cartoons en flash
Recursos en internet para cartoons en flash
 
0200 conceptos
0200 conceptos0200 conceptos
0200 conceptos
 
Algunos tips para dibujar fondos en Flash
Algunos tips para dibujar fondos en FlashAlgunos tips para dibujar fondos en Flash
Algunos tips para dibujar fondos en Flash
 
Action script 3_basic
Action script 3_basicAction script 3_basic
Action script 3_basic
 
Hacer un scrollbar con action script 3
Hacer un scrollbar con action script 3Hacer un scrollbar con action script 3
Hacer un scrollbar con action script 3
 
Desarrollo para iPhone y iPad con Flash CS5
Desarrollo para iPhone y iPad con Flash CS5Desarrollo para iPhone y iPad con Flash CS5
Desarrollo para iPhone y iPad con Flash CS5
 

Similar to 0102 paginaen html5

Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
nicolascristancho
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
GinoRomero13
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
jaboanlkxmndsjkc
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
FREDY FORERO H
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
jaboanlkxmndsjkc
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
jaboanlkxmndsjkc
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Carlos Parrado Roa
 
Colegio nicolas esguerra edificamos futuro
Colegio nicolas esguerra edificamos futuroColegio nicolas esguerra edificamos futuro
Colegio nicolas esguerra edificamos futuro
pinillapulido
 
Colegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra htmlColegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra html
Oscar Vanegas
 
Colegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra esesesColegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra eseses
Oscar Vanegas
 
Colegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra esesesColegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra eseses
Oscar Vanegas
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
leoyguepe
 
Colegio nicolas esguerra222
Colegio nicolas esguerra222Colegio nicolas esguerra222
Colegio nicolas esguerra222
SoloCaliRadical
 

Similar to 0102 paginaen html5 (20)

Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Qué es html
Qué es htmlQué es html
Qué es html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Taller de HTML
Taller de HTMLTaller de HTML
Taller de HTML
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Taller HTML
Taller HTMLTaller HTML
Taller HTML
 
Trabajo
TrabajoTrabajo
Trabajo
 
Curso de html
Curso de htmlCurso de html
Curso de html
 
Html
HtmlHtml
Html
 
Colegio nicolas esguerra edificamos futuro
Colegio nicolas esguerra edificamos futuroColegio nicolas esguerra edificamos futuro
Colegio nicolas esguerra edificamos futuro
 
Colegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra htmlColegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra html
 
Colegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra esesesColegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra eseses
 
Colegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra esesesColegio nacional nicolas esguerra eseses
Colegio nacional nicolas esguerra eseses
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nicolas esguerra222
Colegio nicolas esguerra222Colegio nicolas esguerra222
Colegio nicolas esguerra222
 

More from Francisco Javier Arce Anguiano

More from Francisco Javier Arce Anguiano (20)

El nuevo objeto para internacionalización y localización Intl
El nuevo objeto para internacionalización y localización IntlEl nuevo objeto para internacionalización y localización Intl
El nuevo objeto para internacionalización y localización Intl
 
El nuevo tipo de datos "símbolo" o "symbol"
El nuevo tipo de datos "símbolo" o "symbol"El nuevo tipo de datos "símbolo" o "symbol"
El nuevo tipo de datos "símbolo" o "symbol"
 
Nuevas características de los objetos en JavaScript ES6
Nuevas características de los objetos en JavaScript ES6Nuevas características de los objetos en JavaScript ES6
Nuevas características de los objetos en JavaScript ES6
 
Nuevos Métodos en ES6
Nuevos Métodos en ES6Nuevos Métodos en ES6
Nuevos Métodos en ES6
 
Objetos de propagación o ...spread
Objetos de propagación o ...spreadObjetos de propagación o ...spread
Objetos de propagación o ...spread
 
Mejoras en las expresiones regulares
Mejoras en las expresiones regularesMejoras en las expresiones regulares
Mejoras en las expresiones regulares
 
Valores por default en argumentos
Valores por default en argumentosValores por default en argumentos
Valores por default en argumentos
 
Literales octales y binarias:
Literales octales y binarias: Literales octales y binarias:
Literales octales y binarias:
 
La programación orientada a objetos con JavaScript ES6
La programación orientada a objetos con JavaScript ES6La programación orientada a objetos con JavaScript ES6
La programación orientada a objetos con JavaScript ES6
 
HTML5 API WebSQL Database: DML: Data Manipulation Language
HTML5 API WebSQL Database: DML: Data Manipulation LanguageHTML5 API WebSQL Database: DML: Data Manipulation Language
HTML5 API WebSQL Database: DML: Data Manipulation Language
 
HTML5 API WebSQL Database: Funciones de agregado
HTML5 API WebSQL Database: Funciones de agregadoHTML5 API WebSQL Database: Funciones de agregado
HTML5 API WebSQL Database: Funciones de agregado
 
WebSQl DataBase HTML5-dql - data query language
WebSQl DataBase HTML5-dql - data query languageWebSQl DataBase HTML5-dql - data query language
WebSQl DataBase HTML5-dql - data query language
 
Las etiquetas estructurales en html5
Las etiquetas estructurales en html5Las etiquetas estructurales en html5
Las etiquetas estructurales en html5
 
Los metadatos de HTML5
Los metadatos de HTML5Los metadatos de HTML5
Los metadatos de HTML5
 
Historia de HTML5
Historia de HTML5Historia de HTML5
Historia de HTML5
 
SQLite y PHP: DQL - data query language
SQLite y PHP: DQL - data query languageSQLite y PHP: DQL - data query language
SQLite y PHP: DQL - data query language
 
Introducción a SQLite 3 y PHP
Introducción a SQLite 3 y PHPIntroducción a SQLite 3 y PHP
Introducción a SQLite 3 y PHP
 
Crear el perfil provisional para desarrollar aplicaciones iOS
Crear el perfil provisional para desarrollar aplicaciones iOSCrear el perfil provisional para desarrollar aplicaciones iOS
Crear el perfil provisional para desarrollar aplicaciones iOS
 
Identificar el dispositivo para desarrollar en iOS
Identificar el dispositivo para desarrollar en iOSIdentificar el dispositivo para desarrollar en iOS
Identificar el dispositivo para desarrollar en iOS
 
Crear un ID para la aplicación iOS
Crear un ID para la aplicación iOSCrear un ID para la aplicación iOS
Crear un ID para la aplicación iOS
 

0102 paginaen html5

  • 2. ¿Cómo hacemos una página en HTML5? Al igual que las versiones anteriores de HTML, podemos hacer una página en la nueva versión desde cualquier procesador de texto que genere archivos con extensión txt, es decir, que tenga salida a texto plano.
  • 3. ¿Cómo hacemos una página en HTML5? Por lo que podemos hacer páginas desde el Bloq de Notas de Windows o el Simple Text de Mac. Sin embargo, hay excelentes codificadores de HTML, como Dreamweaver (con costo) o como Aptana (gratuito). http://aptana.com/
  • 4. ¿Cómo hacemos una página en HTML5? En el presente curso utilizaremos Dreamweaver, pero usted podrá seguirnos en cualquier editor. Abra el editor de su preferencia y verifique que no contenga ninguna instrucción. Si utiliza Dreamweaver, entre en modo de codigo y borre todo el contenido.
  • 5. ¿Cómo hacemos una página en HTML5? Una de las caracteristicas favorables de HTML5, es que es una herramienta más sofisticada que las versiones anteriores, pero simplifica muchas de sus etiquetas.
  • 6. Por ejemplo, la etiqueta <!DOCTYPE>, la cual especifica al navegador, el tipo de documento, en xhtml es la siguiente: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml 1-transitional.dtd">
  • 7. La etiqueta <!DOCTYPE> para HTML 4.01 es la siguiente: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • 8. ¿Cómo hacemos una página en HTML5? La etiqueta <!DOCTYPE> para HTML5 simplemente es: <!DOCTYPE HTML>
  • 9. ¿Cómo hacemos una página en HTML5? Después de escribir la etiqueta <!DOCTYPE> escribimos las etiquetas <html>, <head> y <body> como en las versiones anteriores de HTML: <!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>
  • 10. ¿Cómo hacemos una página en HTML5? Otro cambio (simplificado) es la etiqueta <meta> para indicar el conjunto de caracteres que utilizaremos en la página. <meta charset="utf-8"> Con estos elementos básicos, ya tenemos nuestra primer página HTML5
  • 11. ¿Cómo hacemos una página en HTML5? Escribimos la etiqueta <title> como se muestra a continuación: <title>Prueba pagina HTML5</title> Grabamos la película como pruebaHTML5.html y ejecute la página en el navegador de su preferencia. Como observará se encuentra sin ningún contenido.
  • 12. ¿Cómo hacemos una página en HTML5? Es una buena idea