Hypertext Markup Language HTML OBJETIVOS Conocer los fundamentos

Hypertext Markup Language HTML

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 (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. ü Mark. Up 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> </head> <body> Aquí se incluyen os distintos elementos del encabezado Aquí se incluyen los distintos elementos contenedores </html> </body>

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 <h 1>Encabezado 1</h 1> <h 2>Encabezado 2</h 2> <h 3>Encabezado 3</h 3> <h 4>Encabezado 4</h 4> <h 5>Encabezado 5</h 5> <h 6>Encabezado 6</h 6>

ü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: <h 1>…</h 1>, <h 2>…</h 2>, <h 3>…</h 3>, . .

Elementos • 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

Elemento HTML Nombre de La Etiqueta Nombre del atributo Etiqueta Final Valor del atributo <H 1 ALIGN=“LEFT”> Encabezado de Ejemplo </H 1> Atributo Etiqueta de Contenido 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 • Salto de linea <hr> inserta una linea Horizontal • ^{. . .} Letra Super. Indice _{. . .} Letra Sub. Indice

Documento HTML con encabezados • <html><head><title>Mi primera página web</title></head><body> • <h 1>Mi primera página web</h 1><h 2>¿Qué es esto? </h 2><p>Una página simple creada usando. HTML</p><h 2>¿Para qué es esto? </h 2><p>Para aprender HTML</p> • </body><html>

Documento HTML 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 • Espaciado • Tipo de letra align "center", "left" y "right"   <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>

LISTAS DESORDENADAS • <body bgcolor="#FFFFFF"> Browsers <ul> <li>Netscape. <li>Explorer. <li>Mosaic. </ul> </body>

http: //colposfesz. galeon. com/html/LECCION 6. HTM • Para hacer una lista ordenada solo cambia <ul> por <ol> • Por ejemplo: <body bgcolor="#FFFFFF"> Browsers <ol> <li>Netscape. <li>Explorer. <li>Mosaic. </ol></body>

• Otra lista útil es la de definición, ésta se indica por medio de las etiquetas: <dl></dl> como se muestra en el siguiente ejemplo: <body bgcolor="#FFFFFF"> <dl> <dt>Browsers <dd>Programas para navegar el Internet, entre los mejores Netscape Comunicator, Microsoft Internet Explorer y NCSA Mosaic. </dl></body>

Imágenes: La etiqueta img es usada para insertar una imagen en un documento HTML <img src=“image 001. gif"> • <IMG> • La imagen tiene que estar en un archivo separado • Ejemplos de tipo de archivo: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF,

<body color="#000000"> <img src="ok. gif" WIDTH=400 height=92> </body> ENLACES http: //colposfesz. galeon. com/html/LECCION Bueno, tal vez te has dado cuenta que en los colores de los enlaces cambian de página a página, esto es al gusto de los diseñadores, la respuesta de este misterio esta en los atributos LINK, VLINK y ALINK de la etiqueta body. <BODY TEXT="#FFFFFF" LINK="#CC 6699" VLINK="#996699" ALINK="#FFFFCC">5. HTM

• <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><h 1>Mi primera página web</h 1><h 2>¿Qué es esto? </h 2><p>Una página simple creada usando HTML</p><h 2>¿Para qué es esto? </h 2> • <ul><li>Para aprender </li> • <li>Presumir</li> • <li>Porque me he enamorado de mi computadora y quiero darle amor. HTML. </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 amor. HTML. </li></ul>

Enlaces hipertexto en HTML • Página en otro directorio: dir/subdir/arch • Uso de anclas: <a name="nombre. Ancla">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="fondo 1. jpg"> • Imágenes y texto <h 2> <img src=“dibujo. gif">Texto …</h 2> • Imagen de enlace <a href="index. htm"> <img src="img/izda. gif"> </a>

• <html><head><title>Mi primera página web</title></head><body><h 1>Mi primera página web</h 1><h 2>¿Qué es esto? </h 2><p>Una página simple creada usando HTML</p><h 2>¿Para qué es esto? </h 2><p>Para aprender HTML</p> • <h 2>Enlace recomendado</h 2><p><a href=“http: //rocktech. blogspot. com/”>Rock &Tech</a></p> • </body></html>

http: //colposfesz. galeon. com/html/LECCION 3. HTM < body bgcolor="#FFFFFF" > < sup >algo< /sup > < s >< sub >bonito< /sub >< /s > < /body > CORREO ELECTRONICO <body bgcolor="#FFFFFF"> <p><a href="mailto: tecnologia 86@gmail. com"><img src="gato. jpg" width="220" height="209" /></a> </p> <p>VINCULO CORREO ELECTRONICO</p> </body></html>