Hypertext Markup Language HTML
Cuando se creó? 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+)
HTML HTML (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”> <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>
Parrafos Es el contenedor mas común. Su sintaxis es: <P> … </P> Encabezados Indican una jerarquía de secciones dentro del documento Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>,
Elementos • Etiquetas • Pares de etiquetas <BR> <HR> <P> • Pares de etiquetas <Etiqueta> Texto </Etiqueta> Etiquetas con atributos <Etiqueta Atributo="Valor"> • Las etiquetas pueden anidarse <!- Comentario ->
PARRAFOS Cambian 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 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
Elemento HTML Nombre de La Etiqueta Nombre del atributo Etiqueta Final Valor del atributo <H1 ALIGN=“LEFT”> Encabezado de Ejemplo </H1> Atributo Contenido Etiqueta de Inicio Elemento HTML
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 <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 etiqueta img 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 <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?