SlideShare una empresa de Scribd logo
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)
Principios basicos del html
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

PPTX
Introduction to web application development
PPTX
WEB DEVELOPMENT
PDF
En 20 minutos ...Control de Cambios de la BD con Liquibase
DOCX
Tipos de archivos y extensiones
PPTX
Páginas web introduccion
PDF
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
PPTX
PPTX
Mapa conceptual de la evolución de la web 1.0 hasta web 7.0
Introduction to web application development
WEB DEVELOPMENT
En 20 minutos ...Control de Cambios de la BD con Liquibase
Tipos de archivos y extensiones
Páginas web introduccion
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Mapa conceptual de la evolución de la web 1.0 hasta web 7.0

La actualidad más candente (20)

PPTX
Herramientas de Internet
PPTX
PPTX
1.- Introdución Diseño web .pptx
PPTX
Tipos de archivos y extensiones[1]
PPTX
FTP Client and Server | Computer Science
PPT
Computacion en la Nube
PPTX
Uniform Resource Locator (URL)
PPTX
PPS
Lenguajes De Programación Web
PPTX
Qe es internet para qué sirve y conceptos básicos
PDF
PHP Basic & Variables
PPTX
One Drive
PPTX
Conceptos básicos de redes de computadores
PPTX
Servidor presentacion
PPT
Creating WebPages using HTML
PPTX
Web design - How the Web works?
PPTX
WordPress Theme Development
PPTX
Presentación cmd
PPTX
Onedrive, la nueva herramienta
Herramientas de Internet
1.- Introdución Diseño web .pptx
Tipos de archivos y extensiones[1]
FTP Client and Server | Computer Science
Computacion en la Nube
Uniform Resource Locator (URL)
Lenguajes De Programación Web
Qe es internet para qué sirve y conceptos básicos
PHP Basic & Variables
One Drive
Conceptos básicos de redes de computadores
Servidor presentacion
Creating WebPages using HTML
Web design - How the Web works?
WordPress Theme Development
Presentación cmd
Onedrive, la nueva herramienta
Publicidad

Destacado (20)

PPSX
Html evolucion
DOCX
Etiquetas basicas html
PPTX
Etiquetas head y body
DOCX
Etiquetas mas utilizadas del lenguaje html
PPSX
Anatomia de una pagina web
PDF
Html manual de referencia
PDF
Aldeeu Presentara Un Portal Para Profesionales Espanoles
DOCX
Hussein_Daoud_ cv last copy
DOCX
Utsha Guha: Mac OS X/COCOA Developer in Xcode
PPTX
Subfusil
PDF
Angular to Reactjs zeek by Noam Malter from Zeek
PDF
Vimal Group , Plastic Welding Process Machines
PPTX
Historia de html
PDF
Políticas para el Uso y Desarrollo de Software Libre
PDF
Diseña un cuadro de mando para tu plan de marketing digital
PDF
Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...
PDF
C)FI-RI Computer Forensics Investigator & Incident Response v.2 2015
PPTX
Licencias Creative Commons
ODP
Del.icio.us
PDF
Etiqueta Head
Html evolucion
Etiquetas basicas html
Etiquetas head y body
Etiquetas mas utilizadas del lenguaje html
Anatomia de una pagina web
Html manual de referencia
Aldeeu Presentara Un Portal Para Profesionales Espanoles
Hussein_Daoud_ cv last copy
Utsha Guha: Mac OS X/COCOA Developer in Xcode
Subfusil
Angular to Reactjs zeek by Noam Malter from Zeek
Vimal Group , Plastic Welding Process Machines
Historia de html
Políticas para el Uso y Desarrollo de Software Libre
Diseña un cuadro de mando para tu plan de marketing digital
Proyecto de grado_estudio_de_mercadeo_para_conocer_la_factibilidad_...
C)FI-RI Computer Forensics Investigator & Incident Response v.2 2015
Licencias Creative Commons
Del.icio.us
Etiqueta Head
Publicidad

Similar a Principios basicos del html (20)

PPT
Introducción al HTML
DOCX
Definición de html
PDF
Definición de html
DOCX
Definición de html
PPTX
Introducción al html
DOCX
TEORIA LENGUAJE HTLM
PPTX
Camilo diaz
PPTX
Lenguaje html
PPTX
Diferencia entre html y xml
PPT
Introducción al HTML
PPTX
Desarrolla aplicaciones-web
DOCX
Trabajo reflexico 2 marco teorico
PPTX
Presentación
PPTX
PPTX
PDF
historia de html
PDF
Lenguajes de programacion
DOCX
Introducción al HTML
Definición de html
Definición de html
Definición de html
Introducción al html
TEORIA LENGUAJE HTLM
Camilo diaz
Lenguaje html
Diferencia entre html y xml
Introducción al HTML
Desarrolla aplicaciones-web
Trabajo reflexico 2 marco teorico
Presentación
historia de html
Lenguajes de programacion

Más de wenorro (20)

PPS
Hojas de estilo
PPT
Furmularios
PPT
Marcos
PPT
Las tablas
PPT
Instrucciones html
PPTX
Insertar video
PPT
Insertar sonido
PPTX
Insertar animaciones y transiciones
PPTX
Insertar tablas 2
PPTX
Insertar imagenes
PPTX
Herramientas
PPT
Conociendo p ower point
PPS
4. análisis eco fin ii
PPS
3. análisis eco fin i
PPS
T 5. balance situación y pérdidas y ganancias
PPS
T 3. pérdidas y ganancias
PPS
Asientos contables
PPS
T 9. los asientos-ii
PPS
T 8. los asientos-i
PPS
La cuenta y el asiento
Hojas de estilo
Furmularios
Marcos
Las tablas
Instrucciones html
Insertar video
Insertar sonido
Insertar animaciones y transiciones
Insertar tablas 2
Insertar imagenes
Herramientas
Conociendo p ower point
4. análisis eco fin ii
3. análisis eco fin i
T 5. balance situación y pérdidas y ganancias
T 3. pérdidas y ganancias
Asientos contables
T 9. los asientos-ii
T 8. los asientos-i
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)
  • 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