SlideShare una empresa de Scribd logo
1 de 16
Introducción al HTML



                            Colnodo
      Ariel Barbosa & Sylvia Cadena
                            02.2001
Vamos a hablar de...HTML

• Conceptos del lenguaje
• Estructura para documentos
• Herramientas usadas para crear
  documentos
• Buenas prácticas en la
  publicación de documentos
• Problemas que se nos pueden
  presentar
HTML: qué es?
•   Lenguaje que da formato
•   Define la sintáxis y ubicación de
    imágenes, instrucciones y objetos
    al navegador
•   Posibilidad de conectar un
    documento con otros, o con otros
    recursos en Internet a través de
    hipertexto
HTML: qué no es?
• No es un procesador de palabra
• No es una herramienta de
  escritorio para diagramación
• No es un lenguaje de
  programación
• No es multimedia
Como funciona?
                       Protocolo http



Cliente   Cliente:      Dame el
          • Explorer
          • Netscape    archivo x
                         Aquí está



                                        Servidor
                                        Remoto
La Telaraña Mundial
Múltiples usos:
• Educación
• Investigación
• Mercadeo
• Desarrollo (ddhh y paz, medio
  ambiente, equidad, diversidad,
  hábitat, comercio justo)
Estándares de HTML
HTML 1 Desarrollado en CERN
HTML 2.0 Incluye mejoras en NCSA
 Mosaic (formularios e imágenes)
HTML 3.2 Mejoras para controlar el
 formateo de tablas, etc.
HTML 4.0 Mejoras para
 publicaciones multiplataforma
 (CSS, XML, WAP, DHTML)
Terminología
HTTP: Hypertext Transfer Protocol
 Parámetros de comunicación cliente -
 servidor Web
HTML: Hypertext Markup Language
 Lenguaje nativo para documentos
 publicados en el Web independiente del
 tipo de plataforma.
URL: Uniform Resource Locator
Dirección de un objeto en el Web
  http://www.colnodo.org.co/
Fundamentos
• Rótulos <H1>Inicio</H1>
• No sensitivos a mayúsculas y
  minúsculas <H1> o <h1>
• Algunos atributos pueden ser
  sensibles a mayúsculas y
  minúsculas como los nombre de
  archivos, por ejemplo.
• Normalmente van en pares
  denotando inicio y fin <H1> y </H1>
Documentos Básicos
Deben incluir
• <HEAD> y </HEAD> contiene
  información sobre el documento
• <BODY> y </BODY> es el contenido
  principal del documento
• <HTML> y </HTML> contiene los 2
  elementos anteriores
2 Ejemplos...
<TITLE>Mi Primer Documento</TITLE> doc1.html
Este es mi primer documento HTML.
<HTML>                            doc2.html
<HEAD>
<TITLE>Un mejor documento</TITLE>
</HEAD>
<BODY>
<P>Novedades sobre el <EM>World Wide Web</
EM> disponible en
<A HREF="http://www.w3.org/">W3C</A></P>
</BODY>
</HTML>
Elementos Básicos
Rótulos Básicos
 <HEAD> <TITLE> <P>
Rótulos de Formato Físico
 <B> <I>
Rótulos de Formato Lógico
<STRONG> <EM> <UL> <LI>
Enlaces de Hipertexto
 <A HREF="…">
Caracteres Especiales
• Permiten que diferentes
  navegadores hagan visibles los
  caracteres diagráficos de los
  idiomas diferentes al inglés:
  áéíóú       &aacute;
  àèìòù       &agrave;
  ñçö         &ntilde;
Creando documentos
Pueden ser creados usando editores
 simples como Notepad, vi, emacs.
Ventajas
  • Es barato
  • Se aprende a comprender el
    lenguaje HTML
Desventajas
  • Es fácil cometer errores
  • Necesita comprender la sintáxis
    HTML
Herramientas avanzadas
• Interface amigable y fácil de
  usar para crear documentos
• Ocultan a disposición las
  complejidades del código HTML
• Pueden ser herramientas
  autónomas o insertas en
  procesadores de texto

Más contenido relacionado

Destacado

Html manual de referencia
Html manual de referenciaHtml manual de referencia
Html manual de referenciaAlvaro Gomes
 
Aldeeu Presentara Un Portal Para Profesionales Espanoles
Aldeeu Presentara Un Portal Para Profesionales EspanolesAldeeu Presentara Un Portal Para Profesionales Espanoles
Aldeeu Presentara Un Portal Para Profesionales EspanolesCext
 
