Conceptos Básicos
de HTML
Patricio Mas
@patriciomas
HTML
<!DOCTYPE html>
<html>
<head>
<title>Página HTML</title>
</head>
<body>
<h1>Bienvenidos</h1>
<p>¡Hola!</p>
<a href=“h...
Introducción
• Definición
• Historia
• Etiquetas
• Elementos
• Atributos
• Soporte
Definición
• HyperText Markup Language
• HyperText
Texto con vínculos
• Markup Language
Marcadores que permiten al texto s...
Historia
ARPANET TCP/IP CERN HTML WWW
Historia: ARPANET
ARPANET(Advanced Research
Projects Agency Network)
• 1969-1990:
– Desarrollado durante la Guerra
Fría po...
Historia: TCP/IP
Robert Kahn y Vinton Cerf
• 1974:
– Desarrollan TCP/IP minetras
trabajaban en ARPA
• Transmission Control...
Historia: WWW
Timothy Berners-Lee
• 1980:
– Ingeniero en el proyecto CERN
– Crea Hypertext y programa “ENQUIRE”
• 1984:
– ...
Historia
Datos curiosos de Tim Berners Lee:
• Sus padres trabajaron en el primer
computador comercial: Ferranti
Mark.
• Pr...
Versiones
V1
1991
V2
1995
V3
1997
V4
1998
V5
2014
Etiquetas y Elementos
• Se utilizan Etiquetas (tags) para indicar
Elementos (elements) en el contenido
• Las etiquetas se ...
Ejemplos Elementos
Básicos
• <body> = body
• <p> = paragraph
• <h1> = header
• <a> = anchor
• <img> = image
• <ul> = unord...
Elementos en una página
<header>
<nav>
<aside>
<main>
<article>
<article>
<footer>
Atributos
• Cada elemento tiene características
propias llamadas Atributos (atributes).
• No todos tienen atributos.
• No ...
Ejemplo Atributos
<a>
• download
• href
• hreflang
• media
• rel
• target
• type
<a href=“http://www.google.com” target =“...
<!DOCTYPE html>
<html>
<head>
<title>Página HTML</title>
</head>
<body>
<h1>Bienvenidos</h1>
<p>¡Hola!</p>
<a href=“http:/...
Soporte
Todos los navegadores modernos soportan HTML5.
Sin embargo, los navegadores antiguos pueden
reconocer los 8 nuevos...
Próxima SlideShare
Cargando en…5
×

Conceptos Básicos HTML

430 visualizaciones

Publicado el

Introducción básica a HTML contextualizando sus orígenes y sintaxis.

Publicado en: Internet
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
430
En SlideShare
0
De insertados
0
Número de insertados
16
Acciones
Compartido
0
Descargas
11
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Conceptos Básicos HTML

  1. 1. Conceptos Básicos de HTML Patricio Mas @patriciomas
  2. 2. HTML <!DOCTYPE html> <html> <head> <title>Página HTML</title> </head> <body> <h1>Bienvenidos</h1> <p>¡Hola!</p> <a href=“http://www.google.com”>Google</a> </body> </html>
  3. 3. Introducción • Definición • Historia • Etiquetas • Elementos • Atributos • Soporte
  4. 4. Definición • HyperText Markup Language • HyperText Texto con vínculos • Markup Language Marcadores que permiten al texto ser más que solamente texto.
  5. 5. Historia ARPANET TCP/IP CERN HTML WWW
  6. 6. Historia: ARPANET ARPANET(Advanced Research Projects Agency Network) • 1969-1990: – Desarrollado durante la Guerra Fría por el Departamento de defensa de EEUU. – Se necesitaba un sistema de comunicación descentralizado que no sufriera cortes. – Primeros “sitios” (IMP’s - Interface Message Processor) estaban en universidades de EEUU para compartir datos de investigaciones. – A mediados de los 90 se usaba Gopher para navegar archivos linealmente.
  7. 7. Historia: TCP/IP Robert Kahn y Vinton Cerf • 1974: – Desarrollan TCP/IP minetras trabajaban en ARPA • Transmission Control Protocol • Internet Protocol – Protocolo: Reglas y regulaciones para transmitir datos – Divide los datos en paquetes y los envía a otros computadores
  8. 8. Historia: WWW Timothy Berners-Lee • 1980: – Ingeniero en el proyecto CERN – Crea Hypertext y programa “ENQUIRE” • 1984: – CERN ocupa TCP/IP para conectar sus equipos. • 1990: – Crea conceptos HTML y URL – Crea el primer Browser (Navegador/Editor), lo llama WorldWideWeb – Crea el primer servidor CERN HTTPd (Hypertext Transfer Protocol daemon) • 1991: Primera página web creada – http://info.cern.ch/hypertext/WWW/TheProject.html – Especifica el proyecto y instruye cómo crear • 1994: Fundó la W3C
  9. 9. Historia Datos curiosos de Tim Berners Lee: • Sus padres trabajaron en el primer computador comercial: Ferranti Mark. • Primer servidor web fue una máquina NeXT. • No patentó sus ideas para que todos pudieran utilizar estas tecnologías. • Las barras // no son necesarias técnicamente. Le parecieron una buena idea en el momento. Ver detalles en WebPlatform
  10. 10. Versiones V1 1991 V2 1995 V3 1997 V4 1998 V5 2014
  11. 11. Etiquetas y Elementos • Se utilizan Etiquetas (tags) para indicar Elementos (elements) en el contenido • Las etiquetas se encierran en < > • El texto se encierra en etiquetas creando un elemento: <abra etiqueta> Contenido </cierra etiqueta> Elemento
  12. 12. Ejemplos Elementos Básicos • <body> = body • <p> = paragraph • <h1> = header • <a> = anchor • <img> = image • <ul> = unordered list • <ol> = ordered list • <li> = list item • <hr> = horizontal rule Ver todos en WebPlatform Nuevos en HTML5 • <header> • <nav> • <main> • <article> • <aside> • <footer>
  13. 13. Elementos en una página <header> <nav> <aside> <main> <article> <article> <footer>
  14. 14. Atributos • Cada elemento tiene características propias llamadas Atributos (atributes). • No todos tienen atributos. • No todos tienen los mismos atributos. • No siempre se usan todos los atributos.
  15. 15. Ejemplo Atributos <a> • download • href • hreflang • media • rel • target • type <a href=“http://www.google.com” target =“_blank”>
  16. 16. <!DOCTYPE html> <html> <head> <title>Página HTML</title> </head> <body> <h1>Bienvenidos</h1> <p>¡Hola!</p> <a href=“http://www.google.com”>Google</a> </body> </html> Bienvenidos ¡Hola! Google Interpretación HTML Navegador
  17. 17. Soporte Todos los navegadores modernos soportan HTML5. Sin embargo, los navegadores antiguos pueden reconocer los 8 nuevos elementos asignando una propiedad CSS a dichos elementos: header, section, footer, aside, nav, main, article, figure { display: block; }

×