Unidad 1
Asignatura “Diseño y Desarrollo Mul3media para la Educación” Profesorado de Informá3ca -‐ Ins3tuto Normal de Enseñanza Técnica
Gabriela Pérez Caviglia
hIp://crea3vecommons.org/licenses/by-‐nc-‐nd/3.0/
HTML/XHTML
HTML
¿Qué es?
HTML es lo que se u2liza para crear la mayoría las páginas web de Internet
HTML
Lenguaje Estructurado de Marcación de contenidos (HyperText Markup Lenguage)
Es un estandar
W3C (World Wide Web Consor3um)
Especificación Oficial
Son las normas de codificación que se deben seguir para codificar el html.
W3C
Especificación oficial de HTML 4.01 (hIp://www.w3.org/TR/ html401/) Especificación oficial de XHTML 1.0 (hIp://www.w3.org/TR/ xhtml1/)
El estándar XHTML 1.0 = 95% HTML 4.01 + mejoras
HTML y XHTML
HTML y CSS
Originalmente las páginas incluían además de sus contenidos, información sobre el aspecto de los mismos, todo en un mismo archivo, lo que dificultaba su
mantenimiento.
CSS
Mecanismo que permite separar los contenidos del aspecto que deben presentar. Cascade Style Sheet – Hojas de es3lo en Cascada
Lenguaje de e3quetas Al inicio se almacenaba información sin formato,
esto se solucionó a través de una tabla de conversión que vincula las letras del alfabeto a un
valor.
¿Y como hacemos con los textos con formato? ¿Como almacenamos un texto de color azul o en
negrita?
La solución fue crear una zona reservada en el archivo donde se “marca” y se guarda la información sobre el formato.
<parrafo> Contenido de texto con <importante>algunas palabras</ importante> resaltadas de forma
especial. </parrafo>
HTML lenguaje de e3quetas
<html> <head> <2tle>El primer documento HTML</2tle> </head> <body> <p>El lenguaje HTML es <strong>tan sencillo</strong> que prác3camente se en3ende sin estudiar el significado de sus e3quetas principales.</p> </body> </html>
E3quetas y Atributos HTML define 91 e2quetas
Los atributos agregan información adicional sobre las e3quetas
<html> <head> <2tle>Ejemplo de atributos en las e3quetas</3tle> </head> <body> <p> Los enlaces son muy fáciles de indicar: <a>Soy un enlace incompleto, porque no tengo dirección de des3no</a>. <a href=”hTp://www.google.com”>Este otro enlace apunta a la página de Google</a>. </p> </body> </html>
Sintaxis
Texto
Párrafos <p></p>
de las e3quetas más u3lizadas de HTML
<html> <head> <2tle>Ejemplo de texto estructurado con párrafos</3tle> </head> <body> <p>Este es el texto que forma el primer párrafo de la página. Los párrafos pueden ocupar varias líneas y el navegador se encarga de ajustar su longitud al tamaño de la ventana.</p> <p>El segundo párrafo de la página también se define encerrando su texto con la e3queta p. El navegador también se encarga de separar automá3camente cada párrafo.</p> </body> </html>
Secciones Jerárquicas <h1> <h2> <h3> <h4> <h5> <h6>
Son las e3quetas que definen ptulos de sección <html> <head> <2tle>Ejemplo de texto estructurado con secciones</2tle> </head> <body> <h1>Titular de la página</h1> <p>Párrafo de introducción...</p> <h2>La primera sub-‐sección</h2> <p>Párrafo de contenido...</p> <h2>Otra subsección</h2> <p>Más párrafos de contenido...</p> </body> </html>
Secciones Jerárquicas
Espacios y saltos de línea <br></br> o <br/>
Salto de línea
Espacios adicionales
En html si se inserta texto y se define el salto de línea o mas de un espacio, por más que visualmente cuente con él, no se verá así. Ejemplo:
<html> <head><2tle>Ejemplo de e3queta p</2tle></head> <body> <p>Este primer párrafo no con3ene saltos de línea ni otro 3po de espaciado.</p> <p>Este segundo párrafo sí que con3ene saltos de línea y otro 3po de espaciado.</p> </body> </html>
Espacios y saltos de línea Como se vé:
Espacios y saltos de línea <br></br> o <br/> Salto de línea
En html si se inserta texto y no se define el salto de línea, por más que
visualmente cuente con él, no se verá así. Ejemplo:
<html> <head><2tle>Ejemplo de e3queta p</2tle></head> <body> <p>Este primer párrafo no con3ene saltos de línea ni otro 3po de espaciado.</p> <p>Este segundo párrafo sí que con3ene saltos<br/> de<br/> línea<br/> y otro 3po de espaciado.</p> </body> </html>
Espacios y saltos de línea Como se vé:
Espacios y saltos de línea
<pre> </pre> Texto preformateado
Muestra el texto tal y como esta escrito
<html> <head><2tle>Ejemplo de e3queta pre</2tle></head> <body> <pre> La e3queta pre respeta los espacios en blanco y muestra el texto tal y como está escrito </pre>
Enlaces
Enlaces
<a> </a> Pueden ser rela3vos Pueden ser absolutos
Pueden apuntar a una parte del mismo documento. Algunos ejemplos:
<a href=”hIp://www.google.com”>Página principal de Google</a>
URL absoluta: hIp://www.ejemplo.com/ruta1/ruta2/ruta3/index.html
URL rela2va: index.html URL rela2va: ../index.html
URL rela2va: ruta4/index.html
Listas
No ordenadas
<html> <head><2tle>Ejemplo de e3queta UL</2tle></head> <body> <h1>Menú</h1> <ul> <li>Inicio</li> <li>No3cias</li> <li>Arpculos</li> <li>Contacto</li> </ul> </body> </html>
Ordenadas
<html> <head><2tle>Ejemplo de e3queta OL</2tle></head> <body> <h1>Instrucciones</h1> <ol> <li>Enchufar correctamente</li> <li>Comprobar conexiones</li> <li>Encender el aparato</li> </ol> </body> </html>
Imágenes
Imágenes <img>
Imágenes
<img src=”logo2po.gif” alt=”Logo2po de Mi Si2o” />
Algunos de los atributos más importantes src = Indica la URL de la imagen que se muestra alt = Descripción corta de la imagen height = Indica la altura con la que se debe mostrar la imagen (no es obligatorio que coincida con la altura original de la imagen) width = Indica la anchura con la que se debe mostrar la imagen (no es obligatorio que coincida con la anchura original de la imagen)
Tablas
Conceptos Las tablas en HTML u3lizan los mismos conceptos de filas, columnas, cabeceras y
[tulos que los que se u3lizan en cualquier otro entorno de publicación de documentos, como por ejemplo una planilla de cálculo
Tablas Básicas Las tablas más sencillas de HTML se definen con tres e3quetas: <table> para crear la
tabla, <tr> para crear cada fila y <td> para crear cada columna.
<html> <head><2tle>Ejemplo de tabla sencilla</2tle></head> <body> <h1>Listado de cursos</h1> <table> <tr> <td><strong>Curso</strong></td> <td><strong>Horas</strong></td> <td><strong>Horario</strong></td> </tr> <tr> <td>CSS</td> <td>20</td> <td>16:00 -‐ 20:00</td> </tr> <tr> <td>HTML</td> <td>20</td> <td>16:00 -‐ 20:00</td> </tr> <tr> <td>Dreamweaver</td> <td>60</td><td>16:00 -‐ 20:00</td> </tr> </table> </body> </html>
Tablas Básicas
Fusión de columnas
<table> <tr> <td colspan=”2”>A</td> </tr> <tr> <td>B</td> <td>C</td> </tr> </table>
Fusión de filas
<table> <tr> <td>A</td> <td rowspan=”2”>B</td> </tr> <tr> <td>C</td> </tr></table>
Fusión de filas y columnas <table border=”1”><tr> <td colspan=”3”>A</td> <td>B</td> </tr> <tr> HTML 39 <td>C</td> <td colspan=”2”>D</td> <td>E</td> </tr> <tr> <td colspan=”4”>F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> <td>J</td> </tr> </table>
Top Related