Hussein_Daoud_ cv last copy
Hussein_Daoud_ cv last copyHussein_Daoud_ cv last copy
Hussein_Daoud_ cv last copyHoussein Daoud
 
Utsha Guha: Mac OS X/COCOA Developer in Xcode
Utsha Guha: Mac  OS X/COCOA Developer in XcodeUtsha Guha: Mac  OS X/COCOA Developer in Xcode
Utsha Guha: Mac OS X/COCOA Developer in XcodeUtsha Guha
 
Angular to Reactjs zeek by Noam Malter from Zeek
Angular to Reactjs zeek by Noam Malter from ZeekAngular to Reactjs zeek by Noam Malter from Zeek
Angular to Reactjs zeek by Noam Malter from ZeekChen Lerner
 
Vimal Group , Plastic Welding Process Machines
Vimal Group , Plastic Welding Process Machines Vimal Group , Plastic Welding Process Machines
Vimal Group , Plastic Welding Process Machines Vimal Industrial System
 
Políticas para el Uso y Desarrollo de Software Libre
Políticas para el Uso y Desarrollo de Software LibrePolíticas para el Uso y Desarrollo de Software Libre
Políticas para el Uso y Desarrollo de Software LibreDorela Carrasquel
 
Diseña un cuadro de mando para tu plan de marketing digital
Diseña un cuadro de mando para tu plan de marketing digitalDiseña un cuadro de mando para tu plan de marketing digital
Diseña un cuadro de mando para tu plan de marketing digitalMando Liussi
 
Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...
Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...
Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...Don Marito Ayala
 
C)FI-RI Computer Forensics Investigator & Incident Response v.2 2015
C)FI-RI Computer Forensics Investigator & Incident Response  v.2  2015C)FI-RI Computer Forensics Investigator & Incident Response  v.2  2015
C)FI-RI Computer Forensics Investigator & Incident Response v.2 2015Rafael Seg
 
Del.icio.us
Del.icio.usDel.icio.us
Del.icio.usSholucy
 
U.D.13. DiseñO De PáGinas Web
U.D.13. DiseñO De PáGinas WebU.D.13. DiseñO De PáGinas Web
U.D.13. DiseñO De PáGinas WebAna Hidalgo
 
Etiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasEtiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasjennypalcio
 
Historia De La Web
Historia De La WebHistoria De La Web
Historia De La WebAndrés
 

Destacado (20)

Html manual de referencia
Html manual de referenciaHtml manual de referencia
Html manual de referencia
 
Aldeeu Presentara Un Portal Para Profesionales Espanoles
Aldeeu Presentara Un Portal Para Profesionales EspanolesAldeeu Presentara Un Portal Para Profesionales Espanoles
Aldeeu Presentara Un Portal Para Profesionales Espanoles
 
Hussein_Daoud_ cv last copy
Hussein_Daoud_ cv last copyHussein_Daoud_ cv last copy
Hussein_Daoud_ cv last copy
 
Utsha Guha: Mac OS X/COCOA Developer in Xcode
Utsha Guha: Mac  OS X/COCOA Developer in XcodeUtsha Guha: Mac  OS X/COCOA Developer in Xcode
Utsha Guha: Mac OS X/COCOA Developer in Xcode
 
Subfusil
SubfusilSubfusil
Subfusil
 
Angular to Reactjs zeek by Noam Malter from Zeek
Angular to Reactjs zeek by Noam Malter from ZeekAngular to Reactjs zeek by Noam Malter from Zeek
Angular to Reactjs zeek by Noam Malter from Zeek
 
Vimal Group , Plastic Welding Process Machines
Vimal Group , Plastic Welding Process Machines Vimal Group , Plastic Welding Process Machines
Vimal Group , Plastic Welding Process Machines
 
Historia de html
Historia de htmlHistoria de html
Historia de html
 
Políticas para el Uso y Desarrollo de Software Libre
Políticas para el Uso y Desarrollo de Software LibrePolíticas para el Uso y Desarrollo de Software Libre
Políticas para el Uso y Desarrollo de Software Libre
 
Diseña un cuadro de mando para tu plan de marketing digital
Diseña un cuadro de mando para tu plan de marketing digitalDiseña un cuadro de mando para tu plan de marketing digital
Diseña un cuadro de mando para tu plan de marketing digital
 
Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...
Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...
Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...
 
