SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
Html
Hace 25 años, el británico Tim 
Berners-Lee puso en marcha la 
World Wide Web, una nueva manera 
de compartir información entre varias 
personas utilizando diferentes 
ordenadores
El objetivo de Berners-Lee, que tenía 
entonces 34 años, era mejorar la gestión 
de la información en el Centro Europeo 
de Fïsica de Partículas (CERN) en el que 
trabajaba en Suiza. 
“Estábamos en 1989, internet ya existía, podíamos enviar 
correos pero no existían las páginas en la red. No existía el http 
o el html. No se podía consultar una página para ver su 
contenido. Empecé a sentirme muy frustrado por ello. Imaginé 
un sistema en el que, de manera sencilla, una persona podía 
visitar una página tras otra y a partir de ahí decidí lo que quería 
construir”, explica Berners-Lee.
“Debemos pensar en los próximos 25 
años y estar seguros de que los principios 
básicos de la web siguen vigentes: apertura, 
privacidad y ausencia de censura, por 
ejemplo”, asegura Berners-Lee.
Elemento HTML
La sintaxis básica del lenguaje 
HTML (Hiper Text Markup 
Lenguage) es el elemento. Un 
elemento HTML está definido por 
etiquetas (tags) y contenido.
Etiqueta de 
apertura 
Etiqueta de 
Cierre 
<nombreelemento>contenido</nombreelemento> 
Contenido 
elemento
ejemplo: <p>Lorem ipsum...</p>
Elemento Html 
Existen elementos que requieren la definición de 
ciertos parámetros. Los atributos son instrucciones 
para precisar la definición de un elemento.
Nombre del 
atributo Valor 
! 
<nombreelemento atributo01= "valor" 
atributo02= "valor" >contenido</ 
nombreelemento>
ejemplo: <img src="image.jpg" alt="descripción 
de imagen" width="300" height="225">
Elemento Html 
No todos los elementos tienen contenido de texto plano. 
Pueden existir : Elementos vacíos: Existe sólo una etiqueta 
de apertura y cierre. ejemplo:<br /> 
Elementos anidados: Etiquetas que por definición pueden 
contener otros elementos. ejemplo: 
<a href="mypage.html"><img src="image.jpg" ></a> 
Elementos compuestos: Elementos que por definición son 
usados en conjunción con otros elementos. ejemplo: 
<ol> 
<li>first item</li> 
<li>second item</li> 
<li>third item</li> 
</ol>
Los elementos también pueden clasificarse en: 
Elementos de bloque: Siempre inician en una nueva línea y, 
generalmente, añaden por definición espacio arriba y abajo. Se 
apilan como bloques en el flujo del documento HTML. 
ejemplo: <div>, <h1>, <p>, 
<blockquote>, <pre>, <ol>, <ul>, 
<dl>, <hr> 
Elementos de línea: Tienen un flujo continuo, por tanto, no 
añaden saltos de línea (o retorno de carro). ejemplo: 
<span>, <a>
Se escribe siempre en bajas (minúsculas) 
Los atributos se definen en la etiqueta de, NUNCA en la de 
cierreapertura 
! 
Cuando se definen más de un atributo el orden de aparición NO 
importa.Aunque es una buena práctica agruparlas de forma coherente 
! 
Se debe separar siempre con signo = el nombre del atributo y su valor El 
valor siempre debe ir entre signos " y " 
! 
El valor puede ser un número, cadena de texto, URL, dependiendo del 
atributo 
Algunos atributos son estrictamente requeridos (como en img y en a) 
NO es posible definir nuevos atributos
Un documento HTML se compone 
de una cabeza (head) y de un 
cuerpo (body)
! 
<html> 
<head 
<title>título del documento</title> 
</head> 
<body> 
<!-- cuerpo del documento HTML--> 
</body> 
</html> 
1 
2 
3 
4
html : Identifica al archivo como un documento 
HTML.Tiene dos subsecciones importantes head y 
body. 
atributos: dir lang xmlns ejemplo: 
<html xmlns="http://www.w3.org/1999/xhtml"> 
xmlns: declara el espacio de nombres XML utilizado en 
el documento. Es requerido de forma estricta por 
documentos XHTML
head : Crea la sección encabezado del 
documento HTML. En el encabezado es 
posible definir el título del documento, 
metadatos, establecer enlaces a hojas de 
estilo CSS y 
archivos JS y otros, así como estilos del 
documento y código JS 
atributos: dir lang profile 
ejemplo: 
! 
<! 
head> 
<title>head element example</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<script type="text/javascript" src="myfile.js"></script> 
<meta name="description" content="my website description" /> 
<meta name="keywords" content="word01, word02" /> 
</head>
title: Define el título del documento 
atributos: class id dir lang style 
ejemplo: 
! 
<title>head element example</title> 
!
Contenedor para todos los demás elementos del documento 
atributos: class id dir lang style title 
ejemplo: 
<body> 
<!-- cuerpo del documento 
HTML--> 
</body> 
!
Por lo anterior una estructura básica 
para un documento XHTML 1.0 se 
definiría: 
! 
! 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ 
xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8" /> 
<title>título del documento</title> 
</head> 
<body> 
<!-- cuerpo del documento --> 
</body> 
</html>
Html
Html

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Trabajo practico nr6 informatica [2012]
Trabajo practico nr6 informatica [2012]Trabajo practico nr6 informatica [2012]
Trabajo practico nr6 informatica [2012]
 
