Conceptos Básicos HTML

Conceptos Básicosde HTML

Patricio Mas@patriciomas

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>

Introducción

• Definición• Historia• Etiquetas• Elementos• Atributos• Soporte

Definición

• HyperText Markup Language

• HyperTextTexto con vínculos

• Markup LanguageMarcadores que permiten al texto ser más que solamente texto.

Historia

ARPANET TCP/IP CERN HTML WWW

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.

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

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

http://info.cern.ch/hypertext/WWW/TheProject.html

http://info.cern.ch/hypertext/WWW/TheProject.html

HistoriaDatos 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

https://docs.webplatform.org/wiki/concepts/Internet_and_Web/the_history_of_the_web/es

Versiones

V11991

V21995

V31997

V41998

V52014

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

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>

https://docs.webplatform.org/wiki/html/elements

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 todos tienen los mismos

atributos.• No siempre se usan todos los

atributos.

Ejemplo Atributos

<a>• download • href• hreflang• media• rel• target• type

<a href=“http://www.google.com” target =“_blank”>

<!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ónHTML Navegador

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; }