C)FI-RI Computer Forensics Investigator & Incident Response v.2 2015
C)FI-RI Computer Forensics Investigator & Incident Response  v.2  2015C)FI-RI Computer Forensics Investigator & Incident Response  v.2  2015
C)FI-RI Computer Forensics Investigator & Incident Response v.2 2015
 
Licencias Creative Commons
Licencias Creative CommonsLicencias Creative Commons
Licencias Creative Commons
 
Del.icio.us
Del.icio.usDel.icio.us
Del.icio.us
 
Etiqueta Head
Etiqueta HeadEtiqueta Head
Etiqueta Head
 
Uso de vocablos en la redacción
Uso de vocablos en la redacciónUso de vocablos en la redacción
Uso de vocablos en la redacción
 
U.D.13. DiseñO De PáGinas Web
U.D.13. DiseñO De PáGinas WebU.D.13. DiseñO De PáGinas Web
U.D.13. DiseñO De PáGinas Web
 
Etiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasEtiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadas
 
Historia De La Web
Historia De La WebHistoria De La Web
Historia De La Web
 
Html5
Html5Html5
Html5
 

Similar a Principios basicos del html

Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTMLVladimir
 
el HTML.pptx
el HTML.pptxel HTML.pptx
el HTML.pptxfnixYT
 
Lenguaje de programción en internet
Lenguaje de programción en internetLenguaje de programción en internet
Lenguaje de programción en internetlorenzosc1995
 
Lenguaje de programción en internet
Lenguaje de programción en internetLenguaje de programción en internet
Lenguaje de programción en internetlorenzosc1995
 
introduccionallaprogramacionweb-230123213144-47a8fc90.ppt
introduccionallaprogramacionweb-230123213144-47a8fc90.pptintroduccionallaprogramacionweb-230123213144-47a8fc90.ppt
introduccionallaprogramacionweb-230123213144-47a8fc90.pptssuser948499
 
INTRODUCCION AL LA PROGRAMACION WEB.ppt
INTRODUCCION AL LA PROGRAMACION WEB.pptINTRODUCCION AL LA PROGRAMACION WEB.ppt
INTRODUCCION AL LA PROGRAMACION WEB.pptTIRZOANTONIOMEDINACA
 
Diseño y edición de páginas web 1
Diseño y edición de páginas web 1Diseño y edición de páginas web 1
Diseño y edición de páginas web 1mpgandreu
 
(HTML) Conceptos básicos de una web
(HTML) Conceptos básicos de una web(HTML) Conceptos básicos de una web
(HTML) Conceptos básicos de una webClub Docente Digital
 
Conceptos básicos sobre internet y páginas web
Conceptos básicos sobre internet y páginas webConceptos básicos sobre internet y páginas web
Conceptos básicos sobre internet y páginas webKoldo Parra
 
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 digitalesChamilo User Day
 

Similar a Principios basicos del html (20)

1
11
1
 
Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTML
 
el HTML.pptx
el HTML.pptxel HTML.pptx
el HTML.pptx
 
Lenguaje de programción en internet
Lenguaje de programción en internetLenguaje de programción en internet
Lenguaje de programción en internet
 
Presentación1
Presentación1Presentación1
Presentación1
 
Introduccion al html
Introduccion al htmlIntroduccion al html
Introduccion al html
 
Lenguaje de programción en internet
Lenguaje de programción en internetLenguaje de programción en internet
Lenguaje de programción en internet
 
introduccionallaprogramacionweb-230123213144-47a8fc90.ppt
introduccionallaprogramacionweb-230123213144-47a8fc90.pptintroduccionallaprogramacionweb-230123213144-47a8fc90.ppt
introduccionallaprogramacionweb-230123213144-47a8fc90.ppt
 
INTRODUCCION AL LA PROGRAMACION WEB.ppt
INTRODUCCION AL LA PROGRAMACION WEB.pptINTRODUCCION AL LA PROGRAMACION WEB.ppt
INTRODUCCION AL LA PROGRAMACION WEB.ppt
 
HTML5+CSS3 01
HTML5+CSS3 01HTML5+CSS3 01
HTML5+CSS3 01
 
Diseño y edición de páginas web 1
Diseño y edición de páginas web 1Diseño y edición de páginas web 1
Diseño y edición de páginas web 1
 
(HTML) Conceptos básicos de una web
(HTML) Conceptos básicos de una web(HTML) Conceptos básicos de una web
(HTML) Conceptos básicos de una web
 