Uso del servicio Mediafire
Uso del servicio MediafireUso del servicio Mediafire
Uso del servicio Mediafire
 
Herramientas web 2
Herramientas web 2Herramientas web 2
Herramientas web 2
 
Resumen de la clase
Resumen de la claseResumen de la clase
Resumen de la clase
 
Int S3 Google Docs II
Int S3 Google Docs IIInt S3 Google Docs II
Int S3 Google Docs II
 
Trabajo practico n 6
Trabajo practico n 6Trabajo practico n 6
Trabajo practico n 6
 
Dropbox
DropboxDropbox
Dropbox
 
INTERFAZ word 2013
INTERFAZ word 2013INTERFAZ word 2013
INTERFAZ word 2013
 
Dropbox
DropboxDropbox
Dropbox
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Cómo crear una cuenta de correo
Cómo crear una cuenta de correoCómo crear una cuenta de correo
Cómo crear una cuenta de correo
 
Bloque 2 bach 3ro (1)
Bloque 2 bach 3ro (1)Bloque 2 bach 3ro (1)
Bloque 2 bach 3ro (1)
 
Tp nº2
Tp nº2Tp nº2
Tp nº2
 
Unidad 13 modificar plantillas de word
Unidad 13 modificar plantillas de wordUnidad 13 modificar plantillas de word
Unidad 13 modificar plantillas de word
 
Wooo
WoooWooo
Wooo
 
archivo
archivoarchivo
archivo
 
Proceso para colocar marcos, hipervínculos y videos
Proceso para colocar marcos, hipervínculos y videosProceso para colocar marcos, hipervínculos y videos
Proceso para colocar marcos, hipervínculos y videos
 

Destacado (8)

Css intro
Css introCss intro
Css intro
 
Css1
Css1Css1
Css1
 
Ejercicio
Ejercicio Ejercicio
Ejercicio
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Folleto2
Folleto2Folleto2
Folleto2
 
Estructuras basicas
Estructuras basicasEstructuras basicas
Estructuras basicas
 
Estructura
EstructuraEstructura
Estructura
 
Desencadenadores
DesencadenadoresDesencadenadores
Desencadenadores
 

Similar a Html (20)

05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
05introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp0205introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp02
 
Html 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la WebHtml 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la Web
 
Html - Tema 1
Html - Tema 1Html - Tema 1
Html - Tema 1
 
