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

La actualidad más candente

Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Abel LIFAEFI MBULA
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Stephane PERES
 
HTML 5 & WebGL (Spanish Version)
HTML 5 & WebGL (Spanish Version)HTML 5 & WebGL (Spanish Version)
HTML 5 & WebGL (Spanish Version)Iran Reyes Fleitas
 
HCL Notes and Nomad Troubleshooting for Dummies
HCL Notes and Nomad Troubleshooting for DummiesHCL Notes and Nomad Troubleshooting for Dummies
HCL Notes and Nomad Troubleshooting for Dummiespanagenda
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyParadigma Digital
 
IT2255 Web Essentials - Unit II Web Designing
IT2255 Web Essentials - Unit II  Web DesigningIT2255 Web Essentials - Unit II  Web Designing
IT2255 Web Essentials - Unit II Web Designingpkaviya
 
QCM système d'information
QCM système d'informationQCM système d'information
QCM système d'informationFrust Rados
 
Apostila comunicação visual
Apostila comunicação visualApostila comunicação visual
Apostila comunicação visualAdriano Borges
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapBassem ABCHA
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement webHouda TOUKABRI
 
IT2255 Web Essentials - Unit III Client-Side Processing and Scripting
IT2255 Web Essentials - Unit III Client-Side Processing and ScriptingIT2255 Web Essentials - Unit III Client-Side Processing and Scripting
IT2255 Web Essentials - Unit III Client-Side Processing and Scriptingpkaviya
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSSAdriana Tienda
 
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliothequeEcole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliothequeMehdi Hamime
 

La actualidad más candente (20)

PHP Composer Basics
PHP Composer BasicsPHP Composer Basics
PHP Composer Basics
 
Html
HtmlHtml
Html
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Introduction to git
Introduction to gitIntroduction to git
Introduction to git
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 
HTML 5 & WebGL (Spanish Version)
HTML 5 & WebGL (Spanish Version)HTML 5 & WebGL (Spanish Version)
HTML 5 & WebGL (Spanish Version)
 
HCL Notes and Nomad Troubleshooting for Dummies
HCL Notes and Nomad Troubleshooting for DummiesHCL Notes and Nomad Troubleshooting for Dummies
HCL Notes and Nomad Troubleshooting for Dummies
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoy
 
IT2255 Web Essentials - Unit II Web Designing
IT2255 Web Essentials - Unit II  Web DesigningIT2255 Web Essentials - Unit II  Web Designing
IT2255 Web Essentials - Unit II Web Designing
 
QCM système d'information
QCM système d'informationQCM système d'information
QCM système d'information
 
Apostila comunicação visual
Apostila comunicação visualApostila comunicação visual
Apostila comunicação visual
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
IT2255 Web Essentials - Unit III Client-Side Processing and Scripting
IT2255 Web Essentials - Unit III Client-Side Processing and ScriptingIT2255 Web Essentials - Unit III Client-Side Processing and Scripting
IT2255 Web Essentials - Unit III Client-Side Processing and Scripting
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliothequeEcole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
 
Cse html ppt
Cse html pptCse html ppt
Cse html ppt
 

Destacado

Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas htmlMiguel Barajas
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlDoraliza Hugo Vera
 
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
 

Destacado (20)

Html evolucion
Html evolucionHtml evolucion
Html evolucion
 
Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
 
Etiquetas head y body
Etiquetas head y bodyEtiquetas head y body
Etiquetas head y body
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Anatomia de una pagina web
Anatomia de una pagina webAnatomia de una pagina web
Anatomia de una pagina web
 
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
 

Similar a Introducción al HTML: Lenguaje que da formato

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 Introducción al HTML: Lenguaje que da formato (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
 

Introducción al HTML: Lenguaje que da formato

  • 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