Hypertext Markup Language
HTML
OBJETIVOS DE
APRENDIZAJE
• GENERAL:
• Diseñar una pagina
web con el programa
dreamweaver en base a
una empresa.
OBJETIVOS
ESPECÍFICOS
• Conocer los fundamentos de HTML
• Escribir HTML usando un editor sencillo
• Escribir HTML usando otra herramienta
• Conocer las marcas HTML
• Visualizar el HTML en un navegador
• Identificar cada etiqueta HTML básicas
HTML
HTML es un lenguaje de marcas, sencillo,
pensado para el intercambio de información
en la WWW.
Se trata de una "Definición de Tipo de
Documento (DTD)" SGML (Standard
Generalised Markup Language) que
contiene un juego de marcas con las que se
identifican gran parte de los elementos que
se encuentran en los documentos
electrónicos típicos.
ARCHIVO HTML
BÁSICO
ELEMENTOS
• Etiquetas
<BR>
<HR>
<P>
• Pares de etiquetas
<Etiqueta> Texto </Etiqueta>
• Etiquetas con atributos
<Etiqueta Atributo="Valor">
• Las etiquetas pueden anidarse
ESTRUCTURA
BÁSICA
<HTML>
Código de la página
</HTML>
ESTRUCTURA GENERAL
<!DOCTYPE HTML PUBLIC “version html”>
<HTML>
<HEAD>
<TITLE> Titulo de mi Página</TITLE>
...... Información opcional .....
</HEAD>
<BODY>
.... el texto del documento con marcas....
</BODY>
</HTML>
Cabecera
Cuerpo
REGLAS GENERALES
• Los documentos son estructurados
• Nombres de elementos o atributos no sensibles a
mayúsculas
• Valores de atributos pueden ser sensibles a
mayúsculas
• Nombres de elementos no pueden contener espacios
• Usar comillas para valores de atributos
• El browser destruye e ignora caracteres de espacio
HERRAMIENTAS
PARA ESCRIBIR
HTML
• Editores WYSIWYG (What You See Is
What You Get, lo que ves es lo que
obtienes): estos editores permiten crear
páginas web sin escribir código HTML
como si se tratase de un programa de
dibujo por ordenador.
Algunos ejemplos de este tipo de editores
son:
Bloc de notas, Macromedia
Dreamweaver, HotMetal™ o Microsoft
Frontpage™
DOCUMENTO HTML CON CABECERA
<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>
DOCUMENTO
HTML CON
TÍTULO
<html>
<head>
<title>Mi primera página
WEB</title>
</head>
</html>
DOCUMENTO HTML CON
CONTENIDO
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo
esta es la
primera pagina web que hago, espero que les
guste. Seguiré mejorando.
</body>
</html>
PRESENTACIÓN DE TEXTO EN
HTML
• Alineamiento align "center", "left" y "right"
• Espaciado <br> &nbsp;
• Tipo de letra
<B>, <I>, <TT>, <STRIKE>, <BIG>, <SMALL>, <SUB>, <U>
<SUP>, <SUB>, <STRONG>, <EM>, <CODE>, <SAMP>,
<VAR>
<CITE>, <DFN>, <PRE>
• Tamaño de letra <FONT SIZE="">
• Color de letra <FONT COLOR="#RRGGBB">
PRESENTACIÓN DE TEXTO EN
HTML
• Listas
– Numerada u ordenada <OL> <LI>
– No ordenada <UL> <LI>
– Listas de glosario o de definición <DL>
<LI>
– Menús <MENU> <LI>
– Listas de directorio <DIR> <LI>
• Tablas <TABLE>, <TR>, <TH>, <TD>
IMÁGENES EN HTML
<img src=“image001.gif">
• <IMG>
• La imagen tiene que estar en un archivo
separado
• Ejemplos de tipo de archivo: BMP, GIF,
JPEG, XPM, XBM, PNG, TIFF,
ENLACES HIPERTEXTO EN
HTML
• Referencia externa:
<a href="http://www.sitio.com/ancla_en#S">Texto
sensible</a>
APARIENCIA DE UNA PÁGINA
• Color de fondo <body bgcolor="#RRGGBB">
• Imágenes de fondo <body
background="fondo1.jpg">
• Imágenes y texto
<h2> <img src=“dibujo.gif">Texto …</h2>
• Imagen de enlace
<a href="index.htm">
<img src="img/izda.gif">
</a>
OTRAS
FACILIDADES EN
HTML
• Uso de frames
• Videos
• Sonido
• Multimedia
<A HREF=“archivo_multimedia">
Un archivo multimedia
</A>
BIBLIOGRAFÍA
• www.w3.org
• http://java.sun.com/applets/
index.html

