Conceptos Básicos HTML
Descargar como PPTX, PDF0 recomendaciones760 vistas
HTML es el lenguaje de marcado que se usa para crear páginas web. Consiste en etiquetas que definen elementos como encabezados, párrafos, enlaces e imágenes. Fue creado por Tim Berners-Lee en el CERN en 1990 y ha evolucionado a través de varias versiones para incluir nuevos elementos semánticos en HTML5. Los navegadores modernos soportan HTML5, pero los antiguos también pueden reconocer los nuevos elementos mediante CSS.
Conceptos Básicos HTML
- 1. Conceptos Básicos de HTML Patricio Mas @patriciomas
- 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. Introducción • Definición • Historia • Etiquetas • Elementos • Atributos • Soporte
- 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. Historia ARPANET TCP/IP CERN HTML WWW
- 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. 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. 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. 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
- 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. 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. Elementos en una página <header> <nav> <aside> <main> <article> <article> <footer>
- 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. Ejemplo Atributos <a> • download • href • hreflang • media • rel • target • type <a href=“http://www.google.com” target =“_blank”>
- 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. 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; }