Post on 28-Jan-2016
Hypertext Markup LanguageHTML
OBJETIVOS Conocer los fundamentos de HTML Escribir HTML usando un editor sencillo Conocer las marcas HTML Visualizar el HTML en un navegador
Cuando se creó? En 1986 la organización internacional de Estándares publica
el SGML (Standard Generalized Markup Language) En 1993 se crea el HTML 2.0 (o HTML+)
HTMLHTML (Hypertext Markup Language)es un lenguaje de marcas, sencillo, pensado para el intercambio
de información en la WWW. CSS se usa para formatear el contenido previamente estructurado.
Hypertext
Es texto ordinario al que se le incorporan funcionalidades
adicionales como:
Formato,
Imágenes,
Multimedia
Y enlaces a otros documento.
MarkUp
Es el proceso de tomar el texto ordinario e incorporarle
símbolos adicionales.
Archivo HTML básico <HTML>… </HTML>
Delimita el Documento HTML
<HEAD> … </HEAD> Delimita el encabezado del Documento HTML En general incluye los metadatos del documentos y Scripts.
<BODY> … </BODY> Delimita el Cuerpo del Documento HTML. Es donde se incluyen los contenidos visibles del documento.
Ejemplo
<html>
<head> Aquí se incluyen os distintos elementos del encabezado
</head> <body>
Aquí se incluyen los distintos elementos contenedores </body> </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
Documento HTML con encabezados
<h1>Encabezado 1</h1><h2>Encabezado 2</h2><h3>Encabezado 3</h3><h4>Encabezado 4</h4><h5>Encabezado 5</h5><h6>Encabezado 6</h6>
ParrafosEs el contenedor mas común.Su sintaxis es: <P> … </P>
EncabezadosIndican una jerarquía de secciones
dentro del documentoSu sintáxis: <h1>…</h1>,
<h2>…</h2>, <h3>…</h3>,.. <h6>…
</h6>,
Elementos• Etiquetas
<BR><HR><P>
• Pares de etiquetas <Etiqueta> Texto </Etiqueta>• Etiquetas con atributos <Etiqueta Atributo="Valor">
• Las etiquetas pueden anidarse<!- Comentario ->
PARRAFOSCambian las dos líneas para que se
muestren asi• <html><head><title>Mi primera página
web</title></head><body> • <p>• Ésta es mi primera página web• </p><p>• Qué emocionante• </p>• </body></html>•
Reglas Generales
• Los documentos son estructurados• Nombres de elementos o atributos no sensibles amayú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
Elemento HTML
Nombre deLa Etiqueta
Nombre del
atributoValor delatributo
Atributo
Contenido
Etiqueta
Final
Elemento HTML
<H1 ALIGN=“LEFT”> Encabezado de Ejemplo </H1>
Etiqueta de Inicio
Atributos de texto
• <----------------------Para el texto----------------------> <p>...</p> Soy un parrafo <b>...</b> Soy un texto en Negrita <i>...</i> Soy un texto en Cursiva <u>...</u> Soy un texto Subrayado <s>...</s> Souy un texto Tachado
• <br> Salto de linea <hr> inserta una linea Horizontal
• <sup>...</sup> Letra SuperIndice <sub>...</sub> Letra SubIndice
Documento HTML con encabezados
• <html><head><title>Mi primera página web</title></head><body>
• <h1>Mi primera página web</h1><h2>¿Qué es esto?</h2><p>Una página simple creada usandoHTML</p><h2>¿Para qué es esto?</h2><p>Para aprender HTML</p>
• </body><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>
Uso de etiquetas HTML• <HR> Dibujo de líneas horizontales• <BR> Escritura de contenido sin tener en cuenta espacios en
blanco• • <P> Escritura de párrafos• Comentarios <!-- Esto es un comentario -->
Presentación de texto en HTML
• Alineamiento align "center", "left" y "right"
• Espaciado <br>
• 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
• Escritura de caracteres del alfabeto español á, é, í, ó, ú, ñ Á, É, Í, Ó, Ú, Ñ• Escritura de caracteres especiales <, >, &, "
&#nnn;
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: La etiquetaimg es usada para insertar una imagen en
un documento 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,
• <img src=" http://www.google.com/images/logo.gif " width="157" height="70"alt=“Google Logo" />
• El atributo src le dice al navegador dónde está laimagen.
• Los atributos ancho (width) y la altura (height)son necesarios.
• El atributo alt es la descripción alternativa. Esusada para gente que no puede o ha elegido nover imágenes. Es requerido.
• • Como la etiqueta br, img no tiene etiqueta paracerrar,
así que se cierra a sí misma terminandocon “/>”• <img src=" http://www.google.com/images/logo.gif "
width="157" height="70"alt=“Google Logo" />
LISTAS: las hay de 3 tipos: ordenadas (ol), desordenadas(ul), de definiciones
(li)• <html><head><title>Mi primera página
web</title></head><body><h1>Mi primera página web</h1><h2>¿Qué es esto?</h2><p>Una página simple creada usando HTML</p><h2>¿Para qué es esto?</h2>
• <ul><li>Para aprender </li>• <li>Presumir</li>• <li>Porque me he enamorado de
mi computadora y quiero darle amorHTML.</li></ul>
• </body></html>
• <ul><li>Para aprender HTML</li><li>Para presumir<ol><li>A mi maestra</li><li>A mis amigos</li><li>A mi gato</li><li>Al pequeño pato hablador en mi cerebro</li></ol></li><li>Porque me he enamorado de mi computadora y quiero darle amorHTML.</li></ul>
Enlaces hipertexto en HTML
• Página en otro directorio: dir/subdir/arch• Uso de anclas: <a name="nombreAncla">Comienzo</a>
• 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>
• <html><head><title>Mi primera página web</title></head><body><h1>Mi primera página web</h1><h2>¿Qué es esto?</h2><p>Una página simple creada usando HTML</p><h2>¿Para qué es esto?</h2><p>Para aprender HTML</p>
• <h2>Enlace recomendado</h2><p><a href=“http://rocktech.blogspot.com/”>Rock &Tech</a></p>
• </body></html>
Bibliografía
• www.w3.org• http://java.sun.com/applets/index.html
¿Preguntas?