Hypertext Markup Language HTML OBJETIVOS Conocer los fundamentos

  • Slides: 29
Download presentation
Hypertext Markup Language HTML

Hypertext Markup Language HTML

OBJETIVOS ü Conocer los fundamentos de HTML ü Escribir HTML usando un editor sencillo

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

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> …

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>.

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

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

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

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

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

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

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

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 • <sup>. . . </sup> Letra Super. Indice <sub>. . . </sub> Letra Sub. Indice

Documento HTML con encabezados • <html><head><title>Mi primera página web</title></head><body> • <h 1>Mi primera página

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,

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

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

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 á, é,

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> –

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

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,

 • <img src=" http: //www. google. com/images/logo. gif " width="157" height="70"alt=“Google 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

LISTAS: las hay de 3 tipos: ordenadas (ol), desordenadas(ul), de definiciones (li) • <html><head><title>Mi

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

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

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

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>

Otras facilidades en HTML • • Uso de frames Videos Sonido Multimedia <A HREF=“archivo_multimedia">

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><h 1>Mi primera página web</h 1><h 2>¿Qué es esto?

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

Bibliografía • www. w 3. org • http: //java. sun. com/applets/index. html

Bibliografía • www. w 3. org • http: //java. sun. com/applets/index. html

¿Preguntas?

¿Preguntas?