PHP y MySQL. Aplicaciones Web: HTML I (segunda parte) Autor: Johnny Zulca Mamani

Transcripción

1 PHP y MySQL. Aplicaciones Web: HTML I (segunda parte) Autor: Johnny Zulca Mamani 1

2 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora estudiaremos las páginas Web HTML, la estructura de los documentos HTML y los tipos de documentos que existen. Conoce los elementos HTML y los caracteres especiales. Te enseñaremos también a crear una página Web y a dominar el conocimiento de las partes principales de una página Web. 2

3 1. Estructura y tipo de documento Páginas Web HTML Estructura de un documento HTML Tipo de documento <html> <head> inicio cabecera de la página <title>titulo de la pagina</title> Cosas que afectan a la página pero no a su contenido </head> fin cabecera de la página <body Parametros> Contenido (cuerpo) de la página </body> </html> HTML (Hipertext Markup Language), saber HTML es imprescindible, ya que utilizaremos cuando se haga programación. Tipo de documento Deberemos especificar a que estándar del HTML responde nuestra página, a continuación: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN"> Cumple el standard HTML 2.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Cumple el standard HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Cumple el standard HTML 4.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" " Cumple el standard HTML 4.0 y no contiene además elementos desaconsejables <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " Es una definición de marcos que cumple el standard HTML 4.0 HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más potentes, por ello, es posible que sean eliminados del estándar HTML en el futuro. 3

4 2. Cabecera y cuerpo de una página web La cabecera Suele ser el lugar indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque sí la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo. Además del titulo de la página, uno de los elementos que se pueden incluir aquí son los META tags, ellos sirven para indicar propiedades de la página como puede ser el nombre de su autor, descripción de la página, palabras clave para su búsqueda en los buscadores, por ejemplo: < meta http-equiv="content-type" content="text/html; charset=iso " /> Nos indica el tipo de contenido del documento, las propiedades mas comunes son las siguientes: <meta name="autor" content="..."> //Autor de la pagina <meta name="generator" content="..."> //Herramienta utilizada para hacer la pagina <meta name="description" content="..."> //Descripción de la pagina <meta name="keywords" content="..."> //Palabras clave para ser encontrada en los buscadores Hay también otro elemento interesante que podemos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro servidor. Sin embargo, si especificamos: <base href=" Ahora todas nuestras URLs relativas se referirán al directorio /music dentro del servidor Aquí también definimos (en la cabecera) estilos y además agregar código javascript y algún otro tipo de código así como también en el cuerpo (body). < style type="text/css"></style> <script language="javascript" type="text/javascript"></script> El cuerpo Los parámetros que admite la etiqueta <BODY> Background: define un grafico de fondo para la página. bgcolor: define un color de fondo de la página. text: cambia el color del texto link: cambia el color de un enlace no visitado leftmargin / topmargin: especifica el número de píxeles de margen entre el borde de la ventana y el contenido de la página, por default cero. 4

5 marginwidth / marginheight: igual en el caso anterior pero para navegadores de Netscape. Aquí en esta parte ingresamos la información (el contenido de nuestra página) etiquetas HTML, código embebido de otros lenguajes permitidos embeberse en HTML. Aconsejable las propiedades y atributos de etiquetas HTML manejarlas con hojas de estilo. 5

6 3. Documento HTML. Ejemplo (primera parte) Ejemplo de un documento HTML Práctica: html_1.htm - ejemplo de un documento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>mi primera pagina</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <center><h1>mi primera pagina</h1></center> <hr> <p>esta es mi primera pagina, aun no tiene informacion mucho menos cosas interesantes</p> </body> </html> Explicación: En que consisten todos estos símbolos de mayor y menor que están distribuidos por ahí. El lenguaje HTML se basa en la sintaxis SGML. Esto quiere decir que cualquier cosa que hagamos en HTML estará encerrada entre dos etiquetas, así: <etiqueta parámetros>... </etiqueta> Hay ocasiones en que no es necesario cerrar la etiqueta, lo primero que hemos escrito es: Tipo del documento, aquí especificamos a que estándar del HTML responde nuestra página: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Luego continúan las etiquetas <html> y cerramos con </html> el documento que construimos es un HTML por eso de esas etiquetas. <html>... </html> Un documento tiene una estructura que lo separa en dos partes: cuerpo y cabecera. En la primera parte esta la página en si y en la segunda parte incluiremos algunas cosas que no se ven al principio pero que pueden llegar a ser importantes. Lo primero que debemos incluir en el código es la cabecera. <html> <head> <title>mi primera pagina</title> <meta http-equiv="content-type" content="text/html; charset=iso "> 6

7 </head> 7

