Introduccion Xhtml
- 2. ¿Qué es HTML? "HTML es lo que se utiliza para crear todas las páginas web de Internet" . HTML es el lenguaje con el que se "escriben" la mayoría de páginas web. Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.
- 3. HTML y XHTML El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, también es descendiente de SGML).
- 4. Partes de una página web La página web consta de:
- 5. Etiquetas de apertura y cierre (<html> y </html>)
- 6. Cabecera (<head> y </head>)
- 7. Cuerpo (<body> y </body>)
- 8. La primera página HTML <html> <head> <title>Mi primera página web </title> </head> <body> Mi primera página web </body> </html>
- 9. Sintaxis de las etiquetas XHTML Las etiquetas XHTML son más estrictas y ordenadas que las etiquetas HTML.
- 10. Las etiquetas se tienen que cerrar de acuerdo a como se abren : Ejemplo correcto en XHTML: <p>Este es un párrafo con <a>un enlace</a></p> Ejemplo incorrecto en XHTML (pero correcto en HTML): <p>Este es un párrafo con <a>un enlace</p></a>
- 11. Sintaxis de las etiquetas XHTML Los nombres de las etiquetas y atributos siempre se escriben en minúsculas : Ejemplo correcto en XHTML: <p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p> Ejemplo incorrecto en XHTML (pero correcto en HTML): <P>Este es un párrafo con <A HREF="http://www.google.com">un enlace</A></P>
- 12. Sintaxis de las etiquetas XHTML El valor de los atributos siempre se encierra con comillas : Ejemplo correcto en XHTML: <p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p> Ejemplo incorrecto en XHTML (pero correcto en HTML): <p>Este es un párrafo con <a href=http://www.google.com>un enlace</a></p>
- 13. Sintaxis de las etiquetas XHTML Los atributos no se pueden comprimir
- 14. Todas las etiquetas deben cerrarse siempre Ejemplo correcto en XHTML: <br/> Ejemplo incorrecto en XHTML (pero correcto en HTML): <br>
- 15. Etiquetas básicas I <p> es la etiqueta párrafo
- 16. <h1> sección de nivel 1
- 17. <h2> sección de nivel 2
- 18. <h3> sección de nivel 3
- 19. <em> Etiqueta para indicar énfasis
- 20. < abbr > Usado para abreviaturas
- 21. < br > Nueva línea
- 22. < pre > Texto preformateado
- 23. Ejemplo de página web en XHTML <html> <head> <title>Ejemplo de texto estructurado con secciones</title> </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>
- 24. Etiquetas básicas II < a > Para realizar enlaces name = "texto" - Permite nombrar al enlace para que se pueda acceder desde otros enlaces href = "url" - Indica la URL del recurso que se quiere enlazar Ejemplos: <a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un fondo de escritorio</a> <a href="http://www.google.com">Página principal de Google</a>
- 25. Etiquetas básicas II Listas no ordenadas <html> <head><title>Ejemplo de etiqueta UL</title></head> <body> <h1>Menú</h1> <ul> <li> Inicio </li> <li> Noticias </li> <li> Artículos </li> <li> Contacto </li> </ul> </body> </html>
- 26. Etiquetas básicas II Listas ordenadas <html> <head><title>Ejemplo de etiqueta OL</title></head> <body> <h1>Instrucciones</h1> <ol> <li> Enchufar correctamente </li> <li> Comprobar conexiones </li> <li> Encender el aparato </li> </ol> </body> </html>
- 27. Tablas Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna. <html> <head><title>Ejemplo de tabla sencilla</title></head> <body> <h1>Listado de cursos</h1> <table> <tr> <td><strong>Columna1</strong></td> <td><strong>Columna2</strong></td> <td><strong>Columna3</strong></td> </tr> </table> </body> </html>