Html y xml
Html y xmlHtml y xml
Html y xml
 
Programación Avanzada
Programación AvanzadaProgramación Avanzada
Programación Avanzada
 
Lenguajes de marcas
Lenguajes de marcasLenguajes de marcas
Lenguajes de marcas
 
Presentacion
PresentacionPresentacion
Presentacion
 
Camilo diaz
Camilo diazCamilo diaz
Camilo diaz
 
Cap02 (1)
Cap02 (1)Cap02 (1)
Cap02 (1)
 
Conceptos básicos sobre internet y páginas web
Conceptos básicos sobre internet y páginas webConceptos básicos sobre internet y páginas web
Conceptos básicos sobre internet y páginas web
 
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
 

Más de wenorro

Hojas de estilo
Hojas de estiloHojas de estilo
Hojas de estilowenorro
 
Furmularios
FurmulariosFurmularios
Furmularioswenorro
 
Las tablas
Las tablasLas tablas
Las tablaswenorro
 
Instrucciones html
Instrucciones htmlInstrucciones html
Instrucciones htmlwenorro
 
Insertar video
Insertar videoInsertar video
Insertar videowenorro
 
Insertar sonido
Insertar sonidoInsertar sonido
Insertar sonidowenorro
 
Insertar animaciones y transiciones
Insertar animaciones y transicionesInsertar animaciones y transiciones
Insertar animaciones y transicioneswenorro
 
Insertar tablas 2
Insertar tablas 2Insertar tablas 2
Insertar tablas 2wenorro
 
Insertar imagenes
Insertar imagenesInsertar imagenes
Insertar imageneswenorro
 
Herramientas
HerramientasHerramientas
Herramientaswenorro
 
Conociendo p ower point
Conociendo p ower pointConociendo p ower point
Conociendo p ower pointwenorro
 
4. análisis eco fin ii
4. análisis eco fin ii4. análisis eco fin ii
4. análisis eco fin iiwenorro
 
3. análisis eco fin i
3. análisis eco fin i3. análisis eco fin i
3. análisis eco fin iwenorro
 
T 5. balance situación y pérdidas y ganancias
T 5. balance situación y pérdidas y gananciasT 5. balance situación y pérdidas y ganancias
T 5. balance situación y pérdidas y gananciaswenorro
 
T 3. pérdidas y ganancias
T 3. pérdidas y gananciasT 3. pérdidas y ganancias
T 3. pérdidas y gananciaswenorro
 
Asientos contables
Asientos contablesAsientos contables
Asientos contableswenorro
 
T 9. los asientos-ii
T 9. los asientos-iiT 9. los asientos-ii
T 9. los asientos-iiwenorro
 
T 8. los asientos-i
T 8. los asientos-iT 8. los asientos-i
T 8. los asientos-iwenorro
 
La cuenta y el asiento
La cuenta y el asientoLa cuenta y el asiento
La cuenta y el asientowenorro
 

Más de wenorro (20)

Hojas de estilo
Hojas de estiloHojas de estilo
Hojas de estilo
 
Furmularios
FurmulariosFurmularios
Furmularios
 
Marcos
MarcosMarcos
Marcos
 
Las tablas
Las tablasLas tablas
Las tablas
 
Instrucciones html
Instrucciones htmlInstrucciones html
Instrucciones html
 
Insertar video
Insertar videoInsertar video
Insertar video
 
Insertar sonido
Insertar sonidoInsertar sonido
Insertar sonido
 
Insertar animaciones y transiciones
Insertar animaciones y transicionesInsertar animaciones y transiciones
Insertar animaciones y transiciones
 
Insertar tablas 2
Insertar tablas 2Insertar tablas 2
Insertar tablas 2
 
Insertar imagenes
Insertar imagenesInsertar imagenes
Insertar imagenes
 
Herramientas
HerramientasHerramientas
Herramientas
 
Conociendo p ower point
Conociendo p ower pointConociendo p ower point
Conociendo p ower point
 
4. análisis eco fin ii
4. análisis eco fin ii4. análisis eco fin ii
4. análisis eco fin ii
 
3. análisis eco fin i
3. análisis eco fin i3. análisis eco fin i
3. análisis eco fin i
 
T 5. balance situación y pérdidas y ganancias
T 5. balance situación y pérdidas y gananciasT 5. balance situación y pérdidas y ganancias
T 5. balance situación y pérdidas y ganancias
 