Html explicacion grado 10

  • 1.
  • 2.
    OBJETIVOS DE APRENDIZAJE • GENERAL: •Diseñar una pagina web con el programa dreamweaver en base a una empresa.
  • 3.
    OBJETIVOS ESPECÍFICOS • Conocer losfundamentos de HTML • Escribir HTML usando un editor sencillo • Escribir HTML usando otra herramienta • Conocer las marcas HTML • Visualizar el HTML en un navegador • Identificar cada etiqueta HTML básicas
  • 4.
    HTML HTML es unlenguaje de marcas, sencillo, pensado para el intercambio de información en la WWW. Se trata de una "Definición de Tipo de Documento (DTD)" SGML (Standard Generalised Markup Language) que contiene un juego de marcas con las que se identifican gran parte de los elementos que se encuentran en los documentos electrónicos típicos.
  • 5.
  • 6.
    ELEMENTOS • Etiquetas <BR> <HR> <P> • Paresde etiquetas <Etiqueta> Texto </Etiqueta> • Etiquetas con atributos <Etiqueta Atributo="Valor"> • Las etiquetas pueden anidarse
  • 7.
  • 8.
    ESTRUCTURA GENERAL <!DOCTYPE HTMLPUBLIC “version html”> <HTML> <HEAD> <TITLE> Titulo de mi Página</TITLE> ...... Información opcional ..... </HEAD> <BODY> .... el texto del documento con marcas.... </BODY> </HTML> Cabecera Cuerpo
  • 9.
    REGLAS GENERALES • Losdocumentos son estructurados • Nombres de elementos o atributos no sensibles a mayúsculas • Valores de atributos pueden ser sensibles a mayúsculas • Nombres de elementos no pueden contener espacios • Usar comillas para valores de atributos • El browser destruye e ignora caracteres de espacio
  • 10.
    HERRAMIENTAS PARA ESCRIBIR HTML • EditoresWYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores permiten crear páginas web sin escribir código HTML como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos de este tipo de editores son: Bloc de notas, Macromedia Dreamweaver, HotMetal™ o Microsoft Frontpage™
  • 11.
    DOCUMENTO HTML CONCABECERA <html> <head> Elementos de la cabecera </head> ... Resto de código de la página ... </html>
  • 12.
  • 13.
    DOCUMENTO HTML CON CONTENIDO <html> <head> <title>Miprimera página WEB</title> </head> <body> Hola a todos, como han deducido por el titulo esta es la primera pagina web que hago, espero que les guste. Seguiré mejorando. </body> </html>
  • 14.
    PRESENTACIÓN DE TEXTOEN HTML • Alineamiento align "center", "left" y "right" • Espaciado <br> &nbsp; • Tipo de letra <B>, <I>, <TT>, <STRIKE>, <BIG>, <SMALL>, <SUB>, <U> <SUP>, <SUB>, <STRONG>, <EM>, <CODE>, <SAMP>, <VAR> <CITE>, <DFN>, <PRE> • Tamaño de letra <FONT SIZE=""> • Color de letra <FONT COLOR="#RRGGBB">
  • 15.
    PRESENTACIÓN DE TEXTOEN HTML • Listas – Numerada u ordenada <OL> <LI> – No ordenada <UL> <LI> – Listas de glosario o de definición <DL> <LI> – Menús <MENU> <LI> – Listas de directorio <DIR> <LI> • Tablas <TABLE>, <TR>, <TH>, <TD>
  • 16.
    IMÁGENES EN HTML <imgsrc=“image001.gif"> • <IMG> • La imagen tiene que estar en un archivo separado • Ejemplos de tipo de archivo: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF,
  • 17.
    ENLACES HIPERTEXTO EN HTML •Referencia externa: <a href="http://www.sitio.com/ancla_en#S">Texto sensible</a>
  • 18.
    APARIENCIA DE UNAPÁGINA • Color de fondo <body bgcolor="#RRGGBB"> • Imágenes de fondo <body background="fondo1.jpg"> • Imágenes y texto <h2> <img src=“dibujo.gif">Texto …</h2> • Imagen de enlace <a href="index.htm"> <img src="img/izda.gif"> </a>
  • 19.
    OTRAS FACILIDADES EN HTML • Usode frames • Videos • Sonido • Multimedia <A HREF=“archivo_multimedia"> Un archivo multimedia </A>
  • 20.