Emily
EmilyEmily
Emily
 
Códigos HTML.pptx Sede magdalena ortega de nariño
Códigos HTML.pptx Sede magdalena ortega de nariñoCódigos HTML.pptx Sede magdalena ortega de nariño
Códigos HTML.pptx Sede magdalena ortega de nariño
 
Diferencia entre html y xml
Diferencia  entre html y xmlDiferencia  entre html y xml
Diferencia entre html y xml
 
Conceptos básicos y etiquetas
Conceptos básicos y etiquetasConceptos básicos y etiquetas
Conceptos básicos y etiquetas
 
Deber de htmly xml
Deber de htmly xmlDeber de htmly xml
Deber de htmly xml
 
Apuntes de HTML
Apuntes de HTMLApuntes de HTML
Apuntes de HTML
 
Clase 1 - Introducción HTML.pptx
Clase 1 - Introducción HTML.pptxClase 1 - Introducción HTML.pptx
Clase 1 - Introducción HTML.pptx
 
CLASE DE HTML
CLASE DE HTML CLASE DE HTML
CLASE DE HTML
 
Html
HtmlHtml
Html
 
Camilo diaz
Camilo diazCamilo diaz
Camilo diaz
 
1
11
1
 
Html guia
Html guiaHtml guia
Html guia
 
Desarrolla aplicaciones-web
Desarrolla aplicaciones-webDesarrolla aplicaciones-web
Desarrolla aplicaciones-web
 
Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTML
 
Tipo
TipoTipo
Tipo
 
Presentacion asignatura
Presentacion asignaturaPresentacion asignatura
Presentacion asignatura
 

Más de Abdel Suarez (20)

Dibujando art droid pc
Dibujando  art droid pcDibujando  art droid pc
Dibujando art droid pc
 
Barra social
Barra socialBarra social
Barra social
 
Typo
TypoTypo
Typo
 
La publicidad
La publicidadLa publicidad
La publicidad
 
Presentación proyecto integrador
Presentación proyecto integradorPresentación proyecto integrador
Presentación proyecto integrador
 
Creatividad
CreatividadCreatividad
Creatividad
 
Comunicación (Doc de la U. Nacional)
Comunicación (Doc de la U. Nacional)Comunicación (Doc de la U. Nacional)
Comunicación (Doc de la U. Nacional)
 
Comunicación
ComunicaciónComunicación
Comunicación
 
Css 3
Css 3Css 3
Css 3
 
Css 2
Css 2Css 2
Css 2
 
Css
CssCss
Css
 
Maqueta
MaquetaMaqueta
Maqueta
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Visual marca
Visual marcaVisual marca
Visual marca
 
Diseño Básico Fundamentos
Diseño Básico FundamentosDiseño Básico Fundamentos
Diseño Básico Fundamentos
 
Positivo negativo
Positivo negativoPositivo negativo
Positivo negativo
 
Interrelaciondeformas 130912083748-phpapp01
Interrelaciondeformas 130912083748-phpapp01Interrelaciondeformas 130912083748-phpapp01
Interrelaciondeformas 130912083748-phpapp01
 
Listas
ListasListas
Listas
 
Listas
ListasListas
Listas
 