T 3. pérdidas y ganancias
T 3. pérdidas y gananciasT 3. pérdidas y ganancias
T 3. pérdidas y ganancias
 
Asientos contables
Asientos contablesAsientos contables
Asientos contables
 
T 9. los asientos-ii
T 9. los asientos-iiT 9. los asientos-ii
T 9. los asientos-ii
 
T 8. los asientos-i
T 8. los asientos-iT 8. los asientos-i
T 8. los asientos-i
 
La cuenta y el asiento
La cuenta y el asientoLa cuenta y el asiento
La cuenta y el asiento
 

Principios basicos del html

  • 1. Introducción al HTML Colnodo Ariel Barbosa & Sylvia Cadena 02.2001
  • 2. Vamos a hablar de...HTML • Conceptos del lenguaje • Estructura para documentos • Herramientas usadas para crear documentos • Buenas prácticas en la publicación de documentos • Problemas que se nos pueden presentar
  • 3. HTML: qué es? • Lenguaje que da formato • Define la sintáxis y ubicación de imágenes, instrucciones y objetos al navegador • Posibilidad de conectar un documento con otros, o con otros recursos en Internet a través de hipertexto
  • 4. HTML: qué no es? • No es un procesador de palabra • No es una herramienta de escritorio para diagramación • No es un lenguaje de programación • No es multimedia
  • 5. Como funciona? Protocolo http Cliente Cliente: Dame el • Explorer • Netscape archivo x Aquí está Servidor Remoto
  • 6. La Telaraña Mundial Múltiples usos: • Educación • Investigación • Mercadeo • Desarrollo (ddhh y paz, medio ambiente, equidad, diversidad, hábitat, comercio justo)
  • 7.
  • 8. Estándares de HTML HTML 1 Desarrollado en CERN HTML 2.0 Incluye mejoras en NCSA Mosaic (formularios e imágenes) HTML 3.2 Mejoras para controlar el formateo de tablas, etc. HTML 4.0 Mejoras para publicaciones multiplataforma (CSS, XML, WAP, DHTML)
  • 9. Terminología HTTP: Hypertext Transfer Protocol Parámetros de comunicación cliente - servidor Web HTML: Hypertext Markup Language Lenguaje nativo para documentos publicados en el Web independiente del tipo de plataforma. URL: Uniform Resource Locator Dirección de un objeto en el Web http://www.colnodo.org.co/
  • 10. Fundamentos • Rótulos <H1>Inicio</H1> • No sensitivos a mayúsculas y minúsculas <H1> o <h1> • Algunos atributos pueden ser sensibles a mayúsculas y minúsculas como los nombre de archivos, por ejemplo. • Normalmente van en pares denotando inicio y fin <H1> y </H1>
  • 11. Documentos Básicos Deben incluir • <HEAD> y </HEAD> contiene información sobre el documento • <BODY> y </BODY> es el contenido principal del documento • <HTML> y </HTML> contiene los 2 elementos anteriores
  • 12. 2 Ejemplos... <TITLE>Mi Primer Documento</TITLE> doc1.html Este es mi primer documento HTML. <HTML> doc2.html <HEAD> <TITLE>Un mejor documento</TITLE> </HEAD> <BODY> <P>Novedades sobre el <EM>World Wide Web</ EM> disponible en <A HREF="http://www.w3.org/">W3C</A></P> </BODY> </HTML>
  • 13. Elementos Básicos Rótulos Básicos <HEAD> <TITLE> <P> Rótulos de Formato Físico <B> <I> Rótulos de Formato Lógico <STRONG> <EM> <UL> <LI> Enlaces de Hipertexto <A HREF="…">
  • 14. Caracteres Especiales • Permiten que diferentes navegadores hagan visibles los caracteres diagráficos de los idiomas diferentes al inglés: áéíóú &aacute; àèìòù &agrave; ñçö &ntilde;
  • 15. Creando documentos Pueden ser creados usando editores simples como Notepad, vi, emacs. Ventajas • Es barato • Se aprende a comprender el lenguaje HTML Desventajas • Es fácil cometer errores • Necesita comprender la sintáxis HTML
  • 16. Herramientas avanzadas • Interface amigable y fácil de usar para crear documentos • Ocultan a disposición las complejidades del código HTML • Pueden ser herramientas autónomas o insertas en procesadores de texto