8 4. Documento HTML. Ejemplo (segunda parte) Ahora el contenido de la página. Lo primero será indicar que estamos en el cuerpo de la página: <body>... </body> Luego pondremos el título algo sobresaliente: <center><h1>... </h1></center> Con esto se coloca el texto centrado (<center>) y en formato <h1> (cabecera 1) que nos asegura aumentar de tamaño del tipo de letra lo suficiente para estar resaltado. Luego separamos ese título por medio de una línea horizontal. <hr> La línea horizontal carece de etiqueta de cierre, esto es normal en etiquetas que no varían los atributos de un texto, sino que insertan un elemento. Luego para separar el texto que viene de la línea horizontal agregamos la etiqueta de párrafo <p> y le decimos así: <p>esta es mi primera página, aún no tiene información mucho menos cosas interesantes< /p> Con esto último ya explicamos las partes de un documento HTML y las etiquetas que se agregaron a este documento de nuestra primera práctica. Ahora para visualizar en el navegador el documento HTML (página Web) de esta primera práctica. O bien podemos hacerlo abriendo directamente donde esta guardado el archivo, haciendo doble clic en el mismo o también podemos verlo desde nuestro servidor Web, para ello este archivo a de ser guardado en el directorio de los archivos de nuestras prácticas en esta parte del curso, por ejemplo aquí: C:/Servidor/Web/alumno/html/html_1.html Ingresando esta dirección URL en el navegador: El resultado en el navegador debería ser el siguiente: 8

9 9

10 5. Empezando una página web (primera parte) Empezar una pagina Web A continuación listamos algunas características que se deberían de considerar al crear una página Web (documento HTML): Usar espacios en blanco amplios, para separar las diferentes partes del código HTML. <body> <center> <h1> Mi Primera Pagina!</h1> </center> </body> Y no, así como esto: <body><center><h1> Mi Primera Pagina!</h1></center></body> *Crea la estructura básica del documento, con ello; declara el tipo de documento, especifica el título del documento. * Norma, estándar * Usar HTML bien formateado - Que contenga una etiqueta <!DOCTYPE> - Elementos anidados no superpuestos, el resultado no será el apropiado de acuerdo a la complejidad del documento. <body> <center> <h1> Mi Primera Página! </center></h1> </body> * Nombres de atributos y elementos deben estar en minúsculas recomendable, excepto la etiqueta <DOCTYPE> que está en mayúsculas. * Todos los elementos no vacíos deben tener información. <h1></h1> no tiene información la etiqueta cabecera, debería estar así: <h1> Mi Primera Pagina!</h1> * Todos los valores de atributos deben de ir entre comillas. <p align="center">el contenido en párrafo de mi primera pagina</p> 10

11 6. Empezando una página web (segunda parte) * No podemos usar atributos minimizados, es decir atributos sin valores. <img src=""> * Una etiqueta que se abra debe tener su cierre. <center> <h1> Mi Primera Pagina!</h1> </center> * Una etiqueta vacía debe tener una etiqueta de cierre o la etiqueta de apertura debe finalizar con un slash (/). <img src="images/imagen_1.jpg" /> Comenta tu código, para detallar o describir las partes de código que escribimos (describir que es lo que hace el código). <body>  </body> Práctica: html_2.htm - Una página Web con lo mas característico de un documento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>mi primera pagina con imagen</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body>  <center> <h1>mi primera pagina</h1> </center> <hr> <p>el contenido en párrafo de mi primera pagina</p> <img src="images/imagen_1.jpg" /> </body> </html> 11

12 12

13 7. Empezando una página web (tercera parte) Crear refrescos automáticos y redirecciones, aunque no es tan necesario, pero algunas veces es utilizado. <meta http-equiv="refresh" content="tiempo en segundos;url"> Práctica: html_3.htm - Re-direccionar un página Web a otra URL automáticamente <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="refresh" content="5;url= <title>jozuma online </title> </head> <body> <center> <p>esta página se redireccionara en 5 segundos a esta dirección<br> </center> </body> </html> 13

14 8. Empezando una página web (cuarta parte) Práctica: html_4.htm - Refrescar un documento automáticamente <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="refresh" content="5;url="> <title>jozuma online </title> </head> <body> <center> <p>esta página se actualizará en 5 segundos</p> </center> </body> </html> Configurar ruta por defecto, por ejemplo si utilizamos una etiqueta <img> nos solicita la dirección de la imágen a mostrar deberíamos ponerla así: <img src=" "> pero se opta por esta otra forma de escribirlo <img src=" images/imagen_1.jpg"/> 14