Html

  • 2. Hace 25 años, el británico Tim Berners-Lee puso en marcha la World Wide Web, una nueva manera de compartir información entre varias personas utilizando diferentes ordenadores
  • 3. El objetivo de Berners-Lee, que tenía entonces 34 años, era mejorar la gestión de la información en el Centro Europeo de Fïsica de Partículas (CERN) en el que trabajaba en Suiza. “Estábamos en 1989, internet ya existía, podíamos enviar correos pero no existían las páginas en la red. No existía el http o el html. No se podía consultar una página para ver su contenido. Empecé a sentirme muy frustrado por ello. Imaginé un sistema en el que, de manera sencilla, una persona podía visitar una página tras otra y a partir de ahí decidí lo que quería construir”, explica Berners-Lee.
  • 4. “Debemos pensar en los próximos 25 años y estar seguros de que los principios básicos de la web siguen vigentes: apertura, privacidad y ausencia de censura, por ejemplo”, asegura Berners-Lee.
  • 5.
  • 7. La sintaxis básica del lenguaje HTML (Hiper Text Markup Lenguage) es el elemento. Un elemento HTML está definido por etiquetas (tags) y contenido.
  • 8. Etiqueta de apertura Etiqueta de Cierre <nombreelemento>contenido</nombreelemento> Contenido elemento
  • 10. Elemento Html Existen elementos que requieren la definición de ciertos parámetros. Los atributos son instrucciones para precisar la definición de un elemento.
  • 11. Nombre del atributo Valor ! <nombreelemento atributo01= "valor" atributo02= "valor" >contenido</ nombreelemento>
  • 12. ejemplo: <img src="image.jpg" alt="descripción de imagen" width="300" height="225">
  • 13. Elemento Html No todos los elementos tienen contenido de texto plano. Pueden existir : Elementos vacíos: Existe sólo una etiqueta de apertura y cierre. ejemplo:<br /> Elementos anidados: Etiquetas que por definición pueden contener otros elementos. ejemplo: <a href="mypage.html"><img src="image.jpg" ></a> Elementos compuestos: Elementos que por definición son usados en conjunción con otros elementos. ejemplo: <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
  • 14. Los elementos también pueden clasificarse en: Elementos de bloque: Siempre inician en una nueva línea y, generalmente, añaden por definición espacio arriba y abajo. Se apilan como bloques en el flujo del documento HTML. ejemplo: <div>, <h1>, <p>, <blockquote>, <pre>, <ol>, <ul>, <dl>, <hr> Elementos de línea: Tienen un flujo continuo, por tanto, no añaden saltos de línea (o retorno de carro). ejemplo: <span>, <a>
  • 15. Se escribe siempre en bajas (minúsculas) Los atributos se definen en la etiqueta de, NUNCA en la de cierreapertura ! Cuando se definen más de un atributo el orden de aparición NO importa.Aunque es una buena práctica agruparlas de forma coherente ! Se debe separar siempre con signo = el nombre del atributo y su valor El valor siempre debe ir entre signos " y " ! El valor puede ser un número, cadena de texto, URL, dependiendo del atributo Algunos atributos son estrictamente requeridos (como en img y en a) NO es posible definir nuevos atributos
  • 16. Un documento HTML se compone de una cabeza (head) y de un cuerpo (body)
  • 17. ! <html> <head <title>título del documento</title> </head> <body> <!-- cuerpo del documento HTML--> </body> </html> 1 2 3 4
  • 18. html : Identifica al archivo como un documento HTML.Tiene dos subsecciones importantes head y body. atributos: dir lang xmlns ejemplo: <html xmlns="http://www.w3.org/1999/xhtml"> xmlns: declara el espacio de nombres XML utilizado en el documento. Es requerido de forma estricta por documentos XHTML
  • 19. head : Crea la sección encabezado del documento HTML. En el encabezado es posible definir el título del documento, metadatos, establecer enlaces a hojas de estilo CSS y archivos JS y otros, así como estilos del documento y código JS atributos: dir lang profile ejemplo: ! <! head> <title>head element example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="main.css"> <script type="text/javascript" src="myfile.js"></script> <meta name="description" content="my website description" /> <meta name="keywords" content="word01, word02" /> </head>
  • 20. title: Define el título del documento atributos: class id dir lang style ejemplo: ! <title>head element example</title> !
  • 21. Contenedor para todos los demás elementos del documento atributos: class id dir lang style title ejemplo: <body> <!-- cuerpo del documento HTML--> </body> !
  • 22. Por lo anterior una estructura básica para un documento XHTML 1.0 se definiría: ! ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>título del documento</title> </head> <body> <!-- cuerpo del documento --> </body> </html>