15 9. Empezando una página web (quinta parte) Incluir una etiqueta "base" en el <head> <base href=" "> Esto determina una ruta por defecto. Agregar información para motores de búsqueda, etiquetas meta tags que brindan información del documento, como por ejemplo: Tipo del contenido del documento. <meta http-equiv="content-type" content="text/html; charset=iso " > Para guardar o no el documento en la cache. <meta http-equiv="pragma" content="no-cache"> ó <meta http-equiv="expires" content="0"> Algunas otras: <meta name="description" content="tutoriales online y descargas de scripts"> <meta name="keywords" content="tutoriales, Informática, flash, php, dreamweaver, photoshop, educación, software, ActionScript, php-nuke, Adobe, Ajax, Freeware, gratuito"> Conservar hábitos de código Práctica: html_5.htm - Lo que debe tener una página Web (documento HTML) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="pragma" content="no-cache"> <meta name="description" content="tutoriales online y descargas de scripts"> <meta name="keywords" content="tutoriales, Informática, flash, php, dreamweaver, photoshop, educación, software, ActionScript, php-nuke, Adobe, Ajax, Freeware, gratuito"> <title>jozuma online </title> <link rel="stylesheet" href="nombre de la hoja de estilos externa" type="text/css"> <style>... cualquier estilo específico del documento va aquí... </style> <script>... scripts de lado del cliente van aquí... </script> </head> <body>... cuerpo del documento va aquí, párrafos modificados por elementos de bloque, 15

16 caracteres, palabras modificadas por elementos de línea, elementos multimedia, scripts de lenguajes embebidos... </body> </html> 16

17 10. Etiquetas para caracteres Elementos de HTML Etiquetas (marcadores) para Caracteres Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un párrafo. Además de ello también tenemos etiquetas para formateo de grupo de caracteres como estos: 17

18 11. Caracteres especiales Caracteres especiales Dentro de los más conocidos estan los siguientes: 18

19 12. Práctica (Formateo Caracteres, caracteres especiales) Práctica: html_6.htm - Formateo Caracteres, caracteres especiales <html> <head> <title>estilos de línea y caracteres especiales</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> <p>este párrafo muestra varios estilos en una línea, tales como<br/> <b>negrita</b>, <i>itálica</i>, <big>texto grande</big>, <small>texto pequeño</small>, <em>texto enfatizado</em>, <strong>texto destacado</strong>, and <tt>texto teletipo</tt>.</p> <p>este párrafo muestra el uso de caracteres especiales<br> " uso de comillas rectas "<br> < Uso de la apertura y cierre de los símbolos utilizados en etiquetas HTML ><br> Uso de guiones en algunas ocasiones describir ideas <br> Uso de comillas simples <br> Uso de comillas dobles <br> «Uso de caracteres»<br> espaciado con el uso de: Copyright<br> Marca Registrada </p> </body> </html> 19

20 20

21 13. Etiquetas de párrafo. Roturas de línea en texto Etiquetas (marcadores) de Párrafo Se utiliza con párrafos completos: Roturas de línea en texto 21

22 14. Práctica (bloques de texto) Práctica: html_7.htm - Bloques de texto (párrafos) <html> <head> <title>estilos de párrafo</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> <p>este es el formato predefinido para texto de párrafos.</p> <p>ejemplo de un párrafo con cita:</p> <blockquote> Habéis llegado al fin, pero demasiado tarde y con fuerzas escasas. La suerte nos ha sido adversa después de la muerte de Théodred. Ayer, en la otra margen del Isen, sufrimos una derrota; muchos hombres perecieron al cruzar el río. Luego, al amparo de la noche, otras fuerzas atravesaron el río y atacaron el campamento. Toda Isengard ha de estar vacía; y Saruman armó a los montañeses y pastores salvajes de las Tierras Oscuras de más allá de los ríos y los lanzó contra nosotros. Nos dominaron. El muro de protección ha caído. Erkenbrand del Folde Oeste se ha replegado con todos los hombres que pudo reunir en la fortaleza del Abismo de Helm. Los demás se han dispersado.» Dónde está Eomer? Decidle que no queda ninguna esperanza. Que mejor sería regresar a Edoras antes que lleguen los lobos de Isengard. </blockquote> <p>ejemplo de texto preformateado</p> <pre> name value newsupdate releaseupdate Wed, 8/28, 8:18pm rolfstatus 0 feedupdate </pre> <p>ejemplo de uso de cabeceras</p> <h1>cabecera 1</h1> <h2>cabecera 2</h2> <h3>cabecera 3</h3> <h4>cabecera 4</h4> <h5>cabecera 5</h5> <h6>cabecera 6</h6> </body> </html> 22

23 15. Ejemplos de uso de cabecera Ejemplos de uso de cabeceras NOTA: Con este capítulo hemos llegado al final del curso. 23